/* === Settup for All pages === */
/* ---------------------------- */
/* @font-face {
  font-family: myFont;
  src: url(../font/InterVariable.ttf);
} */

body, p, h1, h2, h3, h4, h5, h6, span, div, a, button, input, select, textarea, label {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Pastikan icon fonts tidak ter-override */
i, .fa, .fas, .far, .fal, .fab {
   font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'Font Awesome 7 Free' !important;
}	 
	 
.margin-all{
	margin-left: 70px;
	margin-right: 70px;
	 }	 
	 	 
.navbar{ height: 90px;}


@media (max-width:1600px) {
	.margin-all{
	margin-left: 70px;
	margin-right: 70px;
	}	
}

@media (max-width:1024px) {
	.margin-all{
	margin-left: 50px;
	margin-right: 50px;
	}	
}

@media (max-width:768px) {
	.margin-all{
	margin-left: 30px;
	margin-right: 30px;
	}	
}

@media (max-width:480px) {
	.margin-all{
	margin-left: 10px;
	margin-right: 10px;
	}	
}	 


/* === Font Set for Title & Description === */
/* ---------------------------------------- */	 
.TitleFont{
	font-size: 12pt;
	font-weight: 600;
	color: #282727;
	 }
	 
.DescFont{
	font-size: 10pt;
	color: #5A5757;
	 }
	 
.MenuFont{
	font-size: 11pt;
	color: #090909;
	 }	 

/* === For WA icon to float === */	
/* ---------------------------- */	 
.float{
	position:fixed;
	/*
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#EBF1EE;
	*/
	
	width:70px;
	height:70px;
	bottom:30px;
	right:30px;
	background-color:#EBF1EE;

	/*background-image: background-image: url('img/wa_icon_footer.png');*/
	
	color:#FFF;
	border-radius:70px;
	text-align:center;
  	/* font-size:30px; */

	box-shadow: 2px 2px 2px #999;
  	z-index:100;

}

.my-float{
	margin-top:16px;
}	 
		 

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}


.hero-mobile {
  position: relative;
  width: 100%;

  overflow: hidden;
}

.hero-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s ease-in-out;
}

.hero-slider-mobile img {
  width: 100%;
  height: 800px;
  object-fit: cover;
  transition: opacity 1s ease-in-out;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.4);
  color: white;
}

	 	 

/* === CONTENT BUTTON == */
.button-view {
  color: #048CD6;  
  background-color: #FFFFFF;
  border-radius: 2px;

  padding: 10px 15px 10px 15px;
  text-decoration: none;

  inset: 0% 0% auto auto;
  border-width: 3px;
}

.button-view:hover {
  color: #FFFFFF; 
  background-color: #048CD6;
  border-width: 3px;
  border-color: #048CD6;
  /*color: white; */
  /*filter: invert(100%);	*/
}	 

.button-color {
  color: #FFFFFF;  
  background-color: #048CD6;
 
  text-decoration: none;

  inset: 0% 0% auto auto;
  border-width: 1px;
  font-size: 10pt;
}

.button-color:hover {
  color: #048CD6; 
  background-color: #FFFFFF;

  border-color: #048CD6;
  /*color: white; */
  /*filter: invert(100%);	*/
}
	

.button-hub {
  color: #048CD6; 
  background-color: #FFFFFF;
  min-width: 150px;
 
  text-decoration: none;
  border-radius: 30px;

  padding: 10px 15px 10px 15px;
  inset: 0% 0% auto auto;
  border-width: 1px; 
  border-color: #048CD6; 
  font-size: 10pt;
}

.button-hub:hover {
  color: #FFFFFF;  
  background-color: #048CD6;

  border-color: #048CD6;
  /*color: white; */
  /*filter: invert(100%);	*/	
}	



.button-profile {
  color: #048CD6; 
  background-color: #FFFFFF;
 
  text-decoration: none;

  inset: 0% 0% auto auto;
  border-width: 1px;
  font-size: 10pt;
  border-width: 1px; 
  border-color: #048CD6; 	
}

.button-profile:hover {
  color: #FFFFFF;  
  background-color: #048CD6;	


  border-color: #048CD6;
  /*color: white; */
  /*filter: invert(100%);	*/
}
	



/* === PROMOTION SLIDER === */

#slider{
	/*height: 500px; */
	/*border: 1px solid black; */
	display: flex;
	justify-content: center;
	align-items: center;
	/*background-color: black;	*/

}
/*
.container{
	width: 1600px;
	margin: auto;
}
*/
.promo-subcontainer{
	width: 100%;
	margin: auto;
}

.promo-controller{
	display: flex;
	justify-content: space-between;
}

#promo-controls i{
	color: white;
	font-size: 1rem;	
}

.promo-previous, .promo-next{
	margin-right: 10px;
	padding: 5px;
	width : 40px; 
	cursor: pointer; 
	/* border-radius:  50%; */
	outline: none;
	transition: 0.2s ease-in-out;
	border: 3px solid white;
	background-color: #048CD6;
	border-radius: 30px;	
}

.promo-previous:hover, .promo-next:hover{
	border: 3px solid #EA9108;	
	background-color: #044D75;
}

/*
.promo-previous, .promo-next{
	margin-right: 10px;
	padding: 2px;
	width : 30px; 
	cursor: pointer; */
	/* border-radius:  50%; */
/*	outline: none;
	transition: 0.2s ease-in-out;
	border: 3px solid white;
	background-color: #048CD6;
	box-shadow: 0 0 5px #bbb;	
}

.promo-previous:hover, .promo-next:hover{
	border: 3px solid #EA9108;	
	background-color: #044D75;
}
*/


/* === FACILITIES 1 SLIDER === */

/*
.container{
	width: 1600px;
	margin: auto;
}
*/
.fac_1-subcontainer{
	width: 100%;
	margin: auto;
}

.fac_1-controller{
	display: flex;
	justify-content: space-between;
}

#fac_1-controls i{
	color: white;
	font-size: 1rem;	
}

.fac_1-previous, .fac_1-next{
	margin-right: 10px;
	padding: 5px;
	width : 40px;
	cursor: pointer;
	/* border-radius:  50%; */
	outline: none;
	transition: 0.2s ease-in-out;
	border: 3px solid white;
	background-color: #048CD6;
	border-radius: 30px;
}

.fac_1-previous:hover, .fac_1-next:hover{
	border: 3px solid #EA9108;	
	background-color: #044D75;
}






/* === FACILITIES 2 SLIDER === */

/*
.slide3-container{
	width: 100px;
	height: 100%;
	margin: auto;
}
*/
.slide3-subcontainer{
	width: 100%;
	margin: auto;*/
}

.slide3-controller{
	display: flex;
	justify-content: space-between;

}

#slide3-controls i{
	color: white;
	font-size: 1rem;	
}

.slide3-previous, .slide3-next{
	margin-right: 10px;
	padding: 5px;
	width : 40px;
	cursor: pointer;
	/* border-radius:  50%; */
	outline: none;
	transition: 0.2s ease-in-out;
	border: 3px solid white;
	background-color: #048CD6;
	border-radius: 30px;
}

.slide3-previous:hover, .slide3-next:hover{
	border: 3px solid #EA9108;	
	background-color: #044D75;
}






/* === FACILITIES 2 SL3IDER === */

/*
.slide3-container{
	width: 100px;
	height: 100%;
	margin: auto;
}
*/
.slide4-subcontainer{
	width: 100%;
	margin: auto;*/
}

.slide4-controller{
	display: flex;
	justify-content: space-between;

}

#slide4-controls i{
	color: white;
	font-size: 1rem;	
}

.slide4-previous, .slide4-next{
	margin-right: 10px;
	padding: 5px;
	width : 40px;
	cursor: pointer;
	/* border-radius:  50%; */
	outline: none;
	transition: 0.2s ease-in-out;
	border: 3px solid white;
	background-color: #048CD6;
	border-radius: 30px;
}

.slide4-previous:hover, .slide4-next:hover{
	border: 3px solid #EA9108;	
	background-color: #044D75;
}





/* === FACILITIES 2 SL3IDER === */

/*
.slide3-container{
	width: 100px;
	height: 100%;
	margin: auto;
}
*/
.slide5-subcontainer{
	width: 100%;
	margin: auto;*/
}

.slide5-controller{
	display: flex;
	justify-content: space-between;

}

#slide5-controls i{
	color: white;
	font-size: 1rem;	
}

.slide5-previous, .slide5-next{
	margin-right: 10px;
	padding: 5px;
	width : 40px;
	cursor: pointer;
	/* border-radius:  50%; */
	outline: none;
	transition: 0.2s ease-in-out;
	border: 3px solid white;
	background-color: #048CD6;
	border-radius: 30px;
}

.slide5-previous:hover, .slide5-next:hover{
	border: 3px solid #EA9108;	
	background-color: #044D75;
}





/* === FACILITIES 2 SLIDER === */

/*
.slide3-container{
	width: 100px;
	height: 100%;
	margin: auto;
}
*/
.slide10-subcontainer{
	width: 100%;
	margin: auto;*/
}

.slide10-controller{
	display: flex;
	justify-content: space-between;

}

#slide10-controls i{
	color: white;
	font-size: 1rem;	
}

.slide10-previous, .slide10-next{
	margin-right: 10px;
	padding: 5px;
	width : 40px;
	cursor: pointer;
	/* border-radius:  50%; */
	outline: none;
	transition: 0.2s ease-in-out;
	border: 3px solid white;
	background-color: #048CD6;
	border-radius: 30px;
}

.slide10-previous:hover, .slide10-next:hover{
	border: 3px solid #EA9108;	
	background-color: #044D75;
}





/* === FACILITIES 2 SLIDER === */

/*
.slide3-container{
	width: 100px;
	height: 100%;
	margin: auto;
}
*/
.slide11-subcontainer{
	width: 100%;
	margin: auto;*/
}

.slide11-controller{
	display: flex;
	justify-content: space-between;

}

#slide11-controls i{
	color: white;
	font-size: 1rem;	
}

.slide11-previous, .slide11-next{
	margin-right: 10px;
	padding: 5px;
	width : 40px;
	cursor: pointer;
	/* border-radius:  50%; */
	outline: none;
	transition: 0.2s ease-in-out;
	border: 3px solid white;
	background-color: #048CD6;
	border-radius: 30px;
}

.slide11-previous:hover, .slide11-next:hover{
	border: 3px solid #EA9108;	
	background-color: #044D75;
}





/* === FACILITIES 2 SLIDER === */

/*
.slide3-container{
	width: 100px;
	height: 100%;
	margin: auto;
}
*/
.slide12-subcontainer{
	width: 100%;
	margin: auto;*/
}

.slide12-controller{
	display: flex;
	justify-content: space-between;

}

#slide12-controls i{
	color: white;
	font-size: 1rem;	
}

.slide12-previous, .slide12-next{
	margin-right: 10px;
	padding: 5px;
	width : 40px;
	cursor: pointer;
	/* border-radius:  50%; */
	outline: none;
	transition: 0.2s ease-in-out;
	border: 3px solid white;
	background-color: #048CD6;
	border-radius: 30px;
}

.slide12-previous:hover, .slide12-next:hover{
	border: 3px solid #EA9108;	
	background-color: #044D75;
}




/* === FACILITIES 2 SLIDER === */

/*
.slide3-container{
	width: 100px;
	height: 100%;
	margin: auto;
}
*/
.slide13-subcontainer{
	width: 100%;
	margin: auto;*/
}

.slide13-controller{
	display: flex;
	justify-content: space-between;

}

#slide13-controls i{
	color: white;
	font-size: 1rem;	
}

.slide13-previous, .slide13-next{
	margin-right: 10px;
	padding: 5px;
	width : 40px;
	cursor: pointer;
	/* border-radius:  50%; */
	outline: none;
	transition: 0.2s ease-in-out;
	border: 3px solid white;
	background-color: #048CD6;
	border-radius: 30px;
}

.slide13-previous:hover, .slide13-next:hover{
	border: 3px solid #EA9108;	
	background-color: #044D75;
}

  /* Override Bootstrap Rounded - bisa diubah nilai nya disini */
  :root {
      --border-radius-sm: 5px;   /* untuk rounded kecil */
      --border-radius-md: 10px;  /* untuk rounded sedang */
      --border-radius-lg: 20px;  /* untuk rounded besar */
  }

  /* Override class Bootstrap */

  .rounded-all {
	border-top-left-radius: 5rem !important;
      border-top-right-radius: 5rem !important;
	  border-bottom-left-radius: 5rem !important;
      border-bottom-right-radius: 5rem !important;

  }
  .rounded-top {
      border-top-left-radius: 0.75rem !important;
      border-top-right-radius: 0.75rem !important;
  }

  .rounded-bottom {
      border-bottom-left-radius: 0.75rem !important;
      border-bottom-right-radius: 0.75rem !important;
  }

  .rounded-left {
	border-top-left-radius: 5rem !important;
	border-bottom-left-radius: 5rem !important;
  }

  .rounded-right {
	border-top-right-radius: 5rem !important;
	border-bottom-right-radius: 5rem !important;
  }

  .rounded-lg {
      border-radius: var(--border-radius-lg) !important;
  }

  .rounded {
      border-radius: var(--border-radius-md) !important;
  }

  .rounded-sm {
      border-radius: var(--border-radius-sm) !important;
  }

/* ========== FOOTER STYLES ========== */

/* Footer Info Section */
.footer-info-section {
	padding: 60px 0 40px 0;
	background: #f8f9fa;
	border-top: 1px solid #e0e0e0;
}

.footer-column h5 {
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 20px;
}

.footer-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-column ul li {
	margin-bottom: 12px;
}

.footer-column ul li a {
	color: #666;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s ease;
}

.footer-column ul li a:hover {
	color: #048CD6;
}

.newsletter-input {
	display: flex;
	gap: 10px;
	margin-top: 15px;
	height: 3.5rem;
}

.newsletter-input input {
	flex: 1;
	padding: 10px 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 14px;
}

.newsletter-input button {
	background: #048CD6;
	color: white;
	border: none;
	padding: 10px 25px;
	border-radius: 5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
}

.newsletter-input button:hover {
	background: #036aa8;
}

.social-icons {
	display: flex;
	gap: 15px;
	margin-top: 20px;
}

.social-icons a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: white;
	border: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	text-decoration: none;
	transition: all 0.3s ease;
}

.social-icons a:hover {
	background: #048CD6;
	color: white;
	border-color: #048CD6;
}

.copyright-section {
	background: #ffffff;
	color: #666;
	padding: 20px 0;
	text-align: center;
	font-size: 14px;
	/*border-top: 1px solid #e0e0e0*/;
}