body{
	font-size: 16px;
	line-height: 150%;
}
h1, h2, h3 {
font-family: Tajawal, sans-serif;
line-height: 125%;
}/* Hero Section */
.top-section .container{
  max-width: 1280px;
  width:100%;
}
.content-wrapper{
	margin-bottom: 0px;
}
.bg-hero {
  width: 100%;
	background: url(../img/img-recruitment-website/banner.jpg) no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
	position: relative;
}
.bg-hero:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(4 37 78 / 94%);
}
.hero-content-container {
  min-height: 330px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0px;
}

.hero-content-container-left {
  flex:  0 0 100%;
  text-align: left;
}

.hero-content-container-left-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 0 20px;
  border: 1px solid rgba(255, 250, 230, 0.30);
  background: linear-gradient(180deg, #7DADFB -63.19%, #6086D8 -30.55%, #48648E 3.81%, #1A3D72 22.71%);
  backdrop-filter: blur(20px);
  padding: 8px 16px;
  margin-bottom: 32px;
  color: #FFF;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
  font-family: Barlow;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.hero-content-container-left-title img {
  width: 24px;
  height: 24px;
}

.hero-content-container-left-title .text-logique {
  color: #FFF;
  font-weight: 600;
  font-size: calc(100% - 2px);
}

.hero-content-container-left h1 {
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
  margin: 0 0 20px 0;
}
.hero-content-container-left .text-highlight-1 {
  font-size: 24px;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  line-height: 125%; 
}

.hero-content-container-left p {
  color: #FFF;
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin: 0 0 20px 0; 
}

.hero-content-container-list {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;

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

.hero-content-container-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-content-container-list-item img {
  width: 24px;
  height: 24px;
}

.hero-content-container-list-item span {
  font-size: 16px;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  line-height: 150%;
  color: #FFF;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}


.hero-content-container-cta {
  display: flex;
  align-items: center;
  gap: 32px;
}

.hero-content-container-cta-text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFF;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}
 
.hero-list-container{
  display: flex; 
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hero-list-item {
  display: flex; 
  gap: 10px; 
  padding: 8px; 
  justify-content: center;
  align-items: flex-start;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(26, 61, 114, 0.40);
  box-shadow: 0 0 14px 0 rgba(255, 255, 255, 0.25);
  flex:0 0 100%; 
}

.hero-list-item-icon {
  width: 28px;
  height: 28px;
}
.hero-list-item-content {
  flex:0 0 calc(100% - (28px + 12px));
}
.text-yellow{
  color: #FFCA00;
}
.yellow-btn{
  border-radius: 8px;
  background: linear-gradient(135deg, #FFE700 0%, #FFCA00 100%);
  box-shadow: 0 0 10px 0 transparent;
  color: #0E0C0A;
} 
.yellow-btn:hover{
  color: #0E0C0A;
  border-radius: 8px;
  background: linear-gradient(135deg, #FFE700 0%, #FF9D00 100%);
  box-shadow: 0 0 10px 0 rgba(255, 202, 0, 0.50);
}
.yellow-btn.btn-secondary-outline:hover.arrow:hover::after{
  background-image: url(/img/home/arrow_right-black.svg);
  background-size: contain;
}
.section-container{
  padding:40px 0
}
.section-title{
	font-size: 30px;
}
.fs-12 {
	font-size: 12px;
}
.fs-14 {
	font-size: 14px;
}
.fs-16 {
	font-size: 16px;
}
.fs-18 {
	font-size: 18px;
}
.fs-20 {
	font-size: 20px;
}
.fs-24 {
	font-size: 24px;
}
.fs-28 {
	font-size: 24px;
}
.fs-30 {
	font-size: 30px;
}
.fs-36 {
	font-size: 36px;
}
.fs-40 {
	font-size: 40px;
}
.fs-48 {
	font-size: 48px;
}

.lh-150 {
	line-height: 150% !important;
} 
.lh-125 {
	line-height: 125% !important;
}
.lh-100 {
	line-height: 100% !important;
}
.fw-400 {
	font-weight: 400;
}
.fw-500 {
	font-weight: 500;
}
.fw-700 {
	font-weight: 700;
}
.fw-900 {
	font-weight: 900;
}
.solution-text{
	padding-top: 40px;
}
 
.solution-text .row .col-sm-4{ 
	min-height: 70px;
	margin-bottom: 20px; 
}
.solution-text .row .col-sm-4 div{ 
	background: url(../img/img-recruitment-website/icon-list1.png) no-repeat left 5px;
	padding-left: 35px;
	text-align: justify; 
}
.shadow-img-reason{
	margin-top: -3px;
}
.price-tag-text{
	padding: 85px 0 0 ;
}
.price-number{
	color: #eab913;
	text-shadow: 3px 3px 0px rgba(25, 25, 25, 1);
	font-size: 80px;
	line-height: 90px;
}
.big-text{
	font-size: 30px;
} 
.idr-text{
	font-size: 24px;
	vertical-align: top;
	margin-top:50px;
	display: inline-block;
}
.forwho-text h3{
	margin-top: 0;
	color: #ffc914; 
	font-size: 24px;
	font-weight: normal;
	line-height: 30px;
	margin-bottom: 0;

}
.forwho-cont{
	background: #000;
	padding: 40px 0;
}
.reason-container{ 
	background: url(../img/img-recruitment-website/bg-solution.jpg) no-repeat;
	background-size: cover;
	position: relative;
}
.reason-container:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: url(../img/img-recruitment-website/shadow1.png) no-repeat;
	background-position: center  -3px;
	background-repeat: no-repeat;
}
.solution-container{
	background: url(../img/img-recruitment-website/bg-solution.jpg);
	background-size: cover;
}
.simul-cont1{
	text-align: center;
	margin-top: 10px;
}
.simulation-container h2{
	margin-bottom: 20px;
	margin-top: 0;
}
.simul-cont1>div {
	display: inline-block;
	width: auto;
	vertical-align: middle;
	font-weight: bold;
	line-height: 25px;
}
.simul-2, .simul-3{
	line-height: 0 
}
.simul-2{
	font-size: 34px;
}
.simul-container{
	padding-bottom: 30px;
	background: url(../img/img-recruitment-website/bg-yellow.png) no-repeat;
	background-size: cover;
}
.simul-container div.col-sm-6 center:not(:last-child) {
	line-height: 1;
}
.simul-container div h4{
	background: #111;
	color: #fff;
	display:  inline-block;
	padding:10px 20px;
	vertical-align: top;
	margin-top: -20px;
}
.simul-text{
	background: #000;
	color: #fff;
	padding:30px 0;
}
.simul-text span{
	color: #fff;
	line-height: 30px;

}
.simul-text h3{
	font-weight: normal;
	margin-bottom: 0;
}

.simul-text .arrow-up{
	position: absolute;
    margin-top: -45px;
    border-bottom: solid 15px  #000;
	border-left: solid 15px transparent;
	border-right: solid 15px transparent;
}
.simul-description{
	padding-top:20px;
	padding-bottom: 20px;
}
.simulation-container-content{
	padding-top:40px;
}
.section-container.service-price-container{
	padding: 40px 0 0;
}
.service-price-container .service-price-content{
	padding-bottom: 40px;
}
.step-container{
	margin:40px 0;
}
.step-container h3{
	margin-bottom: 30px;
}
.step{
	border: 1px solid #111;
	padding-bottom:10px;
	border-right: 0;
	min-height: 360px;
}
.step:nth-child(4){
	border-right: 1px solid #111;
}
.row:nth-child(2) .step{
	border-bottom: 1px solid #111;
}
.step-number-cont{
	text-align:center;
}
.step-number-cont span{
	display: inline-block;
	margin:0 auto;
	background: #111;
	color: #fff;
	padding:5px 10px;
	margin-bottom: 10px;
}
.step h4{
	text-align: center;
	font-size: 24px;
	color: #eab913;
	margin: 10px 0 5px;

}
.step .step-text{
	font-size: 14px;
	color: #999;
	line-height: 25px;
	text-align: justify;
}
.testimonial-container {
	background: url(../img/img-recruitment-website/bg-testimonial.jpg) no-repeat;
	background-size: cover;

}
.testimonial-title {
	background: #eab913;
	min-height: 520px;
	position: relative;
}
.testimonial-title h3{
	position: absolute;
	top: 50%;
	text-align: center;
	left:0;
	right: 0;
}
.testi-container{
	padding: 100px 50px;
}
.testi-box{
	border: 2px dotted #666;
	border-radius: 15px; 
	position: relative;
	padding: 30px;
	width: 620px;
	margin:0 auto
	;
}
.testi-text{
	line-height: 30px;
}
img.img-responsive{
	max-width: 100%;
	height: auto;
}
@media (min-width: 769px) {
  .hero-content-container-left {
    flex:  0 0 80%;
    text-align: left;
  }
	.fs-16-md {
		font-size: 16px;
	}
	.fs-18-md {
			font-size: 18px;
	}
	.fs-20-md {
			font-size: 20px;
	}
	.fs-24-md {
			font-size: 24px;
	}
	.fs-30-md {
			font-size: 30px;
	}
	.fs-36-md {
			font-size: 36px;
	}
	.fs-40-md {
			font-size: 40px;
	}
	.fs-48-md {
			font-size: 48px;
	}
	.section-title {
			margin-bottom: 40px;
	}
	.big-text{
		font-size: 40px;
	}
	.section-container{
		padding:80px 0
	}
}
@media (min-width: 992px){
	.big-text{
		font-size: 60px;
	}
	.price-number{
		font-size: 200px;
		line-height: normal;
	}
}



.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}
.arrow-diagonal {
  width: 0; 
  height: 0; 
    border-top: solid 32px #111;
    border-left: solid 20px transparent;
    border-right: solid 20px transparent;
    -ms-transform: rotate(-48deg);
    -webkit-transform: rotate(-48deg);
    transform: rotate(-48deg);
    position: absolute;
    right: -20px;
    bottom:-14px;
}
.banner-text{
	/* margin-top:130px; */
	padding-top: 3.5em;
    padding-bottom: 3.5em;
	display: block;
}
.banner-text h1 {
	line-height: 55px;
	display: inline-block;
}
.banner-text h1 span{
	background-color: #111;
 
	padding: 3px 10px;
	color: #fff;
}
.ytext{
	color: #ffc914 !important;
}
.banner-subt{
	font-size: 16px;
	color: #000;
	text-shadow: 0px 0px 6px rgba(255,255,255,1);
}
.offering-part{
	background: #000;
	padding: 30px 0px 30px;

}
.offering-part h2{
	font-size: 24px;
	color: #fff;
	font-weight: normal;
	margin:0;
	line-height: 24px;
}
.offering-part h2 span{
	font-size: 18px;
	display: block;
	color: #a2a1a5;
 
}
.problem-container{
	background: url(../img/img-recruitment-website/bg-problem.jpg) no-repeat;
	background-size: cover;
	padding:50px 0 ;
}
.problem-content span{
	text-align: center;
	display: block;
}
.problem-content  h3{
	text-align: center;
	margin-bottom: 20px;
	line-height: 30px;
}
.problem-content div.img-container{
	margin-bottom: 20px;
}
.problem-content div img{
	margin:auto;
}
.problem-text{
	background: #ffc914;
	padding:50px 0 ;
}
.problem-content .row div {
	text-align: left; 
}
.problem-content .row div img{
	max-width: 180px; margin-bottom: 10px;
}
.arrow-up{
	  display: inline-block;
	  margin: 0 5px;
	  vertical-align: middle;
	  width: 15px;
	  height: 15px;
	}
.problem-text .arrow-up{
	position: absolute;
    left: 50%;
    margin-top: -65px;
    border-bottom: solid 15px  #ffc914;
	border-left: solid 15px transparent;
	border-right: solid 15px transparent;
}
.problem-text h3{
 	font-size: 30px;
	color: #111;
	margin:0; 
}
.problem-text h3 span{
	font-size: 30px;
	display: block;
	color: #111;
}





.logo-logique2{
	display: inline-block;
	position: absolute;
	top:-35px;
		left:0;
	right: 0;
}
.logo-logique2 span{
	display: inline-block;
	background: #000;
	padding: 15px 20px 10px;

}
 
.forwho-container h3 span{
	font-size: 18px;
}
.list-why {
	display: inline-block;
	text-align: left;
}
.list-why li{
	background: url(../img/img-recruitment-website/icon-list1.png) no-repeat left;
	padding-left: 30px;
	margin-bottom: 10px;
}




.quoteicon{
	font-size: 72px;
	position: absolute;
	line-height: 70px;

}
.quoteicon.quote-icon1{
	top:-20px;
	left:20px;
}
.quoteicon.quote-icon2{
	bottom:-50px;
	right:30px;
}
.testi-owner-container{
	margin-top:30px;
	font-size: 16px;
}
.footer-container{
	background: #111;
	padding:30px 0;
}
.footer-container *{
	color: #fff;
	font-size: 14px;
	line-height: 24px;
	font-weight: 300;
}
.footer-container h3{
	font-weight: normal;
	font-size: 24px;
	margin-bottom: 20px;
}
.footer-container img{
	padding-bottom: 10px;
}
.contact-form-container fieldset{
	margin-bottom: 10px;
}
.contact-form-container input[type="text"], .contact-form-container textarea{
	padding: 10px;
	width: 100%;
	border-radius: 10px;
	border:0;
	background: #fff;
	color: #111;
}
.contact-form-container textarea{
	height: 110px;
}
.contact-form-container .submit-button{
	background: #eab913;
	color: #111;
	border-radius: 10px;
	border:0;
	padding:5px 40px;
}
.mesage-alert > .alert-warning, .mesage-alert > .alert-success{
	padding: 0;
    background: none;
    color: #eab913;
    border: 0;
    margin-bottom: 5px;
}
.copyright-container *{
	font-size: 14px;

}
.copyright-container {
	padding:20px 0;
		background: #eab913;
}

.slick-dots
{
    position: absolute;
    bottom: 20px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 30px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

.btn-yellow {
	background-color: #ffc914;
	border: 2px solid #dead08;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	font-size: 16px;
}
.btn-yellow:hover,
.btn-yellow:focus {
	color: #fff;
}

/* responive */
 
    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }
 	@media only screen and (max-width : 1024px) {
 		.price-tag-text{
 			padding:30px 0 0 0;
 		}
 		.step{
 			height: 355px;
		 }
		 .testi-box{
    		width: auto;
		}
		.simul-container div h4 {
			font-size: 14px;
		}
		.simulation-container .container__ center img {
			max-width: 500px;
		}
    }
    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    	header.head-banner {
    		height: auto;
    		background-image: none;
    	}

    	.price-tag-text{
    		margin-bottom: 50px;
    	}
    	.price-term{
    		margin-top: 0 !important;
    	}
    	.forwho-cont h3 br{
    		display: none;
    	}
    	.step{
    		height: 400px;
    	}
    	.step:nth-child(2){
    		border-right: 1px solid #111;
    	}
    	.testi-box{
    		width: auto;
		}
		.simulation-container .container__ center img {
			max-width: 400px;
		}
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
    	header.head-banner{
    		background-position: 30% top;
    	}
    	.problem-content .img-container img:first-child{
    		margin-bottom: 20px;
    	}
    	.simulation-container center img{
    		display: none;
    	}
    	.list-why li{
    		background-position: left 5px;
    	}
    	.forwho-container h3{
    		font-size: 24px;
    		margin-top: 50px;
    	}
    	.forwho-text h3{
    		margin-top: 0;
    	}
    	.reason-container .col-sm-4{
    		margin-bottom: 20px;
    	}
    	.reason-container .col-sm-4:last-child{
    		margin:0;
    	}
    	.stepbystep{
    		margin:0 20px 0;

    	}
    	.stepbystep .step{
    		border:1px solid #111;
    		margin-bottom: 10px;
    		height: auto;
    		min-height: auto;
    	}
    	.testimonial-title{
    		height: auto;
    		padding: 40px 0;
    		min-height: auto;
    	}
    	.testimonial-title h3{
    		position: static;
    		margin:0;
    	}
    	.testi-container{
    		padding:50px 20px 100px;
    	}
    	.footer-container .row >div{
    		margin-bottom: 10px;
    	}

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }