@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

:root {
 --gold: #d6a43b;
 --white: #ffffff;
 --black: #343638;

 --z-tooltip: 10;
 --z-fixed: 100;

 --transition: 0.3s linear;
}

body {
 overflow-x: hidden;
 font-family: 'Lato';
 font-style: normal;
}

/* hamburder menu start */
@media screen and (min-width: 936px) {
 .hamburger {
  display: none;
 }
}
@media screen and (max-width: 935px) {
 .logo__header_nav div {
  left: 20px;
  top: 35%;
  position: absolute;
 }

 .bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 6px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--gold);
 }

 .hamburger {
  display: block;
  z-index: var(--z-fixed);
  width: 50px;
  top: 45%;
  right: 20px;
  position: absolute;
 }

 .hamburger.active .bar:nth-child(2) {
  opacity: 0;
 }

 .hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
 }

 .hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
 }

 .nav__menu {
  position: fixed;
  top: -160%;
  left: 0;
  background-color: var(--black);
  width: 100%;
  box-shadow: 0 8px 20px hsla(19, 64%, 24%, 0.1);
  padding-block: 3.5rem;
  transition: top 0.4s;
  display: flex;
  justify-content: center;
  flex-direction: column;
 }

 #nav-menu.active {
  top: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
 }

 .nav__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
 }

 .nav__item {
  margin: 10px;
 }

 .nav__menu a {
  margin: 10px;
 }
}

/* hamburder menu end */

.header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: var(--z-tooltip);
 transition: 0.3s linear;
}

.header_active {
 background: var(--black);
}

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

/* .logo__header_nav_linkedIn{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	height: 220px;
} */

.logo__header_nav {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 height: 220px;
}

.logo__header {
 padding: 0 0 0 20px;
}

.nav__menu {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
}

.nav__list {
 display: flex;
 flex-wrap: wrap;
 text-align: center;
 justify-content: space-between;
}

.nav__item {
 margin-left: 20px;
}

.nav__link {
 opacity: 1;
 color: var(--white);
 transition: 0.2s linear;
}

.nav__link:hover {
 opacity: 0.6;
}

.linkedIn__header {
 margin-left: 125px;
 margin-right: 20px;
}

section {
 padding: 0 20px;
}

/* main */

.intro {
 min-height: 100vh;
 background: url(../img/Image-Header.jpg) no-repeat center;
 background-size: cover;
}

.container__main {
 max-width: 1340px;
 margin: 0 auto;
}

.title__main {
 display: flex;
 justify-content: center;
 padding-top: 25vh;
 padding-bottom: 40px;
 font-size: 80px;
 color: var(--white);
 text-align: center;
}

.p__main_footer_1_2 {
 display: flex;
 justify-content: space-evenly;
}

.p__main_footer {
 display: flex;
 color: var(--white);
}

.p__main_footer p {
 max-width: 479px;
 font-size: 24px;
 line-height: 40px;
 /* or 167% */
}

.p__main_footer_2 {
 display: flex;
 justify-content: flex-end;
 color: var(--white);
}

.p__main_footer_2 p {
 max-width: 390px;
 min-height: 156px;
 font-size: 15px;
 line-height: 30px;
 /* or 200% */
}

.main__our_story_join {
 max-width: 25vw;
 display: flex;
 justify-content: space-between;
 padding-bottom: 15px;
}

.main__our_story {
 font-size: 20px;
 line-height: 55px;
 /* or 275% */
 color: var(--white);
}

.main__join_team {
 font-size: 20px;
 line-height: 55px;
 /* or 275% */
 color: var(--gold);
}

.main__call_phone {
 display: flex;
 align-items: center;
 margin-bottom: 50px;
}

.main__call {
 padding-left: 10px;
}

.main__call div {
 font-size: 20px;
 line-height: 40px;
 /* or 200% */
}

.main__call div p {
 color: var(--white);
}

.main__number a {
 font-size: 35px;
 line-height: 40px;
 /* or 114% */
 color: var(--white);
}

.arrow-down {
 display: flex;
 justify-content: center;
 padding: 10% 0;
 cursor: pointer;
}

.intro_2 {
 position: relative;
 min-height: 100vh;
 background: url(../img/hands_bg_2.png) no-repeat center;
 background-size: cover;
}

.hands__title {
 display: flex;
 justify-content: center;
 padding-top: 3%;
 padding-bottom: 1%;
 font-size: 36px;
 line-height: 139px;
 /* or 386% */
 text-align: center;
 color: var(--white);
}

.hands__img_p_button {
 display: flex;
 align-items: center;
 background: var(--black);
 width: 100vw;
 max-width: 100vw;
 margin: 0 calc(-30vw + 50%);
 /* flex: 0 0 100%; */
}

.hands__box_dark {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 400px;
 margin-left: 5%;
}

.hands__box_p {
 margin-bottom: 40px;
 margin-right: 10px;
}

.hands__box_p p {
 font-weight: 400;
 font-size: 15px;
 line-height: 30px;
 color: var(--white);
}

.button__border_gold_dark {
 border: 1px var(--gold) solid;
 text-align: center;
 width: 260px;
 font-weight: 400;
 font-size: 18px;
 line-height: 22px;
 cursor: pointer;
}

.button__border_gold_dark button {
 padding: 17px;
 color: var(--gold);
}
/* .hands__box_p {
	width: 400px;
} */

.section__award {
 display: flex;
 justify-content: center;
 background: var(--black);
 width: 100vw;
 max-width: 100vw;
 margin: 0 calc(-50vw + 50%);
 min-height: 400px;
 align-items: center;
}

.p__with_button__border_gold_dark {
 display: flex;
 flex-direction: column;
 align-items: center;
 max-width: 420px;
 font-weight: 400;
 font-size: 22px;
 line-height: 40px;
 /* or 182% */

 text-align: right;
 color: var(--white);
}

.p__with_button__border_gold_dark p {
 margin-bottom: 85px;
}

.img__award {
 margin: 0 5% 0 5%;
}

.p__span_gold {
 max-width: 27vw;
 color: var(--white);
 font-weight: 400;
 font-size: 15px;
 line-height: 30px;
 /* or 200% */
}

.color_gold {
 color: var(--gold);
 font-weight: 400;
 font-size: 20px;
 line-height: 30px;
 /* or 150% */
}

.intro_3 {
 min-height: 100vh;
 background: url(../img/Team-stock_image.jpg) no-repeat center;
 background-size: cover;
}

.industry__img_p_button {
 display: flex;
 flex-direction: row-reverse;
 align-items: center;
 background: var(--gold);
 width: 100vw;
 max-width: 100vw;
 margin: 0 calc(-70vw + 50%);
}

.industry__box_gold {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 400px;
 margin-right: 5%;
}

.industry__box_p {
 margin-bottom: 40px;
 margin-left: 10px;
}

.industry__box_p p {
/*  max-width: 27vw; */
 color: var(--white);
 font-weight: 400;
 font-size: 15px;
 line-height: 30px;
}

.button__border_dark_gold {
 border: 1px var(--black) solid;
 text-align: center;
 width: 260px;
 font-weight: 400;
 font-size: 18px;
 line-height: 22px;
 cursor: pointer;
}

.button__border_dark_gold button {
 padding: 17px;
 color: var(--black);
}

.intro_4 {
 min-height: 100vh;
 background: url(../img/Group-of-people.jpg) no-repeat center;
 background-size: cover;
}

.sup__box__gold_p_phone_button {
 max-width: 1450px;
 display: flex;
 margin: 0 auto;
 justify-content: space-around;
 align-items: center;
}

.box__gold {
 display: flex;
 background: var(--gold);
 width: 380px;
 height: 220px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.img__join-our-team {
 margin-bottom: 20px;
}

.sup__box_p_call_number {
 display: flex;
 flex-direction: column;
 /* align-items: center; */
 margin-top: 30px;
}

.sup__box__p {
 max-width: 452px;
}

.sup__box__p p {
 color: var(--white);
 margin-bottom: 60px;
 font-weight: 400;
 font-size: 20px;
 line-height: 35px;
 /* or 175% */
}

.main__number_alt a {
 font-size: 35px;
 line-height: 40px;
 /* or 114% */
 color: var(--gold);
}

.button__border_white {
 border: 1px var(--white) solid;
 text-align: center;
 width: 260px;
 font-weight: 400;
 font-size: 18px;
 line-height: 22px;
 cursor: pointer;
}

.button__border_white button {
 padding: 17px;
 color: var(--white);
}

.color_black {
 background: var(--black);
}

.p__facilities {
 display: flex;
 justify-content: center;
 padding-top: 1%;
 padding-bottom: 3%;
 font-size: 36px;
 line-height: 139px;
 text-align: center;
 color: var(--gold);
}

.buttons {
 display: flex;
 justify-content: center;
}

.button__gold {
 background: var(--gold);
 color: var(--white);
 text-align: center;
 width: 260px;
 font-weight: 400;
 font-size: 18px;
 line-height: 22px;
 padding: 17px;
 margin: 1%;
 cursor: pointer;
}

.button__white {
 background: var(--white);
 color: var(--gold);
 text-align: center;
 width: 260px;
 font-weight: 400;
 font-size: 18px;
 line-height: 22px;
 padding: 17px;
 margin: 1%;
 cursor: pointer;
}

.cards__fasilities {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 max-width: 1450px;
 margin: 0 auto;
}

.card__fasilities {
 position: relative;
 display: flex;
 margin: 2%;
}

.box__fasilities {
	position: relative;
 width: 190px;
 height: 190px;
 background: var(--gold);
 margin-top: 12%;
 margin-left: -100px;
 /* z-index: var(--z-fixed); */
 cursor: pointer;
}

.box__fasilities a img {
	position: absolute;
	display: none;
	left: 43%;
	top: 43%;
}

.box__fasilities:hover{
	background: var(--white);
}

.box__fasilities:hover p span{
	color: var(--white);
}

.box__fasilities:hover a img{
	display: block;
}

.box__fasilities p {
 display: flex;
 text-align: center;
 flex-direction: column;
 /* justify-content: center;
    align-items: center; */
 font-weight: 900;
 font-size: 16px;
 line-height: 20px;
 /* or 125% */

 /* text-align: center; */
 max-width: 135px;
 color: var(--white);
 margin: 20px auto;
}

.box__fasilities p span {
 color: var(--black);
 font-weight: 400;
 font-size: 16px;
 line-height: 20px;
 /* or 125% */

 text-align: center;
 margin-top: 20px;
}

/* .box__fasilities p span:hover{
	color: var(--white);
} */

.button__dark {
 background: var(--black);
 color: var(--gold);
 text-align: center;
 width: 260px;
 font-weight: 400;
 font-size: 18px;
 line-height: 22px;
 padding: 17px;
 margin: 1%;
}

.google-map {
 margin: 0 auto;
}

.google-map iframe {
 display: flex;
 min-height: 60vh;
 width: 100vw;
 max-width: 100vw;
 margin: 0 auto;
 align-items: center;
 margin: 0px calc(-50vw + 50%);
 justify-content: center;
}

.intro_5 {
 min-height: 100vh;
 background: url(../img/footer.jpg) no-repeat center;
 background-size: cover;
}

.logo__footer {
 display: flex;
 justify-content: center;
 padding-top: 5%;
}


.p__main_footer_form_phone_linkedin{
	display: flex;
	justify-content: space-around;
}

.p__main_footer{
	display: flex;
	flex-direction: column;
}

.formbold-mb-5 {
	margin-bottom: 20px;
 }
 .formbold-pt-3 {
	padding-top: 12px;
 }
 .formbold-main-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
 }

 .formbold-form-wrapper {
	margin: 0 auto;
	max-width: 550px;
	width: 100%;
	/* background: white; */
 }
 .formbold-form-label {
	display: block;
	font-weight: 500;
	font-size: 16px;
	color: #07074d;
	margin-bottom: 12px;
 }
 .formbold-form-label-2 {
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 20px;
 }

 .formbold-form-input {
	width: 100%;
	padding: 12px 24px;
	/* border-radius: 6px; */
	border: 2px solid var(--white);
	background: var(--white);
	font-weight: 500;
	font-size: 16px;
	color: #6b7280;
	outline: none;
	resize: none;
 }
 .formbold-form-input:focus {
	border-color: var(--black);
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
 }

 .formbold--mx-3 {
	margin-left: -12px;
	margin-right: -12px;
 }
 .formbold-px-3 {
	padding-left: 12px;
	padding-right: 12px;
 }
 .flex {
	display: flex;
 }
 .flex-wrap {
	flex-wrap: wrap;
 }
 .w-full {
	width: 100%;
 }

 .send__button{
	width: 35px;
	height: 35px;
	margin-left: 90%;
 }

.footer__img_linkedin_p{
	display: flex;
	align-items: center;
	margin-left: 4%;
	margin-bottom: 45px;
}

.footer__linkedin_p{
	font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 44px;
/* or 183% */
margin-left: 4%;

color: var(--white);
}


.img__point_place_address{
	display: flex;
	align-items: center;
	margin-left: 1%;
}

.address_p{
	width: 20vw;
	padding-left: 4%;
	color: var(--white);
}





.animation__slide_in_top {
	position: relative;
	animation: animation__slide_in_top 2s ease-out;
 }

@keyframes animation__slide_in_top {
	0% {
	  opacity: 0;
	  bottom: -700px;
	}

	100% {
	  opacity: 1;
	  bottom: 0;
	}
 }



.title__main h1 { 
	animation: title__main_h1 2s ease-out;
}

@keyframes title__main_h1{
	0% {opacity: 0;} 
	100% {opacity: 1;}
}



.animation__slide_in_right {
	position: relative;
	animation: animation__slide_in_right 2s ease-out;
 }

@keyframes animation__slide_in_right {
	0% {
	  opacity: 0;
	  right: -700px;
	}

	100% {
	  opacity: 1;
	  right: 0;
	}
 }




 .animation__slide_in_left {
	position: relative;
	animation: animation__slide_in_left 2s ease-out;
 }



@keyframes animation__slide_in_left {
	0% {
	  opacity: 0;
	  left: -700px;
	}

	100% {
	  opacity: 1;
	  left: 0;
	}
 }
















 @media (min-width: 540px) {
	.sm\:w-half {
	  width: 50%;
	}
 }

@media only screen and (max-width: 1200px) {
 .hands__img_p_button {
  margin: 0 calc(-50vw + 50%);
 }

 .industry__img_p_button {
  margin: 0 calc(-50vw + 50%);
 }
}

@media only screen and (min-width: 1200px) {
 .hands__img_p_button {
  margin: 0 calc(-30vw + 50%);
 }

 .industry__img_p_button {
  margin: 0 calc(-70vw + 50%);
 }
}

@media screen and (max-width: 935px) {
 .p__main_footer_1_2 {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
 }

 .p__main_footer_2 {
  padding-top: 35px;
 }

 .main__our_story_join {
  max-width: 320px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
 }

 .hands__title {
  padding-top: 5%;
  padding-bottom: 7%;
  line-height: 62px;
 }

 .hands__img_p_button {
  flex-direction: column;
 }

 .hands__box_p {
  display: flex;
  justify-content: center;
  margin: 10px auto;
 }

 .hands__box_dark {
  max-width: 80vw;
  margin-left: 0;
  padding: 10px;
 }

 .button__border_gold_dark {
  max-width: 200px;
  margin: 10px auto;
 }

 .button__border_gold_dark button {
  padding: 12px;
  color: var(--gold);
 }

 .section__award {
  flex-direction: column;
 }

 .p__with_button__border_gold_dark {
  text-align: left;
  padding: 10px;
 }

 .p__with_button__border_gold_dark p {
  margin: 0;
  padding: 5px;
 }

 .img__award {
  margin: 0% 0% 0% 0%;
 }

 .p__span_gold {
  max-width: 400px;
  padding: 15px;
 }

 .industry__img_p_button {
  flex-direction: column;
 }

 .industry__box_p {
  display: flex;
  justify-content: center;
  margin: 10px auto;
 }

 .industry__box_p p {
  max-width: 80vw;
 }

 .industry__box_gold {
  margin-left: 0;
  padding: 10px;
 }

 .sup__box__p p {
  text-align: center;
 }

 .sup__box_p_call_number {
  align-items: center;
  margin: 2%;
 }

 .button__border_dark_gold {
  max-width: 200px;
  margin: 10px auto;
 }

 .sup__box__gold_p_phone_button {
  flex-direction: column;
 }

 .buttons {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 2%;
 }

 .google-map iframe {
  display: flex;
  min-height: 50vh;
  width: 90vw;
  max-width: 100vw;
  margin: 0 auto;
  align-items: center;
  margin: 0px calc(-45vw + 50%);
  justify-content: center;
 }

 .p__main_footer_form_phone_linkedin {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.p__main_footer p {
	max-width: 90vw;
	font-size: 24px;
	line-height: 40px;
	width: 100vw;
	margin: 0 auto;
}

.formbold-form-wrapper {
	margin: 0 auto;
	max-width: 50wv;
	width: 80vw;
	/* background: white; */
}


.address_p {
	width: 50vw;
	padding-left: 4%;
	color: var(--white);
}
}




@media screen and (max-width: 380px) {
 .logo__header img {
  max-width: 70%;
 }

 .hamburger {
  top: 40%;
  right: 5%;
 }

 .industry__box_gold {
  max-width: 100vw;
 }

 .box__gold {
  display: flex;
  background: var(--gold);
  width: 100vw;
  max-width: 80vw;
  height: 220px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }
	
.google-map iframe {
  min-height: 30vh;
 }

 .box__fasilities p {
  padding: 1%;
 }

 .send__button {
	width: 35px;
	height: 35px;
	margin-left: 88%;
	/* display: flex; */
}

.phone_call__img_LinkedIn__address{
	margin: 3%;
}
}