html, body {
	-webkit-font-smoothing: antialiased !important;
	scroll-behavior: unset !important;
	overscroll-behavior-y: none !important;
	margin: unset;
	position: relative;
	font-family: Jost; 
	color: var(--stale-blue);
	letter-spacing: -0.5px;
}
/*img { 
	-webkit-user-drag: none;
	  user-drag: none;
	  -webkit-touch-callout: none;
	  user-select: none;
	  -webkit-user-select: none;
	  pointer-events: none;
}*/
body.ns{
	overflow: hidden;
}
:root{
	--black: #333333E5;
	--black-2: #333f50;
	--progress: 0;
	--black-gray: #121212;
	--gray: #cdcdcd;
	--gray-2: #EBEDF1;
	--gray-3: #777;
	--gray-4: #B5B5B5;
	--gray-5: #808080;
	--gray-bold: #D9D9D9;
	--pink: #DF7C9B;
	--pink-2: #FA93B3;
	--pink-3: #FFCCDD;
	--pink-pastel: #EBADC1;
	--blue-2: #44536A;
	--red: #B52C56;
	--white-50: #FFFFFF80;
	--stale-blue: #445471;
	--light-gray: #d9d9d9;
	--font-xxs: 8px;
	--font-xs: 10px;
	--font-s: 12px;
	--font-xxm: 14px;
	--font-xm: 16px;
	--font-m: 18px;
	--font-ml: 22px;
	--font-l: 24px;
	--font-xl: 28px;
	--font-xxl: 32px;
	--font-xxxl: 40px;
	--gap: 8%;
}

@font-face {
	font-family: 'CenturyGothic';
	src: url('../font/centurygothic.woff2') format('woff2'), url('../font/centurygothic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CenturyGothic';
	src: url('../font/centurygothic_bold.woff2') format('woff2'), url('../font/centurygothic_bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Jost';
	src: url('../font/Jost-VariableFont_wght.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Jost';
	src: url('../font/Jost-VariableFont_wght.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}

.container{
	max-width: 2000px;
	margin: auto;
}


body{
	&:before{
		content: "";
		position: absolute;
		z-index: 4;
		top: 0vh;
		width: 100%;
		height: 160px;
		background: linear-gradient(to bottom, #000000b3 0%, #69626200 100%);
		/*background: linear-gradient(to bottom, #3d3d3db3 0%, #69626200 100%);*/
		/*background: linear-gradient(to bottom, #777777b3 0%, #ffffff00 100%);*/
	}
	&.no_homepage{
		&:before{
			top: -100vh;
		}
	}
	&.no_head{
		&:before{
			content: unset;
		}
	}
	&.no_before{
		&:before{
			content: unset;
		}
		.menu-lang{
			/*color: var(--black);*/
		}
	}
}

header{
	position: absolute;
	z-index: 30;
	top: -100vh;
	width: 100%;

	.content {
		padding: 50px var(--gap) 0px;
		display: flex;
		transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		img{
			width: 65px;
			position: relative;
			left: 0;
			transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		}
		
		.select-items{
			top: calc(100% - 2px);
			div{
				height: 30px;
				padding: 6px 8px;
			}
		}
		div{
			flex: 1;
			ul{
				display: flex;
				float: right;
				/*gap: 23px;*/
				list-style: none;
				border: 1px solid #FFFFFF40;
				background: #D9D9D940;
				padding: 8px 30px 10px;
				backdrop-filter: blur(4px);
				border-radius: 50px;
				li{
					color: white;
					font-family: CenturyGothic;
					font-size: var(--font-s);
					line-height: 100%;
					text-align: right;
					cursor: pointer;
					margin-right: 23px;
					flex-direction: column;
					transition: all 0.3s ease-in-out;
					a{
						color: white;
						text-decoration: unset;
						padding-left: 2px;
						padding-right: 0px;
						&:hover{
							color: var(--pink);
						}
					}
					a,span{
						font-size: var(--font-xxm);
					}
					&:nth-last-child(2),&:last-child{
						margin-right: unset;
					}
				}
				.hide-menu{
					width: 0px;
					opacity: 0;
					margin-right: unset;
				}
				.menu-lang{
					.select-selected{
						min-width: 10px !important;
						text-transform: capitalize;
						padding: unset;
						&:after{
							display: none;
						}
					}
					.select-items{
						div{
							width: 17px;
						}
					}
					&:hover{
						.select-items{
							display: block;
						}
					}
					display: flex;
					gap: 10px;
					span{
						opacity: 0.7;
						&:hover{
							color: var(--pink);
						}
						&.active{
							opacity: 1;
							cursor: default;
							&:hover{
								color: inherit;
							}
						}
					}
				}
				&.no-bg{
					padding: 7px 16px;
					margin-left: 5px;
				}
			}
		}
		&.head_v2{
			ul{
				/*background: rgb(0 0 0 / 50%);*/
				/*filter: drop-shadow(1px 1px 2px #000000cc);*/
				border-width: 0px;
				padding: 7px 24px;
				height: auto;
				align-items: center;
				li{
					font-size: var(--font-xs);
					text-transform: capitalize;
				}
			}
			form{
				.select-selected{
					/*background: rgb(0 0 0 / 80%);*/
					/*filter: drop-shadow(1px 1px 2px #000000cc);*/
					border-width: 0px;
					font-size: var(--font-xxs);
					text-transform: capitalize;
					&:after{
						border: 4px solid transparent;
						border-color: #fff transparent transparent transparent;
						top: 12px !important;
					}
					&.select-arrow-active{
						border-radius: 15px 15px 0px 0px;
					}
				}
			}
			.select-items{
				font-size: var(--font-xs);
				text-transform: capitalize;
				padding: unset;
				gap: 0;
				border-bottom-left-radius: 15px;
				border-bottom-right-radius: 15px;
				overflow: hidden;
				top: calc(100% - 0px);
				div{
					background: rgb(0 0 0 / 35%);
					/*background: rgb(68,84, 113 / 35%);*/
					/*filter: drop-shadow(1px 1px 2px #000000cc);*/
					border-color: #FFFFFF40;
					font-size: var(--font-xs);
					text-transform: capitalize;
					border-width: 0px;
					border-radius: unset;
					padding-left: 10px;
					&:nth-child(1){
						padding-top: 10px;
					}
					&:last-child{
						padding-bottom: 10px;
					}
				}
			}
			.no-bg{
				background: unset;
				backdrop-filter: unset;
			}
			.menu-lang{
				.custom-select{
					border: none;
					background: unset;
				}
				.form-label{
					span{
						opacity: 0.7;
						margin-right: 8px;
					}
				}
				.select-items{
					left: -19px;
					padding-top: 16px;
					div{
						width: 90%;
						text-align: right;
						background: unset;
					}
				}
				.select-selected{
					font-size: var(--font-xxs);
					/*display: none;*/
					opacity: 0;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
				}
			}
		}
	}
	&.noh{
		top: 0;
	}
	&.header_black{
		.content {
			div {
				ul {
					li {
						a {
							color: var(--black-2);
						}
					}
				}
			}
		}
	}
	&.header-light{
		ul{
			li{
				a{
				}
			}
		}
	}

	&.header-dark{
		top: 0;
		ul{
			li{
				a{
				}
			}
		}
	}
	&.sticky{
		top: 0px;
		position: fixed;
		width: 100vw;
		img{
			/*opacity: 0;*/
		}
		& .content {
			padding: 20px 3% 20px;
			padding-left: var(--gap);
			& div {
				ul{
					li.menu{
						width: 0px;
						opacity: 0;
						margin-right: unset;
						a{
							display: none;
						}
					}
					li.hide-menu{
						width: unset;
						opacity: 1;
						/*margin-right: 23px;*/
					}
				}
			}
		}
	}
	&.active{
		z-index: 999;
		img{
			/*opacity: 1;*/
		}
		& .content {
			& div {
				ul{
					li.menu{
						width: unset;
						opacity: 1;
						margin-right: 23px;
						a{
							display: block;
						}
					}
	        		/*li.hide-menu{
	        			width: 0px;
	        			opacity: 0;
	        			margin-right: unset;
	        			a{
	        				display: none;
	        			}
	        		}*/
	        	}
	        }
	    }
	    #headNav{
	    	ul:has(:not(.no-bg)){
	    		gap: 10px;
	    		height: auto;
	    		border-radius: 15px;
	    		text-align: center;
	    		li{
	    			margin-right: unset;
	    		}
	    	}
	    }
	}
	&.h_wht{
		.menu-lang{
			color: var(--black);
		}
		.head_v2 {
			ul.l_menu{
				background: rgb(0 0 0 / 65%) !important;
			}
		}
	}


	#headerMobile{
		position: absolute;
		top: 0;
		right: -100vw;
		background: linear-gradient(to bottom, #212121b5 0%, #000000 100%);
		width: calc(100% - (2 * var(--gap)) + 1px);
		max-width: 400px;
		height: calc(100vh - 40px);
		transition: all 0.5s ease-in-out;
		display: flex;
		flex-direction: column;
		padding: 20px var(--gap);
		&.active{
			right: -1px;
		}
		.headmbl{
		    display: flex;
		    justify-content: flex-end;
		    margin-bottom: 30px;
		    ul{
			    list-style: none;
			    padding-left: unset;
		    }
		    .logo{
		    	flex: 1;
		    	img{
		    		width: 65px;
		    	}
		    }
		    .close{
		    	a{
				    background: rgb(0 0 0 / 35%);
				    border-width: 0px;
				    padding: 3px 26px;
				    border-radius: 25px;
				    align-items: center;
				    color: white;
				    font-size: 14px;
		    	}
		    }
		    .no-bg{
		    	span{
                    padding: 7px 16px;
                    margin-left: 3px;
                    padding-right: 0px;
		    		color: white;
		    	}
		    }
		}
		button{
			height: 40px;
			border: unset;
			background: transparent;
			width: 40px;
			padding: unset;
			margin-left: -10px;
			svg{
				fill: white;
				height: 40px;
				transform: rotate(180deg);
			}
		}
		h5{
			color: white;
			font-family: CenturyGothic;
			font-weight: 400;
			font-size: var(--font-l);
			line-height: 33px;
			margin: 25px 0px;
			margin-top: unset;
		}
		ul.l_menu{
			margin: unset;
			padding-left: 15px;
			color: white;
			flex: 1;
			li{
				margin-bottom: 10px;
				padding-left: 10px;
				a,span{
					color: white;
					font-family: CenturyGothic;
					font-weight: 400;
					font-size: var(--font-m);
					line-height: calc(var(--font-m) + 8px);
					text-decoration: unset;
				}
			}
			&.no-bg{
				list-style-type: none;
				padding-left: 0;
				li{
					padding-left: unset;
					display: flex;
					gap: 20px;
					span{
						color: var(--gray-5);
						&.active{
							color: white;
						}
					}
				}
			}
		}
	}
}


a.follower{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	height: 100px;
	width: 100px;
	z-index: 4;
	transform: translate(10px, 10px);
	background: rgb(0 0 0 / 75%);
	border-radius: 50px;
	text-decoration: unset;
	transition: opacity 0.5s ease-in-out;
	opacity: 1;
	/*animation: spin-slow 5s linear infinite;*/
	p{
		flex: 0 0 55px;
		font-family: CenturyGothic;
		font-size: var(--font-xxs);
		color: white;
	}
	svg{
		fill: var(--pink);
		transform: rotate(45deg);
		width: 12px;
		margin-left: 2px;
	}
	&.cta_project{
		svg{
			transform: rotate(0deg);
		}
	}
	&.leave{
		opacity: 0;
	}
}

section.vid-background{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	overflow: hidden;
	z-index: 1;
	video{
		width: 100%;
		height: 100%;
		position: absolute;
		object-fit: cover;
	}
	.background-video{
		width: 100vw;
		bottom: 0;
		height: 50vh;
		position: absolute;
		/*background: #696262;*/
		background: linear-gradient(to bottom, #69626226 0%, #696262 100%);
		opacity: 0.2;
		z-index: 1;

		height: 100vh;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4) 100%);
	}
	.content{
		position: relative;
		width: calc(84%);
		height: calc(100vh - 300px);
		padding: 260px var(--gap) 40px;
		z-index: 2;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.top{
			position: relative;
			flex: 1;
			display: flex;
			align-items: flex-end;
			padding-bottom: 20px;
			z-index: 1;
			.h1{
				color: white;

				font-family: CenturyGothic;
				font-weight: 400;
				font-size: var(--font-xl);
				line-height: 36px;
				padding-left: unset;

				b{
					font-family: CenturyGothic;
					font-weight: 100;
				}
				span{
					opacity: 0;
					animation: typing 1s ease forwards
				}

				&>b span:nth-child(1) { 
					/*animation: typing 1s ease forwards;*/
					animation-delay: 0.2s;
				}
				&>b span:nth-child(2) { 
					/*animation: typing 3s ease forwards;*/
					animation-delay: 0.5s;
				}
				&>b span:nth-child(3) { 
					/*animation: typing 5s ease forwards;*/
					animation-delay: 1s;
				}

				&>span:nth-child(3) { 
					/*animation: typing 8s ease forwards;*/
					animation-delay: 1.5s;
				}
				&>span:nth-child(4) {
					/*animation: typing 10s ease forwards;*/
					animation-delay: 1.8s;
				}
				&>span:nth-child(5) { 
					/*animation: typing 12s ease forwards;*/
					animation-delay: 2.1s;
				}
			}
		}
		.bottom{
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 3;
			padding-bottom: 60px;
			.desc{
				font-family: Jost;
				font-weight: 400;
				line-height: 32px;
				padding-left: unset;
				font-size: var(--font-l);
				color: white;
				margin-bottom: 20px;
			}
			.list{
				background: #D9D9D940;
				backdrop-filter: blur(15px);
				border-radius: 50px;
				padding: 10px 25px;
				overflow: hidden;
				margin-bottom: 50px;
				.lists{
					display: flex;
					justify-content: space-between;
					padding: 11px 5px;
                    margin-left: -25px;
                    margin-right: -25px;
					h5{
						font-family: CenturyGothic;
						font-size: var(--font-xxxl);
						line-height: 100%;
						margin: unset;
						color: var(--pink);
						span{
							font-weight: 100;
							font-size: var(--font-xm);
							position: relative;
							top: -5px;
							right: -2px;
							color: white;
						}
					}
					div{
						display: flex;
						color: white;
						align-items: center;
						p{
							font-family: Jost;
							font-weight: 400;
							font-size: var(--font-ml);
							line-height: 18px;

							margin: unset;
							margin-left: 12px;
							b{
								font-family: Jost;
								font-weight: 100;
								/*font-size: var(--font-xxm);*/
							}
						}
						&.slash{
							display: block;
							height: auto;
							width: 1px;
							border-right: 1px solid white;
							opacity: 0.3;
							margin: 0px 15px;
						}
					}
				}
			}
			.left,.right{
				position: absolute;
				color: white;
				top: 0px;
				font-size: var(--font-m);
				display: flex;
                align-items: center;
				height: 100%;
			}
			.left{
				/*display: block;*/
				/*display: fl;*/
				left: 15px;
			}
			.right{
				/*display: block;*/
				right: 15px;
			}
			.lists {
				padding: 11px 5px;
				div.slash{
					display: none;
				}
			}
		}
	}
}
.top-black{
	header{
		.head_v2 {
			ul {
				background: rgb(0 0 0 / 35%);
			}

			& form {
				.select-selected {
					background: rgb(0 0 0 / 35%);
				}
			}
		}
	}
	section.vid-background{
		.content{
			.bottom{
				.list{
					background: rgb(0 0 0 / 35%);
				}
			}
		}
	}
}
section{
	background: white;
	position: relative;
	z-index: 3;
	.circle-gra{
		background: radial-gradient(50% 50% at 50% 50%, rgba(227, 140, 168, 0.3) 0%, rgba(227, 140, 168, 0.167308) 32.21%, rgba(227, 140, 168, 0) 100%);
		width: 40vw;
		height: auto;
		aspect-ratio: 1/1;
		position: absolute;
		top: 0;
		right: 0;
	}
	.breadcrumb{
		display: flex;
		gap: 10px;
		font-family: Jost;
		font-size: var(--font-s);
		margin-bottom: 30px;
		flex: 0 0 100%;
		a{
			text-decoration: unset;
			color: var(--gray-5);
		}
		.active{
			a{
				color: var(--pink);
			}
		}
		svg{
			height: 11px;
			margin-left: 10px;
			position: relative;
			bottom: -1px;
		}
	}
	.header{
		padding-top: 50px;
		&>h5{
			font-family: CenturyGothic;
			font-weight: 100;
			font-size: var(--font-l);
			line-height: 40px;
			margin: unset;
			margin-bottom: 30px;
			padding: 0px var(--gap);
			color: var(--slate-blue);
			margin: unset;
		}
		&>p{
			font-family: Jost;
			font-size: var(--font-ml);
			line-height: 36px;
			margin: unset;
			margin-bottom: 30px;
			padding: 0px var(--gap);
			color: gray;

			margin: unset;
			margin-top: 10px;
		}
	}
	.header2{
		padding: 40px var(--gap) 0px;
		display: flex;
		flex-wrap: wrap;
		gap: 130px;
		&>h6,&>h5{
			/*font-family: CenturyGothic;*/
			font-family: Jost;
            letter-spacing: 2px;
			font-size: var(--font-xxl);
			font-weight: 100;
			line-height: 50px;
			margin: unset;
			color: var(--black);
		}
		&>p{
			font-family: Jost;
			font-weight: 100;
			font-size: var(--font-xxm);
			line-height: 25px;
			flex: 0 0 250px;
			color: var(--black);
		}
	}
	.header_flex{
		padding: 120px var(--gap) 50px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.left{
			flex: 0 0 450px;
			padding-right: 10%;
			.tag{
				font-family: Jost;
				font-size: var(--font-s);
				font-weight: bold;
				line-height: calc(var(--font-s) + 8px);
				padding: 2px 12px;
				border: 1px solid var(--black-2);
				border-radius: 50px;
				color: var(--black-2);
				display: inline-block;
				margin-bottom: 4px;
			}
			h5{
				font-family: CenturyGothic;
				font-weight: Bold;
				font-size: calc(var(--font-xxxl) + 2px);
				line-height: calc(var(--font-xxxl) + 2px + 8px);
				margin: unset;
				color: var(--black);
				margin-bottom: 8px;
				span{
					color: var(--pink);
				}
			}
			p{
				font-family: Jost;
				font-weight: 400;
				font-size: var(--font-l);
				line-height: calc(var(--font-l) + 8px);
				margin: unset;
				color: var(--black);
			}
			p:nth-child(2){
				margin-bottom: 24px !important;
			}
			p:nth-child(3),p:nth-child(4),p:nth-child(5){
                font-family: Jost;
                font-size: calc(var(--font-l) - 2px);
                line-height: calc(var(--font-l) + 6px);
			}
		}
		.right{
			flex: 0 0 50px;
			display: flex;
			align-items: flex-end;
			p{
				font-family: Jost;
				font-weight: 400;
				font-size: var(--font-m);
				line-height: calc(var(--font-m) + 12px);
				text-align: left;
				margin: unset;
				color: var(--stale-blue);
				text-transform: uppercase;
			}
		}
	}
	.footer_flex{
		padding: 50px var(--gap) 100px;
		div{
			width: 100%;
			max-width: 720px;
			p{
				/*width: 80%;*/
				font-family: CenturyGothic;
				font-weight: 400;
				font-size: var(--font-l);
				line-height:  calc(var(--font-l) + 12px);
				text-align: left;
				margin: unset;
				color: var(--stale-blue);
			}
		}
	}
}
section.blog-list{
	background: var(--gray-2);
	&.blog-home{
		padding-bottom: 80px;
		padding-top: 70px;
		.header{
			position: relative;
			p{
				color: var(--black);
			}
		}
	}
	.header{
		h5{
			font-size: var(--font-xxxl);
		}
		button,a{
			position: absolute;
			right: var(--gap);
			top: 80px;
			border-color: transparent;
		}
	}
	.blog-header{
		padding-top: 50px;
		&>h5{
			font-family: CenturyGothic;
			font-weight: 100;
			font-size: var(--font-l);
			line-height: 40px;
			margin: unset;
			margin-bottom: 30px;
			padding: 0px var(--gap);
			color: var(--black);

			margin: unset;
		}
		&>p{
			font-family: Jost;
			font-size: var(--font-l);
			line-height: 40px;
			margin: unset;
			margin-bottom: 30px;
			padding: 0px var(--gap);
			color: var(--black);

			margin: unset;
		}
	}
	.blog-categories{
		padding: 25px var(--gap) 0px;
		display: flex;
		gap: 20px;
		a{
			text-decoration: unset;
			color: var(--black);
			font-family: Jost;
		}
	}
	.blog-views{
		display: flex;
		justify-content: center;
		padding-top: 30px;
		a{
			p,span{

			}
		}
	}
	.blog-container{
		display: flex;
		overflow-x: auto;
		scroll-behavior: smooth;
		gap: 20px;
		padding: 25px var(--gap) 20px;
		scrollbar-width: none;

		a{
			text-decoration: unset;
		}

		.blog-card {
			flex: 0 0 400px;
			min-width: 400px;
			background: white;
			border-radius: 5px;
			box-shadow: 2px 2px 10px rgb(69 69 69 / 5%);
			overflow: hidden;
			transition: transform 0.3s ease, box-shadow 0.3s ease;

			cursor: pointer;
			.img-error{
				background: var(--gray-bold);
				padding: 20px;
				height: 260px;
				display: flex;
				align-items: center;
				justify-content: center;
				img{
					width: 85px;
					height: auto;
				}
			}
			img{
				width: calc(100%);
				height: auto;
				aspect-ratio: 16 / 12;
				margin: 0px;
				margin-bottom: unset;
			}
		}

		.blog-card:hover {
			transform: translateY(-5px);
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
		}

		.blog-image {
			width: 100%;
			height: 180px;
			object-fit: cover;
		}

		.blog-content {
			padding: 20px;
			h3,p{
				margin: unset;
				margin-top: 6px;
				color: var(--black);
				font-size: var(--font-xxm);
			}
			h3{
				font-family: CenturyGothic;
				font-weight: 100;
			}
			span{
				font-family: Jost;
				color: var(--pink);
				font-size: var(--font-s);
			}
			p{
				font-family: Jost;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				line-clamp: 4; 
			}
		}
	}
	.blog-nav{
		display: flex;
		justify-content: center;
		padding-bottom: 80px;
		gap: 20px;
		display: none;
		button{
			background: white;
			border: none;
			width: 40px;
			height: 40px;
			cursor: pointer;
		}
	}
	&.article-list{
		background: white;
		.blog-container{
			display: grid;
			/*overflow-x: auto;*/
			grid-template-columns: repeat(auto-fill, calc(25% - 15px));
			justify-content: space-between;
			gap: 15px;
			.blog-card{
				/*flex: 0 0 calc(50% - 15px);
				min-width: calc(50% - 15px);
				margin-bottom: 15px;
				border-radius: 10px;
				border: 0.5px solid #0000001a;*/
				flex: 0 0 calc(25% - 15px);
				min-width: calc(25% - 15px);
				box-shadow: unset;

				padding-bottom: 50px;
				.blog-content{
					/*padding-left: 24px;*/
					.blog-category{
						/*margin: 10px 0px;*/
					}
				}
				a{
					display: flex;
					flex-direction: column;
					/*padding: 16px;*/
				}
				img{
					/*border-radius: 25px;*/
					width: 100%;
					/*border-radius: 10px;*/
					aspect-ratio: 6/8;
					transition: all 0.3s ease;
				}
				span{
					display: flex;
					/*justify-content: space-between;*/
					small{
						flex: 50%;
						font-size: var(--font-xs);
						color: #00000099;
						&:nth-child(1){
							/*background: #bfbfbf2b;*/
							/*padding: 6px 12px;*/
							border-radius: 5px;
							/*height: 20px;*/
							font-size: var(--font-s);
							margin-right: 8px;
						}
						&:nth-child(2){
							text-align: right;
						}
					}
				}
				p{
					margin-top: 8px;
					font-size: var(--font-xs);
					color: #00000099;
				}
				div{
					display: flex;
					flex-direction: column;
					padding: unset;
					background: #ffffff;
					position: relative;
					h3{
						flex: 1;
						font-weight: 400;
						font-size: var(--font-l);
						margin-top: unset;
					}
					/*height: calc(100% + 4px);
					margin-top: -4px;*/
				}
				&:hover{
					transform: unset;
					box-shadow: unset;
					/*background: #f2f5f1;*/
					div{
					}
					img{
						transform: scale(1.2);
					}
				}
			}

			.item-1 {
				grid-row: span 1;
				img{
					aspect-ratio: 6/4;
				}
			}
			.item-2 {
				grid-row: span 2;
				img{
					aspect-ratio: 6 / 12;
				}
			}
			.item-3 {
				grid-row: span 3;
				img{
					aspect-ratio: 6 / 12;
				}
			}
		}
	}

	&.article-list2{
		background: white;
		padding-bottom: 100px;
		.blog-container{
			display: flex;
			overflow-x: auto;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 15px;
			.blog-card{
				flex: 0 0 calc(50% - 15px);
				min-width: calc(50% - 15px);
				margin-bottom: 15px;
				border-radius: 10px;
				border: 0.5px solid #0000001a;
				background: white;
				box-shadow: 2px 2px 10px rgb(69 69 69 / 5%);
				overflow: hidden;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				cursor: pointer;
				.blog-content{
					padding-left: 24px;
					flex: 0 0 calc(60% - 24px);
					aspect-ratio: unset;
                    height: auto;
                    display: flex;
                    flex-direction: column;
					.blog-category{
						/*margin: 10px 0px;*/
						small{
							background: transparent;
							padding-left: unset;
							color: var(--pink);
						}
					}
					h3{
                		font-size: var(--font-xm);
						color: var(--stale-blue);
						font-weight: bold;
					}
					p{
						flex: 1;
						display: flex;
                    	align-items: flex-end;
                		font-size: var(--font-s);
					}
				}
				.img-error{
					border-radius: 10px;
					img{
						width: 50px;
						border-radius: unset;
						aspect-ratio: unset;
					}
				}
				a{
					display: flex;
					padding: 16px;
					&>div{
						height: 100%;
						aspect-ratio: 6 / 10;
						flex: 0 0 40%;
						padding: unset;
					}
				}
				img{
					width: calc(100%);
					border-radius: 10px;
					aspect-ratio: 6 / 10;
					transition: all 0.3s ease;
				}
				span{
					display: flex;
					align-items: center;
					/*justify-content: space-between;*/
					small{
						flex: 50%;
						font-size: var(--font-xs);
						color: #00000099;
						&:nth-child(1){
							background: #bfbfbf2b;
							padding: 6px 12px;
							border-radius: 5px;
							height: 20px;
							font-size: 14px;
							margin-right: 8px;
						}
						&:nth-child(2){
							text-align: right;
						}
					}
				}
				p{
					margin-top: 8px;
					font-size: var(--font-xs);
					color: #00000099;
				}
				&>div{
					display: flex;
					flex-direction: column;
					padding: unset;
					/*background: #ffffff;*/
					position: relative;
					h3{
						flex: 1;
						font-weight: 400;
						font-size: var(--font-l);
						margin-top: unset;
					}
					/*height: calc(100% + 4px);
					margin-top: -4px;*/
				}
				&:hover{
					transform: unset;
					box-shadow: unset;
					background: #f2f5f1;
					div{
					}
				}
			}
		}
	}
}

/* Responsive */
@media (max-width: 1200px) {
	section.blog-list{
		&.article-list{
			.blog-container{
				grid-template-columns: repeat(auto-fill, calc(33.33% - 15px));
			}
		}
	}
}

section.seccar{
	margin-top: 100vh;
	position: relative;
	z-index: 3;
	background: white;
	.top{
		padding: 80px var(--gap) 70px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		p.h1-carou{
			font-family: CenturyGothic;
			font-weight: 400;
			font-size: var(--font-xm);
			line-height: 33px;

			margin: unset;
			color: var(--black);
			b{
				font-size: var(--font-l);
				line-height: 38px;
				color: var(--stale-blue);
			}
		}
		div{
			display: flex;
			justify-content: center;
			align-items: center;
			p{
				font-family: CenturyGothic;
				font-weight: 400;
				font-size: var(--font-xl);
				line-height: 38px;
				margin: unset;
				padding-right: 30px;
			}
			img{
				width: 520px;
			}
		}
	}
	div.carousel{

	}
}
.sec-carou{
	/*overflow: hidden;*/
	position: relative;
	clip-path: inset(0 0 0 0);
	z-index: 3;
	.carousel-general{
		position: relative;
		left: 5%;
		width: 90%;
		display: flex;
		gap: 20px;
		justify-content: center;
		z-index: 3;
		transform: translateX(0%);


		a{
			color: inherit;
			text-decoration: unset;
		}
		h5{
			font-family: Jost;
			font-size: var(--font-xl);
			line-height: 40px;
			font-weight: 100;
			color: #ffffff9e;
			margin: unset;
			position: relative;
			cursor: pointer;
			&:hover{
				color: white;
			}
		}
		h5:before{
			position: absolute;
			top: 0;
			left: 0;
			clip-path: inset(calc((1 - var(--progress)) * 100%) 0 0 0);
			color: rgb(223 124 155);
			height: 40px;
			width: 100%;
			content: attr(data-index);
		}
	}

	.sticky-desc, .sticky-general {
		margin-bottom: -100px;
		padding-bottom: 100px;
		p{
			bottom: 125px;
		}
	}
}

section.sticky-carou{
	div.sticky-container{
		position: relative;
		&>img{
			position: sticky;
			width: 100%;
			top: 0;
			height: 100vh;
			object-fit: cover;
		}
		.sticky-opacity{
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0);
			/*opacity: 0;*/
		}
		.sticky-desc {
			width: 100vw !important;
			& p {
				bottom: 70px !important;
				left: 5%;
				b {
					font-size: var(--font-m);
				}
			}
			&.desc-top{
				a{
					bottom: 40px;
				}
			}
		}
		.sticky-track{
			margin: 0px var(--gap);
			padding-bottom: 200px;
			display: flex;
			flex-direction: column;
			gap: 50px;
			position: relative;
			align-items: center;
			img{
				aspect-ratio: 7 / 4;
				width: 100%;
				height: auto;


				/*width: auto;
				height: 100%;
				max-width: 100%;
				max-height: 80vh;*/
				object-fit: cover;
			}
		}
		.carousel-number,.carousel-general{
			position: absolute;
			bottom: 45px;
			left: 50%;
			display: flex;
			gap: 20px;
			justify-content: center;
			z-index: 3;
			transform: translateX(-50%);
			a{
				color: inherit;
				text-decoration: unset;
			}
			h5{
				font-family: Jost;
				font-size: var(--font-xl);
				line-height: 40px;
				font-weight: 100;
				color: #ffffff9e;
				margin: unset;
				position: relative;
				cursor: pointer;
				&:hover{
					color: white;
				}
			}
			h5:before{
				position: absolute;
				top: 0;
				left: 0;
				clip-path: inset(calc((1 - var(--progress)) * 100%) 0 0 0);
				color: rgb(223 124 155);
				height: 40px;
				width: 100%;
				content: attr(data-index);
			}
		}
	}
	.dark-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		pointer-events: none;
		z-index: 21;
		transition: background-color 0.3s ease;
	}
}
.sec-carou{
	position: relative;
	.sticky-desc,.sticky-general{
		position: absolute;
		width: 100%;
		top: calc(100vh - 150px);
		z-index: 20;
		height: 150px;
		background: linear-gradient(to bottom, #69626200 0%, #000000b3 100%);
		&.sticky{
			position: fixed;
		}
		&.bottom{
			position: absolute;
			top: unset;
			bottom: 0;
		}
		p {
			font-family: Jost;
			font-weight: 100;
			font-size: var(--font-xxm);
			line-height: 20px;
			position: absolute;
			bottom: auto;
			top: 60px;
			left: var(--gap);
			color: var(--pink);
			z-index: 3;
			text-transform: uppercase;
			b{
				font-weight: bold;
				font-size: var(--font-m);
				font-family: CenturyGothic;
				text-transform: capitalize;
				color: white;
			}
		}
		&>a{
			font-family: Jost;
			position: absolute;
			bottom: 58px;
			right: var(--gap);
			color: white;
			z-index: 4;
			background: transparent;
			border: unset;
			font-size: var(--font-s);
			display: flex;
			gap: 12px;
			align-items: center;
			cursor: pointer;
			text-decoration: unset;
			img {
				width: 15px;
				height: 15px;
			}
		}
		&.desc-top{
			/*background: linear-gradient(to bottom, #716b6bb0 00%, #69626200 30%);*/
			/*p{
				bottom: auto;
				top: 100px;
			}
			a{
				bottom: auto;
				top: 115px;
			}
			.carousel-number{
				bottom: auto;
				top: 110px;
			}*/

			p{
				bottom: 45px;
				top: auto;
			}
			a{
				bottom: 75px;
				top: auto;
			}
			.carousel-number{
				bottom: 60px;
				top: auto;
			}
		}
	}
	
}
section{
	&.sticky_show{
		position: relative;
		overflow: hidden;
		div.bar{
			position: absolute;
			bottom: 0;
			left: 0;
			height: 5px;
			z-index: 99;
			background: var(--pink);
		}
		&>div{
			display: flex;
			transition: all 0.5s ease;
			.sticky2{
				flex: 0 0 100vw;
			}
		}
		.dotted{
			position: absolute;
			bottom:  65px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			gap: 12px;
			z-index: 3;
			&>div{
				height: 10px;
				width: 10px;
				border-radius: 50px;
				border: 1px solid white;
				background: white;
				cursor: pointer;
				&.active{
					border-color: var(--pink);
					background: var(--pink);
				}
			}
		}
	}
	.sticky2{
		/*background: transparent;*/
		padding-top: 50vh;
		.container{
			/*padding: 0px 10%;		*/
			transition: all 0.3s ease;
			background-color: rgba(0, 0, 0, 0.5);
			.content{
				/*background: white;*/
				background-size: cover;
				background-position: center;
				min-height: 100vh;
				margin-top: -50vh;
				position: relative;
				--indexes: 0;
				&:before{
					content: "";
					display: block;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.55);
					position: absolute;
					top: 0;
					left: 0;
					z-index: 0;
				}
				&:after{
					content: "";
					display: block;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.55);
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					z-index: var(--indexes);
					transition: opacity 0.5s ease-in-out;
				}
				&.active{
					&:after{
						opacity: 1;
					}
				}
				.img-1{
					/*height: 30vh;*/
					left: 15vw;
					top: 0;
					width: 350px;
					transition: all 0.3s ease;
					&:hover{
						z-index: 9;
						/*height: 40vh;*/
						left: 10vw;
						top: 0;
						width: 500px;
					}
				}
				.img-2{
					/*height: 50vh;*/
					right: 0vw;
					top: 10vw;
					width: 30vw;
					transition: all 0.3s ease;
					&:hover{
						z-index: 9;
						/*height: 60vh;*/
						right: 0vw;
						top: 8vw;
						width: 35vw;
					}
				}
				.img-3{
					/*height: 25vw;*/
					left: 0;
					bottom: 20vh;
					width: 35vw;
					transition: all 0.3s ease;
					&:hover{
						z-index: 9;
						/*height: 35vw;*/
						left: 0;
						bottom: 15vh;
						width: 40vw;
					}
				}
				.img-4{
					/*height: 25vw;*/
					left: 5vh;
					top: 5vh;
					width: 35vw;
					transition: all 0.3s ease;
					&:hover{
						z-index: 9;
						/*height: 35vw;*/
						left: 0vh;
						top: 0vh;
						width: 40vw;
					}
				}
				.img-5{
					/*height: 30vh;*/
					right: 5vw;
					bottom: 0;
					width: 400px;
					transition: all 0.3s ease;
					&:hover{
						z-index: 9;
						/*height: 40vh;*/
						right: 0vw;
						bottom: 0;
						width: 550px;
					}
				}
				.img-6{
					/*height: 25vh;*/
					right: 10vw;
					top: 0vw;
					width: 25vw;
					transition: all 0.3s ease;
					&:hover{
						z-index: 9;
						/*height: 35vh;*/
						right: 5vw;
						top: 0vw;
						width: 30vw;
					}
				}
				.img-7{
					/*height: 20vw;*/
					left: 0vh;
					bottom: 20vh;
					width: 35vw;
					transition: all 0.3s ease;
					&:hover{
						z-index: 9;
						/*height: 30vw;*/
						left: 0vh;
						bottom: 18vh;
						width: 40vw;
					}
				}
				.img-8{
					/*height: 30vh;*/
					right: 10vw;
					bottom: 0;
					width: 400px;
					transition: all 0.3s ease;
					&:hover{
						z-index: 9;
						/*height: 40vh;*/
						right: 8vw;
						bottom: 0;
						width: 550px;
					}
				}
				.img-9{
					/*height: 25vh;*/
					right: 5vw;
					top: 0vw;
					width: 35vw;
					transition: all 0.3s ease;
					&:hover{
						z-index: 9;
						/*height: 35vh;*/
						right: 2vw;
						top: 0vw;
						width: 40vw;
					}
				}
				/*.img-1,.img-2,.img-3,.img-4,.img-5,.img-6,.img-7,.img-8,.img-9{
					&:hover{
						transform: scale(1.3);
					}
				}*/
				.desc{
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					text-align: center;
					max-width: 350px;
					p {
						font-family: Jost;
						font-weight: 400;
						font-size: var(--font-s);
						/*line-height: 56px;*/
						color: white;
						z-index: 3;
						/*text-align: center;*/

						margin: unset;
						width: auto;
						font-family: Jost;
						text-transform: uppercase;
						b{
							font-size: calc(var(--font-xxl) - 5px);
							color: var(--pink-2);
							font-family: CenturyGothic;
							text-transform: capitalize;
							margin-bottom: 13px;
							display: block;
						}
						a{
							/*display: block !important;*/
							text-decoration: unset;
							color: inherit;
						}
					}
					/*a{
						font-family: Jost;
						z-index: 3;
						background: transparent;
						border: unset;
						font-size: var(--font-s);
						display: none;
						gap: 12px;
						align-items: center;
						cursor: pointer;
						text-decoration: unset;
						bottom: -37vh;
						border: 1.5px solid white;
						border-radius: .208vw;
						padding: 1vw 2.083vw;
						white-space: nowrap;
						margin-top: 20px;
						color: white;
						img {
							width: 15px;
							height: 15px;
						}
						&:hover{
							color: var(--pink);
							background: white;
						}
					}*/
				}
				[class^="img-"]{
					position: absolute;
					img{
						width: 100%;
						/*height: 100%;*/
						/*object-fit: cover;*/
					}
				}
			}
		}
	}
}
section.design{
	position: relative;
	z-index: 3;
	padding-top: 83px;
	p{
		font-family: CenturyGothic;
		font-weight: 400;
		font-style: Bold;
		font-size: var(--font-xl);
		line-height: 40px;

		margin: unset;
		margin-bottom: 30px;
		padding: 0px var(--gap);

		color: var(--black);
		&.right{
			text-align: right;
		}
		&.left{
			text-align: left;
		}
		&.center{
			text-align: center;
		}
	}
	img{
		width: 100%;
		max-height: 800px;
		object-fit: cover;
		/*position: relative;*/
		/*bottom: -4px;*/
	}
	.fourimage{
		display: flex;
		img{
			aspect-ratio: 3 / 4;
			object-fit: cover;
			display: block;
			
			&:hover{
				filter: grayscale(0%);
			}
		}
		a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: none;
			background: transparent;
			/*mix-blend-mode: soft-light;*/
			svg{
				fill: white;
				color: white;
				/*mix-blend-mode: plus-lighter;*/
				width: 50px;
				height: 50px;
			}
		}
		.img_sosmed{
			flex: 0 0 20%;
			width: 20%;
			position: relative;
			cursor: pointer;
			&.active{
				img{
					filter: grayscale(0%);
				}
				a{
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
	.location{
		position: absolute;
		bottom: 10%;
		left: 10%;
		p{
			color: white;
			margin: unset;
			padding: unset;
		}
		p:nth-child(1){
			font-family: CenturyGothic;
			/*font-weight: 700;*/
			font-size: var(--font-xl);
			line-height: 32px;
		}
		p:nth-child(2){
			/*font-weight: 700;*/
			font-size: var(--font-xl);
			line-height: 32px;
			text-decoration: underline;
		}
	}
}
section.design_follow{
	.content{
		padding: 40px 0 40px 30px;
		display: flex;
		flex-direction: column;
		background: #F9FAFD;
		h5{
			margin: unset;
			font-family: CenturyGothic;
			font-weight: 100;
			font-size: var(--font-xxl);
			color: var(--slate-blue);
			letter-spacing: -1px;
			span,a{
				color: var(--pink-2);
				text-decoration: unset;
			}
		}	
		p{
			margin: unset;
			font-family: CenturyGothic;
			font-weight: 100;
			font-size: var(--font-xm);
			color: var(--gray-5);
			margin-top: 5px;
			margin-right: 50px;
		}
	}
}
section.award{
	.content{
		display: flex;
		padding: 50px var(--gap);
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
	}
	p{
		&.left{
			font-family: CenturyGothic;
			font-weight: 400;
			font-style: Bold;
			font-size: var(--font-l);
			margin: unset;
			width: 100%;

			color: var(--black);
			b{
				font-size: var(--font-l);
				color: var(--stale-blue);
				line-height: 27px;
			}
		}
	}
	.lists{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding: 50px 0px 10px 0;
		gap: 16px;
		div{
			display: flex;
			justify-content: space-between;
			align-items: center;
			h5{
				font-family: CenturyGothic;
				font-weight: bold;
				font-size: var(--font-xxxl);
				line-height: 100%;

				margin: unset;
				margin-right: 10px;

				color: var(--pink);
				span{
					color: var(--black);
					font-weight: 100;
					font-size: var(--font-xl);
					position: relative;
					top: -10px;
					right: -3px;
				}
			}
			p{
				font-family: CenturyGothic;
				font-weight: 400;
				font-size: var(--font-s);
				line-height: 21px;

				margin: unset;
				color: var(--black-2);
				b{
					font-family: Jost;
					font-weight: 700;
					font-size: var(--font-s);
					line-height: 26px;
					letter-spacing: 0%;
				}
			}
			&.exp{
				flex: 0 0 100%;
				justify-content: center;
				p{
					font-family: Jost;
					font-weight: bold;
					margin-left: 12px;
					line-height: 21px;
					font-size: 18px;
					color: var(--black-2);
				}
			}
			&.wrd{
				text-align: center;
				position: relative;
				cursor: pointer;
				min-width: 170px;
				/* flex: 0 0 60%;
				justify-content: center; */
				.p_hover{
					/*display: none;*/
					line-height: 16px;
					b{
						font-size: var(--font-xs);
					}
				}
				/*&:hover{
					.p_awal{
						display: none;
					}
					.p_hover{
						display: block;
					}
				}*/
				.tooltip{
					display: none;

					box-shadow: 0px 0px 10px 0px #DF7C9B80;
					position: absolute;
					right: -30px;
					width: 170px;
					bottom: 60px;
					background: hsl(0deg 0% 100% / 50%);
					padding: 15px 30px;
					border-radius: 10px;

					p{
						font-family: CenturyGothic;
						font-weight: 400;
						font-size: var(--font-s);
						line-height: 24px;
						text-align: center;

						color: #D91A57;
						span{
							color: var(--black-2);
						}
					}
				}
				&:hover{
					.tooltip{
						display: block;
					}
				}
			}
			&.flip-card {
			    cursor: pointer;
			    position: relative;
			    .flip-card-inner {
				    position: relative;
				    width: 100%;
				    height: 100%;
				    text-align: center;
				    transition: transform 0.6s;
				    transform-style: preserve-3d;
				}

				&:hover .flip-card-inner {
				    transform: rotateY(180deg);
				}

				.flip-card-front, .flip-card-back {
				    position: absolute;
				    width: 100%;
				    height: 100%;
				    backface-visibility: hidden;
				    border-radius: 10px;
				    box-sizing: border-box;
				}

				.flip-card-front {
				    transform: rotateY(0deg);
				}

				.flip-card-back {
				    color: white;
				    transform: rotateY(180deg);
				}
			}
			img{
				height: 70px;
			}
			img.right{
				transform: scaleX(-1);
			}
		}
	}
}
section.form{
	/*background-image: url('../slide_4.png');*/
	background-size: cover;
	&>div:nth-child(1){
		background: var(--pink);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.input-form{
		position: relative;
		display: flex;
		padding: 75px var(--gap);
		z-index: 2;
		&>div{
			flex: 0 0 100%;
			width: 100%;
		}
		&>div:nth-child(1){
			color: white;
			h6{
				font-family: CenturyGothic;
				font-weight: 400;
				font-size: var(--font-xl);
				line-height: 46px;
				margin: unset;
				width: 80%;
			}
			p{
				width: 80%;
				font-family: Jost;
				font-weight: 400;
				font-size: var(--font-s);
				line-height: 28px;
			}
			/*padding-right: 100px;*/
		}
		&>div:nth-child(2){
			form{
				display: flex;
				flex-direction: column;
			}
			p{
				font-family: CenturyGothic;
				font-size: var(--font-xm);
				line-height: 26px;
				color: white;
				margin: unset;
				margin-bottom: 12px;
			}
			input,textarea{
				margin-bottom: 20px;
				border-radius: 100px;
				background: #FFFFFF40;
				color: white;
				font-size: var(--font-s);
				padding: 11px 21px;
				border: unset;
				&&::placeholder {
					color: white;
					opacity: 0.6;
				}
			}
			button{
				max-width: 180px;
				padding: 8px 21px;
				border-radius: 50px;
				border: unset;

				font-family: CenturyGothic;
				font-size: var(--font-s);
				line-height: 26px;

				display: flex;
				align-items: center;
				gap: 15px;
				svg{
					height: auto;
					width: 18px;

					color: rgb(223 124 155);
				}
			}
		}
	}
	&.cnt-form{
		/*&>div:nth-child(1){
			background: #00000040;
		}*/
		button{
			justify-content: space-between;
			svg {
				height: auto;
				width: 18px;
				color: rgb(223 124 155);
			}
		}
		p.policy{
			margin-top: 24px !important;
			font-size: var(--font-xs) !important;
			line-height: 21px !important;
			a{
				font-weight: bold;
				color: white;
				text-decoration: unset;
			}
		}
	}
}
section.form_new{
	/*padding-top: 100px;*/
	/*padding-top: 0.1px;*/
	.container{
		/*padding: 0px 0px 0px 10%;*/
		background: var(--blue-2);
		display: flex;
		/* height: 80vh; */
		position: relative;
		/*overflow: hidden;*/
		justify-content: flex-end;
		.input-form{
			padding-left: var(--gap);
			flex: 0 0 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-bottom: 50px;
			position: absolute;
			left: 0;
			transition: all 0.5s ease-in-out;
			height: calc(100% - 130px);
			padding-top: 80px;
			&>div:nth-child(1){
				width: 70%;
				overflow: hidden;
				max-height: 100vh;
				flex: 1;
				/*height: 280px;*/
				transition: all 0.2s ease-in-out;
				h6{
					font-family: CenturyGothic;
					color: white;
					font-size: var(--font-xl);
					font-weight: 100;
					margin: unset;
					b{
						font-weight: 600;
					}
				}
				p{
					font-family: CenturyGothic;
					font-weight: 100;
					color: white;
					margin: unset;
					font-size: var(--font-xxm);
					line-height: calc(var(--font-xxm) + 8px);
					margin-top: 20px;
				}
			}
			.navi{
				display: flex;
				justify-content: space-between;
				padding-right: 50px;
				padding-top: 20px;
				font-family: CenturyGothic;
				color: white;
				font-weight: 100;
				.number{
					&>div{
						display: flex;
						overflow: hidden;
						&>div{
							height: 20px;
							transition: all 0.5s ease-in-out;
							padding-left: 2px;
							p{
								margin: unset;
							}
							&.step-1{
								transform: translateY(0px);
							}
							&.step-2{
								transform: translateY(-21px);
							}
							&.step-3{
								transform: translateY(-42px);
							}
							&.step-4{
								transform: translateY(-63px);
							}
						}
					}
				}
				.page{
					display: flex;
					gap: 20px;
					div{
						cursor: pointer;
					}
				}
			}
			form{
				position: relative;
				flex: 0 0 var(--flex-d);
				/*padding-top: 90px;*/
				.group-1,.group-2,.group-3,.group-4{
					display: flex;
					flex-direction: column;
					padding-right: 50px;
					padding-top: 40px;
					position: absolute;
					left: -100vw;
					transition: all 0.5s ease-in-out;
					bottom: 50px;
					width: calc(100% - 70px);
					label{
						font-family: CenturyGothic;
						font-weight: 100;
						font-size: var(--font-xxxl);
						color: white;
					}
					input,textarea{
						background: transparent;
						border: unset;
						font-family: CenturyGothic;
						font-weight: 100;
						font-size: var(--font-xxl);
						color: white;
						outline: unset;
						width: calc(100% - 50px);
						&::placeholder{
							color: #FFFFFF99;
						}
					}
					.simple-phone-input{
						display: flex;
						select{
							font-family: CenturyGothic;
							font-weight: 100;
							font-size: var(--font-xxl);
							background: transparent;
							border: unset;
							color: white;
							margin-right: 13px;
							option{
								color: var(--black);
							}
						}
					}
					p{
						font-family: Jost;
						color: white;
						font-size: var(--font-xs);
						width: 80%;
						margin-bottom: unset;
						font-style: italic;
					}
				}
				&>p{
					position: absolute;
					bottom: 0;
					font-family: Jost;
					color: white;
					font-size: var(--font-xs);
					opacity: 0.8;
				}

				button{
					border: unset;
					background: transparent;
					position: absolute;
					right: 50px;
					bottom: 75px;
					svg{
						fill: white;
						width: 25px;
						height: 25px;
						transform: rotate(45deg);
					}
				}
			}
			.group-1{
				&.active{
					left: 0px;
				}
			}	
			.group-2{
				&.active{
					left: 0px;
				}
			}	
			.group-3{
				&.active{
					left: 0px;
				}
			}	
			.group-4{
				&.active{
					left: 0px;
					textarea{
						max-height: 100%;
						min-height: 300px;
						width: 100%;
					}
				}
			}
			&.activeTextare{
				&>div:nth-child(1){
					p{
						max-height: 0;
						padding: unset;
						overflow: hidden;
					}
				}
			}
		}
		.bg{
			flex: 0 0 40%;
			transition: all 0.5s ease-in-out;
			overflow: hidden;
			margin-top: -100px;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: 50% 65%;
				transform: scale(1);
				transition: all 0.5s ease-in-out;
			}
			&.bg-1{
				img{
					transform: scale(1.1);
					object-position: 50% 75%;
					object-fit: cover;
				}
			}
			&.bg-2{
				img{
					/*transform: translate(20%, 20%) scale(1.8);*/
					object-position: 25% 75%;
					object-fit: none;
				}
			}
			&.bg-3{
				img{
					/*transform: translate(-20%, 15%) scale(1.8);*/
					object-position: 65% 75%;
					object-fit: none;
				}
			}
			&.bg-4,&.bg-5{
				img{
					/*transform: translate(-20%, -20%) scale(1.8);*/
					object-position: 50% 75%;
					object-fit: none;
				}
			}
		}
		.before_start{
			position: absolute;
			bottom: 120px;
			left: 0px;
			width: 100%;
			overflow: hidden;
			animation: tutup_before 0.5s ease 1 forwards;
			animation-delay: 0.5s;
			button{
				background: transparent;
				border: unset;
				display: flex;
				position: relative;
				left: 120%;
				padding-bottom: 50px;
				padding-left: unset;
				transition: all 0.5s ease-in-out;
				h6{
					font-size: calc( var(--font-xxxl) + 9px );
					font-family: CenturyGothic;
					font-weight: 100;
					color: white;
					width: 430px;
					text-align: left;
					margin: unset;
					margin-bottom: 20px;
				}
				svg{
					fill: white;
					transform: rotate(0deg);
					width: 110px;
					height: 80px;
					position: relative;
					top: 120px;
					left: -75px;
				}
				p{
					flex: 0 0 100%;
					position: absolute;
					color: white;
					left: 0px;
					bottom: 0px;
					text-align: left;
					font-family: CenturyGothic;
					font-weight: 100;
					font-size: var(--font-l);
					margin-bottom: unset;
					white-space: nowrap;
					span{
						color: var(--pink);
						font-weight: bold;
					}
				}
			}
			&>p{
				position: absolute;
				right: -100vw;
				width: 340px;
				bottom: 0px;
				margin-bottom: unset;
				font-family: Jost;
				font-size: 18px;
				color: white;
				transition: all 0.5s ease-in-out;
			}
		}
		&.starter{
			overflow: unset;
			.input-form{
				left: -150vw;
			}
			.bg{
				flex: 0 0 80%;
				padding-bottom: 300px;
				position: relative;
				/*top: -100px;*/
				/*margin-top: 0px;*/
			}
			.input-form{
				flex: 0 0 60%;
				width: 50%;
			}
			.before_start{
				max-height: 500px;
				animation: unset;
				button{
					left: var(--gap);
				}
				p{
					right: var(--gap);
				}
			}
		}
		&:not(.starter){
			min-height: 100vh;
		}
	}
}
section.cnt-map{
	.content{
		padding: 0px var(--gap);
	}
	.tabs {
		display: flex;
		/*border-bottom: 2px solid #ddd;*/
		margin-bottom: 20px;
	}

	.tab {
		padding: 12px 24px;
		background: #f5f5f5;
		border: 1px solid #ddd;
		border-top: none;
		border-radius: 0 0 15px 15px;
		margin-right: 5px;
		cursor: pointer;
		transition: all 0.3s ease;
		font-family: Jost;
	}

	.tab:hover {
		background: #e9e9e9;
	}

	.tab.active {
		background: #DF7C9B;
		color: white;
		border-color: #DF7C9B;
	}

	.tab-content {
		display: none;
		border: 1px solid #ddd;
		border-top: none;
		margin-bottom: 0px;
		.detail{
			padding: 0px var(--gap) 20px;
			h3{
				font-family: CenturyGothic;
				font-size: var(--font-l);
				line-height: 32px;
				margin-bottom: 5px;
			}
			p{
				font-family: Jost;
				margin: unset;
				margin-bottom: 5px;
				a{
					margin-left: 10px;
				}
			}
		}
		iframe{
			width: 100%;
			height: 50vh;
			border: unset;
			position: relative;
			bottom: -5px;
		}
	}

	.tab-content.active {
		display: block;
	}
}

section.cnt-list{
	margin-top: -20px;
	.circle-gra{
		left: -40%;
		transform: translate(30%,0%);
		bottom: 0;
		top: auto;
		width: 50vw;
	}
	.content{
		padding: 0px var(--gap);
		padding-bottom: 200px;
		.cntl-header{
			h6{
				font-family: CenturyGothic;
				font-weight: 100;
				font-size: var(--font-xxl);
				line-height: calc(var(--font-xxl) + 8px);
				color: var(--gray-5);
				margin-top: unset;
				margin-bottom: 30px;
			}
		}
		.list-cnt{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 40px;
			.detail{
				flex: 0 0 calc(33.33% - 40px);
				max-width: 310px;
				/*padding: 0px 10% 20px;*/
				text-align: left;
				position: relative;
				display: flex;
				flex-direction: column;
				&.active_border{
					&::before {
						content: '';
						position: absolute;
						top: -10px;
						left: -10px;
						right: -10px;
						bottom: -10px;
						z-index: -1;
						border: 5px solid var(--pink);
						border-radius: 15px;
						animation: pulse_border 2s infinite;
					}
				}
				h4{
					font-family: CenturyGothic;
					font-size: var(--font-ml);
					line-height: 32px;
					margin-bottom: 25px;
					font-weight: 100;
					color: var(--blue-2);
					font-weight: bold;
					margin: unset;
					margin-bottom: 4px;
				}
				h3{
					font-family: CenturyGothic;
					font-size: var(--font-ml);
					line-height: calc(var(--font-ml) + 8px);
					margin-bottom: 25px;
					font-weight: 100;
					color: var(--pink-2);
					font-weight: bold;
					margin: unset;
					margin-bottom: 4px;
				}
				p{
					font-family: Jost;
					margin: unset;
					font-size: var(--font-ml);
					line-height: calc(var(--font-ml) + 8px);
					margin-bottom: 4px;
					display: flex;
					justify-content: flex-start;
					gap: 12px;
					color: var(--gray-5);
					a{
						margin-left: 0px;
						/*text-decoration: unset;*/
						color: inherit;
						display: flex;
						gap: 4px;
						svg{
							width: 15px;
							fill: #808080;
						}
					}
				}
				p.maps{
					font-family: Jost;
					margin: unset;
					font-size: var(--font-ml);
					margin-bottom: 8px;
					justify-content: space-between;
					a{
						color: inherit;
						text-decoration: unset;
						margin-left: unset;
					}
				}
				div.frame{
					flex: 1;
					display: flex;
					align-items: flex-end;
					iframe{
						width: 100%;
						border: unset;
					}
				}
			}
		}
	}
}
section.section_project_list,section.abt_project{
	.project_list{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.pl_p{
			flex: 0 0 25%;
			width: 25%;
			aspect-ratio: 3 / 4;
			/*background-size: cover;*/
			background-size: auto 120%;
			background-position: center;
			position: relative;
			overflow: hidden;
			transition: all 0.5s ease-in-out;
			a{
				position: relative;
				z-index: 2;
				width: 100%;
				height: 100%;
				display: block;
			}
			a.hover{
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				/*background: var(--pink);*/
				/*mix-blend-mode: soft-light;*/
				background: #E38CA8B2;
				svg{
					fill: white;
					/*mix-blend-mode: plus-lighter;*/
					width: 50px;
					height: 50px;
				}
			}
			p{
				font-weight: 400;
				font-size: 13px;
				line-height: 21px;
				position: absolute;
				top: 80%;
				left: 5%;
				z-index: 3;
				font-family: Jost;
				color: var(--pink-2);
				text-transform: uppercase;
				b{
					font-size: 18px;
					line-height: 21px;
					font-family: CenturyGothic;
					font-weight: 100;
					color: white;
					text-transform: capitalize;
					color: var(--gray);
				}
				span{
					font-size: 10px;
					position: relative;
					bottom: 2px;
				}
			}
			p.desc{
				text-align: right;
				right: 5%;
				left: unset;
				width: 230px;
				/*bottom: 25px;*/
				font-size: var(--font-xs);
				line-height: 17px;
			}
			&:before{
				content: "";
				width: 100%;
				height: 50%;
				position: absolute;
				bottom: 0;
				/*background: #696262;*/
				/*background: linear-gradient(to top, rgba(105, 98, 98, 0) 0%, #696262 100%);*/
				background: linear-gradient(to bottom, #1e1e1e00 0%, #1e1e1e 100%);
				opacity: 0.9;
				z-index: 1;
			}
			&:hover{
				background-size: auto 140%;
				p{
					b{
						font-weight: bold;
						color: var(--pink-2);
					}
				}
				a.hover{
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.pl_p:nth-child(4n+1){
			box-shadow: 41px 51px 68px 5px rgb(0 0 0 / 15%);
			position: relative;
			z-index: 2;
		}
		.pl_p:nth-child(4n+0) {
			box-shadow: -41px 51px 68px 5px rgb(0 0 0 / 15%);
			position: relative;
			z-index: 2;
		}
		.empty{
			min-height: 500px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #ADB9CA40;
			h5{
				font-size: var(--font-xxm);
				line-height: 21px;
				font-family: CenturyGothic;
			}
		}
	}
	.content{
		.filter{
			padding: 0px var(--gap) 50px;
			width: calc(100% - (var(--gap) * 2));
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: var(--gray-2);
            flex-wrap: wrap;
			.right{
				display: none;
				span{
					font-family: CenturyGothic;
					font-size: var(--font-xxm);
					line-height: calc(var(--font-xxm) + 8px);
					color: var(--black-2);
					margin: unset;
					margin-right: 10px;
				}
				input{
					border: unset;
					border-bottom: 1px solid #323F5180;
					font-family: CenturyGothic;
					font-size: var(--font-xxm);
					width: 250px;
					background: transparent;
				}
				&.show{
					display: flex;
				}
			}
		}
		form{
			position: relative;
			top: 0px;
			list-style: none;
			margin: 0em;
			.row{
				display: flex;
				gap: 12px;
                justify-content: space-between;
				select{
					font-family: CenturyGothic;
					background: transparent;
					color: white;
					border-radius: 5px;
					border: 1px solid white;
					padding: 4px 8px;
					cursor: pointer;
					option{
						background: #D9D9D940;
						backdrop-filter: blur(4px);
						color: var(--black-2);
					}
				}
				.select-items {
					font-size: var(--font-xxs);
					text-transform: capitalize;
					padding: unset;
					gap: 0;
					border-bottom-left-radius: 15px;
					border-bottom-right-radius: 15px;
					overflow: hidden;
					top: calc(100% - 17px);
					padding-top: 20px;
					background: var(--black-2);
					div {
						&:first-child {
							padding-top: 24px;
						}
						&:last-child {
							padding-bottom: 16px;
						}
						padding: 6px 8px;
						background: var(--black-2);
						border-color: #FFFFFF40;
						font-size: var(--font-s);
						text-transform: capitalize;
						border-width: 0px;
						border-radius: unset;
						padding-left: 16px;
					}
				}
				.select-selected{
					height: 28px;
					border: 1px solid transparent;
					background: var(--black-2);
					padding: 4px 42px 4px 21px;
					backdrop-filter: blur(4px);
					border-radius: 50px;
					display: flex;
					align-items: center;
					z-index: 100;
					position: relative;
					svg{
						position: absolute;
						top: 14px;
						right: 12px;
						transition: all 0.5s ease-in-out;
					}
					&:after{
						content: unset;
					}
					&.select-arrow-active{
						&:after{
						}
						svg{
							transform: rotate(180deg);
							top: 15px;
						}
					}
					&.ss-search{
						padding-right: 21px;
						color: white;
						svg{
                            width: 18px;
                            fill: white;
                            top: 9px;
						}
					}
				}
				button{
					border: unset;
					background: unset;
					cursor: pointer;
					padding: unset;
					svg{
						width: 28px;
						height: 28px;
					}
				}
			}
		}
	}
}
section.section_project_list{
	position: relative;
	overflow: hidden;
	.container{
	}
	.circle-gra{
		transform: translate(30%,-10%);
	}
	&.p_project{
		.header_flex{
			padding-top: 140px;
			.left{
				max-width: 720px;
				flex: 0 0 100%;
				h5{
					margin-bottom: 20px;
					span{
						color: var(--pink);
					}
				}
				p{
					color: var(--stale-blue);
				}
			}
		}
		.head_filter{
			padding-top: 80px;
		}
	}
	.head_filter{
		background: var(--gray-2);
		.list{
			display: flex;
			gap: 60px;
			h5{
				font-family: CenturyGothic;
				font-weight: bold;
				font-size: var(--font-m);
				line-height: calc(var(--font-m) + 8px);
				margin: unset;
				margin-bottom: 20px;
				color: var(--black-2);
			}
			p{
				font-family: Jost;
				font-weight: 400;
				font-size: var(--font-xxm);
				line-height: calc(var(--font-xxm) + 8px);
				margin: unset;
				margin-bottom: 12px;
				color: var(--gray-5);
			}
		}
	}
}
section.gap_image{
	.container{
		img{
			width: 100%;
		}
	}
	.content{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 20px;
		padding: 50px var(--gap) 50px;
		/*padding-bottom: 200px;*/
		position: relative;
		.circle-gra{
			right: auto;
			left: 0;
			transform: translate(-40%,-10%);
		}
		.left{
			max-width: 400px;
			h5{
				font-family: CenturyGothic;
				font-weight: Bold;
				font-size: calc(var(--font-xxl) - 3px);
				line-height: calc(var(--font-xxl) - 3px + 8px);
				margin: unset;
				color: var(--stale-blue);
				margin-bottom: 8px;
				span{
					color: var(--pink);
				}
			}
		}
		.right{
			max-width: 400px;
			h5{
				font-family: CenturyGothic;
				font-weight: bold;
				font-size: var(--font-xl);
				line-height: calc(var(--font-xl) + 8px);
				margin: unset;
				margin-bottom: 20px;
				color: var(--black-2);
			}
			p{
				font-family: Jost;
				font-weight: 400;
				font-size: var(--font-m);
				line-height: calc(var(--font-m) + 8px);
				margin: unset;
				margin-bottom: 12px;
				color: var(--gray-5);
			}
		}
	}
}
section.abt_project{
	.header_flex{
		.left{

		}
		.right{
			flex: 0 0 360px;
		}
	}
	.header2{
		.left{
			flex: 1;
			h5{
				span{
					color: var(--pink);
				}
			}
		}
	}
	.pl_p{
		p{
			b{
				color: white !important;
			}
		}
	}
}
section.leadership{
	.content{
		display: flex;
		padding: 0px 20%;
		.text_left{
			padding-left: var(--gap);
			padding-top: 100px;
			flex: 0 0 40%;
			width: 50%;
			h5{
				font-family: CenturyGothic;
				font-weight: bold;
				font-size: var(--font-xl);
				line-height: 40px;
				margin-bottom: unset;
				margin-top: unset;
				color: var(--black);
				margin-bottom: 12px;
			}
			p{
				font-family: Jost;
				font-size: var(--font-l);
				line-height: 40px;
				margin-top: unset;
				color: var(--black);
			}
		}
		.img{
			padding-top: 100px;
			flex: 0 0 50%;
			width: 50%;
			padding-bottom: 100px;
			img{
				height: auto;
				width: 80%;
				margin-left: 20%;
				aspect-ratio: 9 / 12;
				object-fit: cover;
				filter: grayscale(100%);
				position: sticky;
				top: 20%;
				animation: smoothSticky 0.5s ease-out;
				&:hover{
					filter: grayscale(0%);
				}
			}
		}
	}
}
.swipe-indicator{
	/*display: none;*/
	position: absolute;
	top: 0px;
	z-index: 3;
	aspect-ratio: 4 / 5;
	width: 100%;
	left: calc(0 * var(--gap));
	font-size: 27px;
	font-weight: 100;
	font-family: CenturyGothic;
	color: white;
	display: flex;
	justify-content: flex-end;
	&>div{
		padding: 25px;
		width: 40%;
		background: linear-gradient(to right, #69626200 30%, #716b6bb0 100%);
		display: flex;
		flex-direction: column;
		justify-content: center;
        align-items: flex-end;
		svg{
			fill: white;
			height: 40px;
			transform: rotate(180deg);
		}
	}
}
section.teams{
	.content{
		.listteams{
			display: flex;
			align-items: stretch;
			gap: 3px;
			padding: 10px;
			padding-left: 65px;
			justify-content: flex-start;
			position: relative;
			&:last-child{
				padding-top: unset;
			}
			.nameCountry{
				position: absolute;
				bottom: 50%;
				left: -40px;
				transform: rotate(270deg) translateX(-20%);
				font-family: cursive;
				font-size: var(--font-l);
				color: var(--black);
				font-family: CenturyGothic;
				a{
					color: inherit;
					text-decoration: unset;
				}
			}
			.item {
				/*flex: 1;*/
				flex: 1;
				/*width: 25%;*/
				max-width: 16%;
				height: 360px;
				transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				position: relative;
				cursor: pointer;
				.intro{
					position: absolute;
					bottom: 0;
					display: none;
					text-align: center;
					padding: 150px 20px 20px;
					width: calc(100% - 40px);

					background: linear-gradient(to bottom, #69626200 30%, #000000 100%);
					h6{
						color: white;
						font-family: CenturyGothic;
						font-size: var(--font-l);
						margin: unset;
					}
					p{
						color: white;
						font-family: Jost;
						font-size: var(--font-xm);
						margin: unset;
					}
				}

				img {
					width: 100%;
					height: 100%;
					filter: grayscale(100%);
					object-fit: cover;
					transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				}

				&:hover {
					flex: 0 0 30%;
					max-width: 30%;
					.intro{
						display: block;
					}

					img {
						aspect-ratio: unset;
						filter: grayscale(0%);
					}
				}
			}
			.item-find{
				/*padding: 20px;*/
				flex: 1;
				display: none;
				align-items: center;
				h6{
					margin: 20px;
					font-family: CenturyGothic;
					font-weight: 100;
					font-size: var(--font-xl);
					color: var(--pink);
				}
			}
			&.list3{
				padding-left: 135px;
				padding-right: 0px;
				.nameCountry{
					transform: rotate(90deg) translateX(-20%);
					bottom: 40%;
					right: -72px;
					left: unset;
				}
				.item{
					/*height: 500px;*/
					width: 33.33%;
					max-width: 33.33%;
					height: 320px;
					img{
						object-position: center;
					}
				}

				.item:hover {
					flex: 0 0 40%;
					width: 40%;
					max-width: 40%;
				}
			}
		}
		.blog-header{
			padding-top: 70px !important;
			&>h5{
				font-size: var(--font-xxl);
				margin-bottom: 30px;
				padding-left: unset;
			}
			&>p{
				font-family: CenturyGothic;
				font-weight: 100;
				font-size: calc(var(--font-xm) + 1px);
				line-height: calc(var(--font-xm) + 9px);
				padding-left: unset;
				color: gray;
			}
			a,button{
				margin-top: 20px;
				/*margin-left: 10%;*/
				float: right;
				margin-right: -20px;
				&>div:before{
					/*background: var(--pink-2);*/
				}
				&:hover{
					border-color: var(--pink-2);
					span{
						color: var(--black-2);
					}
				}
			}
		}
	}
	&.blog-list{
		.content{
			display: flex;
			flex-wrap: wrap;
			.blog-header{
				flex: 0 0 100%;
				padding-top: 0px;
			}
			.listteams{
				flex-wrap: wrap;
				.nameCountry{
					a{
						font-size: var(--font-xxm);
					}
				}
				.item{
					height: 160px;
				}
				&.list3{
					padding-left: 0%;
					padding-right: 35px;
					.nameCountry{
						right: -40px;
					}
				}
			}
		}
		.listteams{
			flex-wrap: wrap;
			.item{
				height: 160px !important;
				flex: 0 0 calc(33.33% - 7px);
				max-width: 100%;
				.intro {
					h6 {
						font-size: var(--font-l);
					}
					p{
						font-size: var(--font-ml);
						font-family: Jost;
						color: var(--pink);
					}
				}
			}
		}
	}
	&.team-home{
		background: white;
		padding-bottom: 50px;
		.content{
			padding-left: var(--gap);
			.blog-header{
				flex: 0 0 300px;
			}
		}
	}
}
section.teams_v2{
	.listteams{
		display: flex;
		position: relative;
		background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
		.nameCountry{
			position: absolute;
			z-index: 2;
			font-family: CenturyGothic;
			font-weight: Bold;
			font-size: var(--font-xxl);
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			color: white;
		}
		.conlist{
			width: 100%;
			overflow-x: hidden;
			display: flex;
            flex-wrap: nowrap;
		    /*overscroll-behavior: none;*/
	    	/*-webkit-overflow-scrolling: auto;*/
            /*height: auto;*/
            /*max-height: none;*/
		}
		.swipe-indicator{
    		aspect-ratio: 3 / 4;
    		max-height: 0px;
    		top: 0;
    		overflow: hidden;
		}
		.item {
			flex: 0 0 100%;
			max-width: 100%;
			height: auto;
			aspect-ratio: 3/4;
			transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			position: relative;
			cursor: pointer;
			&:before{
				content: "";
				background: #ECACC159;
				/*mix-blend-mode: multiply;*/
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				/*opacity: 0.7;*/
				position: absolute;
				transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}
			.intro{
				position: absolute;
				bottom: 0;
				display: none;
				text-align: center;
				padding: 150px 20px 20px;
				width: calc(100% - 40px);

				background: linear-gradient(to bottom, #69626200 30%, #716b6bb0 100%);
				h6{
					color: white;
					font-family: CenturyGothic;
					font-size: var(--font-l);
					margin: unset;
					margin-bottom: 12px;
				}
				p{
					color: white;
					font-family: Jost;
					font-size: var(--font-xm);
					margin: unset;
				}
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
				transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				/*filter: grayscale(100%);*/
				mix-blend-mode: luminosity;
			}
		}
		.item-find{
			/*padding: 20px;*/
			flex: 1;
			display: flex;
			align-items: center;
			position: relative;
			&:before{
				content: "";
				background: var(--pink);
				mix-blend-mode: multiply;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0.7;
				position: absolute;
				transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}
			h6{
				margin: 20px;
				font-family: CenturyGothic;
				font-weight: 100;
				font-size: var(--font-xl);
				color: var(--pink);
			}
		}
		&.active{
			.conlist{
				width: 100%;
				overflow-x: scroll;
				&::-webkit-scrollbar {
					display: none;
				}
			}
			.swipe-indicator{
    			max-height: 1000px;
			}
			.nameCountry{
				display: none;
			}
			.item {
				&:before{
					/*background: transparent;*/
				}
				img{
					filter: grayscale(0%);
					mix-blend-mode: multiply;
				}

				&.active {
					/*flex: 0 0 30%;*/
					/*max-width: 30%;*/
					&:before{
						background: transparent;
					}
					.intro{
						display: block;
					}
					&:before{
						content: unset;
					}
					img {
						aspect-ratio: unset;
						filter: grayscale(0%) !important;
						mix-blend-mode: unset;
					}
				}
			}
			.item-find{
				&:before{
					background: transparent;
				}
			}
		}
	}
	.all_width{
		.item{
			/*max-width: 33.33%;*/
			/*height: 450px;*/
			&:hover {
				/*flex: 0 0 40% !important;*/
				/*max-width: 40% !important;*/
			}
		}
	}
}
#map-dotted{
	min-height: 750px;
	svg{
		height: 100%;
		width: 150%;
		/* max-width: 100vw; */
		position: relative;
		left: -10%;
		circle{
			&.blink_map {
				animation: an_blink_map 2s infinite;
				transform-origin: center;
				transform-box: fill-box;
			}

		}
	}
	&.contact{
		min-height: 1150px;
		svg{
			height: 500px;
			width: 100%;
			transform: scale(2) translateY(-15%);
			max-width: 100vw;
			position: absolute;
			bottom: -50px;
			left: 0;
		}
	}
}
section.lens{
	.container{
		.content{
			min-height: 600px;
			background-size: cover;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			position: relative;
			a{
				text-decoration: unset;
				position: relative;
				z-index: 2;
			}
			h5{
				margin: unset;
				color: var(--stale-blue);
				font-family: CenturyGothic;
				font-size: var(--font-xxxl);
				font-weight: 100;
				position: relative;
				z-index: 1;
				display: flex;
				flex-direction: column;
				font-size: 54px !important;
				padding: 0px var(--gap);
				span{
					font-weight: bold;
				}
				svg{
					margin-left: 10px;
					width: 30px;
					height: 30px;
					fill: var(--pink-2);
					transform: rotate(45deg);
				}
			}
			.img-berjalan{
				position: absolute;
				z-index: 0;
				width: 100%;
				height: 100%;
				left: 50%;
				transform: translateX(-50%);
				overflow: hidden;
				transition: all 0.5s ease-in-out;
				display: flex;
				flex-wrap: wrap;
				div{
					display: flex;
					height: 300px;
					img{
						height: 300px;
						display: block;
						filter: grayscale(100%);
						/*opacity: 0.7;*/
						&:hover{
							filter: grayscale(0%);
							opacity: 1;
						}
					}
				}
			}
			.bg {
				background: #EBEDF199;
				position: absolute;
				left: 50%;
				top: 50%;
				width: 150vw;
				height: 150vw;
				transform: translate(-50%, -50%);
				transition: all 0.5s ease-in-out;
				border-radius: 50%;
			}
			.lens_hover{
				position: absolute;
				z-index: 4;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: none;
				background: #EBEDF199;
				img{
					height: 450px;
					/*aspect-ratio: 4/3;*/
				}
				&.active{
					display: flex;
					justify-content: center;
				}
				.navi{
					/*width: 700px;*/
					height: 100%;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					align-items: center;
					justify-content: space-between;
					button{
						background: transparent;
						border: unset;
						cursor: pointer;
						position: absolute;
						svg{
							fill: white;
							height: 42px;
							aspect-ratio: 1/2;
							top: 0;
						}
						&.nav_right{
							/*position: relative;*/
							right: 20px;
							svg{
								transform: scale(-1);
							}
						}
						&.nav_left{
							left: 40px;
						}
					}
				}
			}
			&.active{
				.img-berjalan{
					width: 100%;
					height: 100%;
					/*border-radius: 0%;*/
				}
				.bg{
					width: 0;
					height: 0;
				}
				&>a{
					display: none;
				}
			}
		}
		.lens_hover{
			.navi{
				left: 0% !important;
				transform: translateX(-0%) !important;
				img{
					width: 100%;
					height: auto;
				}
			}
		}
	}
}
section.feed_ig{
	overflow: hidden;
	.listfeed{
		display: flex;
		.tampil{
			flex: 0 0 25%;
			iframe{
				margin-bottom: unset !important;
				width: 100%;
			}
			.instagram-media {
				/* Sesuaikan dengan tinggi yang diinginkan */
				min-height: 540px; 
			}

			.instagram-media > div {
				position: relative;
			}

			/* Sembunyikan semua elemen kecuali gambar */
			.instagram-media > div > *:not(:last-child) {
				display: none !important;
			}

			/* Tampilkan hanya container gambar */
			.instagram-media > div > div:last-child {
				display: block !important;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			/* Pastikan gambar mengisi container */
			.instagram-media img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}
section.abt-sertificat{
	padding: 40px var(--gap);
	h5{
		text-align: center;
		font-size: var(--font-xl);
		line-height: 41px;
		font-family: CenturyGothic;
	}
	.list-certi{
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 20px;
		div{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0px 30px;
			img{
				width: 150px;
				margin-bottom: 12px;
			}
			h6{
				font-size: var(--font-xm);
				line-height: 31px;
				font-family: CenturyGothic;
				margin: unset;
				color: rgb(223 124 155);
				margin-bottom: 12px;
			}
			p{
				font-family: Jost;
				font-size: var(--font-xs);
				line-height: 17px;
				margin: unset;
			}
		}
	}
}
section.abt_award{
	padding-bottom: 0;
	.content{
		.flex{
			display: flex;
			.left{
				background: var(--pink);
				padding: 60px var(--gap) 60px var(--gap);
				flex: 0 0 calc(30% - 70px);
				display: flex;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				h5{
					font-family: CenturyGothic;
					font-weight: Bold;
					font-size: var(--font-xxl);
					line-height: calc(var(--font-xxl) + 8px);
					margin: unset;
					color: white;
					margin-bottom: 14px;
					span{
						display: block;
						font-weight: 100;
					}
				}
			}
			.txt{
				h6{
					font-family: CenturyGothic;
					font-weight: bold;
					font-size: var(--font-m);
					line-height: calc(var(--font-m) + 8px);
					margin: unset;
					width: 90%;
					color: white;
					margin-bottom: 32px;
				}
				p{
					font-family: Jost;
					font-weight: 100;
					font-size: var(--font-ml);
					line-height: calc(var(--font-ml) + 8px);
					margin: unset;
					width: 90%;
					color: white;
				}
			}
			.right{
				background: var(--pink-3);
				flex: 1;
				padding: 90px var(--gap) 60px 70px;
				overflow: hidden;
				.txt{
					h6{
						margin-bottom: 12px;
					}
					p{
						color: var(--black);
					}
				}
				.list_image{
					margin-top: 60px;
					display: flex;
					gap: 200px;
					transition: all 0.5s ease-in-out;
					&>div{
						flex: 0 0 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						img{
							width: 80%;
							/*height: fit-content;*/
						}
					}
					div.award_frs{
						display: flex;
						gap: 20px;
						img{
							flex: 0 0 calc(50% - 20px);
							width: calc(50% - 20px);
						}
					}
					div.award{
						display: flex;
						gap: 20px;
						flex-direction: row;
						flex-wrap: wrap;
						div{
							flex: 0 0 calc(50% - 20px);
							&.wrd{
								text-align: center;
								position: relative;
								cursor: pointer;
								display: flex;
								align-items: center;
								justify-content: space-between;
								flex: 0 0 calc(95% - 20px);
								img{
									/*height: 70px;*/
									width: 45px;
									&._right{
										transform: scaleX(-1);
									}
								}
								p{
									font-family: CenturyGothic;
									font-weight: 400;
									font-size: var(--font-m);
									line-height: calc(var(--font-m) + 4px);
									margin: unset;
									color: var(--black);
									padding: 0px 5px;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
									b{
										font-size: var(--font-m);
										line-height: calc(var(--font-m) + 4px);
										display: block;
										margin-bottom: 8px;
									}
									span{
										font-size: var(--font-m);
										line-height: calc(var(--font-m) + 4px);
										color: var(--pink);
										display: block;
										margin-bottom: 8px;
									}
								}
							}
						}
					}
					div.serti{
						display: flex;
						gap: 20px;
						flex-direction: row;
						flex-wrap: wrap;
						div{
							flex: 0 0 calc(33.33% - 20px);
							&.crt{
								text-align: center;
								position: relative;
								cursor: pointer;
								display: flex;
								align-items: center;
								justify-content: center;
								flex-direction: column;
								padding: 10px;
								background: white;
								img{
									/*height: 150px;*/
									width: auto;
									margin-bottom: 10px;
								}
								p{
									font-family: CenturyGothic;
									font-weight: 400;
									font-size: var(--font-s);
									line-height: 17px;
									margin: unset;
									color: var(--black);
									padding: 0px 5px;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
									b{
										font-size: var(--font-xxm);
										display: block;
										margin-bottom: 8px;
										color: var(--stale-blue);
									}
								}
							}
						}
					}
				}
				.navi{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 50px;
					button{
						background: transparent;
						border: unset;
						cursor: pointer;
						svg{
							fill: black;
							height: 42px;
							aspect-ratio: 1/2;
							top: 0;
						}
						&.nav_right{
							position: relative;
							svg{
								transform: scale(-1);
							}
						}
					}
					h5{
						font-family: Jost;
						font-weight: 400;
						font-size: var(--font-m);
						line-height: calc(var(--font-m) + 8px);
						margin: unset;
						padding: 0px 20px;
						color: var(--black);
					}
				}
			}
		}
	}
}
section.abt-ourbrand{
	padding: 40px var(--gap);
	img{
		width: 100%;
	}
}

@keyframes slideFromTopPrev {
	0% {
		transform: translateY(0vh);
		opacity: 1;
	}
	100% {
		transform: translateY(40vh);
		opacity: 1;
	}
}
@keyframes slideFromBottomPrev {
	0% {
		transform: translateY(0vh);
		opacity: 1;
	}
	100% {
		transform: translateY(-40vh);
		opacity: 1;
	}
}

@keyframes slideFromBottom {
	0% {
		transform: translateY(100vh);
		opacity: 0.5;
	}
	100% {
		transform: translateY(0vh);
		opacity: 1;
	}
}
@keyframes slideFromTop {
	0% {
		transform: translateY(-100vh);
		opacity: 0.5;
	}
	100% {
		transform: translateY(0vh);
		opacity: 1;
	}
}
@keyframes smoothSticky {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes scroll {
	0% { transform: translateX(-50%) translateY(0); opacity: 1; }
	100% { transform: translateX(-50%) translateY(12px); opacity: 0; }
}
@keyframes scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-100% - 30px));
	}
}

@keyframes pulse_border {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	50% {
		transform: scale(1.05);
		opacity: 0.4;
	}
	100% {
		transform: scale(1);
		opacity: 0.7;
	}
}
@keyframes tutup_before {
	0% {
		max-height: 500px;
	}
	100% {
		max-height: 0px;
	}
}
@keyframes typing {
	from { opacity: 0; }
	to { opacity: 1; } /* 6 karakter/words */
}

@keyframes spin-slow {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes brand-to-left {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
@keyframes brand-to-right {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0%);
	}
}
@keyframes foo_hover {
	0% {
		width: 0%;
		height: 0%;
		left: 50%;
		top: 50%;
	}
	70% {
		left: -10%;
		top: -10%;
		width: 120%;
		height: 120%;
	}
	100% {
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
	}
}
@keyframes blink_map {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.6);
		opacity: 0.2;
	}
}

@keyframes pulseAnimate{
	100%{
		opacity: 0;
		transform: scale(2);
	}
}

@keyframes an_blink_map {
	0%,100% {
		r: 0.3;
		fill-opacity: 1;
		stroke: #DF7C9B;
		stroke-width: 1px;
	}
	50% {
		r: 1;
		stroke: #DF7C9B66;
		stroke-width: 4px;
		fill-opacity: 1;
	}
}

section.project_detail{
	.content{
		/* Main Container */
		.scroll-container {
			height: 100vh;
			display: flex;
			position: relative;
		}

		/* Left Side - Photos */
		.photo-side {
			flex: 1;
			height: 100vh;
			overflow: hidden;
			position: relative;
		}

		.photo-track {
			height: 100vh;
			width: 100vw;
			display: flex;
			flex-wrap: nowrap;
			transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		}

		.photo-slide {
			/*height: 100vh;*/
			width: 100%;
			flex: 0 0 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			/*padding: 2rem;*/
			/*position: absolute;*/
			z-index: 0;
			background: black;
			img{
				position: relative;
				z-index: 0;
			}
			.youtube-content{
				width: 100%;
				iframe{
					width: 100%;
					aspect-ratio: 12 / 8;
				}
			}
			&.prev{
				z-index: 1;
				img{
					position: relative;
					z-index: 1;
				}
				&.prev-up{
					animation: slideFromTopPrev 1.5s ease-out forwards;
				}
				&.prev-down{
					animation: slideFromBottomPrev 1.5s ease-out forwards;
				}
			}
			&.active{
				z-index: 2;
				img{
					position: relative;
					z-index: 2;
				}
				&.up{
					animation: slideFromTop 1s ease-out forwards;
				}
				&.down{
					animation: slideFromBottom 1s ease-out forwards;
				}
			}
		}

		.photo-content {
			width: 100%;
			height: 100vh;
			border-radius: 0px;
			overflow: hidden;
			position: relative;
			/*box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);*/
			display: flex;
			align-items: center;
			background: black;
		}

		.photo-content img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		/* Right Side - Descriptions */
		.description-side {
			flex: 1;
			height: 100vh;
			overflow: hidden;
			position: relative;
			background: #E0E1D1;
		}

		.description-track {
			height: 300vh; /* 3 sections */
			transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		}

		.description-slide {
			height: calc(100vh - 4rem);
			display: flex;
			align-items: flex-start;
			/*justify-content: center;*/
			padding: 2rem 2rem;
			h2{
				margin-top: unset;
			}
		}

		.description-content {
			max-width: 600px;
			padding-right: 40px;
		}

		.slide-number {
			font-size: 0.9rem;
			color: #666;
			margin-bottom: 1rem;
			text-transform: uppercase;
			letter-spacing: 3px;
		}

		.slide-title {
			font-size: var(--font-xxxl);
			font-weight: 100;
			margin-bottom: 2rem;
			line-height: 1.1;
			color: var(--black-2);
			font-family: CenturyGothic;
		}

		.slide-text {
			font-size: var(--font-xxm);
			line-height: 1.8;
			color: var(--black-2);
			margin-bottom: 2rem;
			font-family: Jost;
		}

		.slide-cta {
			display: inline-block;
			padding: 1rem 2rem;
			border: 2px solid #fff;
			color: #fff;
			text-decoration: none;
			border-radius: 50px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 2px;
			transition: all 0.3s ease;
		}

		.slide-cta:hover {
			background: #fff;
			color: #000;
		}

		/* Navigation Dots */
		.nav-dots {
			position: fixed;
			left: 3rem;
			top: auto;
			bottom: 1rem;
			z-index: 100;
			display: flex;
			width: 40%;
		}

		.dot {
			flex: 1;
			height: 12px;
			background: rgba(0, 0, 0, 0.3);
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
		}

		.dot.active {
			background: #000;
			/*transform: scale(1.2);*/
		}

		.dot::after {
			content: '';
			position: absolute;
			top: -8px;
			left: -8px;
			right: -8px;
			bottom: -8px;
			border: 1px solid rgba(0, 0, 0, 0.3);
			border-radius: 50%;
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.dot:hover::after {
			opacity: 1;
		}

		/* Scroll Indicator */
		.scroll-indicator {
			position: fixed;
			left: 50%;
			bottom: 2rem;
			transform: translateX(-50%);
			color: rgba(0, 0, 0, 0.7);
			font-size: 0.9rem;
			text-transform: uppercase;
			letter-spacing: 2px;
			z-index: 100;
		}

		.mouse {
			width: 24px;
			height: 40px;
			border: 2px solid rgba(255, 255, 255, 0.7);
			border-radius: 12px;
			margin: 0 auto 0.5rem;
			position: relative;
		}

		.wheel {
			width: 4px;
			height: 8px;
			background: rgba(255, 255, 255, 0.7);
			border-radius: 2px;
			position: absolute;
			top: 8px;
			left: 50%;
			transform: translateX(-50%);
			animation: scroll 2s infinite;
		}


		/* Progress Bar */
		.progress-bar {
			position: fixed;
			top: auto;
			bottom: 2rem;
			left: 1rem;
			width: calc(50% - 92px);
			height: 3px;
			background: rgba(255, 255, 255, 0.1);
			z-index: 1000;
			margin-left: 30px;
			margin-right: 30px;
			h5{
				position: absolute;
				font-family: Jost;
				font-size: var(--font-s);
				font-weight: 100;
				color: white;
				margin: unset;
				top: -10px;
				&.currentSlide{
					left: -20px;
				}
				&.total{
					right: -35px;
				}
			}
		}

		.progress {
			height: 100%;
			background: #fff;
			width: 0%;
			transition: width 0.3s ease;
		}

		.close-btn {
			width: 50px;
			height: 50px;
			background: transparent;
			border: none;
			border-radius: 50%;
			cursor: pointer;
			transition: all 0.3s ease;
			position: absolute;
			top: 30px;
			right: 30px;
			z-index: 10;
		}

		.close-btn:hover {
			background: transparent;
			transform: scale(1.1);
		}

		.close-btn::before,
		.close-btn::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 40px;
			height: 2px;
			background: black;
		}

		.close-btn::before {
			transform: translate(-50%, -50%) rotate(45deg);
		}

		.close-btn::after {
			transform: translate(-50%, -50%) rotate(-45deg);
		}
	}
}
section.project_detail2_header{
	/*height: 100vh;*/
	background-size: cover;
	background-position: center;
	.header_flex{
		.breadcrumb{
			padding-top: 100px;
		}
		.left{
			flex: 0 0 100%;
			padding-bottom: 60px;
		}
	}
	.content{
		padding: 60px var(--gap) 0px;
	}
	.poin{
		flex: 0 0 100%;
		table{
			border-spacing: 0 4px;
			tbody{
				display: flex;
				flex-wrap: wrap;
			}
			tr{
				flex: 0 0 100%;
				td{
					color: var(--black-2);
					&:nth-child(1){
						width: 150px;
					}
					b{
						font-family: CenturyGothic;
					}
					p{
						margin: unset;
						font-family: Jost;
						color: var(--pink);
					}
				}
			}
		}
	}
	.header_img{
		img{
			width: 100%;
		}
	}
}
section.project_detail2_body{
	/*padding-bottom: 120px;*/
	.content{
		.top{
			padding: 0px var(--gap);
			padding-top: 30px;
			flex: 0 0 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.left{
				/*margin-top: 20px;*/
				span{
					font-family: Jost;
					color: var(--black-2);
				}
				h5{
					font-size: var(--font-xm);
					font-family: CenturyGothic;
					margin: unset;
					color: var(--black-2);
				}
				p{
					font-family: Jost;
					max-width: 500px;
					color: var(--black-2);
					font-size: var(--font-xxm);
				}
				div{
					display: flex;
					gap: 70px;
					width: 100%;
					justify-content: space-between;
					margin-bottom: 80px;
				}
			}
		}
		.gallery{
			padding-top: 30px;
			.col-6{
				flex: 0 0 calc(50%);
			}
			.col-12{
				flex: 0 0 100%;
			}
			.row{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				/*gap: 12px;*/
				/*margin-bottom: 12px;*/
				&>div{
					/*display: flex;*/
					/*flex-direction: column;*/
					/*justify-content: center;*/
					p{
                		font-family: Jost;
						color: var(--black-2);
					}
				}
				&>div.desc{
					font-family: Jost;
					/*max-width: 500px;*/
					color: var(--black-2);
					p{
						max-width: 400px;
						margin: unset;
						font-size: var(--font-xxm);
						line-height: calc(var(--font-xxm) + 8px);
					}
				}
				&>div.desc:nth-child(2){
					padding: 60px var(--gap) 60px 60px;
					flex: 0 0 calc(50% - var(--gap) - 60px);
				}
				&>div.desc:nth-child(1){
					padding: 60px 60px 60px var(--gap);
					flex: 0 0 calc(50% - var(--gap) - 60px);
				}
			}
			.row-bg{
				background: #F1F5F9;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
			.row-text{
				flex: 0 0 calc(100% - (var(--gap) * 2));
				background: #F1F5F9;
                display: flex;
                flex-direction: row;
                justify-content: center;
                padding: 30px var(--gap);
                p{
                	font-family: Jost;
					font-size: var(--font-xxm);
					line-height: calc(var(--font-xxm) + 8px);
					text-align: center;
                }
                &.huge{
                	p{
                		font-family: CenturyGothic;
                		font-weight: bold;
						font-size: var(--font-m);
						line-height: calc(var(--font-m) + 8px);
						text-align: center;
                	}
                }
			}
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}
.ani-d-1{
	--animate-duration: 1.3s;
}
.ani-d-2{
	--animate-duration: 1.7s;
}
.ani-d-3{
	--animate-duration: 2s;
}
section.abt-header{
	background: url('../AI-Orsted-01-03-resize-left-vigneting.jpg');
	background-size: cover;
	background-position: center;
	.content{
		padding: 0px var(--gap);
		height: 100vh;
		display: flex;
		align-items: center;
		h5{
			color: white;
			font-family: CenturyGothic;
			font-weight: bold;
			font-size: var(--font-l);
			line-height: 40px;

			margin: unset;
		}
		p{
			color: white;
			font-family: Jost;
			font-weight: 400;
			font-size: var(--font-xxm);
			line-height: 25px;

			margin: unset;
			max-width: 500px;
		}
	}
}
section.gallery_video{
	background: #F1F5F9;
	.container{
		.content{
			padding: 80px var(--gap);
			.video{
				iframe{
					border-radius: 10px;
					width: 100%;
					aspect-ratio: 16/9;
				}
			}
			h5{
				font-family: CenturyGothic;
				font-weight: Bold;
				font-size: var(--font-l);
				line-height: calc(var(--font-l) + 8px);
				margin: unset;
				color: var(--black-2);
				margin-bottom: 24px;
				span{
					color: var(--pink);
				}
			}
			p{
				font-family: Jost;
				font-weight: 400;
				font-size: var(--font-xm);
				line-height: calc(var(--font-xm) + 8px);
				margin: unset;
				margin-top: 16px;
				color: var(--blue-2);
			}
		}
	}
}
section.abt2-header{
	overflow: hidden;
	.circle-gra{
		transform: translate(20%,-20%);
	}
	#map-dotted{
		min-height: 250px;
	}
	.content{
		padding: 140px var(--gap) 50px;
		.top{
			position: relative;
			z-index: 2;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			.left{
				flex: 0 0 50%;
				padding-right: unset;
				padding-top: 20px;
				h4{
					font-family: CenturyGothic;
					font-weight: 100;
	                font-size: calc(var(--font-xm) + 2px);
	                line-height: calc(var(--font-xm) + 2px + 8px);
					margin-top: unset;
					margin-bottom: 24px;
					max-width: 82%;
					color: var(--stale-blue);
				}
				h5{
					font-family: CenturyGothic;
					font-weight: bold;
	                font-size: calc(var(--font-xxl) + 2px);
	                line-height: calc(var(--font-xxl) + 2px + 8px);
					margin-bottom: 15px;
					margin-top: unset;
					color: var(--black-2);
					span{
						color: var(--pink);
					}
				}
				p{
					font-family: Jost;
					font-size: calc(var(--font-l) - 2px);
					line-height: calc(var(--font-l) + 6px);
					color: var(--stale-blue);
					&:nth-child(4){
						opacity: 0.9;
					}
					&:nth-child(5){
						opacity: 0.8;
					}
				}
			}
			.right{
				flex: 0 0 40%;
				padding-top: 50px;
				.lists{
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-between;
					gap: 23px;
					h5{
						flex: 0 0 130px;
						font-family: CenturyGothic;
						margin: unset;
						text-align: right;
						padding-right: 30px;

						font-size: 69px;
						line-height: 77px;
						bottom: -5px;
						span{
							font-weight: 100;
							font-size: var(--font-xxl);
							position: relative;
							top: -10px;
							right: -2px;
							color: var(--gray-4);
						}
						&.black{
							color: var(--stale-blue);
						}
						&.pink{
							color: #E289A5;
						}
						&:has(span) {
							position: relative;
							right: -25px;
						}
					}
					div{
						display: flex;
						color: var(--stale-blue);
						align-items: center;
						p{
							font-family: Jost;
							font-weight: 400;

							margin: unset;
							margin-left: 15px;

							display: flex;
							flex-direction: column;
							font-size: 21px;
							line-height: 29px;
							b{
								font-family: CenturyGothic;
								font-weight: bold;
								font-size: 24px;
								line-height: 32px;
							}
						}
						&.slash{
							display: block;
							height: auto;
							width: 1px;
							border-right: 1px solid white;
						}
					}
				}
			}
		}
		.bottom{
			position: relative;
			z-index: 1;
			margin-top: -100px;
			.txt1{
				font-family: Jost;
				font-size: var(--font-xxm);
				line-height: calc(var(--font-xxm) + 8px);
				color: var(--stale-blue);
				width: 100%;
				p{
					margin-top: unset;
					margin-bottom: 50px;
					font-size: calc(var(--font-l) - 2px);
					line-height: calc(var(--font-l) + 6px);
					width: 100%;
				}
			}
			hr{
				width: 40%;
				margin-left: unset;
			}
			.txt2{
				h5{
					font-family: CenturyGothic;
					font-weight: Bold;
					font-size: calc(var(--font-xl) + 2px);
					line-height: calc(var(--font-xl) + 10px);
					color: var(--stale-blue);
					margin-bottom: unset;
					margin-top: 30px;
					span{
						color: var(--pink);
					}
				}
				p{
					width: 100%;
					font-family: Jost;
					font-size: calc(var(--font-l) - 2px);
					line-height: calc(var(--font-l) + 6px);
					color: var(--stale-blue);
				}
			}
		}
	}
	.content_detail{
        padding: 0px var(--gap) 0px;
        display: flex;
        flex-direction: column;
        gap: 30px;
        .detail-icon{
            flex: 0 0 40%;
            margin-bottom: unset;
            img{
            	width: 100%;
            }
        }
        .detail-content{
			padding-left: 0px;
			p,h6,h5{
				margin: unset;
			}
			h6,h5{
				font-family: CenturyGothic;
				font-weight: 100;
			}
			p{
				font-family: Jost;
				font-size: var(--font-s);
			}
			.border{
				margin: 0px 0px 20px;
				h5{
					font-size: var(--font-xxl);
					font-weight: bold;
					color: var(--stale-blue);
					line-height: normal;
				}
				p{
					font-size: var(--font-l);
					&#phone,&#email{
						font-size: var(--font-xm);
						span{
							color: var(--gray-5);
						}
					}
				}
				#title{
					margin-bottom: 30px;
				}
				.list_icon{
					display: flex;
					gap: 10px;
					margin-top: 20px;
					a{
						border-radius: 50px;
						background: var(--pink);
						height: 30px;
						width: 30px;
						display: flex;
                        align-items: center;
                        justify-content: center;
					}
					svg{
						width: 15px;
						fill: white;
					}
				}
			}
			h6{
				font-size: var(--font-xm);
				color: var(--pink);
			}
		}
	}
	.bg{
		margin-left: calc(-1 * var(--gap));
		margin-right: calc(-1 * var(--gap));
		margin-top: -100%;
		margin-bottom: unset;
		position: relative;
		.reg_presence{
			left: var(--gap);
			top: 0%;
			transform: translateY(-150%);
			text-align: left;
			max-width: 430px;
			z-index: 3;
			position: relative;
			width: calc(100% - (2*var(--gap)));
			h6{
				font-family: CenturyGothic;
				font-weight: Bold;
				font-size: calc(var(--font-xl) + 2px);
				line-height: calc(var(--font-xl) + 10px);
				margin-top: unset;
				margin-bottom: 12px;
				color: var(--pink);
				span{
					color: var(--stale-blue);
				}
			}
			p{
				font-family: CenturyGothic;
				font-weight: 100;
				font-size: var(--font-l);
				line-height: calc(var(--font-l) + 8px);
				margin: unset;
				color: var(--stale-blue);
			}
		}
	}
}
section.abt-wpl{
	.container{
		.list{
			display: flex;
			flex-direction: column;
			a{
				flex: 0 0 33.33%;
				aspect-ratio: 5/3;
				background-size: cover;
				display: flex;
				align-items: center;
				justify-content: center;
				text-decoration: unset;
				position: relative;
				background-blend-mode: luminosity, multiply;
				background-color: rgb(0 0 0);
				&:before{
					content: "";
					background: var(--pink-2);
					/*mix-blend-mode: multiply;*/
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: 0.5;
					position: absolute;
			        /*// Tambahkan transisi untuk efek halus*/
			        transition: background 0.5s ease;
			    }
			    /*// Saat hover, ubah background ke blue*/
			    &:hover:before {
			        background: var(--stale-blue);
			    }
				h5{
					margin: unset;
					color: white;
					font-family: CenturyGothic;
					font-weight: Bold;
					font-size: var(--font-xxxl);
					line-height: calc(var(--font-xxxl) + 8px);
					position: relative;
					z-index: 1;
				}
			}
		}
	}
}
section.abt-sticky{
	background: #D9D9D9;
	top: 0;
	z-index: 1000;
	transition: all 0.4s ease;
	&.sticky{
		position: -webkit-sticky;
		position: sticky;
	}
	.content{
		padding: 0px var(--gap);
		.list{
			display: flex;
			justify-content: space-between;
			a{
				padding: 20px 50px;
				font-family: CenturyGothic;
				font-weight: 400;
				font-size: var(--font-m);
				line-height: 35px;
				margin: unset;
				max-width: 500px;

				text-decoration: unset;
				color: var(--black-2);
				&.active{
					background: #df7c9b;
					color: white;
					transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				}
			}
		}
	}
}
section.abt-achivement{
	.content{
		padding: 0px var(--gap);
		&>div{
			display: flex;
			flex-wrap: wrap;
			padding: 40px 0px;
		}
		.head{
			flex: 0 0 100%;
			text-align: center;
			h5{
				font-family: Jost;
				font-weight: bold;
				font-size: var(--font-xl);
				line-height: 46px;
				margin: unset;
				margin-bottom: 60px;
			}
		}
		.left{
			flex: 0 0 50%;
			.achiv{
				.img{
					&:before{
						border-top-right-radius: 60px;
						box-shadow: .75rem .75rem 1.5rem rgba(24, 6, 141, .12);
					}
				}
			}
		}
		.right{
			flex: 0 0 50%;
			.achiv{
				.img{
					align-items: flex-end;
					&:before{
						border-top-left-radius: 60px;
						box-shadow: .75rem .75rem 1.5rem rgba(24, 6, 141, .12);
					}
				}
				&>div{
					text-align: right;
				}
			}
		}
		.achiv{
			display: flex;
			flex-direction: column;
			gap: 20px;
			&>div{
				/*border: 1px solid #e7e7e7;*/
				padding: 24px;
				border-radius: 25px;
				height: 250px;

				display: flex;
				flex-direction: column;
				justify-content: center;
				h4{
					font-family: Jost;
					font-weight: bold;
					font-size: var(--font-xm);
					line-height: 31px;
					margin: unset;
					max-width: 500px;
				}
				p{
					font-family: Jost;
					font-weight: 400;
					font-size: var(--font-s);
					line-height: 26px;
					margin: unset;
					max-width: 500px;
				}
				&.img{
					padding: unset;
					&:before{
						content: "";
						display: block;
						background: rgb(223 124 155);
						width: 90%;
						height: 100%;
					}
				}
			}
		}
	}
}
section.abt-brand{
	padding-bottom: 80px;
	overflow: hidden;
	.content{
		padding: 0px var(--gap);
		h5 {
			text-align: center;
			font-size: var(--font-xl);
			line-height: 41px;
			font-family: CenturyGothic;
		}
		.container-brand{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			&>div{
				flex: 1;
				display: flex;
				justify-content: center;
			}
		}
		.cat-brand{
			flex: 0 0 180px;
			border-right: 1px solid black;
			height: 75px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			h6{
				text-align: center;
				font-size: var(--font-xxm);
				line-height: 23px;
				font-family: CenturyGothic;
				margin: unset;
				text-align: right;
				margin-right: 20px;
			}
		}
		.list-brand{
			/*flex: 0 0 calc(100% - 150px);*/
			/*width: calc(90% - 240px);*/
			min-width: 650px;
			display: flex;
			gap: 45px;
			padding: 0px 10px;
			padding-left: 30px;
			align-items: center;
			/*justify-content: space-between;*/
			/*animation: scroll-left 10s linear infinite;*/
			img{
				cursor: pointer;
				padding: 7px;
				width: 80px;

				border-radius: 12px;
				filter: grayscale(100%);
				&:hover{
					/*box-shadow: 0 0 14px rgba(24, 6, 141, .12);*/
					filter: grayscale(0%);
				}
			}
		}
	}
}
section.abt-paralax{
	height: 70vh;
	width: 100%;
	background-size: cover;
	overflow: hidden;
	z-index: 1;
	background-position-x: center;
	background-position-y: 100%;

	/*transform: translateY(var(--scroll-y));*/
}
section.cnt-gnt{
	background: #00000040;
	background-image: url('../ezgif.com-resize-3.jpg');
	background-position: center;
	background-size: cover;
	.content{
		padding: 140px var(--gap) 130px !important;
		.cnt-header{
			.breadcrumb{
				position: relative;
			}
			h5{
				font-family: CenturyGothic;
				font-weight: bold;
				/*font-size: var(--font-l);*/
				/*line-height: 40px;*/
				font-size: calc(var(--font-xxl) + 2px);
				line-height: calc(var(--font-xxl) + 2px + 8px);
				margin: unset;
				margin-bottom: 8px;
				padding-top: 20px;
				color: var(--black);
				span{
					color: var(--pink);
				}
			}
			p{
				font-family: Jost;
				font-weight: 400;
				/*font-size: var(--font-xxm);*/
				/*line-height: 33px;*/
				font-size: calc(var(--font-xm) + 2px);
				line-height: calc(var(--font-xm) + 2px + 8px);
				margin: unset;
				color: var(--black);
			}
		}
	}
	&.cnt-service{
		/*background-image: unset;*/
		/*background: var(--black-gray);*/
		.content{
			padding: 350px var(--gap) 30px var(--gap);
			h5{
				font-size: var(--font-xxl);
				font-weight: 100;
				line-height: 72px;
			}
		}
	}
}
section.abt-head{
	/*padding-top: 150px;*/
	position: relative;
	height: 100vh !important;
	--before-height: 420px;
	&:before{
		content: "";
		display: flex;
		height: var(--before-height);
		width: 100%;
		background: white;
		position: absolute;
		top: 0;
	}
	.container{
		max-height: var(--before-height);
		overflow: hidden;
	}
	.content{
		padding-top: 360px;
	}
}
section.svc-ctr,section.svc-detail-second-carou{
	background: white;
	overflow: hidden;
	/*background: var(--black-gray);*/
	&.main-service{
		clip-path: inset(0 0 0 0);
	}
	&.trans{
		background: transparent;
	}
	.circle-gra{
		right: -20vw;
		top: 10vh;
	}
	a.follower{
		height: unset;
		border: 1px solid var(--stale-blue);
		padding: 10px 20px;
		transform: translate(-50%, -15px);
		p{
			flex: unset;
			font-weight: bold;
			color: white;
			margin: unset;
			font-size: var(--font-s);
		}
	}
	.content{
		padding: 0px var(--gap) 0px;
		&.foo{
			padding-top: 50px;
			padding-bottom: 120px;
		}
		.svcl-hdr{
			padding: 40px 30px 130px;
			display: flex;
			gap: 130px;
			h6,p{
				color: white;
			}
			p{
				font-family: Jost;
				font-weight: 100;
				font-size: var(--font-xxm);
				line-height: 25px;
				flex: 0 0 250px;
				color: var(--black);
				span{
					color: var(--pink-2);
				}
			}
			h6{
				font-family: CenturyGothic;
				font-size: var(--font-xxl);
				font-weight: bold;
				line-height: 50px;
				margin: unset;
				color: var(--black);
				span{
					color: var(--pink-2);
				}
			}
		}

		.hdr-row{
            flex-direction: column !important;
            gap: 0px !important;
            padding-bottom: 60px;
            p{
            	flex: 1;
				font-family: CenturyGothic;
				font-size: var(--font-xl);
				font-weight: 100;
				line-height: 40px;
				margin-top: unset;
            }
            h6{
				font-family: Jost;
				font-weight: 100;
				font-size: var(--font-xxm);
				line-height: 25px;
            }
		}
		.svc-list{
			padding: 0px 30px 0px;
			a.list{
				text-decoration: unset;
				position: relative;
				.imgg{
					position: absolute;
					left: 0;
					top: 0;
					width: 0px;
					height: 100%;
					background: var(--pink);
					opacity: 0.1;
					transition: all 0.5s ease-in-out;
				}
				&:hover{
					.icon{
						img{
							width: 200px;
						}
					}
					.imgg {
						width: 100%;
						height: 100%;
					}
					h5{
						color: var(--pink-pastel);
					}
				}
			}
			.list{
				display: flex;
				/*grid-template-columns: repeat(12, minmax(0, 1fr));*/
				padding-bottom: 100px;
				overflow: hidden;
                flex-direction: column;
                padding-left: 20px;
				.svc-garis{
					border-top: 1px solid var(--black);
					width: 100%;
					height: 1px;
					grid-column-start: 1;
					grid-column-end: 13;
					margin-left: -20px;
				}
				.icon{
					grid-column-start: 1;
					/*display: flex;*/
					/*align-items: flex-start;*/
					/*justify-content: center;*/
					img{
						padding-top: 3.2rem;
						width: 120px;
						transition: all 0.5s ease-in-out;
						/*position: absolute;*/
						/*left: 0;*/
					}
				}
				.number{
					grid-column-start: 4;
					p{
						font-family: Jost;
						font-weight: 100;
						font-size: var(--font-xs);
						color: var(--black);
					}
				}
				.name-service{
					grid-column-start: 5;
					grid-column-end: 7;
					h5{
						font-family: CenturyGothic;
						font-weight: 100;
						font-size: var(--font-xl);
						color: var(--black);
						margin: unset;
					}
				}
				.desc-service{
					grid-column-start: 9;
					grid-column-end: 12;
					ul{
						li{
							font-family: Jost;
							font-weight: 100;
							font-size: var(--font-xxm);
							color: var(--black);
							white-space: nowrap;
						}
					}
					p{
						font-family: Jost;
						font-weight: 100;
						font-size: var(--font-xxm);
						color: var(--black);
					}
				}

				.arrow-go{
	                height: 50px;
	                width: 50px;
	                border-radius: 50%;
	                border: 1px solid var(--pink-pastel);
	                display: flex;
	                align-items: center;
	                justify-content: center;
                	transition: all 0.3s ease-in-out;
                	margin-left: auto;
                	margin-right: 10px;
                	margin-top: 10px;
	                svg{
	                    fill: var(--pink-pastel);
	                    width: 15px;
	                    transform: rotate(45deg);
	                	transition: all 0.3s ease-in-out;
	                }
				}
				&:hover{
					.arrow-go{
	                	border: 2px solid var(--pink-pastel);
						svg{
							transform: rotate(0deg);
						}
					}
				}
			}
		}
		.list-detail{
			.list{
				padding-bottom: 50px;
	            .number {
	                grid-column-start: 1;
	                p{
						font-family: Jost;
						font-weight: 100;
						font-size: var(--font-xxl);
						margin-top: unset;
						margin-bottom: 10px;
	                }
	            }
			}
		}
		.svc-list-other{
			display: flex;
			gap: 20px;
			padding: 0px 30px 0px;
			flex-wrap: wrap;
			.list{
				flex: 0 0 calc(33% - 45px);
				position: relative;
				padding-left: 30px;
				display: flex;
				flex-direction: column;
				overflow: hidden;
                align-items: flex-start;
				.svc-garis{
					border-left: 1px solid var(--black);
					width: 1px;
					height: 100%;
					position: absolute;
					left: 0;
				}
				.icon{
					order: 1;
					padding: 20px 0px;
					img,svg{
						width: 40px;
						transition: all 0.5s ease-in-out;
						fill: var(--black);
						&.pink{
							fill: var(--pink);
						}
					}
				}
				.number{
					order: 0;
					p{
						font-family: Jost;
						font-weight: 100;
						font-size: var(--font-xs);
						margin: unset;
						color: var(--black);
					}
				}
				.name-service{
					order: 2;
					h5{
						font-family: CenturyGothic;
						font-weight: 100;
						font-size: var(--font-xl);
						color: var(--black);
						margin: unset;
						/*text-align: center;*/
					}
				}
				.desc-service{
					order: 3;
					ul{
						li{
							font-family: Jost;
							font-weight: 100;
							font-size: var(--font-s);
							color: var(--black);
							white-space: nowrap;
						}
					}
					p{
						font-family: Jost;
						font-weight: 100;
						font-size: var(--font-l);
						color: var(--black);
					}
				}
				&:hover{
					img,svg{
						width: 60px;
					}
					h5{
						color: var(--pink-pastel);
					}
				}
			}
		}
	}
	&.svc-home,&.svc-about{
		background: var(--gray-2);
		.content {
			padding: 100px var(--gap) 100px;
			.svc-top-header{
				display: flex;
				justify-content: space-between;
				padding-bottom: 50px;
				h6{
					/*flex: 0 0 calc(70% - 150px);*/
					flex: 1;
					max-width: 560px;
					/*padding-right: 150px;*/
					font-size: var(--font-xxl);
					font-family: CenturyGothic;
					font-weight: 100;
					margin: unset;
					display: flex;
					flex-direction: column;
					color: var(--black);
				}
				.right{
					flex: 0 0 350px;
					p{
						margin: unset;
						font-family: Jost;
						font-size: var(--font-xxm);
						margin-bottom: 25px;
					}
				}
			}
			.svc-list-other{
				padding: unset;
				margin-left: -30px;
				gap: 10px;
				a{
					text-decoration: unset;
					h5,p{
						text-decoration: unset;
					}
				}
				.list {
					flex: 0 0 calc(33% - 45px);
					position: relative;
					cursor: pointer;
					padding-right: 7px;
					.imgg{
						position: absolute;
						left: 0;
						top: 0;
						width: 0px;
						height: 0px;
						background: var(--pink);
						opacity: 0.1;
						transition: all 0.5s ease-in-out;
					}
					.desc-service{
						transition: all 0.5s ease-in-out;
						max-height: 0;
						overflow: hidden;
					}
					.icon{
						position: relative;
						z-index: 3;
						img,svg{
							position: relative;
							left: 50%;
							transform: translateX(-50%);
							width: 200px;
							transition: all 0.5s ease-in-out;
						}
						svg{
							width: 120px;
							fill: var(--black);
						}
					}
					&:hover{
						.imgg{
							width: 100%;
							height: 100%;
						}
						.icon{
							img,svg{
								width: 120px;
								left: 60px;
								transform: translateX(-50%);
							}
							svg{
								width: 80px;
							}
						}
						.svc-garis{
							display: none;
						}
						h5,p{
							/*color: white;*/
						}
						.desc-service{
							max-height: 1000px;
						}
					}
				}
			}
		}
	}
	&.svc-about{
		background: #FAFAFA;
		.imgg{
			display: none;
		}

		.content {
			.svc-list-other {
				.list {
					.icon{
						svg,img{
							left: 60px;
							width: 60px;
						}
					}
				}
			}
		}
		.svc-nav{
            top: -300px;
            position: relative;
		}
		.desc-service{
			max-height: 1000px !important;
		}
	}
}

section.svc-detail-second-carou{
	position: relative;
	.content.foo{
		padding-bottom: unset;
	}
	.content-list-second{
		padding-top: 20px;
		padding-bottom: 120px;
		position: relative;
	}
	.svcl-hdr{
        justify-content: center;
		text-align: center;
	}
	.svc-list-second{
        display: flex;
        gap: 25px;
        overflow-x: scroll;
        padding: 0px calc(var(--gap)) 0px;
        padding-bottom: 80px;
        margin-bottom: -40px;
		.list{
            flex: 0 0 200px;
            border: 2px solid var(--gray-2);
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            position: relative;
			h5{
				font-family: Jost;
				font-weight: 100;
                font-size: var(--font-m);
				color: var(--black);
				margin: unset;
				margin-top: 10px;
			}
			p{
				font-family: CenturyGothic;
                font-size: var(--font-xxm);
                line-height: var(--font-m);
			}
            svg{
            	width: 60px;
				fill: var(--black);
				&.pink{
					fill: var(--pink);
				}
            }
            &:nth-child(odd) {
            	position: relative;
            	top: 40px;
            }
            .arrow-bottom{
            	opacity: 0;
            	position: absolute;
            	bottom: -25px;
            	left: 50%;
            	height: 50px;
            	width: 50px;
            	border-radius: 50%;
            	background: var(--pink-pastel);
            	transform: translateX(-50%);
            	display: flex;
                align-items: center;
                justify-content: center;
                transition: opacity 0.3s ease-in-out;
            	svg{
            		fill: white;
            		width: 15px;
            		transform: rotate(45deg);
            	}
            }
        	&:hover{
        		.arrow-bottom{
        			opacity: 1;
        		}
        	}
		}
		&::-webkit-scrollbar {
            height: 0px;
        }
	}
}

section.quote{
	.content{
		padding: 40px var(--gap);
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		&>p{
			font-family: CenturyGothic;
			font-weight: 400;
			font-size: var(--font-m);
			line-height: calc(var(--font-m) + 8px);
			text-align: center;
			margin: unset;
			width: 100%;
			max-width: 800px;
			color: var(--stale-blue);
		}
		a{
			margin-top: 30px;
		}
	}
}
section.article-detail {
	.header{
		padding: 140px 0 0px;
		h5{
			padding: unset;
		}
		&>div{
			margin-top: 30px;
			img{
				width: 100%;
			}
		}
		.img-error{
			background: var(--gray-bold);
			padding: 20px;
			height: 260px;
			display: flex;
			align-items: center;
			justify-content: center;
			img{
				width: 120px;
			}
		}
		.breadcrumb { padding: 0 10%; }
		.title { padding: 0 10%; }
		h1 { font-family: CenturyGothic; }
		svg {display: none;}
	}
	
	
	.content{
		padding: 30px 10% 80px;
		.top{
			display: flex;
			gap: 15px;
			margin-bottom: 40px;
			img{
				width: 40%;
				height: auto;
				aspect-ratio: 6/9;
				object-fit: cover;
				border-radius: 8px;
			}
			.desc{
				padding-top: 20px;
				p{
					font-size: var(--font-s);
					line-height: 30px;
					margin: unset;
					margin-bottom: 16px;
					color: #555;
				}
			}
		}
		p,h3,h4,h5,h6,blockquote,li{
			font-family: Jost;
			font-weight: 400;
			color: var(--black);
		}
		.body{
			p,span,b{
				font-family: Jost;
				font-size: var(--font-ml);
				line-height: 39px;
				margin: unset;
				margin-bottom: 16px;
				color: var(--stale-blue);
			}
			b{ 
				color: var(--pink);
				font-weight: 100;	
			}
			
			h3,h2,h1{
				font-family: Jost;
				font-weight: 100;
				font-size: var(--font-xm);
				line-height: 30px;
				margin: unset;
				margin-bottom: 16px;
			}
			h1{
				font-size: var(--font-xxxl);
				line-height: calc(var(--font-xxxl) + 8px);
				color: var(--black);
				b{
					font-family: CenturyGothic;
					font-size: inherit;
					font-weight: bold;
				}
			}
			h2{
				margin-top: 40px;
				font-size: var(--font-xl);
				line-height: calc(var(--font-xxl) + 8px);
				color: var(--black);
			}
			h3{
				font-size: var(--font-xl);
				line-height: calc(var(--font-xl) + 8px);
				margin-bottom: 16px;
				color: var(--black);
			}
			h4{
				font-family: CenturyGothic;
				font-weight: 100;
				font-size: var(--font-l);
				line-height: 26px;
				margin: unset;
				margin-bottom: 16px;
				color: var(--black);
			}
			h5{
				font-family: CenturyGothic;
				font-size: var(--font-m);
				font-weight: 100;
				line-height: 30px;
				margin: unset;
				margin-bottom: 16px;
				color: var(--black);
			}
			h6{
				font-family: CenturyGothic;
				font-size: var(--font-xm);
				font-weight: 100;
				line-height: 30px;
				margin: unset;
				margin-bottom: 16px;
				color: var(--black);
			}
			h1,h2,h3,h4,h5,h6{
				b{
					font-family: CenturyGothic;
					font-size: inherit;
					font-weight: bold;
				}
				span{
					font-family: CenturyGothic;
					font-size: inherit;
				}
			}
			blockquote{
				font-size: var(--font-xxm);
				line-height: 25px;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-left: unset;
				padding: 1em 2em;
				padding-right: unset;
				border-left: 1px solid rgb(223 124 155);
				p{
					margin-bottom: unset;
				}
			}
			figure{
				width: fit-content;
				margin: unset;
				max-width: 100%;
				img{
					max-width: 100%;
					object-fit: cover;
				}
			}

			.wp-block-gallery{
				display: flex;
				gap: 10px;
				flex-wrap: wrap;
				&>figure{
					flex: 0 0 calc(50% - 5px);
					img{
						aspect-ratio: 12 / 9;
						width: 100%;
						height: auto;
					}
				}
			}

			&>figure:first-child {
				float: left;
				padding-right: 50px;
				width: 40%;
				height: auto;
				aspect-ratio: 6 / 9;
				object-fit: cover;
				border-radius: 8px;
				margin-bottom: 18px;
				img{
					width: 100%;
					aspect-ratio: 5 / 7;
				}
			}
		}
	}
}
section.footer{
	&>div:nth-child(1){
		background: #ADB9CA40;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.content{
		position: relative;
		z-index: 2;
		padding: 40px var(--gap) 20px;
		display: flex;
		flex-direction: column;
		.foo-top{
			display: flex;
			.log{
				flex: 0 0 25%;
				border-right: 1px solid #80808080;
				padding-bottom: 30px;
				img{
					width:75px;
					margin-bottom: 18px;
				}
				div{
					padding-right: 25px;
				}
				h6{
					font-family: CenturyGothic;
					font-weight: bold;
					font-size: var(--font-s);
					line-height: 23px;
					margin: unset;
					margin-bottom: 12px;

					color: var(--black);
				}
				p{
					font-family: CenturyGothic;
					font-weight: 400;
					font-size: var(--font-xs);
					line-height: 20px;
					margin: unset;

					color: var(--black);
				}
			}
			.service{
				flex: 0 0 75%;
				&>div{
					padding-left: 25px;
					display: flex;
					&>div{
						flex: 0 0 40%;
						&>div{
							padding: 0px 20px;
						}
						.serv-l{
							display: flex;
							justify-content: space-between;
							&>div{
								display: flex;
								flex-direction: column;
							}
							flex: 1;
						}
						hr{
							color: var(--gray-5);
							margin-left: -8px;
							margin-right: -8px;
						}
					}
					&>div:nth-child(3){
						flex: 0 0 20%;
					}
					.serv-h{
						font-family: CenturyGothic;
						font-weight: bold;
						font-size: var(--font-xxm);
						line-height: 23px;

						color: rgb(223 124 155);
					}
					.serv-l{
						a{
							font-family: CenturyGothic;
							font-size: var(--font-xs);
							line-height: 20px;
							text-decoration: unset;
							color: inherit;
							color: var(--black);
						}
					}
					.serv-r{
						text-align: right;
						.serv-l{
							div{
								width: 100%;
							}
						}
					}
				}
			}
		}
		.foo-loc{
			display: flex;
			justify-content: space-between;
			padding-top: 20px;
			border-top: 1px solid #80808080;
			&>div:nth-child(1){
				flex: 0 25%;

				font-family: CenturyGothic;
				font-size: var(--font-s);
				line-height: 20px;
				color: var(--black);
			}
			&>div:nth-child(2){
				display: flex;
				flex: 0 75%;
				justify-content: space-between;
				&>span:nth-child(1){
					padding-left: 45px;
				}
				span{
					cursor: pointer;
					position: relative;

					font-family: CenturyGothic;
					font-size: var(--font-s);
					line-height: 20px;
					color: var(--black);
					&:hover{
						.tooltip{
							display: block;
						}
					}
				}
				.tooltip{
					display: none;
					box-shadow: 0px 0px 10px 0px #DF7C9B80;
					position: absolute;
					right: -82px;
					width: 170px;
					bottom: 16px;
					background: rgb(255 255 255 / 50%);
					padding: 15px 30px;
					border-radius: 15px;
					a{
						/*color: var(--black-2);*/
						color: var(--black);
						text-decoration: unset;
					}
				}
			}
		}
	}
}
section.footer2{
	background: var(--black-gray);
	overflow: hidden;
	.circle-gra{
		top: -10vw;
		right: -10vw;
	}
	.content{
		padding: 80px var(--gap) 20px;
		.top{
			color: white;
			width: 72%;
			h6{
				margin: unset;
				font-family: CenturyGothic;
				font-size: calc(var(--font-xxl) - 5px);
				font-weight: 100;
				margin-bottom: 30px;
			}
			h5{
				margin: unset;
				font-family: CenturyGothic;
				color: var(--gray-3);
				font-size: var(--font-ml);
				font-weight: 100;
				line-height: 38px;
				margin-right: 30px;
			}
			h4{
				margin: unset;
				font-size: calc(var(--font-xl) + 4px);
				font-family: CenturyGothic;
				font-weight: 100;
				margin-top: 80px;
				span{
					color: var(--pink);
				}
				svg{
					width: 23px;
					height: 23px;
				}
				svg:first-child{
					fill: white;
					position: relative;
					top: -6px;
				}
				svg:last-child{
					fill: white;
					width: 20px;
					height: 20px;
					position: relative;
					top: -3px;
					left: 15px;
				}
			}
		}
		.bottom{
			display: flex;
			flex-wrap: wrap;
			&>h6{
				font-family: CenturyGothic;
				color: var(--gray);
				font-size: var(--font-xxm);
				flex: 0 0 100%;
				font-weight: 100;
				margin: unset;
				margin-top: 50px;
				margin-bottom: 16px;
			}
			.left{
				display: flex;
				flex-wrap: wrap;
				flex: 1;
				&>div{
					flex: 0 0 50%;
					margin-bottom: 36px;
					h6{
						width: 90%;
						color: white;
						font-size: var(--font-s);
						font-family: CenturyGothic;
						font-weight: 100;
						margin: unset;
						font-weight: bold;
						&:nth-child(2){
							color: var(--pink);
							margin-top: 3px;
							margin-bottom: 2px;
						}
					}
					&>a{
						text-decoration: unset;
					}
					p{
						width: 80%;
						color: gray;
						font-size: var(--font-xs);
						font-family: CenturyGothic;
						margin: unset;
						line-height: 18px;
						a{
							color: inherit;
							/*text-decoration: unset;*/
						}
						&:nth-child(4){
							margin-top: 2px;
						}
					}
				}
			}
			.right{
				flex: 0 0 30%;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				text-align: right;
				&>div{
					margin-bottom: 30px;
				}
				.serv-h{
					color: var(--pink);
					font-family: CenturyGothic;
					font-size: var(--font-s);
				}
				.serv-l{
					div{
						display: flex;
						flex-direction: column;
						gap: 2px;
						a{
							color: var(--gray);
							font-size: var(--font-xs);
							font-family: CenturyGothic;
							text-decoration: unset;
						}
					}
				}
			}
		}
	}
}
footer.new{
	.left{
		display: flex;
		align-items: center;
		h5{
			font-family: Jost;
			font-size: 10px;
			color: var(--white-50);
			font-weight: 100;
			margin: unset;
			margin-right: 40px;
		}
		div.list{
			display: flex;
			gap: 20px;
			a{
				font-size: 12px;
				color: white;
			}
		}
	}
	.right{
		flex: 0 0 33%;
		display: flex;
		align-items: center;
		p{
			margin: unset;
			font-size: calc(var(--font-xs) - 1px);
			text-align: right;
			font-family: Jost;
			width: 400px;
			color: gray;
			width: 320px;
			span{
				display: block;
				&:nth-child(1){
					font-weight: bold;
				}
			}
		}
		img{
			margin-left: 20px;
			width: 60px;
			height: fit-content;
		}
	}
}

.custom-select {
	position: relative;

	select {
		display: none; /*hide original SELECT element: */
	}

	.select-selected {
		background-color: DodgerBlue;
	}

	/* Style the arrow inside the select element: */
	.select-selected:after {
		position: absolute;
		content: "";
		top: 10px;
		right: 5px;
		width: 0;
		height: 0;
		border: 6px solid transparent;
		border-color: #fff transparent transparent transparent;
	}

	/* Point the arrow upwards when the select box is open (active): */
	.select-selected.select-arrow-active:after {
		border-color: transparent transparent #fff transparent;
		top: 7px;
	}

	/* style the items (options), including the selected item: */
	.select-selected {
		font-family: CenturyGothic;
		background: transparent;
		color: white;
		border-radius: 5px;
		/*border: 1px solid white;*/
		padding: 4px 24px 4px 8px;
		cursor: pointer;
		font-size: var(--font-s);
		white-space: nowrap;
		/*min-width: 80px;*/
	}
	.select-items{
		div{
			font-family: CenturyGothic;
			color: white;
			padding: 2px 8px;
			font-size: var(--font-xs);
			border: 1px solid white;
			border-radius: 25px;
			cursor: pointer;
			/*&:last-child{
				border-bottom: unset;
			}*/
		}
	}

	/* Style items (options): */
	.select-items {
		position: absolute;
		top: calc(100% - 8px);
		left: 0;
		right: 0;
		z-index: 99;
		display: flex;
		flex-direction: column;
		gap: 6px;

		/*border: 1px solid white;*/
		/*border-top: unset;*/
		padding: 4px;
		padding-top: 8px;
	}

	/* Hide the items when the select box is closed: */
	.select-hide {
		display: none;
	}

	.select-items div:hover, .same-as-selected {
		background-color: rgb(255 255 255 / 20%);
		font-weight: bold;
	}
	.same-as-selected{
		display: none;
	}
}


section.word{
	.content{
		/*padding: 0px 10% 0px;*/
		.breadcrumb{
			position: absolute;
			top: 140px;
			z-index: 3;
			left: var(--gap);
		}
		#map-wrap{
			/*height: 90vh;*/
			text-align: center;
			position: relative;
			overflow: hidden;
			#map-dotted{
				height: 100%;
			}
			.land{
				fill: #E4E4E4;
				stroke: #CCC;
				transition: 250ms;
				stroke-width: 0.15;
			}
			.none{

			}
			.reg_presence{
				position: absolute;
				left: var(--gap);
				right: auto;
				top: 205px;
				text-align: left;
				max-width: 70%;
				z-index: 3;
				h6{
					font-family: CenturyGothic;
					font-size: 33px;
					margin: unset;
					margin-bottom: 16px;
					font-weight: bold;
					color: var(--black-2);
					span{
						color: var(--pink);
					}
				}
				p,&>div{
					font-family: CenturyGothic;
					font-size: 21px;
					line-height: 30px;
					margin: unset;
					width: 115%;
					color: var(--blue-2);
				}
			}
			foreignObject{
				div{
					/*cursor: help;*/
					/*&:before{
						content: "";
						width: 1.1px;
						height: 1.1px;
						display: block;
						position: relative;
						left: 0px;
						bottom: -3px;
						border-radius: 50%;
						background: rgb(223 124 155);
					}*/
					div.pulse{
						content: "";
						width: 1.1px;
						height: 1.1px;
						display: block;
						position: relative;
						left: 1px;
						bottom: -3px;
						border-radius: 50%;
						background: rgb(223 124 155);
						span{
							position: absolute;
							width: 100%;
							height: 100%;
							left: 0;
							background: inherit;
							border-radius: inherit;
						}
					}
					&.pinbtm{
						/*&:before{
							bottom: -6px;
						}*/
						div.pulse{
							bottom: -6px;
						}
					}
					&.pinbtm2{
						div.pulse{
							bottom: -7px;
						}
					}
					&.blink_map{
						/*&:before{
	    					animation: blink_map 1s infinite;
						}*/
						div{
							span{
								animation: pulseAnimate 2s ease-in-out infinite;
							}
						}
					}
					.lokasi{
						display: block;
					}
					.loc{
						display: none;
						padding-left: 0px;
						a{
							text-decoration: unset;
						}
					}
					&:hover{
						.loc{
							display: block;
						}
						.lokasi{
							display: none;
						}
					}
				}
				h5,h3,p{
					text-align: left;
					font-size: 2.5px;
					font-family: CenturyGothic;
					margin: unset;
					padding-left: 3.5px;

					color: var(--black);
				}
				p{
					font-size: 2px;
				}
				&:hover{
					h5,p{
						color: var(--black-2);
					}
				}
			}
			.hasinfo{
				fill: #A1C9E6;
				stroke: #DDD;
				cursor: pointer;
			}
		}
	}
}

section.design_and_build{
	padding: 30px 0px;
	.content{
		min-height: 100vh;
		position: relative;
		padding: 30px 0px;
		overflow-x: clip;
		.blog-header{
			position: absolute;
			padding: 120px 0px 0px var(--gap);
			width: 300px;
			&>h5{
                font-size: var(--font-xxl);
                font-weight: 100;
                margin-bottom: 16px;
                padding-left: unset;
				line-height: calc(var(--font-xxl)+5px);
				margin: unset;
				color: var(--black);
				margin: unset;
            	margin-bottom: 10px;
			}
			&>p{
                font-family: CenturyGothic;
                font-weight: 100;
                font-size: calc(var(--font-xm) + 1px);
                line-height: calc(var(--font-xm) + 9px);
                padding-left: unset;
                color: gray;
            	margin: unset;
            	margin-bottom: 20px;
			}
			.hover_new{
		        p, span {
		            font-size: 17px !important;
		        }
			}
		}
		.list_dab{
			display: flex;
			gap: calc(14.5px * var(--ukuran));
            width: calc(100px * 5 * var(--ukuran));
            top: 37.5vh;
            position: sticky;
            /*left: calc(100px * 5 * var(--ukuran));*/
            transition: transform 0.3s ease-out;
			.item{
				flex: 0 0 calc(140px * var(--ukuran));
				position: relative;
				.comp{
					position: relative;
					padding: 17px;
					&:before{
						content: "";
						display: block;
						position: absolute;
						width: calc(100%);
						height: 100%;
						border: calc(15px * var(--ukuran)) solid var(--gray-bold);
						opacity: 0.7;
					}
					&.odd{
						&:before{
                            border-radius: 50% 50% 0 0;
                            clip-path: inset(0 0 50% 0);
                            top: calc(-15px * var(--ukuran));
                            left: calc(-15px * var(--ukuran));
						}
					}
					&.even{
						&:before{
							border-radius: 0 0 50% 50%;
							clip-path: inset(50% 0 0 0);
                            bottom: calc(-14.5px * var(--ukuran));
                            left: calc(-15px * var(--ukuran));
						}
					}
					.bor{
						width: calc(110px * var(--ukuran));
						height: calc(110px * var(--ukuran));
						color: #df7b9b;
						border-radius: 50%;
						background: white;
						border: calc(5px * var(--ukuran)) solid #8496af40;
						display: flex;
                        flex-direction: column;
						align-items: center;
						justify-content: center;
						margin: unset;
					}
					h5{
						font-family: Jost;
						font-weight: 100;
						font-size: calc(var(--font-l) * var(--ukuran));
						margin: unset;
					}
					svg{
						display: none;
					}
				}
				.desc{
					h5{
		                font-family: CenturyGothic;
		                font-weight: bold;
		                font-size: var(--font-m);
						margin: unset;
					}
					p{
						margin: unset;
						margin-top: 10px;
		                font-family: Jost;
		                font-weight: 100;
		                font-size: var(--font-xm);
					}
				}
				.even{
					&+.desc{
						top: -250px;
					}
				}
				.desc{
					position: absolute;
					display: none;
                    flex-direction: column;
					&.even{
                        flex-direction: column-reverse;
					}
				}
				&.on{
					.comp:before{
						opacity: 1;
					}
				}
				&.on:nth-child(1){
					.comp:before{
						border-color: #c4a7bb;
					}
				}
				&.on:nth-child(2){
					.comp:before{
						border-color: #be94ad;
					}
				}
				&.on:nth-child(3){
					.comp:before{
						border-color: #c894ac;
					}
				}
				&.on:nth-child(4){
					.comp:before{
						border-color: #be7f9c;
					}
				}
				&.on:nth-child(5){
					.comp:before{
						border-color: #c07092;
					}
				}
				&.active{
					.comp{
						.bor{
							border-color: #8496af;
						}
						h5{
							font-weight: bold;
                        	font-size: calc(var(--font-s) * var(--ukuran));
                        	margin-top: -20px;
						}
						svg{
							width: 50px;
							display: inline-block;
							fill: var(--gray-3);
						}
					}
					.desc{
                        display: flex;
					}
				}
			}
		}
		.base_height{
			div{
				height: var(--speed, 40vh);
			}
		}
	}
}
.bg-svc,.bg-about{
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.8;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--stale-blue);
		mix-blend-mode: color;
	}
}
section.design_and_build2,section.design_and_build_snap{
	margin-bottom: 100px;
	margin-top: 100px;
	background: transparent;
	.header{
		position: absolute;
		top: 100px;
		left: var(--gap);
		padding-top: unset;
		margin-top: unset;
		h5{
			font-family: CenturyGothic;
			font-weight: Bold;
			font-size: var(--font-xxl);
			line-height: calc(var(--font-xxl) + 8px);
			color: white;
			margin-bottom: unset;
			margin-top: 30px;
			width: 100%;
			span{
				color: var(--pink-2);
			}
		}
	}
	.content{
		padding: 0px var(--gap);
		min-height: 100vh;
		.styles_progress{
			position: sticky;
			width: 500px;
			height: 500px;
			top: 25vh;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 99.9rem;
			/*border: 1px solid #12121233;*/
			background: white;
			opacity: 0.95;
			svg{
				width: 100%;
				height: auto;
				transform: rotate(-90deg);
			}
			.circle{
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				div{
					position: absolute;
					width: 1rem;
					height: 1rem;
					border-radius: 50%;
					background: #f0f0f0;
					/*border: 1px solid var(--pink);*/
					transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) .4s;
					opacity: 1 !important;
					&.active{
						background-color: var(--pink);
					}
				}
			}
			.paragraph{
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				width: 100%;
				div{
					display: none;
					text-align: center;
					max-width: 75%;
					transition: all 0.5s ease-in-out;
					max-width: 250px;
					h5{
						font-family: CenturyGothic;
						font-size: var(--font-xl);
						margin: unset;
						margin-bottom: 15px;
						font-weight: 100;
						color: var(--stale-blue);
					}
					img,svg{
						width: 100px;
						transform: rotate(0deg);
					}
					ul{
						margin-top: 10px;
						padding-left: 0px;
						margin-bottom: unset;
						list-style-type: none;
						li{
							font-family: Jost;
							color: var(--gray-5);
						}
					}
					&.active{
						display: block;
					}
				}
			}
		}
		.base_height{
			div{
				height: var(--speed, 40vh);
			}
		}
	}
	.background{
		display: block;
		width: 150vw;
		bottom: -30vh;
		left: -50vw;
		height: 50vh;
		position: absolute;
		/*background: linear-gradient(to bottom, #69626200 0%, #696262 100%);*/
		opacity: 0.2;
		z-index: 1;
	}
}
section.design_and_build_snap{
	position: relative;
	.content {
		padding: unset;
        .styles_progress {
            width: 90vw;
            height: 100%;
            left: 5%;
            aspect-ratio: 1 / 1;
            transform: unset;
        }
    }
}
.bg-about{
	&::before {
		background-color: var(--stale-blue);
		mix-blend-mode: color;
	}
}
section.abt_exp{
	margin-top: unset;
	.circle{
		div{
			&.active{
				background-color: var(--pink-2) !important;
			}
		}
	}

    .content {
        .styles_progress {
			.paragraph{
				div{
					ul{
						/*margin-top: 20px;*/
						li{
							font-size: 16px;
							color: gray;
						}
					}
				}
			}
		}
	}
}
section.abt_exp_text{
	background: transparent;
	background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
	margin-top: -50vh;
	.content{
		padding: 100px 20% 100px;
		position: sticky;
		z-index: 2;
		top: 0;
		height: calc(100vh - 200px);
		p{
			font-family: CenturyGothic;
			font-size: var(--font-m);
			line-height: calc(var(--font-m) + 8px);
			color: white;
			margin-bottom: unset;
			margin-top: 40px;
			overflow: hidden;
			max-height: 0px;
			position: absolute;
			width: 60%;
			top: 50%;
			transform: translateY(-50%);
			&.active{
				max-height: 1000px;
			}
		}
	}
	.gap{
		div{
			height: 40vh;
		}
	}
}
section.service_card{
	/*background: var(--pink);*/
	.content{
		padding: 50px var(--gap) 100px;
		.list{
			display: flex;
			gap: 30px;
			.card{
				flex: 0 0 calc(25% - 20px);
				aspect-ratio: .76;
				transition: all 0.5s ease-in-out;
				position: relative;
				.bg{
					border: 2px solid var(--black);
					position: absolute;
					top: 0px;
					left: 0px;
					width: calc(100% - 4px);
					height: calc(100% - 4px);
					border-radius: 10px;
					transition: all 0.5s ease-in-out;
					background: white;
				}
				a{
					background: white;
					color: inherit;
					text-decoration: unset;
					display: flex;
					height: 100%;
					flex-direction: column;
					position: relative;
					z-index: 2;
					border: 2px solid var(--black);
					border-radius: 10px;
					padding: 25px;
					h5{
						font-family: CenturyGothic;
						font-size: var(--font-m);
						margin: unset;
						margin-top: 20px;
						font-weight: 100;
						color: var(--black);
					}
					p{
						font-family: Jost;
						margin: unset;
						font-size: var(--font-xs);
						color: var(--black);
					}
					div.desc{
						flex: 1;
						display: flex;
						align-items: flex-end;
					}
				}
				span{
					font-size: var(--font-xxl);
				}
				&:hover{
					transform: rotate(6deg) translate(17px, -12px);
					a{
						background: var(--pink);
						color: white;
						border-color: var(--pink);
						h5,p{
							color: white;
						}
						span{
							color: white;
						}
					}
					.bg{
						transform: rotate(-12deg) translate(-12%, -9%);
					}
				}
			}
		}
	}
}
section.foo_hover{
	background: var(--gray-2);
	/*overflow: hidden;*/
	.header2{
		padding-top: 20px;
		p{
			flex: 0 0 calc(45% - 140px);
			font-size: var(--font-m);
			margin: unset;
		}
		h5{
			font-size: var(--font-s);
			line-height: unset;
			text-transform: uppercase;
			a,button{
				margin-top: 50px;
			}
		}
	}
	.content{
		padding: 50px var(--gap) 120px 0%;
		.lists{
			position: relative;
			.item{
				display: flex;
				cursor: pointer;
				.img{
					flex: 0 0 50%;
					display: flex;
					position: absolute;
					left: 0;
					top: 0;
					width: 50%;
					max-width: calc(10% + 515px);
					height: 430px;
					.border{
						position: absolute;
						width: 90%;
						max-width: 650px;
						/*aspect-ratio: 16/9;*/
						height: calc(100% - 25px);
						opacity: 0;
						background: white;
						overflow: hidden;
						img{
							position: absolute;
							object-fit: cover;
						}
					}
				}
				.right{
					flex: 0 0 50%;
					margin-left: 50%;
					border-top: 1px solid var(--gray);
					position: relative;
					z-index: 3;
					h5{
						margin: unset;
						padding: 10px 0px;
						font-family: CenturyGothic;
						font-size: calc(var(--font-xl) - 3px);
						color: var(--stale-blue);
						font-weight: 100;
						padding-bottom: unset;
						margin-bottom: 5px;v
					}
					h6{
						margin: unset;
						font-family: CenturyGothic;
						font-size: calc(var(--font-l) - 3px);
						color: var(--stale-blue);
						font-weight: 100;
						margin-bottom: 5px;v
					}
					p,div{
						margin: unset;
						font-family: Jost;
						font-size: var(--font-ml);
						/*display: none;*/
						max-height: 0px;
						color: var(--gray-5);
						line-height: 27px;
						overflow: hidden;
						transition: max-height 1s cubic-bezier(0.49, 0.71, 0.24, 0.9);
						margin-bottom: 12px;
						.img_l{
							margin-top: 20px;
							flex-direction: row;
							flex-wrap: wrap;
							display: flex;
							align-items: center;
							/*justify-content: space-evenly;*/
                            gap: 25px;
                            column-gap: 10px;
                            img{
                                filter: grayscale(100%);
                                opacity: 0.6;
                                max-width: 60px;
                            }
                            &>div{
                            	flex: 0 0 calc(33.33% - 25px);
                            }
						}
					}
				}
				&.active{
					.img{
						.border{
							opacity: 1;
							img{
								animation: foo_hover 0.4s ease both;
							}
						}
					}
					.right{
						h5{
							color: var(--pink);
						}
						.img_l{
						}
						p,div{
							max-height: 1000px;
							transition: max-height 1.5s cubic-bezier(0.61, 0.06, 0.92, 0.35);
							img{
								filter: grayscale(100%);
								opacity: 0.6;
								&:hover{
									opacity: 1;
									filter: grayscale(0%);
								}
							}
						}
					}
				}
				&:first-child{
					.right{
						border-top: unset;
					}
				}
			}
			.button_right{
				display: flex;
				cursor: pointer;
				.left{
					flex: 0 0 50%;
				}
				.right{
					padding-top: 50px;
				}
			}
		}
	}
	&.hover_about{
		background: var(--gray-2);
		overflow: hidden;
		.circle-gra{
			transform: translate(50%,50%);
		}
		.header_flex{
			.left{
				flex: 1;
			}
			.right{
				flex: 0 0 300px;
			}
		}
		.content{
			padding: 10px var(--gap) 80px;
			.lists{
				display: flex;
				align-items: center;
			}
			.img{
				flex: 0 0 calc(50% - 100px);
				padding-right: 100px;
				.border{
					background: transparent;
					position: relative;
					flex-direction: row;
					flex-wrap: wrap;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					gap: 20px;
					column-gap: 30px;
					img{
						max-width: 100%;
						max-width: 65px;
						height: fit-content;
						object-fit: contain;
						position: relative;
						/*margin-right: 30px;*/
						/*margin-bottom: 20px;*/
						animation: none;
						filter: grayscale(100%);
						opacity: 0.6;
						&:hover{
							filter: grayscale(0%);
							opacity: 1;
						}
						&.active{
							filter: grayscale(0%);
							opacity: 1;
						}
					}
				}	
			}
			.item{
				.right{
					flex: 0 0 100%;
					margin-left: unset;
					h5{
						font-size: calc(var(--font-xl) - 0px);
						padding-bottom: unset;
						color: #333333E5;
					}
					p{
						margin-bottom: 16px;
					}
				}
				&:first-child{
					.right{
						border-top: unset;
					}
				}
			}
		}
	}
}


.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	.modal-backdrop {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.modal-dialog {
		position: relative;
		width: 90%;
		max-width: 500px;
		margin: 50px auto;
		background: white;
		/*border-radius: 12px;*/
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
		opacity: 0;
		transform: translateY(-30px);
		transition: all 0.4s ease;
		overflow: hidden;
	}


	.modal-header {
		padding: 20px 24px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		h3{
			margin: unset;
		}
	}

	.modal-title {
		font-size: 1.5rem;
		font-weight: 600;
	}

	.modal-close {
		background: rgba(255, 255, 255, 0.2);
		border: none;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		color: white;
		font-size: var(--font-xm);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.3s;
	}

	.modal-close:hover {
		background: rgba(255, 255, 255, 0.3);
	}

	.modal-body {
		padding: 24px;
		max-height: 60vh;
		overflow-y: auto;
	}

	.modal-footer {
		padding: 20px 24px;
		background: #f8f9fa;
		display: flex;
		justify-content: flex-end;
		gap: 10px;
	}

	.modal-content {
		line-height: 1.6;
		color: #555;
	}

	.modal-icon {
		text-align: center;
		font-size: var(--font-xxl);
		margin-bottom: 20px;
	}

	&.show{
		display: block;
		.modal-backdrop {
			opacity: 1;
		}
		.modal-dialog {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

#teamModal{
	.modal-dialog{
		max-width: 50vw;
	}
	.modal-body{
		display: flex;
		.modal-close{
			position: absolute;
			right: 9px;
			top: 9px;
			background: var(--pink);
			/*color: var(--pink);*/
		}
		.modal-icon{
			flex: 0 0 40%;
			margin-bottom: unset;
			img{
				width: 100%;
				aspect-ratio: 12/16;
				object-fit: cover;
				display: block;
			}
		}
		.modal-content{
			padding-left: 20px;
			p,h6,h5{
				margin: unset;
			}
			h6,h5{
				font-family: CenturyGothic;
				font-weight: 100;
			}
			p{
				font-family: Jost;
				font-size: var(--font-s);
			}
			.border{
				margin: 0px 0px 20px;
				h5{
					font-size: var(--font-xxl);
					font-weight: bold;
					color: var(--stale-blue);
					line-height: normal;
				}
				p{
					font-size: var(--font-l);
					&#phone,&#email{
						font-size: var(--font-xm);
						span{
							color: var(--gray-5);
						}
						a{
							color: #555;
							text-decoration: unset;
						}
					}
				}
				#title{
					margin-bottom: 30px;
				}
				.list_icon{
					display: flex;
					gap: 10px;
					margin-top: 20px;
					a{
						border-radius: 50px;
						background: var(--pink);
						height: 30px;
						width: 30px;
						display: flex;
                        align-items: center;
                        justify-content: center;
					}
					svg{
						width: 15px;
						fill: white;
					}
				}
			}
			h6{
				font-size: var(--font-xm);
				color: var(--pink);
			}
		}
	}
}

button.hover_new,a.hover_new{
	border-radius: 50px;
	border: 1px solid var(--stale-blue);
	padding: 5px;
	display: flex;
	align-items: center;
	font-family: Jost;
	padding-left: 10px;
	background: white;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	width: fit-content;
	text-decoration: unset;
	color: inherit;
	span,p{
		padding-left: 5px;
		position: relative;
		z-index: 2;
		margin: unset;
		font-size: var(--font-ml) !important;
		color: var(--black-2);
		white-space: nowrap;
	}
	span {color: var(--red);}
	p{
		width: auto !important;
		font-weight: 100;
		margin: unset !important;
	}
	div{
		/*width: 10px;*/
		/*height: 10px;*/
		padding: 10px;
		border-radius: 50px;
		background: var(--stale-blue);
		margin-left: 10px;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		svg{
			fill: white;
			position: relative;
			z-index: 2;
			width: 16px;
		}
		&:before{
			content: "";
			display: block;
			width: 30px;
			height: 30px;
			right: 0;
			background: var(--stale-blue);
			position: absolute;
			transition: all 0.3s ease-in-out;
		}
	}
	&:hover{
		/*background: var(--stale-blue);*/
		color: white;
		p{
			color: white;
		}
		span{
			color: var(--pink);
		}
		div{
			overflow: unset;
			position: unset;
			&:before{
				right: 0;
				width: 100%;
				height: 200px;
			}
		}
	}
}

.team-home{
	.hover_new{
		p,span{
			font-size: var(--font-l);
		}
	}
}

.map-overlay {
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 1;
	&.top-gradient {
		top: 0;
		height: 20%;
		background: linear-gradient(to bottom, 
			rgba(255, 255, 255, 0.9) 0%,
			rgba(255, 255, 255, 0) 100%
		);
	}

	&.bottom-gradient {
		bottom: 0;
		height: 20%;
		background: linear-gradient(to top, 
			rgba(255, 255, 255, 0.9) 0%,
			rgba(255, 255, 255, 0) 100%
		);
	}
}

.contact_word{
	.content{
		#map-wrap{
			overflow: hidden;
		}
	}
	.top-gradient{
        top: 380px;
        left: 0px;
        height: 25%;
        background: linear-gradient(to right bottom, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 50%);
	}
}


/* Responsive */
@media (max-width: 768px) {
	.modal-dialog {
		width: 95%;
		margin: 20px auto;
	}

	.modal-body {
		max-height: 70vh;
	}
}

.txt-center{
	text-align: center;
}

section.crr-top{
	padding-top: 80px;
	.header_flex{
		.left{
			max-width: 720px;
			flex: 0 0 100%;
			h5{
				font-size: calc(var(--font-xxl) + 2px);
				line-height: calc(var(--font-xxl) + 2px + 8px);
				color: var(--black-2);
				span{
					color: var(--pink);
				}
			}
			p{
				font-family: Jost;
				font-size: calc(var(--font-xm) + 2px);
				line-height: calc(var(--font-xm) + 2px + 8px);
				color: var(--black-2);
			}
		}
	}
	.img_cover{
		height: 400px;
		position: relative;
		.overlay{
			content: "";
			display: block;
			background: #ECACC159;
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.img{
			height: 100%;
			background-size: cover;
			background-position: bottom;
		}
		&.active{
			.img{
				mix-blend-mode: unset;
			}
		}
	}
	.content{
		padding: 60px var(--gap);
		position: relative;
		.circle-gra{
			right: 50%;
			top: 50%;
			transform: translate(50%,-50%);
			width: 60vw;
		}
		.txt1{
			margin-bottom: 160px;
			p{
				font-family: CenturyGothic;
				font-size: var(--font-xm);
				line-height: calc(var(--font-xm) + 12px);
				max-width: 380px;
			}
		}
		.txt2{
			display: flex;
			.left{
				flex: 1;
			}
			.right{
				flex: 0 0 470px;
			}
			p,h3{
				margin: unset;
			}
			p{
				font-family: Jost;
				font-size: var(--font-s);
				line-height: calc(var(--font-s) + 6px);
				max-width: 230px;
			}
			h3{
				font-family: CenturyGothic;
				font-weight: 100;
				font-size: calc(var(--font-xxl) + 4px);
				line-height: calc(var(--font-xxl) + 12px);
				color: var(--black-2);
			}
		}
	}
}
section.crr_culture{
	background: var(--pink-2);
	.circle-gra{
		background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.250962) 32.21%, rgba(255, 255, 255, 0) 100%);
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
		z-index: -1;
		width: 55vw;
	}
	.header{
		padding-top: 60px;
		h5{
			font-size: calc(var(--font-xl) + 2px);
			line-height: calc(var(--font-xl) + 2px + 8px);
			font-weight: bold;
			color: white;
		}
		p{
			color: white;
			font-size: calc(var(--font-ml) + 1px);
			line-height: calc(var(--font-ml) + 1px + 8px);
		}
	}
	.content{
		padding: 40px var(--gap);
		.list{
			display: flex;
			flex-wrap: wrap;
			gap: 30px;
			&>div{
				flex: 0 0 calc(25% - 71px);
				background: var(--pink);
				padding: 24px;
				aspect-ratio: 3/1.5;
				border-radius: 25px;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				svg{
					width: 60px;
				}
				h5{
					color: white;
					font-family: CenturyGothic;
					font-weight: bold;
					font-size: calc(var(--font-xm) + 2px);
					line-height: calc(var(--font-xm) + 2px + 8px);
					margin: unset;
					flex: 1;
					display: flex;
					align-items: flex-end;
				}
				p{
					color: white;
					font-family: Jost;
					font-weight: 100;
					font-size: calc(var(--font-m) - 2px);
					line-height: calc(var(--font-m) - 2px + 8px);
					margin: unset;
				}
			}
		}
	}
	.footer_flex{
		padding-bottom: 60px;
		div{
			max-width: 600px;
			p{
				font-family: Jost;
				color: white;
				font-size: calc(var(--font-ml) + 1px);
				line-height: calc(var(--font-ml) + 1px + 8px);
			}
		}
	}
}
section.crr-list{
	overflow: hidden;
	.circle-gra{
		top: 50%;
		transform: translate(50%,0);
		z-index: -1;
	}
	.header_flex{
		padding-bottom: 60px;
		padding-top: 60px;
		.left{
			max-width: 750px;
			flex: 0 0 100%;
			margin-bottom: 20px;
			padding-right: unset;
			h5{
				color: var(--black-2);
			}
			p{
				font-family: Jost;
				font-size: var(--font-ml);
				line-height: calc(var(--font-ml) + 8px);
				color: var(--black-2);
			}
		}
		.crr_header{
			display: flex;
			flex-wrap: wrap;
			gap: 40px;
			&>div{
				flex: 0 0 calc(25% - 40px);
				padding-bottom: 20px;
				border-bottom: 1px solid var(--gray);
				&:last-child{
					border-bottom: unset;
					padding-bottom: unset;
				}
				h5{
					font-family: CenturyGothic;
					font-weight: bold;
					font-size: var(--font-xl);
					line-height: calc(var(--font-xl) + 6px);
					margin: unset;
					color: var(--black-2);
				}
				p{
					font-family: Jost;
					font-weight: 100;
					font-size: var(--font-ml);
					line-height: calc(var(--font-ml) + 6px);
					margin: unset;
					color: var(--gray-5);
					width: 100%;
				}
			}
		}
	}
	.content{
		padding: 100px var(--gap) 100px;
		background: var(--gray-2);
		position: relative;
		z-index: 2;
		.h_content{
			padding-bottom: 50px;
			max-width: 500px;
			h5{
				font-family: CenturyGothic;
				font-weight: bold;
				font-size: calc(var(--font-xl) + 2px);
				line-height: calc(var(--font-xl) + 2px + 8px);
				margin: unset;
				color: var(--black-2);
				margin-bottom: 12px;
				span{
					color: var(--pink-2);
				}
			}
			p{
				font-family: Jost;
				font-weight: 100;
				font-size: calc(var(--font-xxm) + 1px);
				line-height: calc(var(--font-xxm) + 1px + 8px);
				margin: unset;
				color: var(--gray-5);
			}
		}
		.list-category{
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			.filter,&>form>div{
				font-family: CenturyGothic;
				font-size: var(--font-s);
				line-height: calc(var(--font-s) + 8px);
				font-weight: 700;

				padding: 6px 24px;
				border: 2px solid var(--blue-2);
				border-radius: 50px;
				color: var(--blue-2);
				cursor: pointer;
				.select-selected{
					padding: unset;
					position: relative;
					z-index: 1;
					svg{
						margin-left: 10px;
						transition: all 0.5s ease-in-out;
					}
					&:after{
						content: unset;
					}
					&.select-arrow-active{
						svg{
							transform: rotate(180deg);
						}
					}
				}
				.select-items{
					margin-left: -2px;
					margin-right: -2px;
					margin-top: -7px;
					z-index: 0;
					border-bottom-left-radius: 15px;
					border-bottom-right-radius: 15px;
					padding-bottom: 8px;
					padding-top: 20px;
					div{
						border: unset;
					}
				}
				svg{
					width: 16px;
				}
				&.position{
					color: white;
					background: var(--blue-2);
					.select-items{
						background: var(--blue-2);
					}
				}
				&.countries{
					color: white;
					background: var(--pink-2);
					border-color: var(--pink-2);
					.select-items{
						background: var(--pink-2);
					}
				}
			}
			.list{
				border: unset;
				display: flex;
				gap: 10px;
				padding: unset;
				flex: 1;
				flex-wrap: wrap;
			}
			.filter{
				flex: 0 0 18px;
				height: 27px;
				padding: 4px 20px;
				display: flex;
				color: var(--gray-5);
				border-color: var(--gray-5);
			}
		}
		.showFilter{
			display: none;
			form{
				padding-top: 20px;
				display: flex;
				width: 100%;
				&>div{
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					h3{
						flex: 0 0 100%;
						font-family: CenturyGothic;
						font-weight: bold;
						font-size: calc(var(--font-l) + 2px);
						line-height: calc(var(--font-l) + 2px + 8px);
						margin: unset;
						color: var(--black-2);
						margin-bottom: 12px;
					}
					div{
						flex: 0 0 50%;

						font-family: CenturyGothic;
						font-size: var(--font-xxm);
						line-height: calc(var(--font-xxm) + 8px);
						color: var(--gray-5);
						margin: unset;
						input{
							margin-right: 10px;
							width: 15px;
							height: 15px;
						}
					}
				}
			}
		}
		.list-career{
			display: flex;
			padding-top: 30px;
			flex-direction: column;
			border-bottom: 1px solid #323f514d;
			&>div{
				display: flex;
				width: 100%;
				border-top: 1px solid #323f514d;
				padding-top: 30px;
				padding-bottom: 20px;
				&:first-child{
					border-top: unset;
				}
				.left{
					flex: 1;
					/*padding-right: 20px;*/
					h4{
						font-family: CenturyGothic;
						font-size: var(--font-xm);
						line-height: calc(var(--font-xm) + 8px);
						color: var(--black-2);
						margin: unset;
						margin-bottom: 4px;
						a,button{
							font-family: CenturyGothic;
							font-size: var(--font-xm);
							line-height: calc(var(--font-xm) + 8px);
							color: var(--black-2);
							text-decoration: unset;
							font-weight: bold;
							border: unset;
							height: 30px;
							cursor: pointer;
							background: transparent;
                            position: absolute;
                            right: var(--gap);
							svg{
								width: 15px;
								height: 15px;
								fill: var(--black-2);
								position: relative;
								top: 2px;
								right: -2px;
							}
						}
					}
					p{
						font-family: CenturyGothic;
						font-size: var(--font-xxm);
						line-height: calc(var(--font-xxm) + 8px);
						color: var(--gray-5);
						margin: unset;
					}
					&>div{
						margin-top: 10px;
						display: flex;
						flex-wrap: wrap;
						gap: 12px;
						div{
							font-family: CenturyGothic;
							font-size: var(--font-xs);
							line-height: calc(var(--font-xs) + 8px);
							padding: 2px 16px;
							border: 1px solid var(--black-2);
							border-radius: 50px;
							/*background: white;*/
							color: var(--black-2);
							svg{
								width: 10px;
								height: 10px;
								position: relative;
								top: 1px;
								fill: var(--black-2);
							}
						}
					}
				}
				.right{
					flex: 0 0 100px;
					display: flex;
					justify-content: flex-end;
				}
			}
		}
		.career-nav{
			display: flex;
			justify-content: space-between;
			padding-top: 30px;
			align-items: center;
			.nav_left,.nav_right{
				border: unset;
				background: unset;
				cursor: pointer;
				svg{
					fill: var(--black-2);
					width: 17px;
					height: 35px;
				}
			}
			.nav_right {
				transform: rotate(180deg);
			}
			div{
				font-family: CenturyGothic;
				font-size: var(--font-s);
				line-height: calc(var(--font-s) + 8px);
				color: var(--gray-5);
				margin: unset;
				border: 1px solid var(--stale-blue);
				border-radius: 25px;
				padding: 4px 24px;
				height: 24px;
			}
		}
	}
}

div#modalCareer{
	.modal-backdrop {
		opacity: 1;
	}
	.modal-dialog {
		margin: unset;
		opacity: 1;
		width: 100vw;
		max-width: unset;
		transform: translateY(0);
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: scroll;
	}
	.modal-top{
		background: #F1F5F9;
		flex: 0 0 calc(10% + 60px);
		width: calc(100vw - calc(var(--gap) * 2));
		padding: 60px var(--gap) 0px;
		.modal-content{
			.crm_head{
				display: flex;
				width: 100%;
				border-top: 1px solid #323f514d;
				/*padding-top: 30px;*/
				padding-bottom: 60px;
				&:first-child{
					border-top: unset;
				}
				.left{
					flex: 1;
					padding-right: 20px;
					h4{
						font-family: CenturyGothic;
						font-size: var(--font-xm);
						line-height: calc(var(--font-xm) + 8px);
						color: var(--black-2);
						margin: unset;
						margin-bottom: 4px;
					}
					p{
						font-family: CenturyGothic;
						font-size: var(--font-xxm);
						line-height: calc(var(--font-xxm) + 8px);
						color: var(--gray-5);
						margin: unset;
					}
					&>div{
						margin-top: 10px;
						display: flex;
						flex-wrap: wrap;
						gap: 12px;
						div{
							font-family: CenturyGothic;
							font-size: var(--font-xs);
							line-height: calc(var(--font-xs) + 8px);
							padding: 2px 16px;
							border: 1px solid var(--black-2);
							border-radius: 50px;
							/*background: white;*/
							color: var(--black-2);
							svg{
								width: 10px;
								height: 10px;
								position: relative;
								top: 1px;
								fill: var(--black-2);
							}
						}
					}
				}
				.right{
					flex: 0 0 100px;
					display: flex;
					justify-content: flex-end;
					a,button{
						font-family: CenturyGothic;
						font-size: var(--font-xxm);
						line-height: calc(var(--font-xxm) + 8px);
						color: var(--gray-5);
						text-decoration: unset;
						font-weight: 100;
						border: unset;
						height: 30px;
						cursor: pointer;
						background: transparent;
						svg{
							margin-left: 5px;
							width: 15px;
							fill: var(--black-2);
							position: relative;
							top: -1px;
							right: -2px;
						}
					}
				}
			}
		}
	}
	.modal-bottom{
		background: var(--gray-2);
		width: calc(100vw - calc(var(--gap) * 2));
		padding: 60px var(--gap) 100px;
		flex: 1;
		.side{
			display: flex;
			height: 100%;
			max-height: 100%;
			gap: 40px;
			flex-direction: column;
			.left{
				flex: 1;
				.tabs{
					display: flex;
					flex-direction: column;
					margin-top: -30px;
					height: 100%;
					.tab{
						flex: 0 0 53px;
						border-bottom: 1px solid var(--black-2);
						padding-top: 30px;
						.header{
							display: flex;
							justify-content: space-between;
							h5{
								font-family: CenturyGothic;
								font-weight: bold;
								font-size: var(--font-xxm);
								line-height: calc(var(--font-xxm) + 8px);
								color: var(--black-2);
								margin: unset;
							}
							svg{
								width: 20px;
								fill: var(--black-2);
								transform: rotate(180deg);
								cursor: pointer;
							}
						}
						.body{
							font-family: Jost;
							font-size: var(--font-xxm);
							line-height: calc(var(--font-xxm) + 8px);
							color: var(--black-2);
							margin: unset;
							max-height: 0px;
							overflow-y: hidden;
							transition: max-height 0.5s ease-in-out;
						}
						&:first-child{
							/*padding-top: unset;*/
						}
						&:last-child{
							border-bottom: unset;
						}
						&.active{
							flex: 1;
							padding-bottom: 30px;
							.header{
								padding-bottom: 30px;
								svg{
									transform: rotate(0deg);
								}
							}
							.body{
								max-height: 330px;
								overflow: auto;
								ul{
									margin: unset;
								}
							}
						}
					}
				}
			}
			.right{
				flex: 0 0 320px;
				.form{
					h5{
						font-family: CenturyGothic;
						font-weight: bold;
						font-size: var(--font-xxm);
						line-height: calc(var(--font-xxm) + 8px);
						color: var(--black-2);
						margin: unset;
						margin-bottom: 6px;
					}
					p{
						font-family: CenturyGothic;
						font-weight: 100;
						font-size: var(--font-s);
						line-height: calc(var(--font-s) + 8px);
						color: var(--black-2);
						margin: unset;
						margin-bottom: 20px;
					}
					p#alertMessage{
						margin-bottom: 12px;
					}
					.input-group{
						margin-bottom: 9px;
						input,textarea{
							font-family: Jost;
							font-weight: 100;
							font-size: var(--font-s);
							line-height: calc(var(--font-s) + 8px);

							background: #F1F5F9;
							border-radius: 25px;
							border: transparent;
							width: stretch;
							padding: 8px 10px 8px 24px;
						}
					}
					.input-flex{
						display: flex;
						select{
							font-family: Jost;
							font-weight: 100;
							font-size: var(--font-s);
							line-height: calc(var(--font-s) + 8px);

							background: #F1F5F9;
							border-radius: 25px;
							border: transparent;
							padding: 8px 10px 8px 24px;
							border-top-right-radius: unset;
							border-bottom-right-radius: unset;
						}
						input{
							border-top-left-radius: unset;
							border-bottom-left-radius: unset;
						}
					}
					.input-file{
						margin-bottom: 9px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						label{
							font-family: Jost;
							font-weight: 100;
							font-size: var(--font-s);
							line-height: calc(var(--font-s) + 8px);
							color: #828B97;
							margin-left: 20px;
							margin-right: 20px;
						}
						input{
							display: none;
						}
						button{
							svg{
								transform: rotate(315deg);
							}
						}
					}
					button{
						font-family: Jost;
						font-weight: 100;
						font-size: var(--font-s);
						line-height: calc(var(--font-s) + 8px);
						border-radius: 25px;
						border: unset;
						cursor: pointer;
						background: #F1F5F9;
						padding: 8px 16px;
						display: flex;
						align-items: center;
						svg{
							fill: var(--pink);
							width: 12px;
							margin-left: 20px;
						}
					}
				}
			}
		}
	}
}

section.crr_conversation{
	.content{
		display: flex;
		min-height: 30vh;
		position: relative;
		&:before{
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: #ECACC159;
		}
		.left{
			flex: 1;
			position: relative;
			z-index: 2;
			padding-left: var(--gap);
			padding-right: 12%;
			padding-top: 60px;
			padding-bottom: 60px;
			.segitiga{
				position: absolute;
				left: 0;
				svg{
					width: 250px;
					position: absolute;
					left: 0;
					&:nth-child(2){
						transform: rotate(340deg);
						top: -15px;
					}
				}
			}
			h5{
				font-family: CenturyGothic;
				font-size: calc(var(--font-xl) + 2px);
				line-height: calc(var(--font-xl) + 2px + 8px);
				font-weight: bold;
				color: var(--black-2);
				margin: unset;
				&.h5_1{
					margin-bottom: 12px;
				}
			}
			p{
				font-family: Jost;
				color: var(--black-2);
				font-size: calc(var(--font-ml));
				line-height: calc(var(--font-ml) + 6px);
				margin: unset;
				&.p_1{
					margin-bottom: 12px;
				}
				&.p_2{
					margin-bottom: 30px;
				}
				&.p_3{
					margin-bottom: 20px;
				}
			}
			div.button{
				display: flex;
				align-items: center;
				gap: 12px;
				span{
					font-family: CenturyGothic;
					font-weight: 100;
					font-size: calc(var(--font-s) + 1px);
					line-height: calc(var(--font-s) + 1px + 8px);
					color: var(--black-2);
				}
				a{
					font-family: CenturyGothic;
					font-weight: bold;
					font-size: calc(var(--font-s) + 1px);
					line-height: calc(var(--font-s) + 1px + 8px);
					border-radius: 25px;
					border: unset;
					cursor: pointer;
					color: white;
					background: #F1F5F9;
					padding: 10px 35px 13px;
					display: flex;
					align-items: center;
					text-decoration: unset;
					&:nth-child(1){
						background: var(--black-2);
					}
					&:nth-child(3){
						background: var(--pink);
						padding: 10px 45px 13px;
					}
				}
			}
		}
		.right{
			flex: 0 0 35%;
			background-size: cover;
			background-position: center;
			mix-blend-mode: luminosity;
		}
	}
}

section.brand-home{
	background: var(--gray-2);
	.header{
		h5{
			padding-bottom: 50px;
			text-align: center;
			font-size: var(--font-xl);
			font-weight: 700;
			color: var(--stale-blue);
		}
	}
	.content{
		padding: 0px 0% 60px;
		&>div{
			overflow: hidden;
			.list{
				display: flex;
				width: max-content;
				gap: 50px;
				/*transition: all 0.1s ease-in-out;*/
				padding-bottom: 30px;
				align-items: center;
				&.right{
				}
				img{
					max-width: 70px;
					/*height: fit-content;*/
					filter: grayscale(100%);
					&:hover {
						filter: grayscale(0%);
					}
				}
			}
		}
	}
}
footer{
	position: relative;
	z-index: 3;
	background: var(--black-gray);
	display: flex;
	justify-content: space-between;
	padding: 26px var(--gap);
	font-family: Jost; 
	font-size: var(--font-s);
	div{
		color: white;
	}
}

.carousel-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.carousel-track {
	display: flex;
	height: 100%;
	transition: transform 0.5s ease-in-out;
}


.carousel-slide {
	flex: 0 0 100%;
	width: fit-content;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	img{
		width: 100%;
		height: 100vh;
		object-fit: cover;
		object-position: center;
	}
	p{
		font-family: Jost; 
		font-weight: 400;
		font-size: var(--font-s);
		line-height: 20px;

		position: absolute;
		bottom: 25px;
		left: var(--gap);
		color: white;
		z-index: 3;
		b{
			font-family: CenturyGothic;
			text-transform: capitalize;
			font-weight: 100;
		}
	}

	a,button{
		font-family: Jost; 
		position: absolute;
		bottom: 58px;
		right: var(--gap);
		color: white;
		z-index: 3;
		background: transparent;
		border: unset;
		font-size: var(--font-s);
		display: flex;
		gap: 12px;
		align-items: center;
		cursor: pointer;

		text-decoration: unset;
		img{
			width: 15px;
			height: 15px;
		}
	}
}
.scroll-up,.scroll-down{
	position: fixed;
	display: none;
	bottom: 50px;
	right: 50px;
	width: 50px;
	height: 50px;
	background: rgba(0, 0, 0, 0.35);
	z-index: 3;
	border-radius: 50px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	svg{
		width: 15px;
		height: 15px;
		fill: white;
		transform: rotate(315deg);
		margin: 18px;
	}
	&.active{
		display: flex;
	}
}
.scroll-down{
	display: none;
	right: 120px;
	transform: rotate(180deg);
}

.text-acak{
	min-height: 55px;
}

/*ssss*/

section.vid-background {
	& .content {
		& .bottom {
			& .list {
				.lists {
					div{
						width: calc(100%);
						flex: 0 0 100%;
						justify-content: center;
					}
					div.slash{
						display: none;
					}
				}
			}
		}
	}
}

section.service_card {
	.content {
		padding: 20px var(--gap) 50px;
		.list {
			flex-wrap: wrap;
			.card{
				flex: 0 0 calc(50% - 17px);
				aspect-ratio: unset;
				display: table;
				a{
					padding: 12px;
					display: table-cell;
					h5{
						font-size: var(--font-xm);
					}
					div.desc{
						p{
							display: -webkit-box;
							max-width: 200px;
							-webkit-line-clamp: 4;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
}

section.section_project_list {
	& .project_list {
		.pl_p {
			flex: 0 0 50%;
			width: 50%;
		}
	}
}

section.svc-ctr,section.svc-detail-second-carou{
	.svcl-hdr {
		padding: 40px 0% !important;
		flex-wrap: wrap;
		gap: 30px !important;
		p{
			margin: unset;
		}
	}
	.content {
		padding: 0px var(--gap) 0px;
		.svc-list{
			padding: 0px 0px 0px;
			.list{
				.icon{
					img{
						/*width: 100%;*/
					}
				}
				.number {
					grid-column-start: 3;
				}
				.name-service {
					grid-column-start: 4;
					grid-column-end: 6;
					h5{
						font-size: var(--font-xxl);
					}
				}
				.desc-service {
					grid-column-start: 8;
					grid-column-end: 12;
					p{
						margin: unset;
						font-size: var(--font-l);
					}
				}
			}
		}
	}
	.svc-list-other{
		padding: 0px !important;
		.list {
			flex: 0 0 calc(100% - 45px) !important;
		}
	}
}

section {
	& .sticky2 {
		& .container {
			.content {
				background-size: cover !important;
				min-height: 50vh;
				& .desc {
					/*left: var(--gap);*/
					bottom: 105px;
					top: unset;
					z-index: 1;
					width: 84%;
					text-align: center;
					& p {
						font-size: var(--font-xxm);
						width: 100%;
						b {
							font-size: var(--font-m);
							margin-bottom: unset;
						}
					}
				}
				.list-img{
					padding: 80px var(--gap) 200px;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					z-index: 1;
					position: relative;
					aspect-ratio: 4.5 / 3;
					.img-mbl{
						/*flex: 0 0 100%;*/
						/*display: contents;*/
						width: 84%;
					}
				}
			}
		}
	}
	&.sticky_show{
		.navi{
			position: absolute;
			z-index: 1;
			bottom: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0px var(--gap);
			width: 84%;
		}
		.nav_left,.nav_right{
			border: unset;
			background: unset;
			svg{
				fill: white;
				width: 17px;
				height: 35px;
			}
		}
		.nav_right{
			transform: rotate(180deg);
		}
	}
}

section.blog-list {
	& .blog-container {
		padding: 25px var(--gap) 20px;
		.blog-card {
			flex: 0 0 95%;
			min-width: 95%;
		}
		.blog-content{
			span{
				font-size: var(--font-xm);
			}
			h3{
				font-size: var(--font-ml);
				/*line-height: 36px;*/
			}
		}
	}
	.blog-nav{
		padding-bottom: 20px;
	}

	&.article-list2 {
		& .blog-container {
			.blog-card {
				flex: 0 0 calc(100%);
				min-width: calc(100%);
				h3{
					font-size: var(--font-xm) !important;
				}
				.blog-category{
					small{
						font-size: var(--font-xs) !important;
					}
				}
			}
		}
	}
}
section.blog-home{
	.header{
		a{
			display: none;
		}
	}

	.hover_new { 
		border: 0;
		font-size: var(--font-ml);
	}
}

section.design_follow{
	.content{
		p{
			margin-top: 20px;
			font-size: var(--font-l);
			font-family: CenturyGothic;
			font-weight: 100;
		}
	}
}

section.design_and_build2 {
	.content {
		.header {
			h5 {
				font-size: 55px;
				line-height: 63px;
				width: calc(100% - (2*var(--gap)));
				padding: unset;
			}
		}
		.styles_progress {
			/*width: 300px;*/
			/*height: 300px;*/

			width: 100%;
			aspect-ratio: 1 / 1;
			display: block;
			height: 100%;

			transform: unset;
			left: unset;
			.paragraph{
				transform: scale(1);
			}
		}
	}
	.background{
		width: 100vw;
	}
}

section.abt_exp_text{
	.content {
		padding: 100px var(--gap) 100px;
		p {
			width: calc(100% - (2*var(--gap)));
			font-size: 35px;
			line-height: 52px;
		}
	}
}

section{
	.header_flex{
		flex-direction: column;
		gap: 20px;
		.left{
			flex: 1;
			h5{
			}
		}
	}
}

section.quote{
	.content{
		p{
			width: 100%;
			font-size: 23px;
			line-height: 32px;
		}
	}
}

section.design {
	.fourimage {
		flex-wrap: unwrap;
		overflow: scroll;
		.img_sosmed{
			flex: 0 0 75%;
		}
	}
}

section.footer{
	display: none;
}

section.form {
	.input-form {
		padding: 50px var(--gap);
		flex-direction: column;
		&>div{
			flex: 0 0 100%;
			width: 82%;
			&:nth-child(1){
				p{
					width: 100%;
					line-height: unset;
				}
			}
		}
	}
}

section.project_detail{
	.content{
		.scroll-container {
			flex-direction: column;
		}

		.photo-slide{
			flex: 0 0 100%;
		}

		.photo-side,
		.description-side {
			flex: none;
			height: 50vh;
		}

		.photo-track,
		.description-track {
			height: 50vh; /* 3 sections x 50vh */
		}

		.description-slide {
			padding: 2rem;
		}

		.slide-title {
			font-size: 2.5rem;
		}
		.close-btn{
			top: 50%;
			transform: translateY(50%);
		}

		.nav-dots {
			right: 1.5rem;
		}
		.progress-bar{
			width: calc(95% - 92px);
		}
	}
}



section.svc_hover{
	.content{
		.lists{
		    background-size: cover;
		    background-position: center;
		    position: relative;
		    overflow: hidden;
		    padding-top: unset;
		    &:before{
		    	content: "";
		    	position: absolute;
		    	width: 100%;
		    	height: 100%;
	            content: "";
	            display: block;
	            background: #31313159;
	            z-index: 2;
	            top: 0;
	            left: 0;
		    }
		    .item{
	            display: flex;
	            cursor: pointer;
	            position: relative;
	            z-index: 2;
				flex: 1;
	            flex-direction: column;
	            justify-content: space-between;
	            padding: 20px;
	            padding-left: unset;
           		border-top: 1px solid var(--gray);
            	overflow: hidden;
           		&:first-child{
           			border-top: unset;
           		}
	            h5{
	                font-family: CenturyGothic;
	                font-weight: bold !important;
	                font-size: var(--font-l);
	                color: white !important;
	                margin: unset;
	            }
	            h6{
	                font-family: CenturyGothic;
	                font-weight: 100;
	                font-size: var(--font-s);
	                color: white !important;
	                margin-top: unset;
	            }
	            .right{
	            	border-top: unset !important;
		            p{
		                font-family: Jost;
		            	overflow: hidden;
		            	max-height: 0px;
		            	transition: all 1s ease-in-out;
		                color: white !important;
		                margin-top: unset !important;
		                margin-bottom: unset !important;
						&.question{
							color: #f8e4eb;
						}
		            }
	            }
	            .number{
	            	opacity: 1;
	                font-size: var(--font-l);
	                color: white;
	                transition: transform 0.3s ease-out, opacity 0.3s ease-out;
                    margin-left: var(--gap) !important;
	            }
	            .number-inside{
	            	opacity: 0;
	                font-size: var(--font-xxl) !important;
					color: #f8e4eb !important;
	                transition: transform 0.3s ease-out, opacity 0.3s ease-out;
	            }
	            svg{
	            	margin-top: 15px;
				    height: 20px;
				    fill: white;
	                transform: rotate(45deg);
	            	transition: all 0.5s ease-in-out;
	            	margin-left: 5px;
	            }
	            &:before{
	            	content: "";
	            	position: absolute;
	            	left: 0;
	            	top: 0;
	            	width: 100%;
	            	height: 100%;
	            	opacity: 0;
	            	z-index: 1;
	            }
	            &:after{
	            	content: "";
	            	position: absolute;
	            	left: 0;
	            	top: 0;
	            	width: 100%;
	            	height: 100%;
	            	opacity: 0;
	            	z-index: 2;
	            }
	            &:hover{
	            	&:before{
		            	opacity: 1;
	                    filter: blur(8px);
                    	background: #1616167d;
	            	}
	            	&:after{
		            	background: #fa93b3a1;
		            	opacity: 1;
	            	}
		            .number{
		            	opacity: 0;
	            		transition: all 0.5s ease-in-out;
		            }
		            .number-inside{
		            	opacity: 1;
	            		transition: all 0.5s ease-in-out;
		            }
	            	background: #fa93b3a1;
	            	p{
	            		max-height: 1000px;
	            		transition: max-height 1s ease-in;
	            	}
	            	svg{
		                transform: rotate(0deg);
	            	}
	            }
		    }
		}
	}
}

.modal {
	.modal-dialog {
	}
}

#teamModal {
	.modal-dialog {
		max-width: calc(100vw - 10%);
		left: 5%;
		position: absolute;
		.modal-content {
			& .border {
				margin: 10px 0px;
				h6{
					font-size: var(--font-l);
				}
				h5{
					font-size: var(--font-l);
				}
				p {
					font-size: var(--font-xm);
				}
			}
		}
	}
}

section.brand-home{
	.content{
		padding: unset;
		.list{
			padding-bottom: 25px;
		}
	}
}
section.svc-home{
	.content {
		padding: 80px var(--gap) 30px !important;
		.svc-top-header{
			flex-direction: column;
			h6{
				padding-right: unset !important;
				font-size: var(--font-m:) !important;
				margin-bottom: 20px !important;
			}
			.right{
				flex: 0 0 200px !important;
				padding-right: 100px;
				margin-top: -20px;
				&>p{
					margin-bottom: 12px !important;
					font-size: 24px !important;
					color: var(--gray-3);
				}
			}
		}
	}
	.circle-gra{
		width: 60vh;
		right: -70vw;
	}
	.svc-list-other{
		flex-wrap: nowrap !important;
		transition: all 0.5s ease-in-out;
		.list{
			flex: 0 0 calc(100% - 30px) !important;
			padding-right: 30px !important;
			.svc-garis{
				display: none !important;
			}
			.desc-service{
				p{
					font-size: var(--font-l) !important;
					text-align: center;
				}
			}
			.icon{
				svg{
					left: 60px;
					width: 100%;
				}
			}
		}
	}
	.svc-nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30px;
		/*top: -300px;*/
		/*position: relative;*/
		
		.nav_left,.nav_right{
			border: unset;
			background: unset;
			svg{
				fill: #323F51;
				width: 17px;
				height: 35px;
			}
		}
		.nav_right{
			transform: rotate(180deg);
            position: relative;
            top: -4px;
		}
		.hover_new{
			padding: 11px 15px !important;
			height: 23px;
			p,span{
				font-size: 22px !important;
			}
		}
	}
}
section.svc-ctr{
	&.svc-about{
		.content {
			.svc-list-other {
				pointer-events: none;
				.list {
                	align-items: center;
					.icon {
						svg {
							left: 50%;
							width: calc(75% - 150px);
						}
					}
					&:hover{
						.icon{
							svg{
								left: 50%;
								width: calc(75% - 150px);
							}
						}
					}
				}
			}
		}
	}
}
section.footer2{
	.circle-gra{
		top: 30vw;
		right: -50vw;
		width: 100vw;
	}
	.top{
		width: 100% !important;
		h6{
			font-size: 39px !important;
		}
		h5{
			font-size: 27px !important;
		}
		h4{
			font-size: 26px;
			width: 220px;
			svg:last-child{
				display: none;
			}
			span{
				margin-left: 30px;
			}
		}
		h4{
			margin-top: 50px !important;
		}
	}
	.bottom{
		&>h6{
			margin-top: 50px !important;
			margin-bottom: 30px !important;
			font-size: 32px !important;
			color: var(--white-50);
		}
		.left{
			flex: 0 0 100% !important;
			&>div {
				flex: 0 0 100% !important;
				h6,p{
					font-size: 21px !important;
					line-height: 27px !important;
				}
			}
		}
		.right {
			flex: 0 0 100% !important;
			&>div{
				width: 100%;
				text-align: left !important;
			}
			.serv-h{
				font-size: 21px !important;
				margin-bottom: 12px;
				font-weight: bold;
			}
			.serv-l{
				div{
					display: flex;
					flex-direction: row !important;
					a{
						flex: 0 0 100%;
						font-size: 21px !important;
					}
					gap: 3px;
					flex-wrap: wrap;
				}
			}
		}
	}
}
footer.new{
	flex-direction: column-reverse;
	.right{
		margin-bottom: 20px;
		flex-wrap: wrap;
		img{
			order: 1;
			width: 80px;
			margin-bottom: 12px;
			margin-left: unset;
			max-height: 62px;
		}
		p{
			order: 2;
			font-size: 12px;
			flex: 0 0 100%;
			text-align: left;
		}
	}
	.left{
		flex-wrap: wrap;
		h5{
			order: 2;
			margin-top: 80px;
		}
		.list{
			order: 1;
			justify-content: space-between;
			width: 100%;
			a{
				font-size: 15px !important;
			}
		}
	}
}
section.section_project_list, section.abt_project {
	.project_list {
		.pl_p {
			flex: 0 0 50%;
			width: 50%;
			p{
				top: auto;
				bottom: 5px;
			}
		}
	}
	.header_flex{
		.right{
			flex: 1;
		}
	}
	&.p_project{
		.header_flex{
			.left{
				h5{
					margin-bottom: unset;
				}
				p{
					font-size: var(--font-m);
					line-height: calc(var(--font-m) + 8px);
				}
			}
		}
	}
	.head_filter{
		.list{
			flex-wrap: wrap;
			gap: 15px;
			h5{
				margin-bottom: 10px;
			}
		}
	}
	.content{
		form{
			/*flex-wrap: wrap;*/
			/*flex-direction: column-reverse;*/
			gap: 15px;
			.left{
				width: 100%;
			}
			.right{
				display: flex;
			}
		}
	}
}

a.follower{
	display: none;
}


section.abt_award {
	.content {
		.flex {
			display: flex;
			flex-direction: column;
			.right{
				padding: 90px var(--gap) 100px;
			}
		}
	}
	&.abt_certi{
		.content {
         	.flex {
	            .left, .right{
                	background: var(--gray-2);
	            	text-align: center;
	            }
	            .left{
	            	h5{
	            		color: var(--black);
	            	}
	            	p{
	            		color: var(--black);
	            		width: 100%;
	            	}
	            }
	            .right{
	            	padding-top: unset;
	            	.list_image{
	            		margin-top: unset;
	            	}
	            	.txt{
	            		margin-top: 30px;
		            	p{
		            		color: var(--black);
		            		width: 100%;
		            	}
	            	}
	            }
	        }
		}
	}
}

section.crr_conversation {
	.content {
		flex-direction: row;
		flex-wrap: wrap;
		.left{
			padding-right: var(--gap);
			h5{
				font-size: calc(var(--font-l) + 0px);
				line-height: calc(var(--font-l) + 0px + 8px);
			}
			div.button {
				a {
					padding: 8px 18px 10px;
				}
			}
		}
		.right{
			height: 450px;
			flex: 0 0 100%;
		}
	}
}


section.foo_hover {
	.header2{
		gap: 10px;
		justify-content: space-between;
		p{
			font-size: var(--font-l);
			line-height: 39px;
			flex: 0 0 100%;
			padding: 40px 0 50px 0;
			font-family: CenturyGothic;
		}
	}
	.footer{
		padding: 30px 8% 0px;
		h5{
			font-size: 15px;
			font-family: Jost;
			font-weight: 100;
			text-transform: uppercase;
			color: #333333E5;
			margin: unset;
			margin-bottom: unset;
		}
		button{
			p,span{
				font-size: 15px !important;
			}
			div{
				margin-left: 35px;
			}
		}
	}
	.content {
		padding:0;
		position: relative;
		.lists {
			position: sticky;
			padding-top: 50vh;
			top: 0;
			left: 0;
			width: 100%;
			.item{
				.img{
					width: 100%;
					height: 280px;
					.border{
						width: calc(100%) !important;
						aspect-ratio: 4/4;
						height: auto !important;
					}
				}
				.right{
					flex: 0 0 calc(100% - var(--gap)*2) !important;
					margin-left: var(--gap) !important;

					p{
						font-size: var(--font-ml);
						color: var(--gray-5);
						line-height: 24px;
						margin-top: 5px;
						margin-bottom: 19px;
						span{
					        display: block;
					        height: 4px;
						}
					}
				}
				.button_right{
					.left{
						display: none !important;
					}
				}
			}
		}
		.bh_foohover{
			/*position: absolute;*/
			/*top: 0;*/
			/*left: 0;*/
			display: flex;
			flex-direction: column;
			div{
				height: 100vh;
				width: 100%;
			}
		}
	}
	
	&.wht {
		background: white;
	}
	
	&.hover_home{
	    .content {
	        .bh_foohover {
	        	div{
	                height: 50vh;
	        	}
	        }
	        .lists{
            	padding-top: 54vh;
	            .item {
	                .right {
	                    h5 {
                        	font-size: calc(var(--font-xl) - 6px);
	                    }
	                    p{
                        	font-size: calc(var(--font-ml) - 2px);
	                    }
	                }
	            }
	        }
	    }
	    .footer{
	    	padding-bottom: 30px;
	    	button{
	    		margin-top: 30px;
	    	}
	    }
	}

	&.hover_about_m{
		.img{
			padding: 0px var(--gap);
			width: calc(100% - (2 * var(--gap)));
			.border{
				flex-wrap: wrap;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				gap: 15px;
				column-gap: 30px;
				img{
					max-width: 100%;
					max-width: 65px;
					height: fit-content;
					object-fit: contain;
					position: relative;
					animation: none;
					filter: grayscale(100%);
					opacity: 0.6;
					&.active{
						opacity: 1;
						filter: grayscale(0%);
					}
				}
			}
		}
		.lists{
			padding-top: 0px;
			.item {
				.img {
					.border {
						background: white !important;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						gap: 20px;
						row-gap: 0px;
						align-items: flex-end;
						padding: 0px var(--gap);
						width: calc(100% - var(--gap)*2) !important;
						padding-top: 80px;
						height: calc(100% - 80px) !important;
						justify-content: space-between;
						img{
							flex: 0 0 70px;
							max-height: 100px;
							animation: unset !important;
							position: relative !important;
							object-fit: contain !important;
						}
					}
				}
			}
		}
	}
}

section.teams.team-home {
	.content {
		padding-left: 8%;
		position: relative;
		.listteams.list3{
			order: 1;
			padding-top: 0px !important;
			margin-left: -8.6%;
			flex-wrap: nowrap;
			overflow: scroll;
			padding-right: 0px !important;
			gap: 0px;
			&::-webkit-scrollbar {
				display: none;
			}
			.item {
				height: auto !important;
				aspect-ratio: 4/5;
				flex: 0 0 calc(100%) !important;
				max-width: 100% !important;
				&:hover{
					flex: 0 0 calc(100%) !important;
				}
				.intro {
					bottom: 4px;
				}
				&.active{
					img {
						aspect-ratio: unset;
						filter: grayscale(0%);
					}
					.intro{
						display: block;
					}
				}
			}
		}
		.blog-header{
			padding-top: 50px !important;
			order: 2;
			h5{
				font-size: 63px;
			}
			p{
				font-size: var(--font-ml);
				font-weight: 100;
				font-family: CenturyGothic;
				line-height: 30px;
			}
			a{
				p,span{ 
				}
				div{
					margin-left: 10px;
				}
			}
		}
	}
}

section.cnt-list{
	.content{
		.list-cnt{
			gap: 25px;
			.detail {
				flex: 0 0 calc(100% - 5px);
				p.maps{
                    flex-direction: row;
				}
			}
		}
	}
}

section.crr-list {
	.header_flex {
		.crr_header {
			gap: 20px;
			&>div {
				flex: 0 0 calc(100%);
			}
		}
	}
}

section.crr_culture {
	.content {
		.list {
			gap: 15px;
			&>div {
				flex: 0 0 calc(86%);
			}
		}
	}
}

section.form_new {
	padding-top: unset;
	.container{
		/* min-height: 90vh; */
		flex-direction: column;
		justify-content: flex-start;
		.input-form{
			padding-left: 8%;
			flex: 0 0 100%;
			/* width: 92%; */
			position: relative;
			padding-bottom: 100px;
			form{
				.group-1, .group-2, .group-3, .group-4{
					display: none;
					left: -100vw;
					position: relative;
					bottom: unset;
					&.active{
						display: block;
					}
				}
				&>p{
					bottom: -40px;
				}
			}
		}
		.before_start{
			right: -150vw !important;
			bottom: unset !important;
			top: 80px;
			width: 90% !important;
			button {
				p{
					white-space: break-spaces;
				}
			}
			&>p{
				margin: unset;
				position: relative !important;
				left: auto;
				right: -100vw;
			}
		}
		&.starter {
			.before_start {
				overflow: unset;
				button{
					padding-bottom: 65px;
					svg{
						left: -30px;
						top: 48vh;
					}
					width: 100%;
				}
				&>p{
					position: relative;
					left: var(--gap);
					right: 0;
					width: 90%;
					top: 20px;
					color: var(--gray-bold);
					font-size: var(--font-ml);
				}
			}
			.bg{
				padding-bottom: unset;
				flex: 0 0 40%;
			}
		}
	}
	.container{
		.bg{
			padding-bottom: unset;
			margin-top: 120px;
			flex: 0 0 30%;
			img{
				display: block;
				height: auto;
				aspect-ratio: 3/3;
			}
		}
	}
}


@media (max-width: 425px) {
	section.section_project_list, section.abt_project {
		& .content {
			.filter {
				align-items: flex-start;
				flex-wrap: wrap; 
				flex-direction: column-reverse;
			}
		}
	}
}

.mb-1{
	margin-bottom: 10px !important;
}
.svc-list-swiper{
	.swiper-button-prev{
		top: 30% !important;
		left: 0% !important;
		svg{
			path{
				fill: var(--pink-pastel);
			}
		}
	}
	.swiper-button-next{
		top: 30% !important;
		right: 0% !important;
		svg{
			path{
				fill: var(--pink-pastel);
			}
		}
	}
	.swiper-slide{
        .pad{
            /*padding: 30px;*/
            display: flex;
            flex-direction: column;
            align-items: center;
	        /*border: 2px solid white;*/
	        border-radius: 10px;
	        transition: all 0.3s ease-in-out;
        }
		.icon{
			/*width: ;*/
			text-align: center;
			img{
				width: 100%;
				border-radius: 10px;
	        	transition: all 0.3s ease-in-out;
	        	margin-bottom: 20px;
			}
		}
		.number{
            position: unset;
            display: flex;
            width: 100%;
            justify-content: flex-end;
            flex-direction: column;
            flex-wrap: wrap;
			p{
				max-height: 0px;
				overflow: hidden;
				margin: unset;
	        	transition: all 0.3s ease-in-out;
                font-family: Jost;
                font-weight: 100;
                font-size: var(--font-m);
                margin-top: unset;
                padding-right: 5px;
			}
			h5{
				max-height: 0px;
				overflow: hidden;
				margin: unset;
	        	transition: all 0.3s ease-in-out;
                font-family: Jost;
                font-weight: 100;
                font-size: var(--font-xl);
                margin-top: unset;
			}
		}
		.desc-service{
			p{
				max-height: 0px;
				overflow: hidden;
				margin: unset;
	        	transition: all 0.3s ease-in-out;
                font-family: Jost;
                font-weight: 100;
                font-size: var(--font-m);
                margin-top: unset;
			}
		}
	}
	.swiper-slide-active{
		.pad{
			margin-top: 20px;
		}
		.icon{
			width: 80%;
			img{
			}
		}
		.number{
			width: 80%;
			p,h5{
				max-height: 1000px;
			}
		}
		.desc-service{
			width: 80%;
			p{
				max-height: 1000px;
			}
		}
	}
}
.swipe-indicator-svc{
	/*display: none;*/
	position: absolute;
	top: 0px;
	z-index: 3;
	height: 100%;
	width: 100%;
	left: calc(0 * var(--gap));
	font-size: 27px;
	font-weight: 100;
	font-family: CenturyGothic;
	color: white;
	display: flex;
	justify-content: flex-end;
	&>div{
		padding: 25px;
		width: 40%;
        background: linear-gradient(to right, #69626200 30%, #716b6b4d 100%);
		display: flex;
		flex-direction: column;
		justify-content: center;
        align-items: flex-end;
		svg{
			fill: white;
			height: 40px;
			transform: rotate(180deg);
		}
	}
}

section.svc-mainh-hover{
	.content{
		padding: 0px var(--gap) 0px;
		.svcl-hdr{
            padding: 40px 0px 40px;
            display: flex;
            gap: 0px;
            flex-direction: column;
            p{
                font-family: Jost;
                font-weight: 100;
                font-size: var(--font-xxl);
                line-height: var(--font-xxl);
                color: var(--black);
                margin: unset;
                padding-bottom: 20px;
            }
            h6{
                font-family: CenturyGothic;
                font-size: var(--font-m);
                font-weight: 100;
                line-height: 50px;
                margin: unset;
                color: white;
                width: 120px;
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background: var(--black);
            }
		}
	}
}
section.svc-main-hover{
	.content{
		padding: 0px var(--gap) 100px;
		.svc-list{
			display: flex;
            flex-direction: column;
			gap: 30px;
			.list{
				padding: 40px 20px;
				flex: 1;
    			border: 1px solid #D3D3D3;
    			border-radius: 10px;
    			text-align: center;
				text-decoration: unset;
				position: relative;
				display: flex;
			    justify-content: space-between;
                align-items: center;
                flex-direction: column;
				.icon{
    				transition: all .3s;
					img{
						width: 100%;
						border-radius: 20px;
					}
				}
				.name-service {
                    h5 {
                        font-family: CenturyGothic;
                        font-weight: bold;
                        font-size: var(--font-m);
                        color: var(--black);
                        margin: unset;
                        margin-bottom: 10px;
                    }
                    p {
                        font-family: Jost;
                        font-weight: 100;
                        font-size: var(--font-xm);
                        color: var(--black);
                        margin: unset;
                    }
                }
                .go{
                	width: 50px;
                	height: 50px;
                	border-radius: 50px;
                	border: 1px solid var(--black);
                	display: flex;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: white;
                    flex: 0 0 50px;
                	svg{
                		fill: var(--black);
                		width: 20px;
                		transform: rotate(45deg);
				    	transition: 0.3s;
                	}
                }
                &::after {
				    content: '';
				    position: absolute;
				    width: 100%;
				    height: 100%;
				    top: 0;
				    left: 0;
				    z-index: -1;
				    opacity: 0;
				    -webkit-transform: scaleY(0.96);
				    transform: scale(0.96);
				    transform-origin: bottom;
				    -webkit-transition: 0.3s;
				    -o-transition: 0.3s;
				    transition: 0.3s;
				    bottom: 0;
				    right: 0;
    				background: var(--pink-2);
    				border-radius: 10px;
				}
                &:hover{
                	.icon{
                		-webkit-mask: unset !important;
                	}
					.name-service {
	                    h5 {
	                    	color: white;
	                    }
	                }
					.desc-service {
	                    p {
	                    	color: white;
	                    }
	                }
	                .go{
	                	svg{
	                		transform: rotate(0deg);
	                	}
	                }
                	&::after{
					    opacity: 1;
					    transform: scaleY(1);
                	}
                }

			}
		}
	}
}

section.svc-detail-dnb{
	.swiper-wrapper{
	/*padding: 0px var(--gap) 0px;*/
		.swiper-slide{
			width: 310px;
			border-radius: 50%;
			border: 1px solid var(--gray);
			aspect-ratio: 1/1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
			img{
                width: 60px;
                margin-bottom: 30px;
                opacity: 0.9;
			}
			h5{
				margin: unset;
                font-family: CenturyGothic;
                letter-spacing: 1px;
                font-weight: bold;
                font-size: var(--font-m);
                color: var(--black);
                margin: unset;
                /*&:before,&:after{
				    top: 0;
				    bottom: 0;
				    margin: auto;
				    margin-top: 53%;
				    content: "";
				    position: absolute;
				    width: 20px;
				    height: 1px;
				    background-color: var(--black);
                }
                &:before{
				    left: 70%;
				    right: auto;
                }
                &:after{
					right: 70%;
				    left: auto;
                }*/
			}
			ul{
				margin-top: 10px;
				margin-bottom: unset;
				padding-left: unset;
    			list-style: unset;
            	padding: 0px 40px;
            	text-align: center;
            	li{
            		color: var(--black);
            	}
			}
			&:hover{
				border-color: var(--black);
			}
		}
	}
}
section.svc-addt{
	background: white;
	overflow: hidden;
	.content{
		padding: 0px var(--gap) 0px;
		&.foo{
			padding-top: 100px;
			padding-bottom: 120px;
		}
		.svc-list-other{
            display: flex;
            flex-wrap: wrap;
            .list-name{
                flex: 0 0 calc(100% - 3px);
                padding-top: 20px;
                padding-bottom: 20px;
                display: flex;
                align-items: center;
            	h6{
	                font-family: CenturyGothic;
	                font-size: var(--font-xxl);
	                font-weight: 100;
	                line-height: 50px;
	                margin-top: unset;
	                margin-bottom: unset;
	                span{
	                	color: var(--pink-2);
	                }
            	}
            }
			.list{
                flex: 0 0 calc(100% - 42px);
                padding: 20px;
                border-left: 1px solid var(--gray);
                border-top: 1px solid var(--gray);
            	border-right: 1px solid var(--gray);
            	border-bottom: 1px solid var(--gray);
                position: relative;
                &:nth-child(4n + 2) {
				}
                &:nth-last-child(-n+4) {
				}
				.icon{
					width: 100%;
					max-height: 1000px;
					overflow: hidden;
					img{
						/*width: 25px;*/
						height: 60px;
						padding-bottom: 10px;
					}
				}
				.number{
					display: flex;
                    align-items: center;
					gap: 10px;
					p,h5{
						margin: unset;
					}
					p{
                        font-family: CenturyGothic;
                        font-weight: 100;
                        font-size: var(--font-m);
                        color: var(--black);
                        margin: unset;
					}
					h5{
                        font-family: CenturyGothic;
                        font-weight: 100;
                        font-size: var(--font-s);
                        color: var(--black);
                        margin: unset;
					}
				}
				.desc-service{
					position: absolute;
					top: 20px;
					width: calc(100% - 40px);
					left: 20px;
					opacity: 0;
					transition: opacity 0.5s ease-out;
					p{
                        font-family: CenturyGothic;
                        font-weight: 100;
                        font-size: var(--font-xxm);
                        color: var(--black);
						margin: unset;
					}
				}
				&:hover{
					.desc-service{
						opacity: 1;
					}
					.number,.icon{
						opacity: 0;
						opacity: 0;
					}
				}
			}
		}
	}
}