@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--primary-color: #414042;
	--secondary-color: #6ab3cc;
	--light-color: #ffffff;
	--medium-color: #8c8c8c;
	--dark-color: #333;
	--text-color: #414042;
	--max-width: 100%;
	--primary-font: Poppins, sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	/* Prevent any object from being highlighted upon touch event*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	font-family: var(--primary-font);
	font-weight: 400;
	line-height: 1.5;
	background-color: var(--light-color);
	color: var(--text-color);
}

p {
	margin-bottom: 1rem;
	font-size: 18px;
	font-weight: 400;
	font-kerning: none;
	font-style: normal;
}

a {
	text-decoration: none;
	color: var(--primary-color);
	transition: color 0.5s;
}

a:hover {
	color: var(--secondary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom: 1rem;
	line-height: 1.3;
	color: var(--primary-color);
	font-family: var(--primary-font);
	font-kerning: none;
}

ul {
	list-style: none;
}

input[type="text"] {
	font-family: var(--primary-font);
}

input[type="number"] {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
}


#select-career {
    border: none !important;
    border-bottom: 2px solid #6CB4CC !important;
    background-color: transparent;
    margin-right: 1rem;
    font-size: 16px;
    outline: none;
}
.responsive-mt-150px {
	margin-top: 150px !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none;
}

img {
	width: 100%;
	opacity: 1;
	transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	-webkit-transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
}

#bg-grey {
	background-color: #eee;
}

.btn {
	display: inline-block;
	border: none;
	background: var(--primary-color);
	color: #fff;
	padding: 0.5rem 1rem;
}

.btn-block {
	display: block;
	width: 100%;
	border: none;
	background: var(--primary-color);
	color: #fff;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	cursor: pointer;
	height: 42px;
	/* border-radius: 5px; */
}

.btn-block:hover {
	background: var(--secondary-color);
}

.py-1 {
	padding: 1rem 0;
}

.py-2 {
	padding: 2rem 0;
}

.py-3 {
	padding: 3rem 0;
}

.py-4 {
	padding: 4rem 0;
}

.my-1 {
	margin: 1rem 0;
}

.my-2 {
	margin: 2rem 0;
}

.mt-1 {
	margin-top: 1rem;
}

.mt-2 {
	margin-top: 2rem;
}

.mt-3 {
	margin-top: 3rem;
}

.container {
	max-width: var(--max-width);
	overflow: hidden;
	margin: auto;
	padding-left: 80px;
	padding-right: 80px;
}

.row {
	max-width: 100%;
	overflow: hidden;
	margin: auto;
	padding-left: 3rem;
	padding-right: 3rem;
}

.column {
	overflow: hidden;
	margin: auto;
	padding-left: 3rem;
	padding-right: 3rem;
}

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

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.sectionTitle {
	padding: 1rem;
	font-size: 2.5rem;
	letter-spacing: 2.1px;
}

.card {
	background: white;
	padding: 1rem;
}

hr {
	height: 1px;
	background-color: #ccc;
	border: none;
	margin-bottom: 1rem;
}

.box-shadow {
	box-shadow: 0 5px 15px 0 rgb(0 0 0 / 13%);
	margin: 0 1% 40px;
}

/* Style the tabs */
.tab {
	overflow: hidden;
	background-color: transparent;
}

/* Style the buttons inside the tab */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 17px;
	color: var(--rimary-color);
}

/* Change background color of buttons on hover */
.tab button:hover {
	color: var(--secondary-color);
}

/* Create an active/current tablink class */
.tab button.active {
	border-bottom: 2px solid var(--secondary-color);
	color: var(--secondary-color);
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 1rem;
	border-top: none;
	animation: fadeEffect 1s;
	/* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* style grid */

.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.grid-2-gap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
}

.grid-3-gap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 3rem;
}

.grid-4-gap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1rem;
}

/* sty bg image */
.img-paralax {
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
}

/* style table */
table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

td {
	text-align: left;
	padding: 16px;
	border-bottom: 1px solid #ddd;
	letter-spacing: 1px;
}

th {
	text-align: center;
	padding: 16px;
	border-bottom: 1px solid #ddd;
	letter-spacing: 1px;
}

td:nth-child(odd) {
	background-color: #f2f2f2;
}

th:nth-child(even) {
	background-color: #f2f2f2;
}

.table-responsive {
	overflow-x: auto;
}

/*--top header--*/
#main-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: white;
	margin: 1rem 0;
}

#top-nav {
	background-color: var(--secondary-color);
	border-bottom: 1px solid #f2f2f2;
}

#topNavLinks {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding: 0.25rem 0;
	color: white;
	font-size: 0.9rem;
}

#topNavLinks ul {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}

#topNavLinks ul li {
	padding: 0rem 2rem;
}

#topNavLinks a {
	font-size: 0.9rem;
	color: white;
}

#topNavLinks a:hover {
	color: var(--primary-color);
}

#center-nav {
	display: grid;
	grid-template-columns: 15% 4fr 2fr;
	align-items: center;
	grid-gap: 2.5rem;
}

#center-nav ul {
	display: flex;
	justify-content: center;
	flex-direction: row;
	padding: 0;
}

#center-nav ul li {
	margin-right: 2rem;
}

#center-nav ul li a.active {
	color: var(--secondary-color);
}

#logo img {
	width: 100%;
	position: relative;
	top: 5px;
	margin-top: 15px;
	margin-bottom: 15px;
}

#categoryMenu {
	font-size: 1.4rem;
	padding: 1rem;
}

#mobileMenuIcon {
	display: none;
}

.fa-chevron-down {
	font-size: 0.8rem;
}

#accountIcons {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	padding: 0;
}

.language {
	border: 1px solid #3c3c3b;
}

#accountIcons a {
	/* font-size: 1rem; */
	font-family: var(--primary-font);
	padding: 0 0.5rem;
	color: #414042;
}

#accountIcons a:hover {
	color: var(--secondary-color);
}

#bottom-nav>ul {
	padding: 0.5rem 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	justify-content: flex-start;
}

#bottom-nav>ul>li {
	margin-right: 5rem;
}

#bottom-nav i {
	font-size: 0.9rem;
}

#center-nav ul li a {
	font-family: var(--primary-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 2px;
}

#accountIcons span,
#accountIcons a {
	font-size: 0.95rem;
}

/*mega menu sub*/
#center-nav ul li ul.topMegaMenu {
	color: #3c3c3b;
	background-color: #fff;
	z-index: 1000;
	display: none;
	padding: 1rem;
}

#center-nav>ul>li:hover>ul.topMegaMenu {
	display: flex;
	flex-direction: column;
	position: absolute;
	justify-content: center;
	border-bottom: none;
	min-width: 200px;
}

#center-nav ul li ul.topMegaMenu div {
	padding: 3rem;
}

#center-nav ul.topMegaMenu h3,
#center-nav ul.topMegaMenu a {
	color: var(--primary-color);
}

#center-nav ul.topMegaMenu h3 {
	font-size: 1rem;
	/* border-bottom: 2px dashed var(--secondary-color); */
	padding-bottom: 0.5rem;
}

#center-nav ul.topMegaMenu a {
	font-size: 0.75rem;
	font-family: var(--primary-font);
	color: #3c3c3b;
	font-weight: 500;
	letter-spacing: 2px;
}

#center-nav ul.topMegaMenu a:hover {
	color: var(--secondary-color);
}

#center-nav ul.topMegaMenu li {
	margin: 0;
	padding: 0.5rem;
	border-bottom: 1px solid #fff;
}

#center-nav ul>li>ul.topMegaMenu>li>ul.subMegaMenu {
	color: #3c3c3b;
	background-color: #fff;
	z-index: 1000;
	display: none;
	padding: 1rem;
	min-width: 220px;
}

#center-nav>ul>li:hover>ul.topMegaMenu>li:hover>ul.subMegaMenu {
	min-width: 200px;
	display: block;
	top: 0;
	left: 100%;
	position: absolute;
}

/*mega menu sub*/
#accountIcons ul li ul.topMegaMenu {
	color: #3c3c3b;
	background-color: #fff;
	z-index: 1000;
	display: none;
	padding: 0;
}

#accountIcons>ul>li:hover>ul.topMegaMenu {
	display: flex;
	flex-direction: column;
	position: absolute;
	justify-content: center;
	border-bottom: none;
	min-width: 120px;
}

#accountIcons ul li ul.topMegaMenu div {
	padding: 2rem;
}

#accountIcons ul.topMegaMenu h3,
#accountIcons ul.topMegaMenu a {
	color: var(--primary-color);
}

#accountIcons ul.topMegaMenu h3 {
	font-size: 1rem;
	/* border-bottom: 2px dashed var(--secondary-color); */
	padding-bottom: 0.5rem;
}

#accountIcons ul.topMegaMenu a {
	font-size: 0.75rem;
	font-family: var(--primary-font);
	color: #3c3c3b;
}

#accountIcons ul.topMegaMenu a:hover {
	color: var(--secondary-color);
}

#accountIcons ul.topMegaMenu li {
	margin: 0;
	padding: 0.5rem;
	border-bottom: 1px solid #fff;
}

#accountIcons ul>li>ul.topMegaMenu>li>ul.subMegaMenu {
	color: #3c3c3b;
	background-color: #fff;
	z-index: 1000;
	display: none;
	padding: 0;
}

#accountIcons>ul>li:hover>ul.topMegaMenu>li:hover>ul.subMegaMenu {
	min-width: 200px;
	display: block;
	top: 0;
	left: 100%;
	position: absolute;
}

.level-2 {
	position: relative;
}

#bottom-nav ul.middleLevelMegaMenu>li>a {
	color: var(--secondary-color);
	font-size: 1rem;
	font-weight: bold;
}

#bottom-nav ul.bottomLevelMegaMenu li {
	margin-bottom: 0rem;
}

/*---offcanvas menu--*/
.mm-spn.mm-spn--light {
	color: #fff;
	background: #032c3a;
}

.mm-ocd__content {
	max-width: 350px;
}

/*--home banners--*/
#homeBanners {
	display: grid;
	grid-template-columns: 100%;
	overflow: hidden;
}

#homeBanners .promoBanner {
	line-height: 0;
}

#homeSlideshow {
	overflow: hidden;
	grid-gap: 0.5rem;
}

.textSlider {
	position: absolute;
	top: 40%;
	left: 5.8%;
}

.slideDown {
	position: absolute;
	top: 90%;
	left: 5.8%;
}

.slideDown a>i {
	font-size: 45px;
	font-weight: 900;
}

.slideDown img {
	width: 50px;
}

.slideStatic {
	position: absolute;
	top: 70%;
	left: 6%;
}

.slideStatic a>i {
	font-size: 45px;
	font-weight: 900;
}

.slideStatic img {
	width: 50px;
}

.textSlider h1 {
	font-size: 50px;
	line-height: 65px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.5px;
}

.textSlider p {
	font-size: 25px;
	line-height: 35px;
	margin-bottom: 40px;
	font-weight: 400;
	letter-spacing: 1px;
}

.btn-link {
	background-color: transparent;
	border: 2px solid #3c3c3b;
	padding: 10px 30px;
	margin: 40px 0;
	margin-top: 10px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

.btn-link:hover,
.btn-link-active {
	background-color: #fff;
	color: #6ab3cc;
	border: 2px solid #6ab3cc;
}

.btn-link-blue {
	background-color: transparent;
	border: 2px solid #6ab3cc;
	color: #6ab3cc;
	padding: 10px 30px;
	margin: 40px 0;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

.btn-link-blue:hover {
	color: #3c3c3b;
	border: 2px solid #3c3c3b;
}

.btn-link-white {
	background-color: transparent;
	border: 2px solid #fff;
	color: white;
	padding: 10px 30px;
	margin: 40px 0;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

.btn-link-white:hover {
	color: #3c3c3b;
	border: 2px solid #3c3c3b;
}

.btn-link-blue-small {
	background-color: transparent;
	border: 2px solid #6ab3cc;
	color: #6ab3cc;
	padding: 5px 18px;
	margin: 40px 0;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

.btn-link-blue-small:hover {
	color: #3c3c3b;
	border: 2px solid #3c3c3b;
}

#pagingSlider {
	padding-left: 30px;
	padding-right: 120px;
	text-align: right;
	bottom: 70px;
}

.swiper-container-horizontal>#pagingSlider .swiper-pagination-bullet {
	margin: 0 10px;
}

.swiper-pagination-bullet {
	width: 20px !important;
	height: 20px !important;
	display: inline-block !important;
	border-radius: 50% !important;
	background: #fff !important;
	opacity: 1 !important;
}

.swiper-pagination-bullet-active {
	opacity: 1;
	background: transparent !important;
	border: 2px solid #fff !important;
}

.swiper-button-next.swiper-button-black,
.swiper-button-prev.swiper-button-black {
	color: var(--primary-color) !important;
}

.swiper-button-next,
.swiper-button-prev {
	color: var(--primary-color) !important;
}

.mobile {
	display: none;
}

/*---section about new--*/
#about {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

@media (max-width: 600px) {
	#about {
		padding-top: 0rem;
		padding-bottom: 0rem;
	}

}

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

@media (max-width: 768px) {
	.about2 {
		background-image: url("../img/about-background1.jpg");
		background-repeat: no-repeat;
		background-position: top right;
		background-size: cover;
		/* height: 500px; */
	}

	#aboutDescription {
		width: 100%;
		background: #60b6c6;
		color: white;
		padding: 3.5rem;
	}
}

@media (min-width: 769px) {
	.about2 {
		background-image: url("../img/about-background1.jpg");
		background-repeat: no-repeat;
		background-position: top right;
		background-size: cover;
		min-height: 500px;
	}

	#aboutDescription {
		width: 50%;
		background: #60b6c6;
		color: white;
		padding: 3.5rem;
	}
}

/*---section about old--*/
.about {
	display: grid;
	grid-template-columns: 30% 60%;
	align-items: center;
	justify-content: center;
	height: 600px;
}

.img-bout img {
	width: 200px;
	border-radius: 50%;
}

.text-bout {
	padding: 2rem;
}

.text-bout p {
	padding-bottom: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
}

.name {
	font-size: 15px;
}

.name span {
	font-weight: 400;
}

/* home center banner */
.Centerbanners .teaser-wrapper {
	width: 100%;
	margin: 0;
}

.teaser-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.we-teaser {
	height: 100vh;
	position: relative;
}

.we-teaser .photo-wrapper {
	height: 100%;
	position: relative;
	line-height: 0;
}

.we-teaser .photo-wrapper img {
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

.we-teaser .photo-wrapper:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgb(0 0 0 / 34%);
	backdrop-filter: blur(3px);
	opacity: 1;
}

.we-teaser .background-wrapper {
	position: relative;
	line-height: 0;
}

.we-teaser .background-wrapper img {
	max-width: 100%;
}

.we-teaser .desc-wrapper {
	position: absolute;
	top: 35%;
	left: 10%;
	right: 10%;
}

.we-teaser .title-wrapper {
	position: absolute;
	top: 44%;
	left: 10%;
	right: 10%;
}

.we-teaser .desc-wrapper img {
	width: 100px;
	padding-bottom: 20px;
}

.we-teaser .desc-wrapper h3,
.we-teaser .title-wrapper h3 {
	color: var(--light-color);
	text-transform: uppercase;
	font-size: 27px;
	line-height: 27px;
	/* font-weight: 900; */
	letter-spacing: 2.5px;
}

.we-teaser .desc-wrapper ul,
.we-teaser .desc-wrapper p,
.we-teaser .title-wrapper ul,
.we-teaser .title-wrapper p {
	color: var(--light-color);
	font-size: 18px;
	/* font-weight: 700; */
	letter-spacing: 1px;
}
.text-mapping > p {
	text-align: justify !important;
	font-size: 18px !important;
}

.we-teaser .icon-wrapper {
	position: absolute;
	bottom: 40px;
	right: 30px;
}

.we-teaser .icon-wrapper i {
	font-size: 50px;
	color: var(--light-color);
}

.we-teaser .icon-wrapper img {
	width: 40px;
}

.icon-wrapper i:hover {
	color: var(--secondary-color);
}

/*---- Counter number ----*/

.text-center p {
	letter-spacing: 1px;
}

.counter {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.number-counter {
	position: relative;
}

.number-counter h3 {
	text-transform: uppercase;
	font-size: 22px;
	letter-spacing: 2.5px;
}

.number-counter .numscroller {
    display: inline-block;
	font-size: 55px;
	font-weight: 900;
}

.bg-blue {
	background-color: var(--secondary-color);
	color: var(--light-color);
}

.bg-blue h3 {
	color: var(--light-color);
}

#plus {
    position: static; /* buang absolute */
    display: inline-block;
    font-size: 55px;
    font-weight: 900;
    margin-left: 3px; /* jarak kecil dari angka */
}


/* ---- form inquiry---- */
.bg-img {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.grid-inquiry {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-content: center;
	padding: 30px;
}

.desc {
	padding: 1rem;
	color: #fff;
}

.desc h2 {
	color: #fff;
	letter-spacing: 2.5px;
	font-size: 25px;
}

.desc p {
	letter-spacing: 1px;
}

.form-inquiry {
	padding: 10px 30px;
}

.form-inquiry select {
	padding: 0.5rem 0.75rem;
	border: none;
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	font-family: var(--primary-font);
	font-size: 1rem;
	background-color: transparent;
	letter-spacing: 1px;
}

.form-inquiry input[type="text"],
.form-inquiry input[type="email"] {
	padding: 0.5rem 0.75rem;
	width: 100%;
	height: 50px;
	border: none;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	font-family: var(--primary-font);
	background-color: transparent;
	font-size: 1rem;
	letter-spacing: 1px;
}

.form-inquiry textarea {
	padding: 0.5rem 0.75rem;
	width: 100%;
	border: none;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	font-family: var(--primary-font);
	background-color: transparent;
	font-size: 1rem;
	height: 250px;
	letter-spacing: 1px;
}

#bg-blur {
	background-color: rgba(106, 179, 204, 0.83);
	backdrop-filter: blur(5px);
}

/* ---businees page--- */
.Centerbanners .businees-wrapper {
	width: 100%;
	margin: 0;
}

.wrapper-section {
	position: relative;
	overflow: hidden;
	height: 823px;
}

.wrapper-section .image-wrapper {
	position: relative;
	line-height: 0;
	height: 823px;
	text-align: center;
	cursor: pointer;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

.wrapper-section .image-wrapper img {
	max-width: 100%;
}

.wrapper-section .title-wrapper {
	position: absolute;
	top: 50%;
	left: 10%;
	right: 10%;
}

.wrapper-section .title-wrapper h3 {
	color: var(--primary-color);
	text-transform: uppercase;
	font-size: 27px;
	line-height: 27px;
	font-weight: 900;
	letter-spacing: 2.5px;
}

#zoom .image-wrapper {
	transition: transform 0.6s;
}

#zoom .image-wrapper:hover {
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transform: scale(1.2);
}

/* --spinning page -- */
.textBanner {
	position: absolute;
	top: 45%;
	left: 5.8%;
}

.textBanner h1 {
	font-size: 35px;
	line-height: 55px;
	color: #3c3c3b;
	font-weight: 600;
	letter-spacing: 2.5px;
}

#bg-black {
	background-color: rgba(0, 0, 0, 0.3);
}

#bg-black h2 {
	color: #fff;
}

.accordion {
	cursor: pointer;
	transition: 0.4s;
}

.panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

/* -- about page -- */
.textgrid {
	display: grid;
	grid-template-columns: 100%;
	height: 200px;
	align-items: center;
}

.textgrid p {
	letter-spacing: 1px;
}

.bg-white {
	background-color: #fff;
	color: #3c3c3b;
}

.bg-white h3 {
	color: #3c3c3b;
}

.bg-section {
	max-width: 100%;
	width: 100%;
	position: relative;
}

.imgwrap {
	padding: 140px 0 140px 10%;
	background-repeat: no-repeat;
}

.padding-60 {
	padding: 60px;
}

.textIntro {
	display: grid;
	grid-template-columns: 80%;
}

.textIntro p {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
	letter-spacing: 1px;
}

.d-flex {
	display: flex;
	justify-content: flex-start;
	align-content: flex-start;
	grid-gap: 1rem;
}

.slider-about {
	padding-left: 11%;
}

.slider-about p {
	font-size: 14px;
}

.top {
	top: 25px;
	bottom: 0;
}

.sectionTop .atas {
	position: absolute;
	top: 23%;
	left: 21%;
}

.sectionTop .atas p,
.sectionBottom .bawah p {
	color: #fff;
	letter-spacing: 1px;
}

.sectionTop .bawah {
	position: absolute;
	top: 45%;
	left: 26%;
}

.sectionTop .bawah span,
.sectionBottom .atas span {
	color: #fff;
	letter-spacing: 1px;
}

.sectionBottom .atas {
	position: absolute;
	bottom: 44%;
	left: 13%;
}

.sectionBottom .bawah {
	position: absolute;
	bottom: 21%;
	left: 5%;
}

#timeline {
	display: flex;
	background-color: #031625;
}

#timeline:hover .tl-item {
	width: 23.3333%;
}

.tl-item {
	transform: translate3d(0, 0, 0);
	position: relative;
	width: 25%;
	height: 100vh;
	min-height: 600px;
	color: #fff;
	overflow: hidden;
	transition: width 0.5s ease;
}

.tl-item:before,
.tl-item:after {
	transform: translate3d(0, 0, 0);
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.tl-item:after {
	background: rgba(97, 182, 194, 0.7);
	opacity: 1;
	transition: opacity 0.5s ease;
}

.tl-item:before {
	background: linear-gradient(to bottom,
			rgb(255 255 255 / 0%),
			rgb(106 179 204 / 77%));
	z-index: 1;
	opacity: 0;
	transform: translate3d(0, 0, 0) translateY(50%);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.tl-item:hover {
	width: 30% !important;
}

.tl-item:hover:after {
	opacity: 0;
}

.tl-item:hover:before {
	opacity: 1;
	transform: translate3d(0, 0, 0) translateY(0);
	transition: opacity 1s ease, transform 1s ease 0.25s;
}

.tl-item:hover .tl-content {
	opacity: 1;
	transform: translateY(0);
	transition: all 0.75s ease 0.5s;
}

.tl-item:hover .tl-bg {
	filter: grayscale(0);
}

.tl-content {
	transform: translate3d(0, 0, 0) translateY(25px);
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 0 1.618em;
	top: 55%;
	opacity: 0;
}

.tl-content h1 {
	text-transform: uppercase;
	color: #3c3c3b;
	font-size: 1.44rem;
	font-weight: 700;
}

.tl-year {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;
	border-bottom: 1px solid #fff;
}

.tl-year p {
	font-size: 1.728rem;
	line-height: 0;
}

.tl-bg {
	transform: translate3d(0, 0, 0);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center center;
	transition: filter 0.5s ease;
	filter: grayscale(100%);
}

.grid-tech .desc-tech img {
	width: 100px;
	height: 100px;
}

/* our tech layout */

.h2-desc {
	max-width: 73%;
}

.sub-title {
	font-kerning: none;
	font-family: "Poppins", sans-serif !important;
	font-weight: 600;
}

.main-con {
	margin-bottom: 75px;
}

.grid-tech {
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 15px;
	justify-content: center;
	align-items: center;
	margin-bottom: 65px;
}

.grid-tech img {
	aspect-ratio: 215/177;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.grid-tech-2 {
	margin-left: -25px;
}

.desc-width {
	max-width: 1100px;
}

.desc-tech {
	/*padding: 40px 150px 0 40px;*/
	justify-content: center;
	text-align: justify;
	text-justify: inter-word;
	/*width:80%;*/
	max-width: 68%;
	margin: auto;

}

.desc-tech h3 {
	letter-spacing: 1.5px;
	font-weight: 600;
	text-align: left;
	font-size: 30px;
}

.desc-tech p {
	font-size: 17px;
	letter-spacing: 0.5px;
	line-height: 1.6;
	align-self: center;

}

.animationTop {
	position: relative;
	animation: tryanimation 2s linear infinite;
}

/* Tech & Environement */

/* .grid-envi .desc-envi img {
	width: 100px;
}
.grid-envi {
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 15px;
	justify-content: center;
	align-items: center;
	margin-bottom: 65px;
}

.grid-envi img{
	aspect-ratio: 583/354;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.grid-envi-2{
    margin-left:-25px;    
}

.desc-envi {
	padding: 40px 150px 0 40px;
    justify-content: center;
    text-align: justify;
    text-justify: inter-word;
	width:80%;
	max-width:68%;
	margin:auto;
	
}

.desc-envi h3 {
	letter-spacing: 1.5px;
	font-weight:600;
	text-align:left;
    font-size :30px;
}

.desc-envi p {
	font-size: 17px;
	letter-spacing: 0.5px;
	line-height:1.6;
	align-self: center;
	
} */

.grid-envi {
	display: grid;
	grid-template-columns: 60% 1fr;
	/* Image: 70%, Text: 30% */
	column-gap: 15px;
	align-items: center;
	margin-bottom: 65px;
}

.grid-envi img {
	width: 100%;
	/* Ensure the image fills its grid cell */
	aspect-ratio: 583/354;
	height: auto;
	/* Maintain aspect ratio */
	object-fit: cover;
	object-position: center;
}

.grid-envi .desc-envi {
	max-width: 80%;
	/* Ensure description stays within bounds */
	margin: auto;
	text-align: justify;
	text-justify: inter-word;
	text-justify: inter-word;
}

.grid-envi.even {
	grid-template-columns: 1fr 60%;
	/* Reverse order for even rows */
}

.grid-envi.even img {
	order: 2;
	/* Place image second */
}

.grid-envi.even .desc-envi {
	order: 1;
	/* Place text first */
}

.desc-envi h3 {
	letter-spacing: 1.5px;
	font-weight: 600;
	font-size: 30px;
	margin-bottom: 15px;
}

.desc-envi p {
	font-size: 17px;
	letter-spacing: 0.5px;
	line-height: 1.6;
}


@keyframes tryanimation {

	0%,
	100% {
		top: 0px;
	}

	50% {
		top: 20px;
	}
}

/* --halaman news-- */
.grid-news {
	display: grid;
	grid-template-columns: 30% 70%;
}

.posted-img,
.desc-posted {
	padding: 15px;
}

.desc-posted h4 {
	font-size: 1.4rem;
	line-height: 1.5;
	letter-spacing: 2.5px;
}

.posted-img {
	max-width: 100%;
}

.date-post span {
	letter-spacing: 1px;
}

.desc-posted p {
	letter-spacing: 1px;
}

.posted-title h2 {
	letter-spacing: 2.5px;
}

#desc {
	letter-spacing: 1px;
}

.img-desc {
	width: 100%;
}

/* --halaman career-- */
.textBannerCareer {
	position: absolute;
	left: 3%;
	bottom: 0;
}

.textBannerCareer h1 {
	font-size: 54px;
	font-weight: 700;
}

.width-80 {
	width: 80%;
}

.title {
	font-size: 35px;
	letter-spacing: 2.5px;
}

.jobs-inner {
	padding-top: 150px;
	padding-bottom: 150px;
}

.grid-container {
	padding-left: 12rem;
	padding-right: 12rem;
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
}

.grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.column-small {
	margin-left: 2rem;
	margin-right: 2rem;
}

.centerTitle {
	font-size: 35px;
	color: #fff;
	font-weight: 900;
	letter-spacing: 2.5px;
}

.grid-benefit {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.d-flex-start {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: center;
	padding-right: 8%;
	margin-top: 50px;
}

.icon {
	width: 120px;
	height: 120px;
	background-color: #6ab3cc;
	border-radius: 50%;
	margin-bottom: 30px;
	position: relative;
}

.icon img {
	width: 96px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (min-width: 1200px) {
	#careerTestimony {
		width: 80%;
		margin: 0 auto;
	}
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
	color: white !important;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
	color: white !important;
}

.grid-testi {
	display: grid;
	grid-template-columns: 2fr 3fr;
}

.grid-testi img {
	width: 100%;
	/* aspect-ratio: 1; */
}
.right-col-career > .title {
	margin-top: 40px !important;
	width: 60%;
}
.testimonial-desc-mobile > blockquote {
	font-size: 1.14rem !important;
}
.border-none-mobile {
	object-fit: cover;
    object-position: center center;
    width: 90% !important;
    height: 90% !important;
	max-height: 500px !important;
	border-radius: 10px;
	aspect-ratio: 1;
}
.wrap-img {
	height: 100% !important;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.right-col-career {
	/* display: flex; */
	height: 100% !important;
	/* border: 2px solid red; */
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
#master-parent {
	background-color: var(--secondary-color);
	min-height: 500px ;
	max-height: 500px ;
}
.grid-opening {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-gap: 1rem;
}

.openingTitle {
	display: grid;
	grid-template-columns: 10% 85%;
	grid-gap: 5px;
	align-items: center;
	justify-items: center;
}

.openingCountry .heading,
.openingCity .heading {
	font-weight: 700;
	margin-bottom: 5px;
}

.openingCountry p,
.openingCity p {
	margin: 0;
}

.openingTitle h3 {
	margin: 0;
}

.titleCareer h1 {
	font-size: 45px;
}

.descCareer ul {
	margin-left: 20px;
	list-style: disc;
}

.descCareer ul li {
	padding: 0 0 10px 10px;
}

/* -- halaman contact -- */

.grid-contact {
	display: grid;
	grid-template-columns: 30% 40%;
	grid-gap: 1rem;
	justify-content: center;
}

.form-inquiry h2 {
	padding: 1rem;
	letter-spacing: 10px;
}

.contactDesc {
	position: relative;
	left: 30px;
	bottom: 28px;
}

.contactDesc p {
	letter-spacing: 2px;
}

/*--footer--*/
footer {
	background-color: #d8d8d8;
	padding-bottom: 50px;
	padding-top: 30px;
}

footer #Gridcontainer {
	display: grid;
	grid-template-columns: 23% 72%;
	grid-gap: 5rem;
}

footer p,
footer a {
	font-size: 0.75rem;
	color: #3c3c3b;
	letter-spacing: 1px;
}

footer i {
	font-size: 1.5rem;
	color: #3c3c3b;
}

footer h2 {
	font-size: 2rem;
	/* font-weight: 900; */
	letter-spacing: 2.5px;
}

footer h3 {
	font-size: 1rem;
	color: #3c3c3b;
	letter-spacing: 2.5px;
}

footer ul li {
	margin-bottom: 0.5rem;
}

.footer-info {
	padding: 3rem 0 1rem 0;
}

footer .container .footerCol {
	padding: 0 3rem;
}

#footerLogo {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 2rem;
}

#footerLogo img {
	width: 120px;
}

#footerSection {
	display: flex;
	gap: 3rem;
}

#footerSection p,
#footerSection a {
	color: #4c4c4c;
}

footer .fa {
	margin-right: 0.5rem;
}

#footerNewsletter {
	display: grid;
	grid-template-columns: 5fr 1fr;
	padding: 1rem 0;
	justify-content: start;
}

footer input[type="email"] {
	border: 2px solid var(--secondary-color);
	/* border-radius: 5px; */
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	font-size: 0.9rem;
	padding: 0.5rem 0.75rem;
}

footer .btn {
	background: var(--secondary-color);
	/* border-top-right-radius: 5px;
  border-bottom-right-radius: 5px; */
}

.copyright {
	font-size: 0.8rem;
}

.copyright p {
	color: #4c4c4c;
}

.copyright span {
	color: #4c4c4c;
	display: flex;
	justify-content: flex-end;
}

.sosialmedia {
	text-align: right;
}

.rules {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.footerBottom {
	display: flex;
	justify-content: space-between;
	margin-top: 3.5rem;
}

.benefit-content {
	text-align: center;
}

/*---contact maps----*/
#contactMaps {
	display: flex;
	flex-direction: row;
}

#contactMapLink {
	flex: 1;
	padding: 2rem;
	display: flex;
	flex-direction: column;
}

#contactMapLink img {
	max-width: 230px;
}

#contactMaps iframe {
	flex: 3;
}

.btn-contactmap {
	margin: 10px;
}

.contactLogo {
	margin-top: 1rem;
}

@media (max-width: 768px) {
	#contactMaps {
		flex-direction: column;
	}

	.btn-contactmap {
		margin: 0px;
	}

	.contactLogo {
		margin-top: 0rem;
	}
}

@media (min-width: 769px) {
	#contactMapLink img {
		max-width: 230px;
		margin-left: 50px;
	}

	#contactMapLink a {
		width: 280px;
		margin-left: 50px;
	}
}

/*---csr page----*/

.blogBody {
	display: grid;
	grid-template-columns: 70% 30%;
	grid-gap: 2rem;
	padding-top: 2rem;
	align-items: flex-start;
}

@media (min-width: 1200px) {
	.posted-title h1 {
		width: 70%;
		font-size: 2rem;
	}
}

.blogLinks li {
	width: 90%;
	border-bottom: 1px solid #414042;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

@media (max-width: 768px) {
	.blogBody {
		grid-template-columns: 1fr;
	}

	.blogLinks li {
		width: 100%;
	}
}

/*--about market---*/
#aboutMarketSwiper .swiper-slide {
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 0px;
}

.swiper4 .swiper-button-next,
.swiper4 .swiper-button-prev {
	top: 40% !important;
}

#aboutMarketSwiper img {
	filter: brightness(80%);
}

#aboutMarketSwiper .imageWrapper {
	position: relative;
}

#aboutMarketSwiper .imageWrapper h3 {
	position: absolute;
	bottom: 15px;
	left: 50%;
	width: 300px;
	transform: translate(-50%, -50%);
	text-align: center;
	text-transform: uppercase;
}

#aboutMarketSwiper .swiper-slide .textWrapper {
	background: white;
	width: 100%;
	height: 100px;
	margin-top: -7px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/*----modal-----*/
.w3-modal {
	z-index: 3;
	display: none;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
}

.w3-modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	width: 800px;
	max-width: 95%;
}

.w3-animate-opacity {
	animation: opac 0.8s;
}

#grid-custom-template {
	grid-template-columns: 1fr 1fr;
	width: 80%;
}

@keyframes opac {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.w3-modal-content span {
	position: absolute;
	top: 20px;
	right: 20px;
	color: #3c3c3b;
	font-size: 40px;
	cursor: pointer;
}

.w3-modal-content .modalContent {
	display: flex;
	flex-direction: column;
}

.w3-modal-content .modalText {
	padding: 3rem;
}

@media (max-width: 768px) {
	.w3-modal-content .modalText {
		padding: 2rem;
	}
}

.w3-modal-content .modalText h3 {
	color: #6ab3cc;
	font-size: 27px;
	text-transform: uppercase;
}

.w3-modal-content .modalButtons {
	margin-top: 3rem;
}

.w3-modal-content .modalButtons a {
	margin-right: 1rem;
}

@media screen and (min-width:1200px) {
	.homeMarketText {
		max-width: 900px;
		margin: 0 auto;
	}
}

.silver-kris-logo {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	align-items: center;
	font-weight: 600;
	text-transform: uppercase;
}

#paragraph-be-part {
	margin-top: 100px !important;
}

#secion-career-master-job {
	color: #6ab3cc !important;
	font-size: 65px;
	font-weight: 500;
	margin-bottom: 0px !important
}

#secion-career-master {
	color: #6ab3cc !important;
	font-size: 4.5rem !important;
	font-weight: 500;
	margin-bottom: 0px !important
}

/*  */

.container-master {
	display: flex;
	flex-wrap: wrap;
	gap: 16px; /* Jarak antar kotak */
	padding: 20px;
	max-width: 1450px;
	/* justify-content: center; */
	 /* Center alignment */
  }
  
  .container-master > .box {
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 40px 10px;
	text-align: center;
	/* flex: 1 1 calc(50% - 32px); 2 kotak per baris */
	/* max-width: calc(50% - 32px);  */
	max-width: 650px;
	flex: 1 1 650px;
	box-sizing: border-box;
  }
  
  
.container-master > .box {
	max-width: 650px;
	width: 100%;
	flex: 1 1 650px;
}

.container-master > .box.last-job {
	max-width: 650px; /* 2 kolom + gap */
	flex: 1 1 650px;
}


  .container-master > .box2 {
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 40px 10px;
	/* text-align: center; */
	flex: 1 1 calc(50% - 32px); /* 2 kotak per baris */
	max-width: calc(50% - 32px); 

	/* max-width: 200px !important;
	max-height: 200px !important; */
  }

  .container-master > .box-custom{
	/* background-color: #f0f0f0; */
	/* border: 1px solid #ddd; */
	border-radius: 8px;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
	padding: 40px 10px;
	/* text-align: center; */
	flex: 1 1 calc(50% - 32px); /* 2 kotak per baris */
	max-width: calc(50% - 32px); 
  }

  
  .box strong {
	font-size: 1.2em;
	color: #333;
  }
  
  .form-container {
	background-color: #f0f0f0;
	border-radius: 8px;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
	padding: 20px;
	width: 100%;
	/* max-width: 400px; */
	box-sizing: border-box;
  }
  
  .mandatory-info {
	color: red;
	font-size: 0.9em;
	margin-bottom: 10px;
  }
  
  .form-group {
	margin-bottom: 15px;
  }
  
  label {
	display: block;
	font-size: 0.95em;
	margin-bottom: 5px;
	color: #333;
  }
  
  .required {
	color: red;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="file"],
  textarea {
	width: 100%;
	padding: 10px;
	font-size: 1em;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
  }
  
  textarea {
	resize: none;
  }
  
  .submit-btn {
	background-color: #007bff;
	color: #fff;
	border: none;
	padding: 10px 15px;
	font-size: 1em;
	border-radius: 4px;
	cursor: pointer;
	width: 100%;
  }
  
  .submit-btn:hover {
	background-color: #0056b3;
  }
  
  .privacy-info {
	font-size: 0.8em;
	color: #666;
	text-align: center;
	margin-top: 10px;
  }
  #job_title {
	width: 100% !important;
	min-height: 130px !important;
	display: flex;
	justify-content: center;
	align-items: center;
  }

  @media (max-width: 768px) {
	.box {
	  flex: 1 1 calc(50% - 16px); /* 2 kotak per baris untuk layar kecil */
	  max-width: calc(50% - 16px);
	}
  }
  
  @media (max-width: 480px) {
	.box {
	  flex: 1 1 100%; /* 1 kotak per baris untuk layar sangat kecil */
	  max-width: 100%;
	}
  }

  @media (min-width: 2100px) {
	#job-container {
		width: 70% !important;
	}
  }

  @media (min-width: 1921px ) and (max-width:2099px) {
	#job-container {
		width: 77% !important;
	}
  }

  @media (min-width: 1800px ) and (max-width:1920px) {
	#job-container {
		width: 83% !important;
	}
  }

  @media (min-width: 1520px ) and (max-width:1630px) {
	#job-container {
		width: 98% !important;
	}
  }

  @media (max-width:1540px) and (min-width:1320px) {
	#job-container {
		width: 93% !important;
	}
	
	.container-master {
		max-width: 1100px;
	}
	
	.container-master > .box {
		max-width: 510px !important;
	}
  }

  @media (min-width:1215px) and (max-width:1320px) {
      	.container-master>.box {
		max-width: 450px !important;
	}
	
	.container-master {
		max-width: 980px;
	}
  }

  @media (max-width:1214px) {
	#job-container {
		width: 70% !important;
	}

	.container-master {
		max-width: 700px;
	}
  }


	

  @media (min-width: 1921px) {
	
	#master-parent {
		min-height: 600px !important;
		max-height: 600px !important;
	}
	.border-none-mobile {
		max-height: 600px !important;
	}
	.right-col-career > .title {
		margin-bottom: 140px !important;
		font-size: 3.5rem !important;
	}
	.right-col-career > blockquote {
		font-size: 1.2rem !important;
	}
	.user-testimony {
		font-size: 1.5rem ;
		text-transform: uppercase !important;
	}
	.testimonial-desc-mobile > blockquote {
		font-size: 1.5rem !important;
	}

  }