/*@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css");
* {
	font-family: Helvetica, Arial, sans-serif;
}
:root {
	--bg-theme: #099294;
	--gradent: linear-gradient(45deg, #5eba4d, #099294);
	--shadow: 5px 5px 10px -3px #00000050;
}
/*.label-success {
	color: var(--bs-success)!important;
}*/
/* labeling */
.label {
	padding: 5px 10px;
	font-size: 10px;
	font-weight: bold;
	border-radius: 5px;
}
.label-warning {
	background-color: #ffc107 !important;
	color: #212529 !important;
}
.label-danger {
	background-color: #dc3545 !important;
	color: white !important;
}
.label-success {
	background-color: #198754 !important;
	color: white !important;
}
.label-dark {
	background-color: #212529 !important;
	color: white !important;
}
.label-info {
	background-color: #0dcaf0 !important;
	color: white !important;
}

.label-primary {
	background-color: #0d6efd !important;
	color: white !important;
}
/* Flex */
.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}


.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}

/* padding */
.p-0 {
	padding: 0rem !important;
}
.p-1 {
	padding: 0.25rem !important;
}
.p-2 {
	padding: 0.5rem !important;
}
.p-3 {
	padding: 1rem !important;
}
.p-4 {
	padding: 1.5rem !important;
}
.p-5 {
	padding: 3rem !important;
}
.p-auto {
	padding: auto !important;
}

.ps-0 {
	padding-left: 0rem !important;
}
.ps-1 {
	padding-left: 0.25rem !important;
}
.ps-2 {
	padding-left: 0.5rem !important;
}
.ps-3 {
	padding-left: 1rem !important;
}
.ps-4 {
	padding-left: 1.5rem !important;
}
.ps-5 {
	padding-left: 3rem !important;
}
.ps-auto {
	padding-left: auto !important;
}

.pe-0 {
	padding-right: 0rem !important;
}
.pe-1 {
	padding-right: 0.25rem !important;
}
.pe-2 {
	padding-right: 0.5rem !important;
}
.pe-3 {
	padding-right: 1rem !important;
}
.pe-4 {
	padding-right: 1.5rem !important;
}
.pe-5 {
	padding-right: 3rem !important;
}
.pe-auto {
	padding-right: auto !important;
}

.pb-0 {
	padding-bottom: 0rem !important;
}
.pb-1 {
	padding-bottom: 0.25rem !important;
}
.pb-2 {
	padding-bottom: 0.5rem !important;
}
.pb-3 {
	padding-bottom: 1rem !important;
}
.pb-4 {
	padding-bottom: 1.5rem !important;
}
.pb-5 {
	padding-bottom: 3rem !important;
}
.pb-auto {
	padding-bottom: auto !important;
}

.pt-0 {
	padding-top: 0rem !important;
}
.pt-1 {
	padding-top: 0.25rem !important;
}
.pt-2 {
	padding-top: 0.5rem !important;
}
.pt-3 {
	padding-top: 1rem !important;
}
.pt-4 {
	padding-top: 1.5rem !important;
}
.pt-5 {
	padding-top: 3rem !important;
}
.pt-auto {
	padding-top: auto !important;
}

.py-0 {
	padding-top: 0rem !important;
	padding-bottom: 0rem !important;
}
.py-1 {
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
}
.py-2 {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}
.py-3 {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}
.py-4 {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}
.py-5 {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}
.py-auto {
	padding-top: auto !important;
	padding-bottom: auto !important;
}

.px-0 {
	padding-left: 0rem !important;
	padding-right: 0rem !important;
}
.px-1 {
	padding-left: 0.25rem !important;
	padding-right: 0.25rem !important;
}
.px-2 {
	padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
}
.px-3 {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}
.px-4 {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}
.px-5 {
	padding-left: 3rem !important;
	padding-right: 3rem !important;
}
.px-auto {
	padding-left: auto !important;
	padding-right: auto !important;
}

/* margin */
.m-0 {
	margin: 0rem !important;
}
.m-1 {
	margin: 0.25rem !important;
}
.m-2 {
	margin: 0.5rem !important;
}
.m-3 {
	margin: 1rem !important;
}
.m-4 {
	margin: 1.5rem !important;
}
.m-5 {
	margin: 3rem !important;
}
.m-auto {
	margin: auto !important;
}

.ms-0 {
	margin-left: 0rem !important;
}
.ms-1 {
	margin-left: 0.25rem !important;
}
.ms-2 {
	margin-left: 0.5rem !important;
}
.ms-3 {
	margin-left: 1rem !important;
}
.ms-4 {
	margin-left: 1.5rem !important;
}
.ms-5 {
	margin-left: 3rem !important;
}
.ms-auto {
	margin-left: auto !important;
}

.me-0 {
	margin-right: 0rem !important;
}
.me-1 {
	margin-right: 0.25rem !important;
}
.me-2 {
	margin-right: 0.5rem !important;
}
.me-3 {
	margin-right: 1rem !important;
}
.me-4 {
	margin-right: 1.5rem !important;
}
.me-5 {
	margin-right: 3rem !important;
}
.me-auto {
	margin-right: auto !important;
}

.mb-0 {
	margin-bottom: 0rem !important;
}
.mb-1 {
	margin-bottom: 0.25rem !important;
}
.mb-2 {
	margin-bottom: 0.5rem !important;
}
.mb-3 {
	margin-bottom: 1rem !important;
}
.mb-4 {
	margin-bottom: 1.5rem !important;
}
.mb-5 {
	margin-bottom: 3rem !important;
}
.mb-auto {
	margin-bottom: auto !important;
}

.mt-0 {
	margin-top: 0rem !important;
}
.mt-1 {
	margin-top: 0.25rem !important;
}
.mt-2 {
	margin-top: 0.5rem !important;
}
.mt-3 {
	margin-top: 1rem !important;
}
.mt-4 {
	margin-top: 1.5rem !important;
}
.mt-5 {
	margin-top: 3rem !important;
}
.mt-auto {
	margin-top: auto !important;
}

.my-0 {
	margin-top: 0rem !important;
	margin-bottom: 0rem !important;
}
.my-1 {
	margin-top: 0.25rem !important;
	margin-bottom: 0.25rem !important;
}
.my-2 {
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}
.my-3 {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}
.my-4 {
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important;
}
.my-5 {
	margin-top: 3rem !important;
	margin-bottom: 3rem !important;
}
.my-auto {
	margin-top: auto !important;
	margin-bottom: auto !important;
}

.mx-0 {
	margin-left: 0rem !important;
	margin-right: 0rem !important;
}
.mx-1 {
	margin-left: 0.25rem !important;
	margin-right: 0.25rem !important;
}
.mx-2 {
	margin-left: 0.5rem !important;
	margin-right: 0.5rem !important;
}
.mx-3 {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}
.mx-4 {
	margin-left: 1.5rem !important;
	margin-right: 1.5rem !important;
}
.mx-5 {
	margin-left: 3rem !important;
	margin-right: 3rem !important;
}
.mx-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}

.btn-glass {
	background: #ffffff80;
	color: var(--bs-dark);
	transition: .4s ease;
}
.btn-theme {
	background: var(--bg-theme);
	color: var(--bs-white);
	transition: .4s ease;
}
.btn-theme:hover {
	box-shadow: var(--shadow);
	color: var(--bs-white);
}
.text-theme {
	color: var(--bg-theme);
}
.bg-gradient-theme {
	background: linear-gradient(45deg, #5eba4d, #099294);
	color: #fff!important;
}
.bg-theme {
	background: var(--bg-theme);
	color: var(--bs-white);
}
/* fix design bootstrap 3 */
.panel-primary > .panel-heading {
	background: var(--gradent);
	color: #fff!important;
	border-color: transparent !important;
}
.form-group input.form-control {
	border-bottom: 1px solid #444 !important;
} 
/* end of fix design bootstrap 3 */
/* fix pannel */
@media only screen and (max-width: 480px){	
	.member-content > .panel-body {
		padding: 15px!important;
		background-color: #fff;
	}
	.page-title {
		margin-top: 0px!important;
		margin-left: 0px!important;
		margin-right: 0px!important;
		padding: 20px;
	}
}
/* pagination */
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
	background-color: var(--bg-theme)!important;
	border-color: var(--bg-theme)!important;
}
.pagination > li > a, .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
	color: var(--bg-theme);
}
/* end pagination */
.nav-link.active {
	color: var(--bg-theme)!important;
}
.nav-tabs .nav-link {
	color: #555;
}
#banner {
	position: relative;
	height: 100vh;
	background: linear-gradient(45deg, #5eba4d, #099294);
}
#banner .container {
	height: 100vh;
}
#banner .clips-banner {
	bottom: 0;
}
.clips-banner {
	position: absolute;
	width: 100%;
	height: 200px;
	/*height: 300px;*/
}

.clip1 {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	background: #fff;
	-webkit-clip-path: polygon(0 97%, 100% 90%, 100% 100%, 0 100%); clip-path: polygon(0 97%, 100% 90%, 100% 100%, 0 100%);
}
.clip2 {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	background: #ffffff80;
	-webkit-clip-path: polygon(0 97%, 100% 70%, 100% 100%, 0 100%); clip-path: polygon(0 97%, 100% 70%, 100% 100%, 0 100%);
}
.clip3 {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	background: #ffffff50;
	-webkit-clip-path: polygon(0 97%, 100% 50%, 100% 100%, 0 100%); clip-path: polygon(0 97%, 100% 50%, 100% 100%, 0 100%);
}

#banner-two {
	position: relative;
	height: 260px;
	background: linear-gradient(45deg, #5eba4d, #099294);
}
.waves {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}
#fitur .bi {
	font-size: 80px;
	background: linear-gradient(0deg, #5eba4d, #099294);
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	transition: 0.7s ease-in-out;
}
@media (max-width: 768px) {
	#fitur .bi {
		font-size: 50px;
	}	
	#banner-two {
	position: relative;
	height: 160px;
	background: linear-gradient(45deg, #5eba4d, #099294);
	padding: 10px !important;
}
}
#fitur .card {
	transition: .5S ease;
}
#fitur .card:hover {
	transform: translateY(-10px);
}
#fitur .card:hover .bi {
	color: #555!important;
	/*font-size: 90px;*/
}
#statistik {
	position: relative;
}
#statistik .clips-b {
	bottom: 0;
	width: 100%;
	height: 200px;
}
#statistik .clip4 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	height: 100px;
	-webkit-clip-path: polygon(100% 0, 100% 64%, 77% 37%, 0 99%, 0 0); clip-path: polygon(100% 0, 100% 64%, 77% 37%, 0 99%, 0 0);
}
#statistik .clip5 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: #ffffff50;
	height: 100px;
	-webkit-clip-path: polygon(100% 0, 100% 100%, 77% 61%, 0 99%, 0 0); clip-path: polygon(100% 0, 100% 100%, 77% 61%, 0 99%, 0 0);
}
#statistik .clip6 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #ffffff;
	height: 100px;
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 38%, 12% 60%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 38%, 12% 60%);
}
#statistik .clip7 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #ffffff50;
	height: 100px;
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 17% 29%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 17% 29%);
}
.clip-up-tracking {
	-webkit-clip-path: polygon(100% 0, 100% 9%, 0 36%, 0 20%, 0 0); clip-path: polygon(100% 0, 100% 9%, 0 36%, 0 20%, 0 0);
	background: #fff;
	width: 100%;
	height: 200px;
}
.clip-down-tracking {
	-webkit-clip-path: polygon(91% 70%, 100% 82%, 100% 100%, 0 100%, 0 90%); clip-path: polygon(91% 70%, 100% 82%, 100% 100%, 0 100%, 0 90%);
	background: #fff;
	width: 100%;
	height: 200px; 
}