/**
 * Stylesheet:  style.css
 * Theme:       Benos - Multipurpose Website CMS with Codeigniter
 * Version:     1.0
 * Author:      Xicia
 * 
 */

/*
-------------------------------
1. Import CSS and Google Fonts
2. Global Styles
3. Preloader
4. Header-Area
5. Logo and Menu
6. Search
7. Slider
8. About
9. Video
10. About Detail
11. Benefits
12. Choose Items
13. Featured
14. Service
15. Single Service
16. Counter
17. Portfolio
18. Portfolio Details
19. Team
20. Team Details
21. PRICING TABLE
22. Testimonial
23. Booking
24. Faq
25. Blog
26. Sidebar
27. Pagination
28. Blog Single
29. Brand
30. Call To Action
31. Footer
32. Footer Bottom
33. Banner
34. Scroll To Top
35. Event
36. Event Detail
37. Gallery
38. Shop
39. Product Detail
40. Shopping Cart
41. Checkout
42. Contact
43. 404 Page
44. Under Construction Page
-------------------------------
*/


/*
-------------------------------
Import CSS and Google Fonts
-------------------------------
*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700,900|Work+Sans:400,500,600,700');


/*
-------------------------------
Global Styles
-------------------------------
*/
body {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #313131;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

p {
	font-size: 16px;
	line-height: 1.3;
}

a {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	color: #313131;
}

a:focus {
	outline: none;
	color: #313131;
}

button:focus {
	outline: none;
}

.form-group input:focus {
	box-shadow: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Roboto Condensed', sans-serif;
	color: #313131;
}

a:hover,
a:active,
a:visited,
a:focus {
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

a:hover {
	color: #3367c1;
}

img {
	max-width: 100%;
	height: auto;
}

.bg {
	position: absolute;
	background-color: #313131;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.75;
}

.bg-area {
	background: #f3f3f3;
}

button {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 15px !important;
	border-radius: 0 !important;
}

input,
textarea,
.form-control,
select{
	border-radius: 0 !important;
    font-family: 'Roboto Condensed', sans-serif;
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
}

.pl-10 {
	padding-left: 10px !important;
}

.pr-10 {
	padding-right: 10px !important;
}

.ptb {
	padding: 60px 0 !important;
}

.pt-30 {
	padding-top: 30px !important;
}

.pb-30 {
	padding-bottom: 30px !important;
}

.pt-60 {
	padding-top: 60px !important;
}

.pb-60 {
	padding-bottom: 60px !important;
}

.mtb {
	margin: 60px 0 !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mt-60 {
	margin-top: 60px !important;
}

.mb-60 {
	margin-bottom: 60px !important;
}

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.headline {
	text-align: center;
	position: relative;
    padding-bottom: 12px;
}

.headline h2 {
    font-size: 36px;
	font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.headline h2 span{
    font-weight: 400 !important;
}
.headline h3 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	font-weight: 400;
    margin-bottom: 15px;
    color: #777;
}
.hl-white {
	color: #fff !important;
}

.hl-white h2 {
	color: #fff !important;
}
.hl-white h3 {
	color: #fff !important;
}

.hl-left {
	text-align: left !important;
}

.headstyle h4 {
	display: inline-block;
	position: relative;
	font-size: 22px;
	font-weight: 700;
	padding-bottom: 9px;
	margin-bottom: 30px;
	text-transform: uppercase;
}

.headstyle h4:before {
	position: absolute;
	content: '';
	width: 70%;
	height: 1px;
	background: #3367c1;
	left: 0;
	bottom: 0;
}

.headstyle h4:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 1px;
	background: #3367c1;
	left: 0;
	bottom: -5px;
}

.image-effect {
	position: relative;
	display: block;
	vertical-align: top;
	max-width: 100%;
}

.image-effect:before,
.image-effect:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, .3);
	z-index: 6;
	-webkit-transition: transform .5s, opacity .2s ease-in-out 0s;
	-o-transition: transform .5s, opacity .2s ease-in-out 0s;
	transition: transform .5s, opacity .2s ease-in-out 0s;
	opacity: 0;
	filter: alpha(opacity=0);
}

.effect-item:hover .image-effect:before {
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	-o-transform: scale(0, 1);
	transform: scale(0, 1);
	opacity: 1;
	filter: alpha(opacity=100);
}

.effect-item:hover .image-effect:after {
	-webkit-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
	opacity: 1;
	filter: alpha(opacity=100);
}

.button a {
	display: inline-block;
	font-weight: 600;
	color: #fff;
	background: #3367c1;
	border-left: 5px solid;
	border-right: 5px solid;
	border-color: #313131;
	border-radius: 0px;
	padding: 13px 27px;
	text-decoration: none;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.button a i {
	margin-left: 5px;
}

.button a:hover {
	background: #3367c1;
	border-color: #313131;
	color: #313131;
}

.button-bn a {
	font-weight: 600;
	text-decoration: none;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.button-bn i {
	margin-left: 3px;
}

.button-bn a:hover {
	color: #313131;
}

/* button-df */
.button-df a {
	display: inline-block;
	font-weight: 700;
    letter-spacing: 0.5px;
	color: #fff;
	background: #3367c1;
	border-radius: 0px;
	padding: 13px 27px;
	text-decoration: none;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.button-df a i {
	margin-left: 5px;
}

.button-df a:hover {
	background: #313131;
	color: #fff;
}

.modal-footer .btn {
	cursor: pointer;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.modal-footer .btn:hover {
	background: #313131;
	color: #fff;
}
.btn-subs {
	background: #313131!important;
	border-color: #313131!important;
}

/*
-------------------------------
Preloader
-------------------------------
*/
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 999999;
}

#status {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px;
}

/*
-------------------------------
Header-Area
-------------------------------
*/
.header-area {
	clear: both;
	border-bottom: 1px solid #e8e8e8;
	padding: 15px 0;
	background: #3367c1;
}

.header-social ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-social li {
	position: relative;
	display: inline-block;
	margin-right: 30px;
}

.header-social li:before {
	position: absolute;
	content: "";
	width: 2px;
	height: 100%;
	background-color: #e9e9e9;
	top: 0;
	left: -15px;
}

.header-social li:first-child:before {
	display: none;
}

.social-bar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-bar li {
	display: inline-block !important;
	margin-right: 15px !important;
}

.social-bar li:last-child {
	margin-right: 0 !important;
}

.social-bar li:before {
	display: none;
}

.social-bar li a {
	color: #fff;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.social-bar li a:hover {
	color: #fff;
}

.language a {
	text-decoration: none;
	color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
}

.language a:hover {
	color: #fff;
}

.language i {
	margin-right: 7px;
}

.dropdown-menu a {
	text-decoration: none;
	color: #313131;
    font-family: 'Roboto Condensed', sans-serif;
}

.dropdown-menu a:hover {
    background-color: transparent;
	color: #3367c1;
}

.header-info {
	text-align: right;
}

.header-info ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-info li {
	position: relative;
	display: inline-block;
	color: #fff;
	margin-left: 30px;
	font-size: 15px;
}

.header-info li:first-child {
	margin-left: 0;
}

.header-info li:before {
	position: absolute;
	content: "";
	width: 2px;
	height: 100%;
	background-color: #e9e9e9;
	top: 0;
	left: -17px;
}

.header-info li:first-child:before {
	display: none;
}

.header-info li i {
	margin-right: 7px;
	color: #fff;
}

/*
-------------------------------
Logo and Menu
-------------------------------
*/
.logo {
	min-height: 87px;
}

.logo img {
	width: auto;
	height: 65px;
}

.main-menu-item {
	float: right;
	margin-right: 25px;
}

ul.nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.nav-menu li {
	position: relative;
	float: left;
}

ul.nav-menu li a {
	font-size: 15px;
	font-weight: 700;
    text-transform: uppercase;
	color: #313131;
	text-decoration: none;
	padding: 0 16px;
	min-height: 87px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-direction: column;
	flex-direction: column;
}

ul.nav-menu li ul {
	position: absolute;
	width: 250px;
	top: 100%;
	left: 0;
	z-index: 999;
}

ul.nav-menu li ul > li {
	float: none;
	display: none;
	opacity: 0;
}

ul.nav-menu li ul li a {
	font-size: 13px;
	font-weight: 500;
    letter-spacing: 0.5px;
    font-family: 'Roboto Condensed', sans-serif;
	padding: 14px 20px;
	background: #3367c1;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.20);
	min-height: 49px;
}

ul.nav-menu li ul li ul {
	top: 0;
	left: 100%;
}

ul.nav-menu li:hover ul > li > ul > li > a{
	border-left: 1px solid rgba(255,255,255,0.20);
}

ul.nav-menu li:hover > a {
	color: #3367c1;
}
ul.nav-menu li ul li:hover > a{
    background: #f1f1f1;
	color: #3367c1;
    border-bottom:  1px solid #f1f1f1;
}

ul.nav-menu li:focus > ul > li,
ul.nav-menu li:hover > ul > li {
	display: block;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-animation: fade 0.4s forwards;
	animation: fade 0.4s forwards;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

@-webkit-keyframes fade {
	0% {
		-webkit-transform: translateY(0px);
		;
	}
	100% {
		-webkit-transform: translateY(0px);
		;
	}
	0% {
		-webkit-transform: translateY(0px);
		;
	}
}

@keyframes fade {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(0px);
		opacity: 1;
	}
	0% {
		transform: translateY(0px);
	}
}

ul.nav-menu li ul li:first-child {
	animation-delay: 0.1s;
}

ul.nav-menu li ul li:nth-child(2) {
	animation-delay: 0.2s;
}

ul.nav-menu li ul li:nth-child(3) {
	animation-delay: 0.3s;
}

ul.nav-menu li ul li:nth-child(4) {
	animation-delay: 0.4s;
}

ul.nav-menu li ul li:nth-child(5) {
	animation-delay: 0.5s;
}

ul.nav-menu li ul li:nth-child(6) {
	animation-delay: 0.6s;
}

ul.nav-menu li ul li:nth-child(7) {
	animation-delay: 0.7s;
}

ul.nav-menu li ul li:nth-child(8) {
	animation-delay: 0.8s;
}

ul.nav-menu li ul li:nth-child(9) {
	animation-delay: 0.9s;
}

ul.nav-menu li ul li:nth-child(10) {
	animation-delay: 1s;
}

.mean-container .mean-nav ul {
	position: static;
	display: block;
}

.mean-container .mean-nav ul li a {
	background: #0c1923;
	border-left: 0;
    padding: 13px 5%;
}

.mean-container .mean-nav ul li:hover {
	background: none;
}

.mean-container .mean-nav ul li a:hover {
	background-color: rgba(255, 255, 255, 0.1)!important;
}

.mean-container .mean-nav ul li a.mean-expand {
	height: 24px!important;
}

#strickymenu.sticky {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	z-index: 999;
	-webkit-transition: height 0.3s;
	transition: all 0.3s;
}

#strickymenu.sticky .logo {
	min-height: 70px;
}

#strickymenu.sticky .logo img {
	height: 56px;
}

#strickymenu.sticky ul.nav-menu li a {
	min-height: 70px;
}

#strickymenu.sticky ul.nav-menu li ul li a {
	min-height: 49px;
}

/*
-------------------------------
Search
-------------------------------
*/
.searchbar .search-button {
	text-align: right;
	position: absolute;
	top: 50%;
	margin-top: -11px;
	right: 15px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.searchbar .search-button:active,
.searchbar .search-button:focus,
.searchbar .search-button:hover {
	cursor: pointer;
	color: #3367c1;
}

.searchbar .input-search {
	position: absolute;
	width: 50%;
	right: 0px;
	bottom: -66px;
	background: #3367c1;
	padding: 15px;
}

.input-search {
	z-index: 999;
}

.searchbar .input-search input {
	font-size: 15px;
	border: 1px solid #fff;
}

.searchbar .input-search .btn {
	cursor: pointer;
	background: #eef1f5;
}

/*
-------------------------------
Slider
-------------------------------
*/
.slider-item {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	height: 390px;
	color: #fff;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.slider-item {
    height: auto; 
    aspect-ratio: 16 / 5; /* Gambar akan menyesuaikan tingginya berdasarkan lebarnya */
    width: 100%;
}

.bg-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* Gradien yang lebih soft dan menyebar rata */
    background: rgba(0, 0, 0, 0.3); 
}

.text-animated h1 {
	font-size: 42px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 15px;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	line-height: 1.3;
}

.text-animated h1 span {
	font-weight: 300;
}

.text-animated p {
	font-size: 16px;
	color: #fff;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
}

.text-animated ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.text-animated li {
	display: inline-block;
	margin-top: 15px;
	margin-right: 15px;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-animation-delay: .8s;
	animation-delay: .8s;
}

.text-animated li a {
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
	display: inline-block;
	background: #3367c1;
	color: #fff;
	border: 1px solid #3367c1;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 10px 40px;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.text-animated li a:hover {
	background: #fff;
	color: #3268c1;
	border: 1px solid #fff;
}

.text-animated li:last-child a {
	background: #313131;
	color: #fff;
	border: 1px solid #313131;
}

.text-animated li:last-child a:hover {
	background: #fff;
	color: #313131;
	border: 1px solid #fff;
}

.slider-one .owl-nav {
	position: absolute;
	bottom: 5%;
    left: calc(50% - 60px);
	width: 120px;
}

.slider-one .owl-nav .owl-prev,
.slider-one .owl-nav .owl-next {
	font-size: 18px;
	text-align: center;
	display: inline-block;
	width: 45px;
	height: 45px;
	line-height: 41px;
	color: #fff;
	background: #3367c1;
	border: 2px solid #3367c1;
	margin: 0 6px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.slider-one .owl-nav .owl-prev:hover,
.slider-one .owl-nav .owl-next:hover {
	color: #3268c1;
	background: #fff;
	border: 2px solid #fff;
}

.slider-two .slider-text {
	text-align: center;
}

.slider-two .text-animated p {
	margin-left: 30px;
	margin-right: 30px;
}

.slider-two .owl-nav .owl-prev,
.slider-two .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 45px;
	height: 50px;
	line-height: 46px;
	top: 50%;
	margin-top: -25px;
	border: 2px solid #fff;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.slider-two .owl-nav .owl-prev {
	left: 0;
	margin-left: 0;
}

.slider-two .owl-nav .owl-next {
	right: 0;
	margin-right: 0;
}

.slider-two .owl-nav .owl-prev:hover,
.slider-two .owl-nav .owl-next:hover {
	color: #3268c1;
	border: 2px solid #3268c1;
}


/*
-------------------------------
About
-------------------------------
*/
.about-area {
	background-color: #f3f3f3; /* Warna latar belakang website */
}
.headline-left{
    margin-bottom: 50px;
}
.headline-left h2 {
    font-size: 32px;
    font-weight: 900;
   
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}
.headline-left h2 span {
	font-size: 40px;
	display: block;
    font-weight: 300;
}
.progress-gallery.main-prog{
    margin-top: 50px;
}
.about-tab{
    position: relative;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
}
.about-tab:before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3367c1;
    opacity: 0.9;
}
.about-tab ul{
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 10px;
    position: relative;
    z-index: 99;
}
.about-tab ul li{
    display: inline-block;
}
.about-tab ul li a{
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    background: #fff;
    padding: 10px 20px;
    margin-left: -5px;
}
.about-tab ul li a.active{
    background: #313131;
    color: #fff;
}

/* Container Background */
.bg-light-gray {
    background-color: #f8f9fa;
}

/* Kolom Kiri - Visi */
.vision-title {
	background: linear-gradient(135deg, #1dc0d6 0%, #01626e 100%);
  -webkit-background-clip: text; /* Memotong background mengikuti bentuk teks */
  -webkit-text-fill-color: transparent; /* Membuat warna asli teks transparan */
  background-clip: text;
  color: transparent; /* Fallback */  
  display: inline-block; /* Memastikan gradien terhitung dengan benar */
  font-weight: bold; /* Opsional: Gradien terlihat lebih bagus pada teks tebal */
}

.text-teal {
    color: #0099aa; /* Warna Toska/Teal untuk kata pertama */
}

.quote-icon {
    font-size: 20px;
	line-height: 1.3;
    color: #016f7e; /* Warna Toska Muda untuk quote */
	font-weight: bold;
    opacity: 1.6;
    text-align: left;
    margin-top: -20px;
}

/* Kolom Kanan - Deskripsi */
.welcome-description .desc-text {
    font-size: 11px;
    line-height: 0.8;
    color: #555;
    text-align: justify;
}

.welcome-description .desc-text strong {
    color: #006677;
    font-weight: 100;
}

/* Tombol Selengkapnya */

/* Container pembungkus tombol */
.container-tombol {
    display: flex;
    justify-content: center; /* Memposisikan ke tengah secara horizontal */
    width: 100%;
    padding: 20px 0;
}
.btn-selengkapnya {
    display: inline-block;
    background-color: #007c89; /* Warna Teal Bold */
    color: #fff !important;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 124, 137, 0.2);
}

.btn-selengkapnya:hover {
    background-color: #005f69;
    transform: translateY(-2px);
	text-decoration: none;
}

/* Pengaturan khusus Mobile & Tablet (Responsive) */
@media (max-width: 991px) {
    .vision-title {
		text-align: center !important;
        margin-bottom: 1px !important; /* Jarak dipersempit */
        line-height: 1.2;
    }

    .col-lg-6.mt_30 {
        margin-top: 1px !important; /* Mengurangi gap antar kolom bootstrap */
    }

    .welcome-description h5.quote-icon {
		text-align: justify !important;
        text-justify: Inter-word;
        margin-top: 20px !important;
        line-height: 1.4;
    }

	.btn-selengkapnya {
        display: block; /* Berubah jadi block agar margin auto bekerja */
        margin: 2px auto;
        width: fit-content; /* Agar lebar tombol tidak memenuhi layar */
        text-align: center;
        float: none !important;
    }
    
    /* Atau jika parentnya mendukung text-align */
    .parent-element {
        text-align: center;
    }
}

/*
-------------------------------
Video
-------------------------------
*/
.video-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
}

.video-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 50%;
  animation: video-pop 1500ms ease-out infinite;
}

.video-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 50%;
  transition: all 200ms;
}

.video-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid #3367c1;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
}

@keyframes video-pop {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
.progress-gallery.main-prog .bar-container .progress{
    height: 8px;
    border-radius: 0;
}
.modal.show .modal-dialog.hb-style {
    -webkit-transform: translate(0px,25%);
    -o-transform: translate(0px,25%);
    transform: translate(0px,25%);
}
.modal-header h3 {
	font-size: 24px;
    font-weight: 700;
	color: #3367c1;
	margin: 0;
}


/*
-------------------------------
About Detail
-------------------------------
*/
.about-page .headstyle h4 {
	margin-bottom: 20px;
}

.about-menu {
	margin-top: 30px;
}

.about-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-menu ul li {
	position: relative;
	margin-bottom: 8px;
}

.about-menu ul li:last-child {
	margin-bottom: 0;
}

.about-menu ul li a {
	display: block;
	font-size: 16px;
	font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid #e1e1e1;
	padding-bottom: 8px;
	padding-left: 12px;
	position: relative;
}

.about-menu ul li a:before {
	position: absolute;
	content: '\f0da';
	font-family: fontawesome;
	top: 0;
	left: 0;
}

.about-menu ul li a.active {
	color: #3367c1;
	border-bottom: 1px solid #3367c1;
}

.company-detail {
	margin-top: 30px;
}

.about-carousel {
	margin-bottom: 30px;
}

.company-detail h5 {
	font-size: 16px;
    font-weight: 700;
	line-height: 1.4;
	margin-bottom: 15px;
}

.company-detail p:last-child {
	margin: 0;
}

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

.history-list ul li {
	font-size: 15px;
	margin-bottom: 15px;
	padding-bottom: 8px;
}

.history-list ul li span {
    font-size: 16px;
	font-weight: 700;
	color: #3367c1;
}

.about-carousel {
	border: 1px solid #e1e1e1;
}

.about-carousel .owl-nav .owl-prev,
.about-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 50px;
	line-height: 48px;
	top: 50%;
	margin-top: -25px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.about-carousel .owl-nav .owl-prev {
	left: 0;
}

.about-carousel .owl-nav .owl-next {
	right: 0;
}

.about-carousel .owl-nav .owl-prev:hover,
.about-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.mission-detail {
	margin-top: 15px;
}

.mission-item {
	text-align: center;
	margin-top: 15px;
	background: #f5f5f5;
	border: 1px solid #e1e1e1;
	padding: 15px;
	min-height: 228px;
}

.mission-item img {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	margin-bottom: 15px;
}

.mission-item i {
	font-size: 40px;
    color: #3367c1;
	margin: 0 auto;
	margin-bottom: 20px;
}

.mission-item h4 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
}

.mission-item p {
	margin: 0;
}

.progress-gallery {
	margin-top: 15px;
}

.progress-gallery .bar-container {
	position: relative;
	font-size: 15px;
	margin-bottom: 15px;
}

.progress-gallery .bar-container p {
	font-weight: 500;
	margin-bottom: 5px;
}

.progress-gallery .bar-container .progress {
	height: 10px;
}

.progress-gallery .bar-container .progress .progress-bar-custom {
	background-color: #3367c1;
}

.progress-gallery .bar-container .percentage-show {
	font-weight: 500;
	position: absolute;
	top: 0px;
	right: 0;
	z-index: 9;
}

.progress-gallery .progress-bar {
	transition-duration: 3s;
}


/*
-------------------------------
Benefits
-------------------------------
*/
.benefits-photo img {
    max-width: 100%;
    height: auto;
}

.benefits-right h3 {
	font-size: 40px;
	font-weight: 700;
    text-transform: uppercase;
	margin-bottom: 25px;
}
.benefits-right h3 span{
    font-weight: 400;
}

.benefits-right p {
	margin-bottom: 20px;
}

.benefits-right ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.benefits-right ul li {
    font-size: 16px;
    font-weight: 500;
	position: relative;
	padding-left: 25px;
	margin-top: 5px;
    color: #3367c1;
}

.benefits-right ul li:before {
	position: absolute;
	content: '\F178';
	font-family: 'fontawesome';
	top: 0;
	left: 0;
	color: #3367c1;
}


/*
-------------------------------
Choose Items
-------------------------------
*/
.choose-item {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	text-align: center;
	margin-top: 30px;
	padding: 15px;
	position: relative;
	height: 300px;
}

.choose-item:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #3367c1;
	opacity: 0.8;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.choose-item:hover:before {
	opacity: 1;
}

.choose-icon {
	position: relative;
	margin-bottom: 20px;
}

.choose-icon img {
	width: 60px;
	height: 60px;
}
.choose-icon i{
    font-size: 60px;
    color: #fff;
}

.choose-text {
	position: relative;
}

.choose-text h4 {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 15px;
	text-transform: uppercase;
}

.choose-text p {
	color: #d6ddff;
	margin: 0;
}


/*
-------------------------------
Featured
-------------------------------
*/
.feature-area {
    background-color: #fff; /* Warna latar belakang website */
    padding: 0px 0;
}

.feature-item {
	display: table;
	width: 100%;
	height: 80%;
	margin-top: 30px;
}

.feature-icon {
	vertical-align: top;
	display: table-cell;
	width: 70px;
    text-align: center;
}

.feature-icon img {
	width: 70px;
	height: 70px;
	background: #fcfcfc;
	border: 1px solid #e4e4e4;
	border-right: 0px;
	border-radius: 50px 0px 0 50px;
	padding: 12px;
	box-shadow: 0 5px 16px rgba(0, 0, 0, .2);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.feature-icon i {
    font-size: 40px;
	width: 70px;
	height: 70px;
	background: #3367c1;
    color: #fff;
	border: 1px solid #3367c1;
	border-right: 0px;
	border-radius: 50px 0px 0 50px;
	padding: 12px;
	box-shadow: 0 5px 16px rgba(0, 0, 0, .2);
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.feature-text {
	vertical-align: top;
	display: table-cell;
	padding: 20px;
	background: #fcfcfc;
	border: 1px solid #e4e4e4;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
.feature-text h4 {
	font-size: 20px;
    font-weight: 700;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	text-transform: uppercase;
}

.feature-text p {
	margin: 0;
}

.feature-two .feature-icon img {
	border-radius: 0;
	padding: 12px;
	box-shadow: none;
}
.feature-two .feature-icon i {
	border-radius: 0;
	padding: 12px;
	box-shadow: none;
}

.feature-item:hover .feature-icon img,
.feature-item:hover .feature-icon i,
.feature-item:hover .feature-text {
	box-shadow: 0 6px 15px rgba(0, 0, 0, .2);
}
.feature-item:hover .feature-icon i{
    background: #fff;
    color: #3367c1;
}
.feature-item:hover .feature-text{
    background: #3367c1;
	border: 1px solid #3367c1;
    color: #fff;
}
.feature-item:hover .feature-text h4{
    color: #fff;
}


/*
-------------------------------
Service
-------------------------------
*/

.services-area {
    background-color: #fff; /* Warna latar belakang website */
    padding: 0px 0;
}
.services-item {
	box-shadow: 0 9px 20px rgba(0, 0, 0, 0.2);
	margin-bottom: 30px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.services-item:hover {
	box-shadow: 0 9px 20px rgba(0, 0, 0, 0.2);
}

.services-photo {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	height: 196px;
}

.services-text {
	background: #f5f5f5;
	padding: 20px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.services-item:hover .services-text {
	background: #f9f9f9;
}

.services-text h3 a {
	font-size: 20px;
    font-weight: 700;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	
}
.services-text .button-bn a{
    font-size: 16px;
    font-weight: 700;
}
.services-text a:hover {
	color: #3367c1;
}

.services-text p {
	margin-bottom: 10px;
}

/* Container & Headline */
.services-area-custom {
    background-color: #fff;
}
.headline-left {
    margin-bottom: 40px;
}
.title-custom {
    font-weight: 800;
    font-size: 32px;
    color: #333;
    margin-bottom: 10px;
}
.line-left {
    width: 60px;
    height: 4px;
    background: #3B9CA5; /* Warna identitas */
}

/* Service List Cards */
.service-list-card {
    display: block;
    background: #f3f3f3;
    padding: 15px 20px;
    border-radius: 4px;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border-right: 5px solid #3B9CA5;
}

.service-list-card:hover {
    transform: translateX(10px);
    border-right: 5px solid #3B9CA5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.service-list-text {
    color: #3B9CA5;
    font-weight: 650;
    font-size: 16px;
}

/* Stacked Image Section */
/* Stacked Image Section - DIPERKEZIL */
.stacked-image-container {
    position: relative;
    height: 50px;
    padding-top: 320px; /* Dikurangi mengikuti tinggi total gambar yang baru */
}

.img-back img, .img-front img {
    width: 220px;  /* Diperkecil dari 280px */
    height: 157px; /* Diperkecil dari 200px (menjaga rasio 4:3) */
    object-fit: cover;
    border-radius: 10px; /* Radius sedikit disesuaikan */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 4px solid #fff; /* Border sedikit tipis */
}

.img-back {
    position: absolute;
    top: 110px; /* Disesuaikan agar tumpukan tetap estetik */
    left: -20px; /* Disedikit geser ke kiri agar tumpukan lebih jelas di kolom sempit */
    z-index: 1;
}

.img-front {
    position: absolute;
    top: 0;
    right: -10px; /* Disedikit geser ke kanan */
    z-index: 2;
}

/* Responsive */
@media (max-width: 991px) {
    .stacked-image-container {
        display: none; /* Sembunyikan gambar bertumpuk di layar kecil agar fokus ke list */
    }
}

/* Memastikan semua kolom dalam satu baris memiliki tinggi yang sama */
    .service-page .row {
        display: flex;
        flex-wrap: wrap;
    }

    /* Memastikan card/item mengisi seluruh tinggi kolom */
    .services-item {
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-bottom: 0px; /* Jarak antar baris */
    }

    /* Memastikan area teks mendorong tombol ke bawah */
    .services-text {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Opsional: Menjaga ukuran gambar tetap konsisten */
    .services-photo {
        height: 200px; /* Tentukan tinggi tetap untuk gambar */
        background-size: cover;
        background-position: center;
    }
/*
-------------------------------
Single Service
-------------------------------
*/

.single-ser-carousel {
	margin-bottom: 30px;
}

.single-ser-carousel .owl-nav .owl-prev,
.single-ser-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 50px;
	line-height: 48px;
	top: 50%;
	margin-top: -25px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.single-ser-carousel .owl-nav .owl-prev {
	left: 0;
}

.single-ser-carousel .owl-nav .owl-next {
	right: 0;
}

.single-ser-carousel .owl-nav .owl-prev:hover,
.single-ser-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.service-sidebar {
	margin-top: 30px;
}

.service-sidebar-item {
	margin-top: 30px;
    border: 1px solid #ddd;
    padding: 30px;
}

.service-sidebar-item:first-child {
	margin-top: 0;
}

.service-sidebar-item ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-sidebar-item ul li {
	padding: 6px 0;
}

.service-sidebar-item ul li:first-child {
	padding-top: 0;
}

.service-sidebar-item ul li a {
    font-family: 'Roboto Condensed', sans-serif;
	display: inline-block;
	text-decoration: none;
	position: relative;
	padding-left: 10px;
}

.service-sidebar-item ul li a:before {
	position: absolute;
	content: '\F105';
	font-family: fontawesome;
	top: 0;
	left: 0;
	color: #313131;
}

.service-sidebar-item h3 {
	font-size: 26px;
	font-weight: 500;
}

.service-sidebar-item .form-group textarea {
	height: 110px;
}

.service-info {
	margin-top: 30px;
}

.service-info h2 {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 20px;
}

.service-info p:last-child {
	margin: 0;
}


/*
-------------------------------
Counter
-------------------------------
*/
.counterup-area {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
}

.bg-counterup {
	position: absolute;
	background-color: #3367c1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.9;
}

.counter-item {
	position: relative;
	text-align: center;
	color: #fff;
	border: 1px solid #fff;
	margin-top: 30px;
	padding: 15px;
	min-height: 225px;
}

.counter-item:before,
.counter-item:after {
	position: absolute;
	content: '';
	width: 50%;
	height: 5px;
	background: #fff;
	transition: all 0.4s;
}

.counter-item:before {
	top: 0;
	right: 0;
}

.counter-item:after {
	bottom: 0;
	left: 0;
}

.counter-item:hover:before {
	right: 50% !important;
}

.counter-item:hover:after {
	left: 50% !important;
}

.counter-item img {
	width: 56px;
	height: 56px;
	margin: 0 auto;
	margin-bottom: 15px;
}
.counter-item i {
	font-size: 56px;
	margin-bottom: 15px;
}

.counter-item h2.counter {
	font-size: 36px;
	font-weight: 700;
	margin-top: 0;
	color: #fff;
}

.counter-item h4 {
	font-size: 20px;
	color: #fff;
	margin: 0;
}


/*
-------------------------------
Portfolio
-------------------------------
*/

.portfolio-menu {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 6px;
}

.portfolio-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.portfolio-menu li {
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	font-family: 'Roboto Condensed', sans-serif;
	display: inline-block;
	border-bottom: 1px solid #e1e1e1;
	color: #313131;
	padding: 5px 10px;
	padding-top: 0;
	margin: 0 10px;
	margin-top: 10px;
	position: relative;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.portfolio-menu li:hover {
	color: #3367c1;
}

.portfolio-menu li.filtr-active {
	border-bottom: 1px solid #3367c1;
	color: #3367c1;
}

.portfolio-menu li.filtr-active:before {
	border-color: #3367c1 transparent transparent;
	border-style: solid;
	position: absolute;
	content: "";
	border-width: 6px 6px 0;
	left: 50%;
	margin-left: -6px;
	bottom: -6px;
	text-decoration: none;
}

.portfolio-group {
	border: 1px solid #ededed;
	margin-top: 30px;
}

.portfolio-photo {
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 196px;
	position: relative;
}

.portfolio-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #3367c1;
	visibility: hidden;
	opacity: 0;
	transform: scale(0);
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
}

.portfolio-group:hover .portfolio-bg {
	opacity: 0.7;
	transform: scale(1);
	visibility: visible;
}

.portfolio-table {
	display: table;
	width: 100%;
	height: 100%;
}

.portfolio-icon {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.portfolio-icon a {
	position: relative;
	font-size: 26px;
	color: #fff;
	text-decoration: none;
	z-index: 99;
}

.portfolio-group:hover .portfolio-icon {
	opacity: 1;
	visibility: visible;
}

.portfolio-text {
	text-align: center;
	background: #f5f5f5;
	padding: 20px;
}

.portfolio-text h3 a {
	font-size: 20px;
    font-weight: 700;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	margin-bottom: 8px;
}

.portfolio-text h3 a:hover {
	color: #3367c1;
}

.portfolio-text p {
	position: relative;
	font-size: 15px;
	border-top: 1px solid #ddd;
	margin: 0;
	padding-top: 8px;
}

.portfolio-text p:before {
	position: absolute;
	content: '';
	left: 0;
	top: -1px;
	width: 0%;
	height: 1px;
	background: #3367c1;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.portfolio-group:hover .portfolio-text p:before {
	width: 100%;
}

.portfolio-text p span {
	margin-right: 8px;
}

.project-page .portfolio-menu {
	margin-top: 0;
	margin-bottom: 5px;
}

.project-page li {
	margin-top: 0;
	margin-bottom: 10px;
}


/*
-------------------------------
Portfolio Details
-------------------------------
*/

.portfolio-carousel {
	overflow: hidden;
	margin-top: 30px;
}

.portfolio-photo-item {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	height: 370px;
	position: relative;
}

.portfolio-carousel .owl-nav .owl-prev,
.portfolio-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	top: 50%;
	width: 40px;
	height: 50px;
	line-height: 48px;
	background: #3367c1;
	color: #fff;
	margin-top: -25px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.portfolio-carousel .owl-nav .owl-prev {
	left: 0;
}

.portfolio-carousel .owl-nav .owl-next {
	right: 0;
}

.portfolio-carousel .owl-nav .owl-prev:hover,
.portfolio-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.portfolio-details-text h3 {
	font-size: 26px;
	font-weight: 700;
    text-transform: uppercase;
	margin: 0;
	margin-top: 30px;
}

.portfolio-details-text p {
	margin: 0;
	margin-top: 20px;
}

.portfolio-sidebar {
	margin-top: 30px;
}

.portfolio-details,
.portfolio-form{
    border: 1px solid #ddd;
    padding: 30px;
}

.portfolio-details ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.portfolio-details ul li {
	font-size: 15px;
	font-weight: 400;
	color: #313131;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #dddddd;
}

.portfolio-details ul li span {
	font-weight: 600;
	color: #3367c1;
	margin-right: 5px;
}


.portfolio-form .form-group textarea {
	height: 110px;
}

.recent-project .portfolio-text {
	background: #fff;
}

.project-carousel .owl-nav .owl-prev,
.project-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 40px;
	line-height: 38px;
	top: 0;
	margin-top: -20px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.project-carousel .owl-nav .owl-prev {
	right: 0;
	margin-right: 40px;
}

.project-carousel .owl-nav .owl-next {
	right: 0;
	margin-right: 0px;
}

.project-carousel .owl-nav .owl-prev:hover,
.project-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}


/*
-------------------------------
Team
-------------------------------
*/

.team-item {
	overflow: hidden;
	border: 1px solid #ddd;
	margin-top: 30px;
	position: relative;
}

.team-item img {
	width: 100%;
	height: auto;
}

.team-text {
	text-align: center;
	color: #fff;
	background: #3367c1;
	padding: 15px;
    position: relative;
    z-index: 99;
}

.team-text a {
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
    text-transform: uppercase;
	color: #fff;
	margin-bottom: 4px;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.team-text p {
	margin: 0;
}

.team-social {
	text-align: center;
    position: absolute;
    width: 100%;
    bottom: 20px;
    background: #eef1f5;
    padding: 10px 0;
    visibility: hidden;
    opacity: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.team-social ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-social li {
	display: inline-block;
    margin-left: -5px;
}

.team-social li a {
	display: block;
	width: 35px;
	height: 33px;
	line-height: 33px;
	background: #f1f1f1;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #eaeaea;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.team-social li a:hover {
	color: #fff;
	background: #3367c1;
	border-top: 1px solid #3367c1;
	border-bottom: 1px solid #3367c1;
}

.team-item:hover .team-social {
    bottom: 88px;
	visibility: visible;
    opacity: 1;
}

.team-carousel .owl-nav .owl-prev,
.team-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 40px;
	line-height: 38px;
	top: 0;
	margin-top: -20px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.team-carousel .owl-nav .owl-prev {
	right: 0;
	margin-right: 40px;
}

.team-carousel .owl-nav .owl-next {
	right: 0;
	margin-right: 0px;
}

.team-carousel .owl-nav .owl-prev:hover,
.team-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.team-social-two {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 85px;
	background: #eef1f5;
	padding: 10px 0;
}

.team-social-two ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.team-social-two ul li {
	display: inline-block;
	margin-left: -5px;
}

.team-social-two ul li a {
	display: block;
	width: 35px;
	height: 33px;
	line-height: 33px;
	background: #f1f1f1;
	border-left: 1px solid #fff;
	border-right: 1px solid #eaeaea;
	text-decoration: none;
}

.team-social-two ul li:first-child a {
	border-left: 1px solid #eaeaea;
}

.team-social-two li a:hover {
	color: #fff;
	background: #3367c1;
	border-left: 1px solid #3367c1;
	border-right: 1px solid #3367c1;
}


/*
-------------------------------
Team Details
-------------------------------
*/

.team-detail-photo {
	margin-top: 30px;
}

.team-detail-text {
	margin-top: 30px;
}

.team-detail-text h4 {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 7px;
}

.team-detail-text p {
	margin-top: 20px;
}

.team-detail-text ul {
	list-style: none;
	margin: 0;
	margin-top: 15px;
	padding: 0;
}

.team-detail-text ul li {
	text-align: center;
	display: inline-block;
	margin-right: 7px;
	margin-top: 5px;
}

.team-detail-text ul li:last-child {
	margin-right: 0;
}

.team-detail-text ul li a {
	display: block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
}

.team-detail-text ul li a:hover {
	background: #313131;
	color: #fff;
}

.team-info {
	background: #f5f5f5;
	border: 1px solid #e1e1e1;
	padding: 30px;
	margin-top: 30px;
}

.team-info ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-info ul li {
	padding-bottom: 5px;
}

.team-info ul li span {
	color: #3367c1;
	margin-right: 10px;
}

.team-skill {
	background: #f5f5f5;
	border: 1px solid #e1e1e1;
	padding: 30px;
	margin-top: 30px;
}

.team-skill ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-skill ul li {
	position: relative;
	padding-left: 20px;
	padding-bottom: 5px;
}

.team-skill ul li:before {
	content: '\f14a';
	font-family: FontAwesome;
	position: absolute;
	top: 0;
	left: 0;
	color: #3367c1;
}


/*
-------------------------------
PRICING TABLE
-------------------------------
*/

.price-item {
	text-align: center;
	background: #fff;
	padding: 15px;
	margin-top: 30px;
    transform: scale(1);
	-webkit-box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.01);
	box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.01);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.price-header {
	padding: 15px 0;
}

.price-header img {
	width: 94px;
	height: 94px;
	background: #f6f6f6;
	border-radius: 50%;
	padding: 10px;
	margin-bottom: 15px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.price-header i {
    font-size: 52px;
	width: 94px;
	height: 94px;
    line-height: 94px;
	background: #3367c1;
    color: #fff;
	border-radius: 50%;
	margin-bottom: 15px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.price-item:hover .price-header img {
	background: #ececec;
}

.price-header h3 {
	font-size: 25px;
	font-weight: 700;
	margin-bottom: 7px;
}

.price-header h2 {
	font-size: 42px;
	font-weight: 700;
	margin-bottom: 7px;
}

.price-header p {
	margin: 0;
}

.price-body {
	padding: 15px 0;
}

.price-body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.price-body li {
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
}

.price-body li:last-child {
	border-bottom: 0px;
}

.price-footer {
	padding: 15px 0;
}
.price-item:hover{
    transform: scale(1.05);
}

/* Price-Page */

.price-page .price-item {
	border: 1px solid #e1e1e1;
	background: #f5f5f5;
}


/*
-------------------------------
Testimonial
-------------------------------
*/

.testimonial-area {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
}

.bg-testimonial {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #3367c1;
	opacity: 0.8;
}

.testimonial-item {
	text-align: center;
	color: #fff;
	border: 1px solid #fff;
	padding: 30px;
}

.testimonial-description {
	margin: 0 auto;
}

.testimonial-description p {
	position: relative;
	padding-top: 15px;
	margin-top: 15px;
	margin-bottom: 0;
}

.testimonial-description p:before {
	position: absolute;
	content: '';
	width: 120px;
	height: 3px;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
	background: #fff;
}

.testimonial-photo {
	width: 95px;
	height: 95px;
	margin: 0 auto;
}

.testimonial-photo img {
	width: 100%;
	height: auto;
}

.testimonial-name {
	margin-top: 15px;
}

.testimonial-name h4 {
	font-size: 22px;
    font-weight: 700;
	color: #fff;
	margin-bottom: 8px;
}

.testimonial-name p {
	font-size: 15px;
	margin: 0;
}

.testimonial-carousel .owl-dots {
	text-align: center;
	margin-top: 30px;
}

.testimonial-carousel .owl-dots .owl-dot {
	width: 24px;
	height: 24px;
	background: #3367c1;
	border: 7px solid #fff;
	border-radius: 50%;
	display: inline-block;
	margin: 0 5px;
}

.testimonial-carousel .owl-dots .owl-dot.active {
	width: 24px;
	height: 24px;
	background: #313131;
	border: 7px solid #fff;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	top: 50%;
	width: 40px;
	height: 50px;
	line-height: 48px;
	background: #fff;
	color: #3367c1;
	margin-top: -25px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.testimonial-carousel .owl-nav .owl-prev {
	left: 0;
}

.testimonial-carousel .owl-nav .owl-next {
	right: 0;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
	color: #3367c1;
	background: #fff;
}

.testimonial-grid .testimonial-item,
.testimonial-two-carousel .testimonial-item {
	color: #313131;
	background: #f5f5f5;
	border: 1px solid #e1e1e1;
	padding: 30px;
}

.testimonial-grid .testimonial-description,
.testimonial-two-carousel .testimonial-description {
	width: 100%;
}

.testimonial-grid .testimonial-description p,
.testimonial-two-carousel .testimonial-description p {
	padding-top: 15px;
	padding-bottom: 0;
	margin-top: 15px;
	margin-bottom: 0;
}

.testimonial-grid .testimonial-description p:before,
.testimonial-two-carousel .testimonial-description p:before {
	bottom: 100%;
    background: #3367c1;
}

.testimonial-grid .testimonial-name h4,
.testimonial-two-carousel .testimonial-name h4 {
	color: #313131;
}

.testimonial-two-carousel .owl-nav .owl-prev,
.testimonial-two-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	top: 50%;
	width: 40px;
	height: 50px;
	line-height: 48px;
	background: #3367c1;
	color: #fff;
	margin-top: -25px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.testimonial-two-carousel .owl-nav .owl-prev {
	left: 0;
}

.testimonial-two-carousel .owl-nav .owl-next {
	right: 0;
}

.testimonial-two-carousel .owl-nav .owl-prev:hover,
.testimonial-two-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

/*
-------------------------------
Booking
-------------------------------
*/

.booking-area {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
}

.booking-area:before {
	position: absolute;
	content: '';
	width: 50%;
	height: 100%;
	top: 0;
	left: 0;
	background: #3367c1;
	opacity: 0.8;
}


.bg-booking {
	position: absolute;
	background-color: #3367c1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.3;
}


.booking-gallery {
	position: relative;
	padding-right: 30px;
	z-index: 998;
	margin-top: 30px
}
.booking-form input,
.booking-form select,
.booking-form textarea{
    background-color: transparent !important;
    color: #fff !important;
    border: 1px solid #ddd !important;
}
.booking-form input:focus{
    border: 1px solid #fff;
}
.booking-form option{
    color: #333 !important;
}
.booking-form ::placeholder {
    color: #fff !important;
    opacity: 1;
}

.booking-form :-ms-input-placeholder {
   color: #fff !important;
}

.booking-form ::-ms-input-placeholder {
   color: #fff !important; 
}
.booking-form textarea{
    height: 112px;
}
.form-group input {
	font-size: 15px;
	font-family: 'Roboto Condensed', sans-serif;
	height: 40px;
	box-shadow: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0 12px;
}

.form-group textarea {
	font-size: 15px;
}

.form-control:focus {
	border-color: #3367c1;
	box-shadow: none;
}

.form-group select.custom-select {
	font-size: 15px;
	width: 100%;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 0px;
	color: #646769;
	padding: 0 8px;
}

.form-button .btn {
	cursor: pointer;
	font-size: 16px !important;
	font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
	width: 100%;
	background: #3367c1;
	color: #fff;
	padding: 9px 18px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.form-button .btn:hover {
	color: #fff;
	background: #313131;
}

.form-button .btn2 {
	background: #313131;
}

.form-button .btn2:hover {
	background: #fff;
	color: #3367c1;
}


/*
-------------------------------
Faq
-------------------------------
*/

.faq-home {
	padding-left: 30px;
}
.faq-item {
	border: 0px;
	margin-bottom: 15px;
}

.faq-header button.faq-button {
	cursor: pointer;
	font-size: 16px !important;
	text-align: left;
	display: block;
	width: 100%;
	padding: 15px;
	font-weight: 500;
	text-decoration: none;
	background: #3367c1;
	color: #fff;
}

.faq-header button.faq-button.collapsed {
	background: #f6faff;
	color: #313131;
}
.faq-header button.faq-button.collapsed:hover{
    background: #3367c1;
	color: #fff;
}

.faq-header button.faq-button i {
	margin-right: 5px;
}

.faq-header button.faq-button.collapsed i {
	margin-right: 5px;
}

.faq-body {
	border: 1px solid #fff;
	border-top: 0;
	background: #fff;
	padding: 25px;
	line-height: 1.6;
}

.faq-home .faq-body {
	padding: 15px;
}

.faq-body ul {
	list-style: none;
	margin: 0;
	margin-top: 20px;
	padding: 0;
}

.faq-home .faq-body ul {
	margin-top: 10px;
}

.faq-body ul li {
	position: relative;
	margin-top: 5px;
	padding-left: 20px;
}

.faq-body ul li:before {
	position: absolute;
	content: '\f00c';
	font-family: 'fontawesome';
	top: 0;
	left: 0;
	color: #3367c1;
}


/*
-------------------------------
Blog
-------------------------------
*/
.blog-item {
	border: 1px solid #f5f5f5;
	margin-top: 30px;
}

.blog-image {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	height: 196px;
}

.blog-text {
	background: #f5f5f5;
	padding: 20px;
}

.blog-item h3 a {
	font-size: 26px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	margin-bottom: 8px;
}

.blog-item h3 a:hover {
	color: #3367c1;
}

.blog-item span {
	display: block;
	font-size: 15px;
}

.blog-item span i {
	margin-right: 5px;
	color: #3367c1;
}

.blog-item p {
	margin-top: 15px;
	margin-bottom: 5px;
}

.blog-author {
	overflow: hidden;
	background: #e6e6e6;
}

.blog-author ul {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 5px;
}

.blog-author li {
	display: inline-block;
}

.blog-author li a {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	padding: 15px 10px;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.blog-author li a i {
	margin-right: 5px;
	color: #3367c1;
}

.blog-author li a:hover {
	color: #3367c1;
}

.blog-author li.blog-button {
	background: #3367c1;
	float: right;
}

.blog-author li.blog-button a {
	background: #3367c1;
	padding: 15px 30px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.blog-author li.blog-button i {
	color: #fff;
	margin: 0;
}

.blog-author li.blog-button a:hover {
	background: #313131;
}

.blog-carousel .owl-nav .owl-prev,
.blog-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 16px;
	position: absolute;
	width: 40px;
	height: 40px;
	line-height: 38px;
	top: 0;
	margin-top: -20px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.blog-carousel .owl-nav .owl-prev {
	right: 0;
	margin-right: 40px;
}

.blog-carousel .owl-nav .owl-next {
	right: 0;
	margin-right: 0px;
}

.blog-carousel .owl-nav .owl-prev:hover,
.blog-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.blog-one-item {
	margin-top: 30px;
}

.blog-one-item img {
	width: 100%!important;
}

.blog-one-text {
	margin-top: 20px;
}

.blog-one-text ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-one-text ul li {
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 5px;
}

.blog-one-text ul li:last-child {
	margin-right: 0;
}

.blog-one-text ul li a {
    font-family: 'Roboto Condensed', sans-serif;
	text-decoration: none;
}

.blog-one-text ul li i {
	color: #3367c1;
	margin-right: 5px;
}
.blog-one-text h3{
    margin-bottom: 15px;
}
.blog-one-text h3 a {
	font-size: 28px;
	font-weight: 700;
	text-decoration: none;
    display: inline-block;
	margin-top: 15px;
}

.blog-one-text h3 a:hover {
	color: #3367c1;
}

.blog-one-text p {
	margin-bottom: 20px;
}


/* Custom Header */
.section-title-custom {
    font-weight: bold;
    border-left: 4px solid #3B9CA5;
    padding-left: 15px;
}
.btn-lihat-semua {
    border: 1px solid #3B9CA5;
    color: #3B9CA5;
    padding: 8px 20px;
    border-radius: 5px;
    text-decoration: none;
}

/* Main Carousel (Kiri) */
.main-news-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.main-news-image {
    height: 450px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.main-news-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: #fff;
}
.category-tag {
    background: #3B9CA5;
    padding: 3px 10px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}
.main-news-overlay h3 a {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    display: block;
    margin: 10px 0;
}

/* Side List (Kanan) */
.side-item {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}
.side-thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}
.side-content {
    margin-left: 15px;
}
.side-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}
.side-title a { color: #333; text-decoration: none; }
.side-meta { font-size: 11px; color: #888; }
.side-cat { color: #00a651; margin-right: 10px; font-weight: bold; }

/* Menyesuaikan Navigasi Owl di Atas Gambar */
.blog-carousel .owl-nav .owl-prev, .blog-carousel .owl-nav .owl-next {
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255,255,255,0.7) !important;
    color: #000 !important;
}

/* Styling titik navigasi (dots) agar ada di dalam gambar */
.blog-carousel .owl-dots {
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: left;
}

.blog-carousel .owl-dot {
    display: inline-block;
}

.blog-carousel .owl-dot span {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5) !important;
    display: block;
    margin: 0 3px;
    border-radius: 50%;
    transition: all 0.3s;
}

.blog-carousel .owl-dot.active span {
    background: #fff !important;
    width: 12px;
    height: 12px;
}

/* Garis pemisah tipis di list samping */
.side-item:not(:last-child) {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* Hover effect pada judul berita utama */
.main-news-overlay h3 a:hover {
    color: #00a651;
    text-decoration: underline;
}

/* Media Query untuk Tablet dan Smartphone */
@media (max-width: 991px) {
    /* 1. Berita Utama (Kiri) */
    .main-news-image {
        height: 300px; /* Tinggi gambar dikurangi agar tidak terlalu memenuhi layar HP */
    }

    .main-news-overlay h3 a {
        font-size: 18px; /* Ukuran font judul lebih kecil di mobile */
    }

    /* 2. List Berita (Kanan) */
    .news-side-list {
        margin-top: 30px; /* Memberi jarak saat list samping turun ke bawah */
    }

    .side-thumb {
        width: 70px; /* Ukuran thumbnail sedikit diperkecil */
        height: 70px;
    }

    /* 3. Header & Tombol */
    .section-title-custom {
        font-size: 20px;
    }
    
    .btn-lihat-semua {
        padding: 5px 12px;
        font-size: 9px;
    }
}

/* Media Query Khusus Smartphone Layar Kecil */
@media (max-width: 575px) {
    .main-news-image {
        height: 250px;
    }

    .blog-carousel .owl-dots {
        bottom: 10px; /* Titik navigasi lebih rapat ke bawah */
        right: 10px;
    }

    .side-title {
        font-size: 13px; /* Judul list samping lebih ringkas */
    }
}

/*
-------------------------------
Sidebar
-------------------------------
*/
.sidebar {
	margin-top: 30px;
}

.sidebar-item {
	margin-top: 30px;
    border: 1px solid #ddd;
    padding: 30px;
}
.sidebar-item:first-child {
	margin-top: 0;
}

.sidebar-item input {
	font-size: 15px;
    font-family: 'Roboto Condensed', sans-serif;
	height: 40px;
	border: 1px solid #e1e1e1;
}

.sidebar-item button {
	background: #3367c1;
	border: 1px solid #3367c1;
    color: #fff;
}

.sidebar-item button:hover {
	cursor: pointer;
}

.sidebar-item h3 {
	display: inline-block;
	position: relative;
	font-size: 22px;
	font-weight: 700;
    text-transform: uppercase;
	padding-bottom: 12px;
	margin-bottom: 30px;
}

.sidebar-item h3:before {
	position: absolute;
	content: '';
	width: 70%;
	height: 1px;
	background: #3367c1;
	left: 0;
	bottom: 0;
}

.sidebar-item h3:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 1px;
	background: #3367c1;
	left: 0;
	bottom: -5px;
}

.sidebar-item ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-item ul li {
	padding: 8px 0;
}

.sidebar-item ul li:first-child {
	padding-top: 0;
}

.sidebar-item ul li a {
	display: inline-block;
	position: relative;
	text-decoration: none;
	padding-left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.sidebar-item ul li a:before {
	position: absolute;
	content: '\F105';
	font-family: fontawesome;
	top: 0;
	left: 0;
	color: #313131;
}

.sidebar-recent-item {
	overflow: hidden;
	display: table;
	margin-bottom: 25px;
}

.recent-photo {
	vertical-align: top;
	display: table-cell;
	float: left;
	width: 105px;
	padding-right: 8px;
}

.recent-photo img {
	max-width: 100%;
	height: auto;
}

.recent-text {
	vertical-align: top;
	display: table-cell;
	padding-left: 5px;
}

.recent-text a {
	vertical-align: top;
	display: block;
	margin-bottom: 5px;
	text-decoration: none;
    font-family: 'Roboto Condensed', sans-serif;
}

.recent-text a:hover {
	color: #3367c1;
}

.rpwwt-post-date {
	position: relative;
	font-size: 13px;
	color: #b7b7b7;
	padding-left: 21px;
}

.rpwwt-post-date:before {
	position: absolute;
	content: '\f073';
	font-family: fontawesome;
	left: 0;
	top: 0;
}

.tagcloud a {
	font-size: 15px;
    font-family: 'Roboto Condensed', sans-serif;
	display: inline-block;
	border: 1px solid #ddd;
	padding: 8px 8px;
	margin-right: 7px;
	margin-bottom: 8px;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.tagcloud a:hover {
	color: #3367c1;
}


/*
-------------------------------
Pagination
-------------------------------
*/
.pagination a:hover {
	text-decoration: none;
}


/*
-------------------------------
Blog Single
-------------------------------
*/

.single-blog {
	margin-top: 30px;
}

.single-blog img {
	margin-bottom: 30px;
}

.single-blog h3 {
	font-size: 24px;
    text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 15px;
}

.single-blog ul {
	list-style: none;
	margin: 0;
	padding: 0
}

.single-blog ul li {
	display: inline-block;
	margin-top: 2px;
	margin-right: 15px;
	font-size: 14px;
	font-family: 'Roboto Condensed', sans-serif;
}

.single-blog ul li i {
	color: #3367c1;
	margin-right: 5px;
}

.single-blog ul li a {
	text-decoration: none;
	font-size: 14px;
	font-family: 'Roboto Condensed', sans-serif;
}

.single-blog p {
	margin: 0;
	margin-top: 15px;
}

.comment-form span {
	font-size: 16px;
	color: #3367c1;
}

.comment-form textarea {
	height: 220px;
}

.comment-form .btn {
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
	padding: 14px 30px;
	border: 1px solid #3367c1;
	background: #3367c1;
	color: #fff;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.comment-form .btn:hover {
	color: #fff;
	background: #313131;
	border: 1px solid #313131;
}

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

.comment-list ul li {
	border-bottom: 1px solid #ddd;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.comment-list ul li:last-child {
	border: 0;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.comment-list .comment-item {
	overflow: hidden;
	display: table;
	width: 100%;
}

.comment-list .thumb {
	display: table-cell;
	vertical-align: top;
	width: 80px;
}

.comment-list .com-text {
	display: table-cell;
	vertical-align: top;
	padding: 0 15px;
}

.comment-list .com-text h5 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 7px;
}

.comment-list .com-text span.date {
	margin-right: 30px;
	font-size: 14px;
}

.comment-list .com-text span.date i {
	color: #3367c1;
	margin-right: 3px;
}

.comment-list .com-text span a {
	display: inline-block;
    text-decoration: none;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
	padding: 5px 10px;
	background: #3367c1;
	color: #fff;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.comment-list .com-text span a:hover {
	background: #313131;
	color: #fff;
}

.comment-list .com-text p {
	margin-top: 12px;
	margin-bottom: 0;
}

.comment-list ul ul.children {
	margin-top: 20px;
	margin-left: 40px;
}

.comment-list ul ul.children li {
	border: 0;
	padding-bottom: 0px;
	margin-bottom: 0px;
	margin-top: 40px;
}


/*
-------------------------------
Brand
-------------------------------
*/

.brand-item img {
	max-width: 100%;
	height: auto;
}


/*
-------------------------------
Call To Action
-------------------------------
*/

.call-us {
	position: relative;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-top: 55px;
    padding-bottom: 70px;
}
.call-us:before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3367c1;
    opacity: 0.8;
}
.call-text {
	margin-top: 33px;
}

.call-text h3 {
	font-size: 24px;
    font-weight: 500;
    color: #fff;
	margin: 0;
}

.call-us .button {
	margin-top: 15px;
}

.call-us .button a {
	font-size: 18px;
    text-transform: uppercase;
	background: #313131;
	border: 0;
	padding: 17px 30px;
}

.call-us .button a:hover {
	color: #313131;
	background: #fff;
}

/*
-------------------------------
Footer
-------------------------------
*/

.footer-area {
	background: #f5f5f5;
	position: relative;
}

.footer-item {
	color: #313131;
	margin-top: 30px;
}

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

.footer-item ul li {
	display: block;
	margin-bottom: 12px;
}

.footer-item ul li:last-child {
	margin-bottom: 0;
}

.footer-item ul li a {
	position: relative;
	display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
	color: #313131;
	padding-left: 12px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.footer-item ul li a:before {
	position: absolute;
	content: '\f0da';
	font-family: fontawesome;
	top: 0;
	left: 0;
	color: #313131;
}

.footer-item ul li a:hover {
	color: #3367c1;
}

.footer-item p,
.footer-item a {
	text-decoration: none;
	color: #313131;
}

.footer-item h3 {
	display: inline-block;
	position: relative;
	font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
	color: #313131;
	padding-bottom: 12px;
	margin-bottom: 36px;
}

.footer-item h3:before {
	position: absolute;
	content: '';
	width: 70%;
	height: 1px;
	background: #3367c1;
	left: 0;
	bottom: 0;
}

.footer-item h3:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 1px;
	background: #3367c1;
	left: 0;
	bottom: -5px;
}

.footer-item .input-group {
	margin-top: 25px;
}

.footer-address-item {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
}

.footer-address-item .icon {
	position: absolute;
	top: -2px;
	left: 0;
	font-size: 17px;
}

.footer-address-item .text {
	font-size: 15px;
}

.footer-item ul.footer-social {
	margin-top: 25px;
}

.footer-item ul.footer-social li {
	display: inline-block;
	margin-top: 5px;
	margin-right: 5px;
	padding: 0;
}

.footer-item ul.footer-social li a:before {
	display: none;
}

.footer-item ul.footer-social li a {
	text-align: center;
	display: block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	background: #3367c1;
	border: 1px solid #3367c1;
	border-radius: 1px;
	padding: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}
.footer-item ul.footer-social li a:hover{
    background: #313131;
	border: 1px solid #313131;
}
.footer-item .input-group .btn {
	font-size: 16px !important;
}

.footer-recent-item {
	display: table;
	margin-bottom: 15px;
}

.footer-recent-photo {
	vertical-align: top;
	display: table-cell;
	float: left;
	width: 90px;
	padding-right: 8px;
}

.footer-recent-photo img {
	max-width: 100%;
	height: auto;
}

.footer-recent-text {
	vertical-align: top;
	display: table-cell;
	padding-left: 5px;
}

.footer-recent-text a {
	vertical-align: top;
	display: block;
	margin-bottom: 5px;
}

.footer-recent-text a:hover {
	color: #3367c1;
}

.footer-post-date {
	position: relative;
	font-size: 13px;
	color: #313131;
	padding-left: 21px;
}

.footer-post-date:before {
	position: absolute;
	content: '\f073';
	font-family: fontawesome;
	top: 0;
	left: 0;
}

.footer-item .form-control {
	font-size: 15px;
    font-family: 'Roboto Condensed', sans-serif;
	height: 48px;
	border: 2px solid #3367c1;
	z-index: 3 !important;
}

.footer-item .btn {
	cursor: pointer;
	font-size: 20px;
	border: 2px solid #3367c1;
	background: #3367c1;
	color: #fff;
	z-index: 3 !important;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.footer-project {
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 10px;
}

/*
-------------------------------
Footer Bottom
-------------------------------
*/

.footer-bottom {
	text-align: center;
	background: #313131;
}

.footer-menu {
	border-bottom: 1px solid #9a9a9a;
}

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

.footer-menu ul li {
	display: inline-block;
	margin: 0px 10px;
	padding-bottom: 15px;
}

.footer-menu ul li a {
	font-size: 15px;
    font-family: 'Roboto Condensed', sans-serif;
	color: #fff;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.footer-menu ul li a:hover {
	color: #f1f1f1;
}

.copy-text {
	padding-top: 0px;
}

.copy-text p {
	font-size: 15px;
	color: #fff;
	margin: 0;
}

.copy-text a {
	color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
	text-decoration: none;
}

/*
-------------------------------
Banner
-------------------------------
*/

.banner-slider {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	height: 65px;
	position: relative;
}

.bannder-table {
	display: table;
	width: 100%;
	height: 100%;
}

.banner-text {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	position: relative;
}

.banner-text h1 {
	font-size: 34px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* Tablet (Lebar layar di bawah 768px) */
@media (max-width: 768px) {
    .banner-text h1 {
        font-size: 24px; /* Ukuran font lebih kecil di tablet */
    }
}

/* Smartphone (Lebar layar di bawah 480px) */
@media (max-width: 480px) {
    .banner-text h1 {
        font-size: 18px; /* Ukuran font lebih kecil lagi di HP */
    }
    .banner-slider {
        min-height: 50px;
    }
}


/*
-------------------------------
Scroll To Top
-------------------------------
*/

.scroll-top {
	cursor: pointer;
	text-align: center;
	font-size: 22px;
	position: fixed;
	width: 40px;
	height: 40px;
	line-height: 46px;
	bottom: 20px;
	right: 20px;
	background: #3367c1;
	color: #fff;
	opacity: 0.7;
	z-index: 9999;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.scroll-top:hover {
	opacity: 1;
	color: #fff;
	background: #313131;
}

/*
-------------------------------
Event
-------------------------------
*/

.event-item {
	border: 1px solid #ddd;
	background: #f1f1f1;
	padding: 30px;
	padding-top: 15px;
	margin-top: 30px;
}

.event-photo {
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 175px;
	margin-top: 15px;
}

.event-body {
	margin-top: 15px;
}

.event-header {
	overflow: hidden;
	margin-bottom: 15px;
	display: table;
	width: 100%;
}

.event-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

li.event-header-left {
	float: left;
	vertical-align: top;
	display: table-cell;
	width: 100%;
	padding-right: 10px;
}

li.event-header-left h4 {
	font-size: 22px;
    font-weight: 700;
	margin-bottom: 5px;
}

li.event-header-left span {
	margin-right: 15px;
}

li.event-header-left span:last-child {
	margin-right: 0;
}

li.event-header-left i {
	color: #3367c1;
	margin-right: 4px;
}

li.event-header-right {
	float: right;
	vertical-align: top;
	display: table-cell;
}

li.event-header-right h5 {
	font-size: 16px;
    font-family: 'Roboto Condensed', sans-serif;
	margin-bottom: 2px;
}

li.event-header-right span {
	color: #3367c1;
	font-size: 26px;
	font-weight: 700;
}

li.event-header-right p {
	font-size: 18px;
    font-weight: 700;
	margin: 0;
}

.event-content .button a {
	padding: 12px 20px;
}

/*
-------------------------------
Event Detail
-------------------------------
*/

.event-detail-content {
	margin-top: 30px;
}

.event-contact-item {
	text-align: center;
	background: #3367c1;
    color: #fff;
	padding: 30px 5px;
	margin-top: 30px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.event-contact-icon {
	width: 50px;
	height: 50px;
	line-height: 50px;
    color: #fff;
	border: 1px solid #fff;
	margin: 0 auto;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.event-contact-icon img {
	width: 25px;
	height: 25px;
}
.event-contact-icon i {
	font-size: 18px;
}
.event-contact-text {
	margin-top: 20px;
}

.event-contact-text h4 {
	font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
	margin-bottom: 5px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.event-contact-text p {
	margin: 0;
}

.event-contact-item:hover{
    background: #f5f5f5;
    color: #313131;
}
.event-contact-item:hover .event-contact-icon{
    color: #3367c1;
	border: 1px solid #3367c1;
}
.event-contact-item:hover .event-contact-text h4{
    color: #313131;
}

.event-carousel {
	border: 1px solid #e1e1e1;
}

.event-carousel .owl-nav .owl-prev,
.event-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 50px;
	line-height: 48px;
	top: 50%;
	margin-top: -25px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.event-carousel .owl-nav .owl-prev {
	left: 0;
}

.event-carousel .owl-nav .owl-next {
	right: 0;
}

.event-carousel .owl-nav .owl-prev:hover,
.event-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.event-detail-text {
	margin-top: 30px;
}

.event-detail-text h3 {
	font-size: 22px;
	font-weight: 700;
    text-transform: uppercase;
	margin-bottom: 15px;
}

.event-map {
	margin-top: 30px;
}

.event-map iframe {
	width: 100%;
	height: 350px;
}


/*
-------------------------------
Gallery
-------------------------------
*/

.gallery-menu {
	text-align: center;
	margin-bottom: 5px;
}

.gallery-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gallery-menu li {
	cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Roboto Condensed', sans-serif;
    display: inline-block;
    border-bottom: 1px solid #e1e1e1;
    color: #313131;
    padding: 5px 10px;
    padding-top: 0;
    margin: 0 10px 10px;
    position: relative;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.gallery-menu li:hover {
	color: #3367c1;
}

.gallery-menu li.filtr-active {
	border-bottom: 1px solid #3367c1;
	color: #3367c1;
}

.gallery-menu li.filtr-active:before {
	border-color: #3367c1 transparent transparent;
	border-style: solid;
	position: absolute;
	content: "";
	border-width: 6px 6px 0;
	left: 50%;
	margin-left: -6px;
	bottom: -6px;
	text-decoration: none;
}

.gallery-group {
	border: 1px solid #ededed;
	margin-top: 30px;
}

.gallery-photo {
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 196px;
	position: relative;
}

.gallery-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #3367c1;
	visibility: hidden;
	opacity: 0;
	transform: scale(0);
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
}

.gallery-group:hover .gallery-bg {
	opacity: 0.7;
	transform: scale(1);
	visibility: visible;
}

.gallery-table {
	display: table;
	width: 100%;
	height: 100%;
}

.gallery-icon {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.gallery-icon a {
	position: relative;
	font-size: 26px;
	color: #fff;
	text-decoration: none;
	z-index: 99;
}

.gallery-group:hover .gallery-icon {
	opacity: 1;
	visibility: visible;
}

.gallery-text {
	text-align: center;
	background: #f5f5f5;
	padding: 15px;
}

.gallery-text a {
	color: #3367c1;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.gallery-text h3 {
	font-size: 18px;
	margin-bottom: 8px;
}

.gallery-text a:hover {
	color: #3367c1;
}

.gallery-text .photo-name {
	font-size: 18px;
	font-weight: 700;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.gallery-text p {
	position: relative;
	font-size: 15px;
	border-top: 1px solid #e1e1e1;
	margin: 0;
	padding-top: 8px;
}

.gallery-text p:before {
	position: absolute;
	content: '';
	left: 0;
	top: -1px;
	width: 0%;
	height: 1px;
	background: #3367c1;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.gallery-group:hover .gallery-text p:before {
	width: 100%;
}

.gallery-text span {
	margin-right: 3px;
}

/*
-------------------------------
Shop
-------------------------------
*/

.product-item {
	text-align: center;
	border: 1px solid #e1e1e1;
	margin-top: 30px;
}

.product-photo {
	overflow: hidden;
	position: relative;
}

.product-cart {
	position: absolute;
	width: 100%;
	bottom: -20px;
	left: 0px;
	background: #3367c1;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.product-item:hover .product-cart {
	visibility: visible;
	opacity: 1;
	bottom: 0;
}

.product-cart ul {
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.product-cart ul li {
	float: left;
	width: 50%;
}

.product-cart ul li:first-child {
	border-right: 1px solid #ddd;
}

.product-cart ul li a {
	display: block;
	font-size: 13px;
    font-weight: 500;
    font-family: 'Roboto Condensed', sans-serif;
	background: #3367c1;
    color: #fff;
	padding: 12px 5px;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.product-cart ul li a:hover {
	color: #fff;
	background: #313131;
}

.product-cart ul li i {
	margin-right: 5px;
}

.product-text {
	border-top: 1px solid #e1e1e1;
	padding: 15px 10px;
}

.product-text h3 a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 12px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	text-transform: uppercase;
}

.product-text h3 a:hover {
	color: #3367c1;
}

.product-text h4 {
	font-size: 17px;
    font-family: 'Roboto Condensed', sans-serif;
	margin-bottom: 12px;
}

.product-text del {
	color: #313131;
	font-size: 17px;
	font-weight: 400;
	margin-left: 8px;
}

.product-star i {
	color: #3367c1;
}

.shop-sidebar {
	margin-top: 30px;
	border: 1px solid #e1e1e1;
	padding: 30px;
}

.shop-widget {
	margin-top: 30px;
}

.shop-widget:first-child {
	margin-top: 0;
}

.shop-widget input {
	font-size: 15px;
	height: 40px;
	border: 1px solid #e1e1e1;
}

.shop-widget button {
	background: #3367c1;
    color: #fff;
	border: 1px solid #3367c1;
}

.shop-widget button:hover {
	cursor: pointer;
}

.shop-widget h4 {
	display: inline-block;
	position: relative;
	font-size: 22px;
	font-weight: 700;
	padding-bottom: 12px;
	margin-bottom: 24px;
}

.shop-widget h4:before {
	position: absolute;
	content: '';
	width: 70%;
	height: 1px;
	background: #3367c1;
	left: 0;
	bottom: 0;
}

.shop-widget h4:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 1px;
	background: #3367c1;
	left: 0;
	bottom: -5px;
}

.price-range p {
	font-size: 15px;
	margin-bottom: 15px;
}

.price-range span {
	font-weight: 600;
}

.shop-widget .ui-widget.ui-widget-content {
	border: 1px solid #e1e1e1;
}

.shop-widget .ui-widget-header {
	background: #3367c1;
}

.shop-widget .ui-state-default,
.shop-widget .ui-widget-content .ui-state-default {
	border: 1px solid #e1e1e1;
}

.shop-widget .ui-state-active,
.shop-widget .ui-widget-content .ui-state-active {
	background: #3367c1;
	border: 1px solid #3367c1;
}

.shop-widget .button-df {
	margin-top: 25px;
}

.shop-widget .button-df a {
	padding: 10px 30px;
}

.product-rated-item {
	display: table;
	width: 100%;
	border-bottom: 1px solid #e1e1e1;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.product-rated-item:last-child {
	border-bottom: 0px;
	margin-bottom: 0;
	padding-bottom: 0;
}

.product-rated-photo {
	vertical-align: top;
	display: table-cell;
	float: left;
	width: 105px;
	padding-right: 8px;
}

.product-rated-photo img {
	max-width: 100%;
	height: auto;
}

.product-rated-text {
	vertical-align: top;
	display: table-cell;
	width: 100%;
	padding-left: 5px;
}

.product-rated-text a {
	font-size: 16px;
    font-weight: 600;
    font-family: 'Roboto Condensed', sans-serif;
	text-decoration: none;
	color: #313131;
	margin-bottom: 5px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.product-rated-text a:hover {
	color: #3367c1;
}

.product-rated-text h5 {
	font-size: 15px;
    font-family: 'Roboto Condensed', sans-serif;
	margin-bottom: 5px;
}

.product-rated-text del {
	margin-left: 8px;
}

.shop-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-widget ul li {
	padding: 10px 0;
	border-top: 1px solid #e1e1e1;
}

.shop-widget ul li:first-child {
	border-top: 0px;
}

.shop-widget ul li a {
    font-family: 'Roboto Condensed', sans-serif;
    display: inline-block;
	position: relative;
	text-decoration: none;
	padding-left: 10px;
}

.shop-widget ul li span {
	margin-left: 15px;
}

.shop-widget ul li a:before {
	position: absolute;
	content: '\F105';
	font-family: fontawesome;
	top: 0;
	left: 0;
	color: #313131;
}

/*
-------------------------------
Product Detail
-------------------------------
*/

.product-photo-item {
	padding: 30px;
}
.product-photo-item img {
    max-height: 370px;
    width: auto !important;
    margin: 0 auto;
}
.review-table h2{
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.review-table .table thead th, 
.review-table .table tbody td{
    text-align: left;
}
.review-form h2{
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.review-form label{
    font-size: 15px;
    font-weight: 600;
}
.review-form .review-star{}
.review-form textarea{
    height: 220px;
}
.review-form .btn{
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 30px;
    border: 1px solid #3367c1;
    background: #3367c1;
    color: #fff;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.review-form .btn:hover{
    color: #fff;
    background: #313131;
    border: 1px solid #313131;
}

.product-carousel {
	border: 1px solid #e1e1e1;
	margin-top: 30px;
}

.product-carousel .owl-nav .owl-prev,
.product-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 50px;
	line-height: 48px;
	top: 50%;
	margin-top: -25px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.product-carousel .owl-nav .owl-prev {
	left: 0;
}

.product-carousel .owl-nav .owl-next {
	right: 0;
}

.product-carousel .owl-nav .owl-prev:hover,
.product-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.shop-detail-text {
	margin-top: 30px;
}

.shop-detail-text h3 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
}

.shop-detail-text h4 {
	font-size: 20px;
	font-weight: 500;
    font-family: 'Roboto Condensed', sans-serif;
	margin-bottom: 15px;
}

.shop-detail-text h4 del {
	font-size: 20px;
	font-weight: 400;
	margin-left: 8px;
	color: red;
}

.shop-detail-text p {
	margin: 0;
	margin-top: 15px;
}

.shop-detail-choose {
	margin-top: 15px;
}

.shop-detail-cart {
	margin-top: 0px;
}

.shop-detail-cart ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-detail-cart ul li {
	display: inline-block;
	margin-top: 15px;
	margin-right: 15px;
}

.shop-detail-cart ul li a.cart-btn {
	font-weight: 600;
	display: inline-block;
	background: #3367c1;
	color: #fff;
	text-decoration: none;
	padding: 15px 30px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.shop-detail-cart ul li a.cart-btn:hover {
	color: #fff;
	background: #313131;
}

.shop-detail-cart ul li i {
	margin-right: 5px;
}

.shop-detail-cart ul li .ui-spinner {
	width: 125px;
	border: 1px solid #3367c1;
	border-radius: 0;
	margin-bottom: 1px;
}

.shop-detail-cart ul li input {
	font-size: 16px;
	height: 50px;
	text-indent: 30px;
	margin: 0;
	padding: 0;
}

.shop-detail-cart ul li .ui-button {
	cursor: pointer;
	padding: 0 25px;
	border-left: 1px solid #3367c1;
	border-radius: 0;
	background: #3367c1;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.shop-detail-cart ul li .ui-button:hover {
	background: #313131;
}

.shop-detail-cart ul li .ui-button .ui-icon {
	background-image: url("../images/ui-icons_ffffff_256x240.png");
}

.shop-detail-cat {
	margin-top: 20px;
}

.shop-detail-cat p {
	margin: 0;
}

.shop-detail-cat span {
	font-weight: 600;
}

.shop-detail-tab ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-detail-tab ul li {
	display: inline-block;
	margin-top: 15px;
	margin-right: 15px;
}

.shop-detail-tab ul li:last-child {
	margin-right: 0;
}

.shop-detail-tab ul li a {
	display: block;
	font-size: 15px;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	color: #fff;
	background: #313131;
	padding: 12px 25px;
	text-decoration: none;
}

.shop-detail-tab ul li a.active {
	color: #fff;
	background: #3367c1;
}

.shop-detail-content {
	margin-top: 30px;
}

.owlproduct-carousel .owl-nav .owl-prev,
.owlproduct-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 40px;
	line-height: 38px;
	top: 0;
	margin-top: -20px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.owlproduct-carousel .owl-nav .owl-prev {
	right: 0;
	margin-right: 40px;
}

.owlproduct-carousel .owl-nav .owl-next {
	right: 0;
	margin-right: 0px;
}

.owlproduct-carousel .owl-nav .owl-prev:hover,
.owlproduct-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

/*
-------------------------------
Shopping Cart
-------------------------------
*/

.cart-table .table {
	width: 100%;
}

.table {
	margin-bottom: 0;
}

.table thead th,
.table tbody td {
	vertical-align: middle;
	text-align: center;
	border: 1px solid #e1e1e1;
}

.cart-table .table thead th {
	font-size: 16px;
	font-weight: 700;
	font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: #3367c1;
	color: #fff;
	padding: 15px 5px;
}

.cart-table th.c-photo {
	min-width: 160px;
	width: 160px;
}

.cart-table th.c-name {
	min-width: 180px;
}

.cart-table th.c-qnt {
	min-width: 120px;
}

.cart-table th.c-price,
.cart-table th.c-total {
	min-width: 90px;
}

.cart-table .table tbody td {
	font-size: 15px;
	color: #313131;
}

.cart-table .table tbody td span {
	font-weight: 600;
}

.cart-table .table tbody td a {
	font-size: 15px;
    font-family: 'Roboto Condensed', sans-serif;
	color: #313131;
	text-decoration: none;
}

.cart-table .table tbody td a:hover {
	color: #3367c1;
}

.cart-table .table tbody td img {
	max-width: 100%;
	height: auto;
}

.cart-table .table tbody td input {
	border: 1px solid #e1e1e1;
	padding: 10px 15px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.cart-table .table tbody td input:focus {
	border-color: #3367c1;
}

.cart-action {
	margin-top: 25px;
}

.update-cart {
	margin-top: 15px;
}

.update-cart a {
	display: inline-block;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	text-decoration: none;
	padding: 15px 30px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.update-cart a:hover {
	background: #313131;
	color: #fff;
}

.coupon-cart {
	font-size: 15px;
	height: 51px;
	margin-top: 15px;
}

.coupon-cart input {
	font-size: 15px;
	border-radius: 0;
}

.coupon-cart .btn {
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	border: 1px solid #3367c1;
	border-radius: 0;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.btn.focus,
.btn:focus {
	box-shadow: none;
}

.coupon-cart .btn:hover {
	border: 1px solid #313131;
	background: #313131;
	color: #fff;
}

.total-cart {
	margin-top: 40px;
}

.total-cart td {
	text-align: left !important;
	padding: 20px;
}

.total-cart td.t-bold {
	font-size: 16px;
	font-weight: 600;
	padding: 20px;
}

.proceed-cart {
	margin-top: 15px;
}

.proceed-cart a {
	display: inline-block;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	text-decoration: none;
	padding: 20px 40px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.proceed-cart a:hover {
	background: #313131;
	color: #fff;
}

/*
-------------------------------
Checkout
-------------------------------
*/

.checkout-form {
	margin-top: 30px;
}

.checkout-form textarea {
	height: 120px;
}

.checkout-table {
	margin-top: 30px;
}

.checkout-table table th,
.checkout-table table td {
	text-align: left;
}

.checkout-table table th {
    font-size: 16px;
	font-weight: 700;
    text-transform: uppercase;
	font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 0.5px;
	color: #fff;
    background: #3367c1;
}

.checkout-table table td.t-bold {
	font-size: 15px;
	font-weight: 600;
	color: #313131;
}

.payment-select {
	text-align: center;
	margin-top: 30px;
}

.payment-select.headstyle h4:before {
	width: 118px;
	left: 50%;
	margin-left: -59px;
}

.payment-select-group .form-check-input:only-child {
	position: absolute;
}

.payment-order-button {
	margin-top: 30px;
}

.payment-order-button a {
	display: block;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: #3367c1;
	padding: 15px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.payment-order-button a:hover {
	color: #fff;
	background: #313131;
}


/*
-------------------------------
Contact
-------------------------------
*/

.contact-item {
	text-align: center;
	border: 1px solid #e1e1e1;
	min-height: 180px;
	position: relative;
	background: #fafafa;
	padding: 30px 15px;
	padding-top: 60px;
	margin-top: 71px;
}

.contact-icon {
	position: absolute;
	width: 82px;
	height: 82px;
	line-height: 92px;
	top: 0px;
	left: 50%;
	background: #fafafa;
    color: #3367c1;
	border-radius: 50%;
	border: 1px solid #e1e1e1;
	margin-top: -41px;
	transform: translate(-50%, 0%);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.contact-icon img {
	width: 40px;
	height: 40px;
}

.contact-icon i {
	font-size: 34px;
}
.contact-item:hover .contact-icon{
    background: #3367c1;
    color: #fafafa;
	border: 1px solid #3367c1;
}
.contact-text {
	margin-top: 0px;
}

.contact-text h4 {
	font-size: 18px;
    font-weight: 700;
	margin-bottom: 5px;
}

.contact-text p {
	margin: 0;
}

.contact-form textarea {
	height: 190px
}

.contact-form .btn {
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	padding: 14px 30px;
	border: 1px solid #3367c1;
	background: #3367c1;
	color: #fff;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.contact-form .btn:hover {
	color: #fff;
	background: #313131;
	border: 1px solid #313131;
}

.map-area iframe {
	width: 100%;
	height: 450px;
	margin-bottom: -5px;
}

/*
-------------------------------
404 Page
-------------------------------
*/

.error-page {
	text-align: center;
}

.error-head {
	display: inline-block;
	background: #f1f1f1;
	border: 1px solid #e1e1e1;
	padding: 30px;
}

.error-head h1 {
	font-size: 70px;
	font-weight: 700;
	color: #3367c1;
	margin-bottom: 2px;
}

.error-head h1 span {
	color: #313131;
}

.error-head h3 {
	font-size: 32px;
	font-weight: 700;
	margin: 0;
}

.error-body {
	margin-top: 30px;
}

.error-body h4 {
	font-size: 22px;
    font-weight: 700;
	margin-bottom: 5px;
}

.error-body p {
	margin: 0;
}

/*
-------------------------------
Under Construction Page
-------------------------------
*/

.under-construction {
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100vh;
	position: relative;
}

.under-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #3367c1;
	opacity: 0.9;
}

.under-text {
	text-align: center;
	position: relative;
	z-index: 99;
	color: #fff;
}

.under-text h1 {
	font-size: 40px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 15px;
}

.under-text h1 span {
	color: #fff;
}

.under-text p {
	font-size: 15px;
	color: #fff;
	margin-bottom: 25px;
}

.under-text .form-control {
	font-size: 15px;
	height: 48px;
	border: 2px solid #fff;
	z-index: 3 !important;
}

.under-text .btn {
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	border: 2px solid #3367c1;
	background: #3367c1;
	color: #fff;
	z-index: 3 !important;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

#navigator-toolbox::after {
  content: "";
  display: -moz-box;
  -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
  height: 1px;
  background-color: ThreeDShadow;
}


.error-class {
    background: #ca6464;
    color: #fff;
    padding-top: 10px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: left;
    font-size: 14px;
}

.success-class {
    background: #68a554;
    color: #fff;
    padding-top: 10px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: left;
    font-size: 14px;
}

/*
-------------------------------
Link Start
-------------------------------
*/
/* Container Utama */
.link-area {
    background-color: #f3f3f3; /* Warna latar belakang website */
    padding: 0px 0;
}

.link-area .col-12 {
    position: relative;
    padding: 0 40px;
}

/* Gambar Link */
.link-item img {
    border-radius: 10px !important; /* Gambar melengkung */
    transition: transform 0.3s ease;
}

/* Gaya Card seperti di Gambar */
.link-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px 10px;
    margin: 5px; /* Jarak antar card */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.link-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Mengatur Ikon/Gambar di Tengah */
.link-card img {
    max-width: 60px !important; /* Ukuran ikon diperkecil */
    height: auto;
    margin-bottom: 15px;
}

/* Mengatur Teks di Bawah Gambar */
.link-card p {
    font-size: 14px;
    font-weight: 600;
    color: #006677; /* Warna teks biru toska gelap */
    margin: 0;
    line-height: 1.3;
}

/* Efek saat mouse mendekat */
.link-wrapper:hover .custom-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.07); /* Sedikit membesar saat di-hover */
}

/* Tombol Navigasi Toska (Teal) */
.link-carousel .owl-nav button.owl-prev,
.link-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #4ecdc4 !important; /* Warna Toska seperti di gambar */
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.link-carousel .owl-nav button.owl-prev { left: -10px; }
.link-carousel .owl-nav button.owl-next { right: -10px; }

.link-carousel .owl-nav button:hover {
    background: #3eb7ae !important;
    transform: translateY(-50%) scale(1.1);
}
/*
-------------------------------
Link End
-------------------------------
*/

/*
-------------------------------
About Start
-------------------------------
*/
.history-section {
        padding: 10px 0;
        background-color: #fff;
        overflow-x: hidden;
    }

    .timeline-container {
        position: relative;
        max-width: 1100px;
        margin: 0 auto;
        padding: 10px 0;
    }

    /* Garis Vertikal Tengah */
    .timeline-container::after {
        content: '';
        position: absolute;
        width: 3px;
        background-color: #00796b;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -1.5px;
        margin-top: 35px;
        margin-bottom: 80px;
    }

    .timeline-item {
        padding: 5px 20px;
        position: relative;
        background-color: inherit;
        width: 50%;
        margin-bottom: 1px;
    }

    /* Titik di Garis Tengah */
    .timeline-item::after {
    content: '';
    position: absolute;
    width: 20px; /* Sedikit lebih besar agar lebih tegas */
    height: 20px;
    right: -10px; /* Menyesuaikan posisi tengah */
    top: 24px;
    background-color: #00796b;
    
    /* Double Border Effect */
    border: 3px solid #00796b; 
    border-radius: 50%;
    z-index: 2;

    /* Shadow halus agar terlihat 3D/timbul */
    box-shadow: 0 0 0 4px rgba(0, 121, 107, 0.1), 
                0 4px 10px rgba(0, 0, 0, 0.1);
    
    transition: all 0.3s ease-in-out;
    }

    /* Efek Hover: Saat mouse diarahkan, titik membesar dan bersinar */
    .timeline-item:hover::after {
        background-color: #00796b; /* Warna berubah jadi solid */
        box-shadow: 0 0 0 6px rgba(0, 121, 107, 0.2), 
                    0 0 20px rgba(0, 121, 107, 0.4);
        transform: scale(1.2);
    }

    /* Animasi Denyut (Pulse) - Opsional: Membuat titik seolah 'hidup' */
    @keyframes pulse-ring {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 121, 107, 0.4); }
        70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 121, 107, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 121, 107, 0); }
    }

    /* Tambahkan ini jika ingin titik paling atas berdenyut */
    .timeline-item:first-child::after {
        animation: pulse-ring 2s infinite;
    }

    .left-item { left: 0; }
    .right-item { left: 50%; }

    .right-item::after { left: -8px; }

    /* Pengaturan Tahun & Tanggal */
    .year-tag {
        background: #fff;
        border: 1px solid #eee;
        padding: 2px 10px;
        font-size: 13px;
        font-weight: bold;
        display: inline-block;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .date-label {
        color: #000;
        font-weight: bold;
        margin-bottom: 1px;
        display: block;
        font-size: 15px;
    }

    /* Kotak Konten Putih */
    .history-card {
        padding: 15px;
        background: linear-gradient(135deg, #47b8c2 10%, #016f7e 90%); 

        border-radius: 5px;
        box-shadow: 20px 5px 20px rgba(0,0,0,0.08);
    }

    .history-card h3 {
        margin-top: 0;
        font-size: 19px;
        font-weight: 700;
        color: #ffffff;
    }

    .history-card p {
        margin-bottom: 0;
        color: #666;
        line-height: 1.6;
        font-size: 14px;
    }

    /* Alignment Text */
    .left-item { text-align: right; }
    .right-item { text-align: left; }

    /* Responsive untuk HP */
    @media screen and (max-width: 768px) {
        .timeline-container::after { left: 31px; }
        .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; text-align: left !important; }
        .timeline-item::after { left: 23px; }
        .right-item { left: 0; }
    }
/*
-------------------------------
About End
-------------------------------
*/

/*
-------------------------------
Informasi Start
-------------------------------
*/
:root {
    /* Gradasi utama sekarang digunakan sebagai background default */
    --primary-gradient: linear-gradient(135deg, #3B9CA5 0%, #016f7e 100%); 

    --accent-color: #3B9CA5;
}

.premium-card {
    position: relative;
	
    /* Background default adalah putih agar transisi halus */
    background: #ffffff; 
    border-radius: 24px;
    padding: 30px 35px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 1;
    height: 90%;
}

/* Layer gradasi yang terlihat secara default */
.card-glow {
	
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--primary-gradient);
    opacity: 1; /* Terlihat saat normal */
    transition: all 0.5s ease;
    z-index: -1;
}

/* Mengatur teks default menjadi putih karena background defaultnya gradasi */
.premium-card h3 {
	font-size: 22px;
	color: #fff;
} 

.premium-card p {
    color: #ffffff;
    transition: color 0.4s;
}

.premium-card p {
    opacity: 0.9;
}

/* --- ANIMASI SAAT MOUSE DI ATAS (HOVER) --- */

.premium-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    background: #ffffff; /* Memastikan background kartu putih saat hover */
}

/* Sembunyikan layer gradasi saat hover agar warna putih di bawahnya terlihat */
.premium-card:hover .card-glow {
    opacity: 0;
}

/* Ubah teks menjadi gelap saat background menjadi putih */
.premium-card:hover h3 {
    color: #333;
}

.premium-card:hover p {
    color: #6c757d;
    opacity: 1;
}

/* Icon Box saat normal (di atas gradasi) */
.icon-box {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    margin-bottom: 10px;
    transition: all 0.5s ease;
}

/* Icon Box saat hover (di atas putih) */
.premium-card:hover .icon-box {
    background: #f3f0ff;
    color: var(--accent-color);
    transform: rotate(15deg) scale(1.1);
}

/* Mengubah Teks menjadi Putih saat Hover */
.premium-card:hover h3, 
.premium-card:hover p,
.premium-card:hover .card-footer-link {
    color: #fff;
}

/* Menampilkan Gradient Background */
.premium-card:hover .card-glow {
    opacity: 1;
}

/* Menampilkan link "Learn More" */
.premium-card:hover .card-footer-link {
    opacity: 1;
    transform: translateX(0);
}
/* Penyesuaian khusus untuk Handphone agar 3 kartu tetap 1 baris */
@media (max-width: 475.98px) {
    /* Pastikan container induk menggunakan flex dan tidak membungkus ke bawah */
    .parent-container { 
        display: flex;
     
        gap: 5px; /* Jarak antar kartu sangat kecil */
        justify-content: space-between;
    }

    .premium-card {
        flex: 0 0 32%; /* Mengatur lebar agar muat 3 kartu (32% x 3 = 96%) */
        padding: 10px 5px; /* Padding sangat minim */
        border-radius: 10px;
        text-align: center;
        box-sizing: border-box;
    }

    .icon-box {
        width: 35px; /* Ukuran ikon diperkecil drastis */
        height: 35px;
        font-size: 14px;
        margin: 0 auto 8px auto;
        border-radius: 8px;
    }

    .premium-card h3 {
        font-size: 11px; /* Ukuran teks judul sangat kecil */
        margin-bottom: 4px;
        white-space: nowrap; /* Mencegah teks judul turun ke bawah jika terlalu panjang */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .premium-card p {
        font-size: 10px; /* Ukuran teks konten sangat kecil */
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Batasi deskripsi hanya 2 baris */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-footer-link {
        display: none; /* Wajib disembunyikan karena ruang tidak akan cukup */
    }
}
/*
-------------------------------
Informasi End
-------------------------------
*/

/*
-------------------------------
Client Start
-------------------------------
*/
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

/* Konten yang berjalan */
.marquee-content {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: scrolling 20s linear infinite; /* Atur 20s untuk kecepatan (lebih besar = lebih lambat) */
}

/* Item Logo */
.brand-item-marquee {
    flex-shrink: 0;
    width: 70px; /* Ukuran kotak logo */
    margin: 0 5px; /* Jarak antar logo */
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-item-marquee img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Keyframes untuk animasi jalan */
@keyframes scrolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Berhenti di 50% karena kita menduplikasi konten */
}

/* Responsif HP */
@media (max-width: 767px) {
    .brand-item-marquee {
        width: 80px;
        margin: 0 15px;
    }
    .marquee-content {
        animation: scrolling 10s linear infinite; /* Di HP biasanya lebih enak sedikit lebih cepat */
    }
}
/*
-------------------------------
Client End
-------------------------------
*/

/*
-------------------------------
Link Cepat Start
-------------------------------
*/

.animate-title {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 50px;
}
.animate-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #004b8d, #00c2cb);
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.footer-item:hover .animate-title::after {
    width: 80px; /* Garis memanjang saat area footer disentuh */
}
/* List Container */
.footer-list-animated {
    display: flex;
    flex-direction: column;
    align-items: left;
}
/* Item Styling */
.footer-link-item {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-bottom: 25px;
    opacity: 0.9;
    transition: all 0.4s ease;
}
/* Lingkaran Ikon dengan Animasi Pulse */
.icon-circle {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 194, 203, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #00c2cb;
    font-size: 18px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Teks dan Efek Garis Bawah (Underline) */
.text-content a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 3px;
    transition: color 0.3s ease;
}
/* Animasi Garis Bawah yang muncul dari tengah */
.text-content a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 1.5px;
    bottom: 0;
    left: 50%;
    background-color: #00c2cb;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}
.text-content a:hover::before {
    visibility: visible;
    width: 100%;
}
/* Efek Hover Komplit */
.footer-link-item:hover {
    opacity: 1;
    transform: translateY(-3px);
}
.footer-link-item:hover .icon-circle {
    background: linear-gradient(45deg, #004b8d, #00c2cb);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(0, 194, 203, 0.4);
}
.footer-link-item:hover a {
    color: #00c2cb;
}
/* Responsivitas Mobile */
@media (max-width: 768px) {
    .footer-link-item {
        margin-bottom: 20px;
    }
    .animate-title {
        font-size: 1.2rem;
    }
}
/* Container Grid untuk membagi 2 kolom (2 baris) */
.footer-grid-horizontal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 1px; /* Jarak antar baris dan kolom */
    margin-top: 1px;
}
/* Item Wrapper: Ikon & Teks Sejajar */
.footer-link-inline {
    display: flex;
    align-items: center; /* Teks & Ikon rata tengah secara vertikal */
    transition: all 0.3s ease;
}
/* Lingkaran Ikon Kecil & Elegan */
.icon-wrap {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px; /* Kotak melengkung modern */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: #00c2cb;
    font-size: 18px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Efek Hover Komplit */
.footer-link-inline:hover {
    transform: translateX(5px); /* Sedikit bergeser ke kanan */
}
.footer-link-inline:hover .icon-wrap {
    background: #00c2cb;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 194, 203, 0.3);
}
.footer-link-inline:hover .link-premium {
    color: #00c2cb;
}
.footer-link-inline:hover .link-premium::after {
    width: 100%;
}
/* Responsif untuk layar kecil (HP) */
@media (max-width: 200px) {
    .footer-grid-horizontal {
        grid-template-columns: 2fr; /* Jadi 1 kolom di HP agar tidak sempit */
        gap: 5px;
    }
}
/*
-------------------------------
Link Cepat End
-------------------------------
*/

/*
-------------------------------
Garis Judul di Home Start
-------------------------------
*/
.line-center {
    width: 100px;
    height: 3px;
    background: #4a788c;
    margin: 20px auto;
}
/*
-------------------------------
Garis Judul di Home End
-------------------------------
*/

/* Header Info (Kanan) */
	.header-info ul li {
		font-size: 13px;
		display: flex;
		align-items: center;
	}

	.header-info i {
		font-size: 14px;
		color: #007bff; /* Warna icon disamakan dengan separator agar senada */
	}

	/* Header info disesuaikan agar sejajar */
	.header-info {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.header-info ul {
		height: 100%;
	}

	.header-info li {
		display: flex;
		align-items: center;
		white-space: nowrap;
		font-size: 13px;
	}

	.social-bar a {
		color: #fff;
		transition: 0.3s;
	}

	.social-bar a:hover {
		color: #8de20d;
	}

	/* Animasi */
	@keyframes scroll-left {
		0% { transform: translateX(0); }
		100% { transform: translateX(-50%); }
	}

	/* Responsif Mobile */
	@media (max-width: 991px) {
		.row.align-items-stretch {
			flex-direction: column;
		}
		.header-info {
			justify-content: center !important;
			margin-top: 10px;
		}
	}

	.info-combined-wrapper {
    background: rgba(255, 255, 255, 0.15); 
    padding: 6px 15px;
    border-radius: 30px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
	}

	.emergency-info-mobile {
		color: #ffffff !important;
		font-size: 13px;
		font-weight: 700;
		transition: all 0.3s ease;
	}

	/* Styling Ikon Sosial */

	/* Mengatur jarak antar ikon sosial secara spesifik */
	.social-bar-mobile ul li {
		margin-right: 15px !important; /* Ubah angka ini untuk mengatur lebar spasi */
		display: flex;
		align-items: center;
	}

	/* Menghilangkan spasi pada ikon terakhir agar tetap rata dengan divider */
	.social-bar-mobile ul li:last-child {
		margin-right: 0 !important;
	}

	/* Ukuran ikon agar tetap proporsional */
	.social-bar-mobile i {
		font-size: 18px; /* Sedikit diperbesar agar lebih elegan */
		transition: transform 0.2s ease;
	}

	/* Efek sedikit membesar saat disentuh */
	.social-bar-mobile a:hover i {
		transform: scale(1.2);
	}

	.social-bar-mobile i {
		font-size: 16px;
		color: #fff;
	}

	/* Divider Vertikal */
	.mobile-divider {
		width: 1px;
		height: 18px;
		background: rgba(255,255,255,0.3);
	}

	/* Teks Telepon */
	.emergency-info-mobile {
		color: #ffffff !important;
		font-size: 13px;
		font-weight: 700;
		transition: all 0.3s ease;
	}
	.emergency-info-mobile {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s ease;
    text-decoration: none; /* Menghilangkan garis bawah default (jika ini tag <a>) */
	}

	/* Menghilangkan garis bawah saat mouse mendekat (hover) */
	.emergency-info-mobile:hover {
		text-decoration: none !important;
		color: #25D366; /* Contoh: berubah warna saat hover agar lebih Interaktif */
	}

	/* Penyesuaian khusus layar HP/Tablet */
	@media (max-width: 767px) {
		.header-info-mobile {
			margin-top: 5px;
			padding-bottom: 5px;
		}
		
		.phone-number {
			font-size: 12px; /* Perkecil font di HP agar muat */
		}

		/* Jika running text di atas terlalu penuh, beri jarak */
		.pro-ticker-container {
			margin-bottom: 5px;
		}
	}


	/*
-------------------------------
Info Terkini Start
-------------------------------
*/
/* Mengurangi jarak antar ikon sosial media */
	.social-bar ul li {
		margin-left: 5px !important;  /* Ubah angka ini untuk mengatur jarak */
		margin-right: 5px !important; /* Standarnya mungkin 10px atau 15px */
		display: inline-block;        /* Memastikan ikon tetap berjajar */
	}

	/* Menghilangkan jarak pada ikon pertama agar rata kiri */
	.social-bar ul li:first-child {
		margin-left: 0 !important;
	}
	:root {
				--ticker-speed: 30s;
				--ticker-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
			}

			.pro-ticker-container {
				overflow: hidden;
				width: 100%;				
				padding: 12px 0;
				border-radius: 4px;
				position: relative;
				display: flex;
				align-items: center;
				/* Efek fade di pinggir agar tidak terpotong kaku */
				-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
				mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
			}

			.pro-ticker-container {
				height: 100%;
				min-height: 45px; /* Tentukan tinggi minimal yang seragam */
				display: flex;
				align-items: center;
				margin: 0;
			}

			.pro-ticker-wrapper:hover {
				animation-play-state: paused;
			}

			.pro-ticker-item {
				font-family: var(--ticker-font);
				font-size: 14px;
				font-weight: 500;
				color: #ffffff;
				letter-spacing: 0.03em; /* Spasi antar huruf profesional */
				text-transform: uppercase; /* Opsional: terlihat lebih seperti headline */
				display: flex;
				align-items: center;
			}

			.ticker-separator {
				margin: 0 30px;
				color: #007bff; /* Berikan aksen warna pada pemisah */
				font-weight: bold;
			}

			@keyframes scroll-left {
				0% { transform: translateX(0); }
				100% { transform: translateX(-50%); }
			}

        /* Font & Base Style */
	.header-area {
		background: #ffffff; /* Sesuaikan warna background header Anda */
		padding: 8px 0;
		font-family: 'Inter', sans-serif;
		color: #fff;
	}

	/* Running Text Container */
	.pro-ticker-container {
		overflow: hidden;
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
		mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
	}

	.pro-ticker-wrapper {
		display: flex;
		white-space: nowrap;
		animation: scroll-left 20s linear infinite;
	}

	.pro-ticker-item {
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.5px;
		display: flex;
		align-items: center;
	}

	.ticker-separator {
		margin: 0 20px;
		color: #ffffff;
	}

	/* Header Info (Kanan) */
	.header-info ul li {
		font-size: 13px;
		display: flex;
		align-items: center;
	}

	.header-info i {
		font-size: 14px;
		color: #007bff; /* Warna icon disamakan dengan separator agar senada */
	}

	/* Header info disesuaikan agar sejajar */
	.header-info {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.header-info ul {
		height: 100%;
	}

	.header-info li {
		display: flex;
		align-items: center;
		white-space: nowrap;
		font-size: 13px;
	}

	.social-bar a {
		color: #fff;
		transition: 0.3s;
	}

	.social-bar a:hover {
		color: #8de20d;
	}

	/* Animasi */
	@keyframes scroll-left {
		0% { transform: translateX(0); }
		100% { transform: translateX(-50%); }
	}

	/* Responsif Mobile */
	@media (max-width: 991px) {
		.row.align-items-stretch {
			flex-direction: column;
		}
		.header-info {
			justify-content: center !important;
			margin-top: 10px;
		}
	}

	.info-combined-wrapper {
    background: rgba(255, 255, 255, 0.15); 
    padding: 6px 15px;
    border-radius: 30px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
	}

	.emergency-info-mobile {
		color: #ffffff !important;
		font-size: 13px;
		font-weight: 700;
		transition: all 0.3s ease;
	}

	/* Styling Ikon Sosial */

	/* Mengatur jarak antar ikon sosial secara spesifik */
	.social-bar-mobile ul li {
		margin-right: 15px !important; /* Ubah angka ini untuk mengatur lebar spasi */
		display: flex;
		align-items: center;
	}

	/* Menghilangkan spasi pada ikon terakhir agar tetap rata dengan divider */
	.social-bar-mobile ul li:last-child {
		margin-right: 0 !important;
	}

	/* Ukuran ikon agar tetap proporsional */
	.social-bar-mobile i {
		font-size: 18px; /* Sedikit diperbesar agar lebih elegan */
		transition: transform 0.2s ease;
	}

	/* Efek sedikit membesar saat disentuh */
	.social-bar-mobile a:hover i {
		transform: scale(1.2);
	}

	.social-bar-mobile i {
		font-size: 16px;
		color: #fff;
	}

	/* Divider Vertikal */
	.mobile-divider {
		width: 1px;
		height: 18px;
		background: rgba(255,255,255,0.3);
	}

	/* Teks Telepon */
	.emergency-info-mobile {
		color: #ffffff !important;
		font-size: 13px;
		font-weight: 700;
		transition: all 0.3s ease;
	}
	.emergency-info-mobile {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s ease;
    text-decoration: none; /* Menghilangkan garis bawah default (jika ini tag <a>) */
	}

	/* Menghilangkan garis bawah saat mouse mendekat (hover) */
	.emergency-info-mobile:hover {
		text-decoration: none !important;
		color: #25D366; /* Contoh: berubah warna saat hover agar lebih Interaktif */
	}

	/* Penyesuaian khusus layar HP/Tablet */
	@media (max-width: 767px) {
		.header-info-mobile {
			margin-top: 5px;
			padding-bottom: 5px;
		}
		
		.phone-number {
			font-size: 12px; /* Perkecil font di HP agar muat */
		}

		/* Jika running text di atas terlalu penuh, beri jarak */
		.pro-ticker-container {
			margin-bottom: 5px;
		}
	}

/*
-------------------------------
Info Terkini End
-------------------------------
*/

/*
-------------------------------
FAQ Start
-------------------------------
*/
/* CSS Khusus untuk Tampilan International Patient Services */
    .ips-section {
		/* Perbaikan: Gradient diletakkan di depan, gambar di belakang (dipisah koma) */
		background: linear-gradient(135deg, rgba(29, 192, 214, 0.9) 0%, rgba(1, 98, 110, 0.9) 100%), 
					url('public/uploads/IMG-2025.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: scroll; /* Pastikan tidak fixed jika tidak diperlukan */
		padding: 80px 0;
		color: #fff;
		border-radius: 0px;
	}

	/* Pastikan card bawaan bootstrap tidak merusak transparansi */
	.ips-faq-item.card {
		background-color: transparent !important;
		border: none;
		border-bottom: 1px solid rgba(255,255,255,0.3) !important;
		border-radius: 0;
	}

    .ips-title h2 {
        font-weight: 700;
        font-size: 2.5rem;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .ips-description {
        font-size: 1.1rem;
        opacity: 0.9;
        margin-bottom: 30px;
    }

    .ips-faq-item {
        border-bottom: 1px solid rgba(255,255,255,0.5) !important;
        background: transparent !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .ips-button {
        background: transparent !important;
        color: #fff !important;
        border: none;
        padding: 15px 0 !important;
        font-weight: 600;
        font-size: 1.2rem;        
        box-shadow: none !important;
    }

    .ips-button:hover {
        color: #ddd !important;
    }

    .ips-button::before {
        content: '+ ';
        margin-right: 10px;
    }

    .ips-body {
        color: #eee;
        padding-bottom: 20px;
    }
/*
-------------------------------
FAQ End
-------------------------------
*/


/*
-------------------------------
Gambar JKN Start
-------------------------------
*/
/* Container Utama */
.call-us-modern {
    padding: 20px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Memberikan efek parallax ringan */
    color: #fff;
}

.cta-content-left {
    padding-right: 30px;
}

.cta-title-small {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
}

.cta-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.cta-description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Card Styling */
.app-card-link {
    text-decoration: none !important;
    display: block;
}

.app-card-modern {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 20px; /* Diperkecil sedikit paddingnya */
    border-radius: 15px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.app-card-modern:hover {
    background: #fff;
    transform: translateY(-5px);
}

/* Icon & Info */
.app-icon {
    width: 90px;
    height: 90px;
    background: #000;
    border-radius: 12px;
    padding: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.app-icon img {
    width: 100%;
    height: auto;
}

.app-platform {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff; /* Warna hijau brand */
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.app-name {
    font-size: 16px; /* Font size disesuaikan */
    color: #fff;
}

.app-card-modern:hover .app-name {
    color: #01626e;
}

.app-desc {
    font-size: 13px;
    margin: 0;
    color: rgba(255,255,255,0.7);
    transition: 0.3s;
}

/* Arrow Hover Effect */
.app-arrow {
    margin-left: auto;
    color: #ffffff;
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
}

/* Hover States for Internal Elements */
.app-card-modern:hover .app-name { color: #333; }
.app-card-modern:hover .app-desc { color: #666; }
.app-card-modern:hover .app-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #00a651;
}

/* Responsivitas untuk Mobile */
@media (max-width: 991px) {
    .cta-content-left {
        padding-right: 0;
        text-align: center;
		
    }
    .call-us-modern {
        padding: 40px 0;
    }
}

.app-card-modern {
    margin-bottom: 5px;
}
/*
-------------------------------
Gambar JKN END
-------------------------------
*/

:root {
    --primary-brown: #3B9CA5;
    --accent-orange: #3B9CA5;
    --bg-cream: #fff;
    --text-dark: #333;
}

.team-section {
    background-color: var(--bg-cream);
    padding: 20px 20px;
    display: flex;
    justify-content: center;
}

.org-chart-container {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 1200px;
}

/* Card Styling */
.member-card {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 300px;
}

.photo-container {
    position: relative;
    border-radius: 50%;
    border: 3px solid var(--primary-brown);
    padding: 5px;
    background: #fff;
    flex-shrink: 0;
}

.main-photo { width: 250px; height: 250px; }
.sub-photo { width: 100px; height: 100px; }

.photo-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Garis Dekoratif Melingkar */
.decorative-ring {
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    border: 2px solid var(--accent-orange);
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
}

/* Typography */
.name { font-size: 22px; font-weight: 800; margin: 0; color: var(--text-dark); }
.job-badge { 
    background: var(--accent-orange); 
    color: #fff; 
    padding: 4px 10px; 
    border-radius: 50px; 
    font-size: 14px;
    display: inline-block;
    margin: 8px 0;
}

/* Connector Lines Logic */
.connector-line {
    width: 50px;
    height: 2px;
    background: #ccc;
    position: relative;
}

.org-branches {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    padding-left: 40px;
}

/* Garis Vertikal Utama */
.org-branches::after {
    content: "";
    position: absolute;
    left: 0;
    /* Mulai dari tengah card pertama sampai tengah card terakhir */
    top: 50px; 
    bottom: 50px;
    width: 2px;
    background: #ccc;
}

.branch-group {
    position: relative;
    display: flex;
    align-items: center;
}

/* Garis horizontal tiap cabang */
.branch-group::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 50%;
    width: 40px;
    height: 2px;
    background: #ccc;
}

/* --- RESPONSIVE MOBILE & TABLET --- */
@media (max-width: 991px) {
    .org-chart-container {
        flex-direction: column;
        align-items: center;
    }
	

    .connector-line {
        width: 2px;
        height: 40px;
        margin: 20px 0;
    }

    .org-branches {
        padding-left: 0;
        border-left: none;
        align-items: center;
    }

    .org-branches::after {
        display: none; /* Hilangkan garis vertikal di mobile */
    }

    .branch-group {
        flex-direction: column;
        text-align: center;
    }

    .branch-group::before {
        display: none; /* Hilangkan garis horizontal di mobile */
    }

    .member-card {
        flex-direction: column;
        min-width: unset;
        gap: 10px;
    }

    .main-photo { width: 120px; height: 120px; }
    .sub-photo { width: 120px; height: 120px; }
}

/*
-------------------------------
Text Banner Start
-------------------------------
*/

/* Mengatur ukuran font secara dinamis dan jarak baris agar rapi di layar kecil */
    .responsive-banner-title {
        font-size: calc(18px + 1vw) !important; /* Ukuran fleksibel: min 18px */
        line-height: 1.3 !important;
        word-wrap: break-word;
        margin-bottom: 5px !important;
    }
    
    .responsive-breadcrumb {
        font-size: calc(13px + 0.3vw) !important; /* Ukuran fleksibel untuk breadcrumb */
        line-height: 1.1 !important;
    }

    /* Penyesuaian padding banner untuk mobile agar tidak terlalu tinggi */
    @media (max-width: 768px) {
        .banner-slider {
            padding: 30px 0 !important;
            min-height: 120px !important;
        }
    }
	
	.breadcrumb-item + .breadcrumb-item::before {
		content: ""; /* Menghilangkan slash bawaan bootstrap jika ada */
		padding: 0;
	}
	.breadcrumb-item a:hover {
		text-decoration: underline;
		color: #fff !important;
	}
/*
-------------------------------
Text Banner END
-------------------------------
*/

	.wa-floating-container {
			position: fixed;
			bottom: 65px;
			right: 18px;
			z-index: 9999;
			font-family: 'Roboto Condensed', sans-serif;
			/* Tambahan di bawah ini agar tersembunyi di awal */
			opacity: 0;
			visibility: hidden;
			transition: all 0.5s ease;            
    }

	/* Class tambahan saat user scroll */
	.wa-floating-container.active {
		opacity: 1;
		visibility: visible;
		bottom: 65px;
	}
        
	.wa-button {
            width: 50px;
            height: 50px;
            background-color: #25d366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 30px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            transition: transform 0.3s;
    }

    .wa-button:hover {
            transform: scale(1.1);
    }

    .wa-chat-box {
            display: none;
            width: 320px;
            background: #fdfdfd;
            border-radius: 20px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.2);
            position: absolute;
            bottom: 75px;
            right: 0;
            overflow: hidden;
            animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
    }

    .wa-chat-header {
            background: #25d366;
            color: white;
            padding: 5px 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
    }

    .wa-chat-header h5 {
            margin: 0;
            font-size: 16px;
            font-weight: bold;
            color: white;
    }

    .wa-chat-header .close-chat {
            cursor: pointer;
            font-size: 20px;
    }

    .wa-chat-body {
            padding: 20px;
    }

    .wa-msg-bubble {
            background: white;
            padding: 15px;
            border-radius: 0 15px 15px 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: relative;
            margin-bottom: 20px;
    }

    .wa-msg-bubble::before {
            content: "";
            position: absolute;
            left: -10px;
            top: 0;
            border-width: 0 10px 10px 0;
            border-style: solid;
            border-color: transparent white transparent transparent;
    }

    .wa-btn-hubungi {
            background: #25d366;
            color: white !important;
            text-decoration: none;
            padding: 10px 25px;
            border-radius: 30px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            float: right;
            font-weight: bold;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            margin-bottom: 20px
    }
        /* --- Penyesuaian Responsive --- */
	@media (max-width: 768px) {
		.wa-chat-box {
			width: 280px; /* Sedikit lebih kecil di Tablet */
			bottom: 70px;
			right: -10px; /* Menyesuaikan posisi agar tidak terlalu ke pinggir */
		}
	}

	@media (max-width: 480px) {
		.wa-floating-container {
			bottom: 80px; /* Menyesuaikan posisi di HP agar tidak tertutup bar navigasi browser */
			right: 15px;
		}
		.wa-chat-box {
			width: calc(100vw - 40px); /* Kotak chat melebar sesuai layar HP */
			max-width: 300px;
			right: 0;
		}
		.wa-button {
			width: 55px;
			height: 55px;
			font-size: 28px;
		}
	}

	/* Detail elemen chat */
	.wa-chat-header {
		background: #25d366;
		color: white;
		padding: 15px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wa-chat-header h5 {
		margin: 0;
		font-size: 15px;
		font-weight: bold;
		color: white;
	}

	.wa-chat-body {
		padding: 20px;
		display: flex;
		flex-direction: column;
	}

	.wa-msg-bubble {
		background: white;
		padding: 15px;
		border-radius: 0 15px 15px 15px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		position: relative;
		margin-bottom: 20px;
	}

	.wa-btn-hubungi {
		background: #25d366;
		color: white !important;
		text-decoration: none;
		padding: 12px 20px;
		border-radius: 30px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		font-weight: bold;
		align-self: flex-end; /* Posisi tombol di kanan bawah */
		margin-top: 15px; /* Jarak yang Anda minta */
	}

	/*
-------------------------------
LAPORAN START
-------------------------------
*/
@media (max-width: 768px) {
    /* 1. Sembunyikan Header asli */
    .responsive-card-table thead {
        display: none;
    }

    /* 2. Ubah tabel menjadi blok vertikal */
    .responsive-card-table, 
    .responsive-card-table tbody, 
    .responsive-card-table tr, 
    .responsive-card-table td {
        display: block;
        width: 100%;
    }

    /* 3. Desain baris menjadi kartu yang elegan */
    .responsive-card-table tr {
        margin-bottom: 25px;
        border: 1px solid #eef0f2;
        border-radius: 15px;
        background: #fff;
        padding: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    /* 4. Gabungkan Nomor dan Judul */
    /* Menghilangkan label bantuan */
    .responsive-card-table td::before {
        display: none !important;
    }

    /* Kolom Nomor: Kita buat melayang di depan judul */
    .responsive-card-table td[data-label="No."] {
        display: inline; /* Agar menyatu dengan teks setelahnya */
        padding: 0 !important;
        font-weight: 800;
        font-size: 1.1rem;
        color: #41aab3;
    }

    .responsive-card-table td[data-label="No."]::after {
        content: ". "; /* Menambahkan titik setelah nomor */
    }

    /* Kolom Judul & Deskripsi */
    .responsive-card-table td[data-label="Informasi"] {
        display: inline; /* Menyatukan dengan nomor */
        padding: 0 !important;
    }

    /* Membuat Judul menjadi tebal */
    .responsive-card-table td[data-label="Informasi"] .font-weight-600,
    .responsive-card-table td[data-label="Informasi"] b,
    .responsive-card-table td[data-label="Informasi"] .text-dark {
        display: inline;
        font-size: 1.1rem;
        line-height: 1.4;
    }

    /* Membuat Deskripsi pindah ke baris baru di bawah judul */
    .responsive-card-table td[data-label="Informasi"] .text-muted {
        display: block;
        margin-top: 12px;
        font-size: 0.95rem;
        line-height: 1.6;
        color: #666 !important;
        text-align: justify;
    }

    /* 5. Tombol Lihat di Tengah */
    .responsive-card-table td[data-label="Aksi"] {
        display: block;
        text-align: center !important;
        margin-top: 20px;
        padding-top: 15px !important;
        border-top: 1px dashed #eee !important;
    }

    .btn-block-mobile {
        display: inline-block;
        width: 100%;
        max-width: 280px;
        padding: 12px;
        border-radius: 50px; /* Membuat tombol oval agar lebih modern */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        background-color: #41aab3;
        border: none;
        box-shadow: 0 4px 10px rgba(65, 170, 179, 0.3);
    }
}

.dataTables_wrapper .dataTables_paginate {
        margin-top: 20px;
        text-align: center !important;
        float: none !important; /* Agar ke tengah di mobile */
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 5px 12px !important;
        margin: 2px !important;
        border-radius: 4px !important;
        border: 1px solid #ddd !important;
        background: #fff !important;
        color: #333 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #41aab3 !important; /* Warna sesuai tema banner Anda */
        color: white !important;
        border: 1px solid #41aab3 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #01525d !important;
        color: white !important;
    }

    /* Menyembunyikan info pagination jika data sangat sedikit (opsional) */
    .dataTables_info {
        font-size: 0.85rem;
        color: #666;
        margin-top: 10px;
    }
	
/*
-------------------------------
LAPORAN END
-------------------------------
*/