/*# 01) Banner Section #*/
.inner-banner-section {
	background-color: #DEECDD;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* NEW - Chrome */
	display: flex;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
	align-items: center;
	flex-wrap: wrap;
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
	.c-section--1 {
		background-position: right center !important;
	}
	
}

@media screen and (min-width: 300px) and (max-width: 1024px) and (orientation: landscape) {
    .c-section--1 {
      padding-bottom: calc(var(--section-padding) / 3) !important;
    }
}

@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1200px) {
    .c-section--1.inner-banner-section {
        background-attachment: unset !important;
    }
}

@media screen and (orientation: landscape) and (max-width: 768px) {
    .c-section--1.inner-banner-section {
        background-attachment: unset !important;
        align-items: flex-end !important;
    }
}


/*# 02) Second section #*/
.c-section--2 {
	background-color: var(--white-color);
}

.c-section--2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, #06060600, #D7ECE4);
	pointer-events: none;
	max-height: 40%;
}

.c-section--2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #06060600, #fff);
	pointer-events: none;
	max-height: 30%;
	z-index: -1;
}


/* banner img with text overlapping */
.banner-img-container {
	position: relative;
}

.banner-img-wrapper, .banner-img-wrapper img {
	position: relative;
}

.banner-img-wrapper {
	width: 90%;
	margin: 0 auto;
	min-height: 670px;
}

.banner-img-text-wrapper {
	position: absolute;
	top: 0;
	width: 100%;
	padding: 2rem;
	left: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	transition: .3s ease-in-out all;
}

/*
.banner-img-text:not(:first-child) {
	margin-top: 2rem;
} */

.banner-img-text:nth-child(3) {
	max-width: 390px;
}

.banner-img-text-wrapper>div:nth-child(2) {
	/* display: flex;
	align-items: center;
	height: 100%; */
	position: relative;
}

.banner-img-text-wrapper>div:nth-child(2)::before {
   content: '';
   top: -25px;
   left: -100%;
   position: absolute;
   width: 220%;
   height: 1px;
	background-color: var(--dark-grey-color);
	opacity: .6;
}

.banner-img-text.banner-img-text-top {
   position: absolute;
   top: 20%;
   max-width: 560px;
   transform: translateY(-50%);
   width: 100%;
}

.banner-img-text:nth-child(2) {
   max-width: 560px;
   position: absolute;
   top: 45%;
   width: 100%;
   transform: translateY(-50%);
}

.banner-img-text.banner-img-text-bottom {
   position: absolute;
   bottom: 0;
   right: 30px;
   margin-top: auto !important;
   margin-left: auto;
   padding: 2rem;
   background-color: #84754E;
}


@media (max-width: 767px) {
   .c-section--2 {
     padding-top: calc(var(--section-padding) / 2) !important;
   }

   .banner-img-text-wrapper {
     padding: 2rem 3rem;
   }

   .banner-img-text p {
     font-size: .85rem !important;
     line-height: 1.3rem !important;
   }

   .banner-img-text.big-header-text p {
     font-size: 1.1rem !important;
   }

   .banner-img-wrapper {
     width: 100% !important;
     min-height: 365px !important;
   }

   .banner-img-wrapper img {
     max-width: 100% !important;
     margin: 0 auto;
   }

   .banner-img-text.banner-img-text-top {
     position: relative !important;
     top: 9% !important;
   }

   .banner-img-text:nth-child(2) {
     position: relative;
     top: 15% !important;
   }

   .banner-img-text-wrapper>div:nth-child(2)::before {
     top: -12px !important;
     left: 0 !important;
     width: 100% !important;
   }

   .banner-img-text.banner-img-text-bottom {
     padding: 1rem !important;
     margin: 0 auto !important;
     width: 85% !important;
     right: 0 !important;
     left: 0 !important;
   }

   .banner-img-text.banner-img-text-bottom p {
     margin-bottom: 0 !important;
   }

}

@media (max-width: 400px) {
	.banner-img-wrapper {
		width: 100% !important;
		min-height: 390px !important;
	}
	
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
	.banner-img-wrapper {
		width: 100% !important;
		min-height: 470px !important;
	}
	
	.big-header-text p {
		font-size: 1.5rem !important;
		line-height: inherit !important;
	}
	
}


/* For only Large Devices, Wide Screens */
@media screen and (min-width: 1500px) {
	.banner-img-wrapper {
		min-height: 785px !important;
	}
	
	.banner-img-text.banner-img-text-top {
		position: absolute;
		top: 28% !important;
	}
	
	.banner-img-text:not(:last-child) {
		top: 50%;
	}
	
}

 /* landscape */
 @media screen and (min-width: 300px) and (max-width: 1024px) and (orientation: landscape) {
    .banner-img-wrapper {
      width: 100% !important;
      min-height: 370px !important;
    }
 
    .big-header-text p {
      font-size: 1.5rem !important;
      line-height: inherit !important;
    }
 
    .banner-img-wrapper img:first-child {
      display: block !important;
    }
 
    .banner-img-wrapper img:nth-child(2) {
      display: none !important;
    }
 
    .banner-img-text.banner-img-text-bottom {
      position: absolute;
      bottom: 0 !important;
      right: 30px !important;
      left: unset !important;
      margin-top: auto !important;
      margin-left: auto !important;
      padding: 1rem !important;
      background-color: #84754E;
    }
 
}
 
@media screen and (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
    .banner-img-wrapper {
      width: 100% !important;
      min-height: 470px !important;
    }
}

/*# 03) Our Culture section #*/
.c-section--3 {
	background-color: var(--white-color);
	background-image: url('/SPSetia/media/Revamped-Library/assets/bg/Our-Culture-Background.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.c-section--3:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(to top, #06060600, #ffffff);
	pointer-events: none;
}

.c-section--3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #06060600, #D7ECE4);
	pointer-events: none;
	max-height: 450px;
}

.c-section--3 .custom-box-wrapper {
   display: flex;
   justify-content: center !important;
   max-width: 90%;
   gap: 2rem;
}

.custom-box-img-wrapper {
   position: relative;
   width: 100%;
   max-width: 420px;
   min-height: 500px;
   padding: 1rem;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   transition: 0.3s ease-in-out all;
}

.custom-box-img-wrapper::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(138, 141, 143, 0.93);
   opacity: 0;
   transition: .3s ease-in-out all;
   z-index: 0;
}

.custom-box-desc-wrapper {
   margin-top: auto;
   display: flex;
   flex-direction: column;
   gap: 2rem;
   z-index: 2;
   text-align: center;
}

.custom-box-desc {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   padding: 1rem;
   transition: .3s ease-in-out all;
   opacity: 0;
}

.custom-box-desc p {
   color: #fff;
   font-size: .9rem;
}

.custom-box-title {
   transition: .3s ease-in-out all;
}


/* make the card desc visible on mobile and ipad */
@media (max-width: 1024px) {
	.custom-box-img-wrapper.clickedd .custom-box-desc,
	.custom-box-img-wrapper.clickedd::before {
		opacity: 1;
	}

	.c-section.c-section--3 .full-width-column2 {
		padding: 10px !important;
	}

	.custom-box-wrapper {
		display: flex !important;
		margin: 0 auto;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 0 !important;
	}

	.custom-box-img-wrapper {
		min-height: 250px !important;
		margin-bottom: 1rem;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		height: 100%;
	}

	.custom-box-desc-wrapper {
		margin-top: unset !important;
		flex-direction: unset !important;
		gap: 1rem !important;
		position: relative;
		width: 100% !important;
		height: 100% !important;
		align-items: center !important;
	}

	.custom-box-desc {
		text-align: left !important;
	}

	.custom-box-desc {
		position: absolute;
		top: 80% !important;
		left: 43% !important;
		transform: translate(-50%, -50%);
		width: 86% !important;
		padding: unset !important;
	}

	.custom-box-desc p {
		font-size: .8rem !important;
	}

	.cta-pointer-button::before {
		width: 35px !important;
		height: 35px !important;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.custom-box-img-wrapper.clickedd .cta-pointer-button::before {
		background-image: url('/SPSetia/media/Revamped-Library/assets/icons/main-btn-blue-fill.svg');
		transform: rotate(180deg);
	}

	.custom-box-title.general-heading h4 {
		line-height: 1.8rem !important;
		margin-bottom: 0 !important;
		font-size: 1.1rem !important;
	}

	.custom-box-arrow {
		/* display: flex;
		justify-content: center;
		align-items: center;
		height: 100%; */
		margin-left: auto !important;
		order: 2 !important;
	}

	.custom-box-title {
		position: relative;
		top: unset !important;
		left: unset !important;
		padding: unset !important;
	}

	.custom-box-img-wrapper.clickedd .custom-box-title {
		transform: translateY(-85px) !important;
	}

 }

@media (max-width: 767px) {
	.custom-box-desc-wrapper {
		text-align: left !important;
	}
	
}

/* make the card hover-able on desktop */
@media (min-width: 1025px) {
	/* when hover change bg gradient */
	.custom-box-img-wrapper:hover::before,
	.custom-box-img-wrapper:hover .custom-box-desc {
		opacity: 1;
	}
	
	/* when hover change arrow button to blue */
	.custom-box-img-wrapper:hover .cta-pointer-button::before {
		background-image: url('/SPSetia/media/Revamped-Library/assets/icons/main-btn-blue-fill.svg');
		transform: rotate(180deg);
	}
	
}

@media screen and (min-width: 1500px) {
	.custom-box-img-wrapper {
		max-width: 420px;
		min-height: 670px;
		padding: 2rem;
	}
	
	.custom-box-desc {
		position: absolute;
		top: 45%;
		padding: 2rem;
	}
	
	.custom-box-desc p {
		font-size: 1rem;
	}
	
}


/*# 04) Team Setia section #*/
.c-section--4 {
   background: linear-gradient(to top, #ffffff75, #D7ECE4), url('/SPSetia/media/Revamped-Library/assets/bg/Meet-Team-Setia-Background.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.c-section--4::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, #06060600, #D7ECE4);
   pointer-events: none;
   /* max-height: 450px; */
}

.c-section--4::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, #06060600, #FFF);
   pointer-events: none;
   max-height: 650px;
}

.team-setia-wrapper {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
}

.team-setia-profile {
   position: relative;
   width: 40%;
}

.team-setia-desc-col {
   position: relative;
   background-color: #022C7B;
   padding: 4rem 2rem 1rem 2rem;
   color: #fff;
   height: 100%;
   min-height: 430px;
   width: 60%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.team-setia-desc {
   display: flex;
   gap: 2rem;
   width: 100%;
}

.team-setia-desc-icon {
   position: relative;
   width: 15%;
   text-align: center;
}

.team-setia-desc-icon p {
   font-family: "Stone Sans, Bold";
   font-size: 4rem;
   text-align: center;
   transform: translateY(1rem);
}

.team-setia-desc-text {
   position: relative;
   width: 85%;
}

.team-setia-bottom-desc {
   position: relative;
   display: flex;
   align-items: center;
   gap: 2rem;
   width: 100%;
   margin-top: auto;
   padding-top: 1rem;
}

.team-setia-bottom-desc::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: #999696;
   opacity: .2;
}

.team-setia-logo {
   width: 15%;
}

.team-setia-logo img {
   width: 90px;
   height: 90px;
}

.team-setia-name h4 {
   font-family: 'Stone Sans, Bold';
   letter-spacing: 2.1px;
   font-size: 1.5rem;
}

.team-setia-designation p {
   color: var(--white-color);
   letter-spacing: 1px;
   font-family: 'Stone Sans, SemiBold';
   font-size: .9rem;
   margin-bottom: 0 !important;
}

.team-setia-profile-desc {
   position: relative;
   width: 85%;
}


/* for swiper button nav */
.center-customNav-swiper {
   position: absolute;
   width: 100%;
   max-width: 125px;
   margin: 0 auto !important;
   top: 57%;
   right: 0;
}

.swiper-button-next.team-swiper-btnNext,
.swiper-button-prev.team-swiper-btnPrev {
   position: absolute !important;
   bottom: unset !important;
   top: 50% !important;
   width: 45px !important;
   height: 45px !important;
   margin-top: unset;
}

.center-customNav-swiper .swiper-button-next:hover,
.center-customNav-swiper .swiper-button-prev:hover {
	background-image: url('/SPSetia/media/Revamped-Library/assets/icons/main-btn-blue-fill.svg');
}


@media (max-width: 767px) {
   .team-setia-wrapper {
     display: block !important;
   }

   .team-setia-col .container {
     padding: 0 !important;
   }

   .team-setia-profile {
     position: relative;
     width: 90% !important;
     margin: 0 auto;
     z-index: 2;
   }

   .team-setia-desc-col {
     width: 100% !important;
     padding: 2rem 1rem !important;
     min-height: 355px !important;
     z-index: 1;
     margin-top: -10px;
   }

   .team-setia-desc,
   .team-setia-bottom-desc {
     gap: 1rem;
   }

   .center-customNav-swiper {
     max-width: 105px;
   }

   .swiper-button-next.team-swiper-btnNext,
   .swiper-button-prev.team-swiper-btnPrev {
     width: 35px !important;
     height: 35px !important;
   }

   .center-customNav-swiper {
     top: 72%;
   }

   .team-setia-desc-icon p {
     font-size: 3rem !important;
   }

   .team-setia-name h4 {
     font-size: 1.2rem !important;
     margin-bottom: .5rem !important;
   }

   .team-setia-designation p {
     font-size: .7rem !important;
   }
   
}

@media (max-width: 400px) {
	.center-customNav-swiper {
		top: 70%;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.swiper-button-next.team-swiper-btnNext,
	.swiper-button-prev.team-swiper-btnPrev {
		width: 35px !important;
		height: 35px !important;
	}
	
	.center-customNav-swiper {
		max-width: 100px !important;
	}
	
	.team-setia-name h4 {
		font-size: 1.2rem !important;
	}
	
	.team-setia-designation p {
		font-size: .8rem !important;
	}
	
	.team-setia-desc-col {
		padding: 2rem 1rem 1rem 1rem;
		min-height: 355px;
	}
	
	.swiper.team-swiper .center-customNav-swiper {
		top: 50%;
	}
	
	.team-setia-desc-icon p {
		font-size: 3rem !important;
	}
	
 }

/* landscape */
@media screen and (min-width: 300px) and (max-width: 1024px) and (orientation: landscape) {
    .team-setia-profile {
      position: relative;
      width: 50% !important;
    }
 
    .team-setia-col .container {
      max-width: unset !important;
      padding-left: calc(var(--container-padding) / 4);
      padding-right: calc(var(--container-padding) / 4);
    }
 
    .team-setia-desc-text p {
      margin: 0 0 0.9375rem;
      font-size: .9rem !important;
      line-height: 1.1875rem;
      letter-spacing: 0;
    }
 
    .team-setia-bottom-desc {
      position: relative;
      display: flex;
      gap: 1rem !important;
    }
 
    .team-setia-designation p {
      font-size: .7rem !important;
    }
} 

/*# 05) Job Opening section #*/
.c-section--5 {
   background-color: var(--white-color);
}

.c-section--5::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to top, #06060600, #ffffff);
   pointer-events: none;
   max-height: 40%;
}

.c-section--5::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, #06060600, #D7ECE4);
   pointer-events: none;
   max-height: 40%;
}

/* custom threebox */
.custom-threebox-wrapper {
   display: -webkit-box;
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;
   /* TWEENER - IE 10 */
   display: -webkit-flex;
   /* NEW - Chrome */
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   align-items: center;
   flex-wrap: no-wrap;
   justify-content: center;
   align-items: center;
}

.custom-threebox-container2 {
   flex-basis: 370px;
}

.custom-threebox {
   position: relative;
   height: 100%;
   width: 100%;
   padding: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.cta-text-button p {
   color: var(--white-color) !important;
}

/*
.custom-threebox-inner.custom-threebox-inner2 {
 background-color: #022c7b;
} */

.custom-threebox-inner.custom-threebox-inner2 {
	/* background-color: #84754E; */
	height: 365px;
}

.custom-threebox-inner.custom-threebox-inner3 {
	/* background-color: #8A8D8F; */
	height: 365px;
}


/* Sidebar */
.custom-threebox-container1 {
	/*
	background-color: #022C7B;
	padding: 30px;
	margin-right: 10px; */
	flex-basis: 370px;
	height: 365px;
	position: relative;
}


/* cta box blue */
.custom-cta-box {
	order: -1;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.cta-big-button-wrapper {
	background-color: #022C7B;
	padding: 2rem 3rem;
}

.cta-big-button-wrapper:hover .cta-big-button img {
	transform: translateX(10px) rotate(90deg);
}


@media (max-width: 767px) {
	.cta-big-button-wrapper {
		padding: 1rem !important;
	}
	
	.custom-threebox-wrapper {
		flex-wrap: wrap;
	}
	
	.custom-threebox-container1 {
		flex-basis: 100%;
		height: 100%;
	}
	
	.custom-threebox-inner.custom-threebox-inner1 .custom-sticky-box-icon img {
		max-width: 80% !important;
		width: 100%;
		height: 100%;
		object-fit: cover;
		margin: 0 auto !important;
		display: block !important;
	}
	
	.custom-threebox-container2 {
		/* flex-basis: 100%; */
		display: none !important;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.custom-threebox-wrapper {
		padding-top: 3rem !important;
	}
	
}

@media screen and (min-width: 1500px) {
	.custom-threebox-inner.custom-threebox-inner2,
	.custom-threebox-inner.custom-threebox-inner3 {
		height: 400px;
	}
	
	.custom-threebox-container1 {
		flex-basis: 370px;
		height: 400px;
	}
	
	.custom-threebox-container2 {
		flex-basis: 370px;
	}
	
}