@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
:root {
  --prprimary: #fd4d01;
  --prprimaryhover:#ff7e47;
  --prsecondary: #6f8583; 
  --prwhite:#fff; 
  --prblack:#000;
  --prgrey:#9fbcb9;
  --h1:2.4rem;
  --logoTitle:1.5rem;
  --logoFooter:1.3rem;
  --bold:600;
  --semibold:400;
  --backgroundlight:#EDEDED;
  --fontprimary:"Lato",sans-serif;;

}
html, body{
	font-family: "Lato",sans-serif;
}
section{
	margin:10px 0 0;
	padding:40px 0;
}
h1{
	font-size: var(--h1);
}
h2{
	font-size: var(--logoTitle);
}
p{
	font-size:18px;
	word-spacing: 2px;
}
.swal2-popup{
	font-family: var(--fontprimary);
}
.swal2-popup .swal2-content{
	font-weight: normal;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){
	background-color: var(--prprimary) !important;
}
.m-view{
	display: none;
}
.d-view{
	display: block;
}
.item-banner{
	width: 100%;
	height: 87vh;
	background-size: cover;
	display: flex;
  align-items: center;
  color:var(--prwhite);
}
.bx-headline h2{
	width: 500px;	
	font-size: 2rem;
}

.backgroundlight{
	background-color: var(--backgroundlight);
}
.btn-joined{
	border-radius: 50px;
	border:0;
	padding:8px;
	min-width: 120px;
	background-color:#ccc;
}
.btn-primary{
	background-color: var(--prprimary);
	border-radius: 50px;
	border:0;
	padding:8px;
	min-width: 140px;
}
.btn-primary:hover{
	background-color:var(--prprimaryhover);
}
.btn-secondary{
	border:1px solid var(--prprimary) !important;
	background-color: var(--prwhite);
	border-radius: 50px;
	color:var(--prprimary) !important;
	border:0;
	padding:8px 20px;
	min-width: 120px;
}
.btn-secondary:hover{
	background-color:var(--prprimaryhover);
	color:var(--prwhite) !important;
}


.navbar-fixed{
	position: fixed;
	top:0;
	width: 100%;
	z-index: 6;
}
.navbar{
	padding:0;
	background:rgba(255, 255, 255, 0.9);
}
.navbar-brand{
	display: flex;
	gap: 5;
}
.navbar-brand img{
	margin:0 auto;
	height: 45px;
}
.navbar-brand h2{
	font-size: var(--logoTitle);
	display: flex;
  align-items: center;
  padding:0;
  margin:0 0 0 10px;
  color:var(--prprimary);
  font-weight: 600;
}
.navbar-brand span{
	color:#666;
	font-size: 16px;
	margin-right: 10px;
	display: flex;
	align-items: center;
	letter-spacing: 0.5px;
}
.dropdown-item{
	color:#666;
	letter-spacing: 0.2px;
	padding:8px 10px;
	font-size: 14px;
}
.dropdown-menu-right{    
	transform: translate3d(-30px, 5px, 0px);
  will-change: transform;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    background-color:var(--prprimary);
}
.nav-item{
	padding:10px 0;
	margin:0 5px;
	display: inline-block;
}
.nav-item .nav-link{
	letter-spacing: 0.8px;
	min-width: 130px;
	text-align: center;
	color:#333;
	display: inline-block;
	padding:10px 0;
	margin:0;
	border-radius: 50px;
}
.nav-item .nav-link:hover{
	color:var(--prblack);
	background-color: rgba(0, 0, 0, 0.2);	
}
.nav-item .nav-link.active{
	background-color: var(--prprimary);	
	color:var(--prwhite);	
}
.navbar-login ul{
	margin:0;
	padding:0;
}
.navbar-login ul li{
	display: inline;
	list-style: none;
	margin-right: 10px;
}
.navbar-login ul li:last-child{
	margin-right: 0;
}
.navbar-login ul li a{
	text-align: center;
	text-decoration: none;
	color:#333;
	display: inline-block;
	padding:10px 15px;
	margin:0;
	border-radius: 50px;
}


/*card slider*/
.slider-container {
	color:var(--prwhite);
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
}

.slider-wrapper {
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.4s ease-in-out;
}
.media-box a{
	text-decoration: none;
}
.card {
  flex: 0 0 calc(25% - 10px); /* subtract combined horizontal margin */
  box-sizing: border-box;
  border-radius: 10px;
  margin: 0 5px;
}

.card .card-content{
	padding:16px 16px;
	min-height: 130px;

}
.card .img-card{
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 10px 10px 0 0;
	height: 300px;	
}
.card span{
	font-size: 13px;
	color:#666;
	line-height: 100%;
}
.card .card-category{
	font-size: 15px;
	color:var(--prprimary);
	font-weight: var(--bold);
}
.card h1{
	font-size:20px;
	font-weight: var(--semibold);
	color:#333;
	display: -webkit-box;
  -webkit-line-clamp: 2; /* Jumlah baris yang ditampilkan */
  -webkit-box-orient: vertical;
  overflow: hidden;
	margin:0;
}
.bx-control{
	position: relative;
	display: flex;
	justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  margin:10px auto;
}
.nav {  
  top: 0;
  color: #333;
  border: none;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}
.nav svg{
	height: 20px;
	color:#333;
}
.nav.prev {
  left: 0;
  width: 40px;
  height: 40px;
}
.nav.next {
  right: 0;
  width: 40px;
  height: 40px;
}

.indicators {
  text-align: center;
}

.indicators span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc;
  margin: 0 5px;
  border-radius: 50%;
  cursor: pointer;
}

.indicators .active {
  background: #666;
}

.carousel-item{
	height: 82vh
}
.carousel-item img{
	object-fit: fill;
	width: 100%;
}
.carousel-control-next-icon, .carousel-control-prev-icon{
	height: 3rem;
	width: 3rem;
	opacity: 0.4;
}
.carousel-control-next-icon:hover, .carousel-control-prev-icon:hover{
	opacity: 1;
}
.carousel-control-next{
	right: -60px;
}
.carousel-control-prev{
	left: -60px;
}
.carousel-fade {
	.carousel-inner {
    .item {
        transition-property: opacity;
    }
    
    .item,
    .active.left,
    .active.right {
        opacity: 0;
    }

    .active,
    .next.left,
    .prev.right {
        opacity: 1;
    }

    .next,
    .prev,
    .active.left,
    .active.right {
        left: 0;
        transform: translate3d(0, 0, 0);
    }
  }
}
.bx-count{
	background-color: var(--prprimary);
	padding:20px;
	display: flex;
	align-items:center;
	border-radius: 15px;
	color:#fff;
}
.count-detail{
	margin-left: 20px;
}
.count-detail h3.count{
	font-size: 2.2rem;
	font-weight: var(--bold);
	margin:0;
}
.count-detail .namecount{
	font-size: 1rem;
	color:#ffc5ac;
	display: block;
	fonnt-weight:300;
}

.tilesection{
	text-transform: uppercase;
	margin-bottom: 20px;
}
.group-title{
	display: flex;
	align-items: center;
}

.tilesection .section-title{
	font-size: 20px;
	margin-right: 10px;
	display: inline; 
  text-transform: uppercase;
}
.tilesection h1{
	font-size: 28px;
	display: block;
	font-weight: var(--bold);
	color:var(--prprimary);
	margin:0;
}
.tilesection hr{
	margin-left: 10px;
	width: 100%;
	height: 2px;
	color: var(--prprimary);
}
.img-habout{
	border-radius: 20px;
	width: 100%;
}

.tab {
  overflow: hidden;
  border-bottom: 1px solid #999999;
}

.tab button {
  background-color: transparent;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: background-color 0.3s;
  font-size: 18px;
  font-weight: var(--semibold);  
}

.tab button:hover {
  color: var(--prprimary);
}

.tab button.active {
	color:var(--prprimary);
	font-weight: var(--bold);
	border:0;
  border-bottom:5px solid var(--prprimary);
}

.tabcontent {
  display: none;
  opacity: 0;
  font-size: 18px;
  transition: opacity 0.5s ease-in-out;
  padding: 12px;
  border-top: none;
}
.tabcontent ul{
	margin:0;
	padding:16px 10px;
}

.tabcontent.show {
  display: block;
  opacity: 1;
}


.banner-pages{
	height: 500px;
}
.banner-pages .banner-title{
	display: flex;
  align-items: flex-start;
  height: 500px;
  font-size: var(--h1);
  color: var(--prwhite);
  max-width: 30%;
  flex-direction: column;
  justify-content: center;
}
.banner-pages .banner-title h1{
  margin:0;	
  font-weight: var(--bold);
}

nav.sidemenu{
	height: 100%;
	background: #F2F2F2;
  border-right: 1px solid #ddd;
}
.pages-sidemenu{
	position: sticky;
  top: 40px;
  align-self: flex-start;
  padding: 20px;
  height: fit-content;
}
.pages-sidemenu ul{
	margin:0;
	padding:0;
}
.pages-sidemenu ul li{
	list-style: none;
	display: block;
	padding:10px 10px;
}
.pages-sidemenu ul li a{
	text-decoration: none;
	display: block;
	font-size: 16px;
	color: var(--prblack);
}
.pages-sidemenu ul li a:hover{
	color:#666;
}

.pages-sidemenu ul li a.active {
  font-weight:var(--bold);
  color:var(--prprimary);
}


.teams ul,
.vm-content ul{
	margin:0;
	padding:0;
}
.vm-content ul li{
	list-style: none;
	display: flex;
	align-items: center;
	padding:20px 0;
}
.vm-content ul li img{
	margin-right: 16px;
}
.vm-content ul li p{
	margin:0;
}
.teams ul li{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #c1c1c1;
	margin-bottom: 10px;
	padding:20px 0;
}
.teams ul li p{
	margin:0;
	display: block;
	width: 100%;
}
.content-card .card{
	margin:0;	
}
.input-control{
	padding:10px 20px;
	border-radius: 10px;
}
.media-box-hidden{
	display: none;
}
/*breadcrumb*/
.bg-breadcrumb{
	background-color: #f5f5f5;
	padding:1rem;
}
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background-color: #f5f5f5;
  border-radius: 0.25rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 0.5rem;
  color: #6c757d;
}

.breadcrumb-item a {
  color: var(--prprimary);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #6c757d;
}
.modal-dialog{
	max-width: 70%;
}
.modal-header{
	position: absolute;
	padding:10px;
	right:5px;
	top:5px;
}

.modal-content{
	border-radius: 10px;
	background-color: #ececec;
	border:10px solid #fff;
}
.content-modal-desc{
	overflow: scroll;
	height: 70vh;
}
.content-modal-desc p{
	font-size: 16px;
}
.title-section h1{
	font-size: 2rem;
	font-weight: var(--bold);
	margin:0;
	padding:0;
}
.title-section .cat-detail{
	color:var(--prprimary);
	font-weight: var(--semibold);
}
.login-screen{
	height: 100vh;
	background: url('/assets/media/background-login.png');
	background-size: cover;
}
.login-screen header .navbar{
	background-color: rgba(255, 255, 255, 0) !important;
	color:#fff;
}
.login-screen footer{
	position: absolute;
	bottom:0;
	width: 100%;
}
.login-title{
	display: flex;
  align-items: stretch;
  height: 50vh;
  flex-direction: column;
  position: relative;
  padding-right: 20px;
  color: #fff;
  justify-content: center;

}
.box-login{
	background-color: rgba(0, 0, 0, 0.7);
	padding:40px;
	border-radius: 20px;
}
.bx-form{
	display: flex;
	align-items: stretch;
	justify-content:center;
	flex-direction:column;
	height: 75vh;
}
.member-agenda{
	padding-top: 100px;
}
/*footer*/
footer{
	background-color: var(--prblack);
}
.menu-footer{
	padding:40px 0;
}
.footer-brand{
	display: flex;
  align-items: center;
}
.footer-brand img{
	height: 40px;
}
.footer-brand h1{
	display: flex;
  align-items: center;
  font-size: var(--logoFooter);
  color: var(--prprimary);
  margin:0 0 0 10px;
  font-weight: var(--bold);
}
.bx-social{
	margin:0;
}
.bx-social h3{
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: var(--bold);
	color:white;
}
.bx-social svg{
	color:white;
	width: 24px;
	height: 24px;
	margin-right: 16px;
}
.menu-footer h3{
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: var(--bold);
	color:white;
}

.menu-footer ul{
	padding:0;
	margin:0;
}
.menu-footer ul li{
	list-style: none;
	color:var(--prgrey);
	font-size: 15px;
	margin-bottom: 5px;
}
.menu-footer p{
	color:var(--prgrey);
	font-size: 15px
}
.copyright{
	padding:10px;
	background-color: var(--prprimary);
	text-align: center;
	font-size: 13px;
	color:#fff;
}
.mr-10{
	margin-right: 10px;
}
.profile{
	border-radius: 20px !important;
}
/*Contact*/
.label-form{
	text-transform: capitalize;
	display: block;
	margin-bottom: 5px;
}
.form-readonly{
	padding:6px 12px;
	width: 100%;
	color:var(--prwhite);
	border-bottom:1px solid #ccc;
}
.loc-group{
	margin-top:20px;
}
.location{
	display: flex;

}
.location svg{
	margin-top:4px;
	margin-right: 10px;
	height: 24px;
	width: 24px;
}
.location p{

}

/*Custom Select*/
.custom-select {
  display: block;
  width: 100%;
  padding:0 12px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color:transparent;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 50%;
  right: 5px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #333 transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #333 transparent;
  top: 10px;
  right:10px;
}

/*style the items (options), including the selected item:*/
.cselect{
	width: 100%;
}
.select-items div,.select-selected {
  font-size: 1rem;
  padding:6px 12px;
  border-bottom: 1px solid #D0C6C0;
  cursor: pointer;
  user-select: none;
  display: block;
  width: 100%;
}
.select-selected {
    padding-left: 0;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #fff;
  color:#000;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 10px;
  margin-top:10px;
}
.select-items div:last-child{
    border-radius:0 0 10px 10px;
}
.select-items div:first-child{
    border-radius: 10px 10px 0 0;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected:hover {
  background-color: #eaeaea;
}
.same-as-selected:after{
	border-color: transparent transparent #333 transparent;
  	top: 40%;
  	border-bottom: 1px solid #D0C6C0;
}

select[disabled]{
	color: red !important;
}

/* ----- Select Box Superman ----- */
.sel--superman {
/*   display: none; */
  z-index: 2;
}

/* ===== Keyframes ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (min-width: 576px){
	
}


/*RESPONSIVE*/

@media only screen and (min-width: 768px) {
  /* For general iPad layouts */

}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
  
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  .ipad-landscape{
  	background-color: red;
  }
  
}

@media screen and (max-width: 600px){
	.nav.next, .nav.prev,
	.d-view{
		display: none;
	}
	.m-view{
		display: block;
	}
	section{
  	padding:20px 0;
  }
  #habout img{
  	margin-bottom: 20px;
  }
  .bx-count{
  	padding:10px;
  	align-items:flex-start;
  }
  .bx-count img{
  	width: 40px;
  	margin-top:10px;
  }
  .count-detail .namecount{
  	line-height: 100%;
  }
  .carousel-item{
		height:600px;
	}
	.item-banner{
		width: 100%;
		height: 600px;	
		display: flex;
		align-items: center;	
	}
	.bx-headline{
		display: flex;
		flex-direction:column;		
	}
	.bx-headline h2,.bx-headline p{
		padding: 0 20px;
	}
	.card{
		min-width: 300px;
	}


	.menu-footer{
		padding:20px;
	}
	.col-md-3{
		margin-bottom:20px;
	}
	.nav-item{
		padding:0;
	}
	.nav-item .nav-link.active{
		color:var(--prprimary);
		background: transparent;		
	}
	.nav-item .nav-link{
		text-align: left;
	}
	.nav-item .nav-link:hover{
		background-color: transparent;
	}
	.navbar-collapse.show{
		height: 100vh;
	}
	.navbar-login{
		border-top:1px solid #ccc;
		padding:10px 0;
		margin-top:10px;
	}
	.navbar-login ul li{
		margin-right: 10px;
	}
	.navbar-login ul li a{
		padding:10px 0;
		background-color: #fd4d01;
		min-width: 120px;
		color:#fff;
	}
	.navbar-login ul li a.btn-secondary{
		border:0;
		padding:10px 0;
		background-color: #fff;
	}
	
	.navbar-default .navbar-toggle{
		border-color: #333;
	}
	.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 0;
    margin-top: 8px;
    margin-right: 5px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
	.navbar-toggle:hover {
	  background: transparent !important;
	}
	.navbar-default .navbar-toggle .icon-bar,
	.navbar-toggle .icon-bar {
		display: block;
	  border-top:2px solid #333;
	  margin-top:4px;
	}
	.navbar-toggle .icon-bar {
	  width: 22px;
	  transition: all 0.2s;
	}
	.navbar-toggle .top-bar {
	  transform: rotate(45deg);
	  transform-origin: 10% 10%;
	}
	.navbar-toggle .middle-bar {
	  opacity: 0;
	}
	.navbar-toggle .bottom-bar {
	  transform: rotate(-45deg);
	  transform-origin: 10% 90%;
	}
	.navbar-toggle.collapsed .top-bar {
	  transform: rotate(0);
	}
	.navbar-toggle.collapsed .middle-bar {
	  opacity: 1;
	}
	.navbar-toggle.collapsed .bottom-bar {
	  transform: rotate(0);
	}
	.navbar-brand img{
		height: 35px;
	}
}