/******************************************************************
	Templater Name: Dani Afrizal
	Description: Aesthetic medical template
	Author: Dani Afrizal
	Author URI: https://instagram.com/daniafrizal_
	Version: 1.0
	Created: Danidesign
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Consultation Section
6.  Banner Section
7.  Chooseus Section
8.  Team Section
9.  Gallery
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/

html,
body {
	height: 100%;
	font-family: "Poppins", sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Poppins", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 15px;
	font-family: "Poppins", sans-serif;
	color: #666666;
	font-weight: 400;
	line-height: 25px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: inherit;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

/* Hide sidebar mobile items on desktop */
.sidebar-mobile-only {
	display: none;
}

@media (max-width: 991px) {
	.sidebar-mobile-only {
		display: block;
	}
}

.section-title {
	margin-bottom: 45px;
}

.section-title span {
	font-size: 15px;
	color: #888888;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.section-title h2 {
	color: #111111;
	font-weight: 700;
	margin-top: 8px;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	padding: 12px 30px 10px;
	text-transform: uppercase;
	color: #111111;
	text-transform: uppercase;
	letter-spacing: 2px;
	border: 2px solid #13a2b7;
	border-radius: 5px;
}

.primary-btn.normal-btn {
	background: #13a2b7;
	color: #ffffff;
	font-weight: 600;
}

.site-btn {
	font-size: 15px;
	color: #ffffff;
	background: #13a2b7;
	font-weight: 600;
	border: none;
	border-radius: 5px;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 14px 30px 12px;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #fff;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}

	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}

	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

/*---------------------
  Scroll
-----------------------*/
html {
	scroll-behavior: smooth;
}

.back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #13a2b7;
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	cursor: pointer;
}

.back-to-top i {
	color: #fff;
	font-size: 24px;
	transition: 0.3s ease;
}

.back-to-top:hover {
	background-color: #0e92a6;
	transform: translateY(-5px);
}

.back-to-top:hover i {
	transform: scale(1.1);
}

.back-to-top {
	z-index: 999;
	opacity: 0;
	visibility: hidden;
}

.back-to-top.show {
	opacity: 1;
	visibility: visible;
}

/*---------------------
  Header
-----------------------*/

.header__top {
	background: #20B2AA;
}

.header__top__left {
	padding: 12px 0;
}

.header__top__left li {
	font-size: 13px;
	color: #ffffff;
	list-style: none;
	display: inline-block;
	margin-right: 25px;
}

.header__top__left li a {
	color: #ffffff;
	text-decoration: none;
}

.header__top__left li:last-child {
	margin-right: 0;
}

.header__top__left li i {
	font-size: 15px;
	margin-right: 5px;
}

.header__top__right {
	text-align: right;
	padding: 12px 0;
}

.header__top__right a {
	font-size: 16px;
	color: #ffffff;
	display: inline-block;
	margin-right: 20px;
}

.header__top__right a:last-child {
	margin-right: 0;
}

.header__logo {
	padding: 20px 0;
}

.header__logo a {
	display: inline-block;
}

.header__menu__option {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.header__menu {
	display: inline-block;
	margin-right: 45px;
}

.header__menu ul li {
	list-style: none;
	display: inline-block;
	margin-right: 45px;
	position: relative;
}

.header__menu ul li.active a:after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.header__menu ul li:hover a:after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.header__menu ul li:hover .dropdown {
	top: 30px;
	opacity: 1;
	visibility: visible;
}

.header__menu ul li:last-child {
	margin-right: 0;
}

.header__menu ul li .dropdown {
	position: absolute;
	left: 0;
	top: 52px;
	width: auto;
	min-width: max-content;
	background: #20B2AA;
	text-align: left;
	padding: 0px 0;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
	display: block;
	margin-right: 0;
	white-space: nowrap;
}

.header__menu ul li .dropdown li a {
	font-size: 14px;
	display: block;
	color: #ffffff;
	font-weight: 500;
	padding: 8px 20px;
	text-transform: capitalize;
}

.header__menu ul li .dropdown li a:after {
	display: none;
}

.header__menu ul li a {
	font-size: 15px;
	color: #111111;
	font-weight: 500;
	display: block;
	padding: 4px 0;
	text-transform: uppercase;
	position: relative;
}

.header__menu ul li a .bi-chevron-down {
	display: inline-block;
	margin-left: 6px;
	font-size: 12px;
	transition: transform 0.3s ease;
	vertical-align: middle;
}

.header__menu ul li:hover a .bi-chevron-down {
	transform: rotate(180deg);
}

.header__menu ul li a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #13a2b7;
	content: "";
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.header__menu ul li .dropdown li a:hover {
	background: #178f8a;
	color: #ffffff;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	-ms-transition: background 0.3s;
	-o-transition: background 0.3s;
}

.header__menu ul li .dropdown li {
	position: relative;
}

.header__menu ul li .dropdown .dropdown {
	position: absolute;
	left: 100%;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.header__menu ul li .dropdown li:hover>.dropdown {
	opacity: 1;
	visibility: visible;
}

.burger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	cursor: pointer;
	color: #000000;
}



/* Icon bootstrap */
.burger-btn i {
	font-size: 22px;
	line-height: 1;
	display: block;
}

.offcanvas-menu-wrapper {
	display: none;
}

/* Sidebar Styles */
.sidebar-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	z-index: 998;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.sidebar-overlay.active {
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 1;
	visibility: visible;
}

.sidebar {
	position: fixed;
	right: 0;
	top: 0;
	width: 280px;
	height: 100vh;
	background-color: white;
	z-index: 999;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.sidebar.active {
	transform: translateX(0);
}

.sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 25px;
	background: #fff;
	border-bottom: 1px solid #f2f2f2;
}

.sidebar__close {
	width: 35px;
	height: 35px;
	background: #f8f9fa;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: #111;
	transition: 0.3s;
}

.sidebar__close:hover {
	background: #20B2AA;
	color: #fff;
}

/* Sidebar Menu List */
.sidebar__menu ul li a {
	font-size: 15px;
	font-weight: 500;
	color: #333;
	padding: 14px 25px;
	border-left: 4px solid transparent;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: 0.3s;
}

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

.sidebar__menu ul li {
	margin: 0;
}

.sidebar__menu ul li a:hover,
.sidebar__menu ul li.active>a {
	background: #f4f9f9;
	color: #178f8a;
	border-left-color: #178f8a;
}

.sidebar__menu ul li a {
	display: block;
	padding: 12px 20px;
	color: #333;
	text-decoration: none;
	font-size: 15px;
	transition: all 0.3s ease;
	border-left: 4px solid transparent;
	position: relative;
}

.sidebar__menu ul li a .bi-chevron-down {
	display: inline-block;
	margin-left: 6px;
	font-size: 12px;
	transition: transform 0.3s ease;
	color: #178f8a;
	vertical-align: middle;
}

.sidebar__menu ul li.open>a .bi-chevron-down {
	transform: rotate(180deg);
}

.sidebar__menu ul li a:hover {
	background-color: #f5f5f5;
	border-left-color: #178f8a;
	color: #178f8a;
	padding-left: 25px;
}

.sidebar__menu ul li.active>a {
	border-left-color: #178f8a;
	color: #178f8a;
}

.sidebar__menu ul li ul {
	display: block;
	background-color: #f9f9f9;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
	padding: 0;
	list-style: none;
}

.sidebar__menu ul li ul.show {
	max-height: 1000px;
	opacity: 1;
	padding: 8px 0;
}

@keyframes slideDown {
	from {
		max-height: 0;
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		max-height: 1000px;
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUp {
	from {
		max-height: 1000px;
		opacity: 1;
		transform: translateY(0);
	}

	to {
		max-height: 0;
		opacity: 0;
		transform: translateY(-10px);
	}
}

.sidebar__menu ul li ul.closing {
	max-height: 0;
	opacity: 0;
	padding: 0;
	animation: slideUp 0.4s ease forwards;
}

.sidebar__menu ul li ul li a {
	padding-left: 40px;
	font-size: 14px;
}

.sidebar__divider {
	height: 1px;
	background-color: #e0e0e0;
	margin: 20px 0;
}

/* Dropdown styling */
.sidebar__menu ul li ul.dropdown {
	background: #fafafa;
	display: none;
	padding: 5px 0;
}

.sidebar__menu ul li ul.dropdown li a {
	padding-left: 45px;
	font-size: 14px;
	font-weight: 400;
	border-left: none;
}

.sidebar__menu ul li ul.sub-dropdown li a {
	padding-left: 65px;
	background: #f0f0f0;
}

/* Icons rotate animation */
.sidebar__menu li.open>a i {
	transform: rotate(180deg);
}

.sidebar__menu li a i {
	transition: transform 0.3s;
	font-size: 12px;
}

/* Button Appointment */

.sidebar__divider {
	margin: 15px 25px;
	height: 1px;
	background: #eee;
}


/*---------------------
Hero
-----------------------*/


/*---------------------
  Slider Bacnkground
-----------------------*/
.slider-container {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	position: relative;
}

.slider {
	display: flex;
	transition: transform 0.5s ease;
	width: 100%;
}

.slide {
	min-width: 100%;
	box-sizing: border-box;
}

.slider img {
	width: 100%;
}

.nav-buttons {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 50px;
	transform: translateY(-50%);
	z-index: 10;
	pointer-events: none;
}

/* Button */
.nav-buttons button {
	pointer-events: auto;
	background: #13a2b7;
	color: #fff;
	border: none;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Hover effect */
.nav-buttons button:hover {
	background: #0e8fa1;
	transform: scale(1.15);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

/* Active click */
.nav-buttons button:active {
	transform: scale(0.95);
}

/* Mobile adjustment */
@media (max-width: 768px) {
	.nav-buttons {
		padding: 0 20px;
	}

	.nav-buttons button {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}
}

/*---------------------
  Choose Us
-----------------------*/

.chooseus {
	padding-bottom: 50px;
}

.chooseus__item {
	text-align: center;
	margin-bottom: 16px;
}

.chooseus__item h5 {
	font-size: 20px;
	color: #111111;
	font-weight: 600;
	margin-top: 26px;
	margin-bottom: 16px;
}

.chooseus__item p {
	margin-bottom: 0;
}

.chooseus__item img {
	transition: transform 0.3s ease;
}

.chooseus__item:hover img {
	transform: scale(1.1);
}

/*---------------------
  Services
-----------------------*/

.services {
	padding-bottom: 70px;
}

.services .section-title span {
	color: #13a2b7;
}

/* Button Selection Section */
.button-selection {
	padding-bottom: 80px;
}

.button-selection .primary-btn {
	margin: 10px;
	padding: 15px 35px;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(19, 162, 183, 0.3);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}

.button-selection .primary-btn i {
	margin-right: 10px;
}

.services .section-title h2 {
	color: #ffffff;
}

.services__btn {
	text-align: right;
}

.services__btn .primary-btn {
	color: #ffffff;
}

.services__item {
	text-align: center;
	background: #ffffff;
	padding: 30px 20px 20px 20px;
	margin-bottom: 30px;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	transition: box-shadow 0.3s ease;
}

.services__item:hover {
	background: #13a2b7;
}

.services__item:hover .services__item__icon span {
	color: #ffffff;
}

.services__item:hover .services__item__text h5 {
	color: #ffffff;
}

.services__item:hover .services__item__text p {
	color: #ffffff;
}

.services__item__icon {
	position: center;

}

.services__item__icon span {
	color: #13a2b7;
	font-size: 40px;
	display: inline-block;
	line-height: 76px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.services__item__icon span:before {
	font-size: 70px;
}

.services__item__text {
	overflow: hidden;
}

.services__item__text h5 {
	font-size: 20px;
	color: #111111;
	font-weight: 600;
	margin-bottom: 14px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.services__item__text p {
	margin-bottom: 0;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

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

.team {
	padding-bottom: 70px;
}

.team__item {
	text-align: center;
	margin-bottom: 30px;
}

.team__item:hover img {
	border-color: #13a2b7;
}

.team__item img {
	height: 270px;
	width: 270px;
	border-radius: 50%;
	border: 10px solid #ffffff;
	-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
	margin-bottom: 32px;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.team__item h5 {
	font-size: 20px;
	color: #111111;
	font-weight: 600;
	margin-bottom: 5px;
}

.team__item span {
	font-size: 15px;
	color: #13a2b7;
	display: block;
	margin-bottom: 12px;
}

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

.gallery {
	overflow: hidden;
}

.gallery__container {
	margin-right: -20px;
}

.gallery__container .gc__item {
	height: 338px;
	width: calc(25% - 20px);
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.gallery__container .gc__item:hover:after {
	opacity: 1;
}

.gallery__container .gc__item:hover a {
	opacity: 1;
	visibility: visible;
}

.gallery__container .gc__item:after {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: rgba(19, 161, 183, 0.5);
	content: "";
	z-index: -1;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
	opacity: 0;
}

.gallery__container .gc__item a {
	font-size: 30px;
	color: #ffffff;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.grid-sizer {
	width: calc(25% - 20px);
}

/*---------------------
  Latest
-----------------------*/

.latest {
	padding-top: 80px;
	padding-bottom: 70px;
}

.latest__btn {
	text-align: right;
}

.latest__item {
	-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
	padding: 30px;
	margin-bottom: 30px;
}

.latest__item:hover {
	-webkit-box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
}

.latest__item:hover h5 a {
	text-decoration: underline;
}

.latest__item h5 {
	margin-bottom: 10px;
}

.latest__item h5 a {
	color: #111111;
	font-weight: 600;
	line-height: 24px;
}

.latest__item ul li {
	list-style: none;
	display: inline-block;
	font-size: 13px;
	margin-right: 22px;
	color: #888888;
	position: relative;
	font-weight: 300;
}

.latest__item ul li:after {
	position: absolute;
	right: -16px;
	top: 12px;
	height: 5px;
	width: 5px;
	background: #888888;
	border-radius: 50%;
	content: "";
}

.latest__item ul li img {
	height: 30px;
	width: 30px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 5px;
}

.latest__item ul li:last-child {
	margin-right: 0;
}

.latest__item ul li:last-child:after {
	display: none;
}

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

.footer {
	background: #20B2AA;
	padding-top: 30px;
}

.footer__top {
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 40px;
}

.footer__logo {
	line-height: 50px;
}

.footer__logo a {
	display: inline-block;
}

.footer__newslatter form {
	position: relative;
}

.footer__newslatter form input {
	width: 100%;
	height: 50px;
	font-size: 14px;
	color: #ffffff;
	background: transparent;
	border: 1px solid #fff;
	padding-left: 20px;
	border-radius: 50px;
}

.footer__newslatter form input::-webkit-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::-moz-placeholder {
	color: #ffffff;
}

.footer__newslatter form input:-ms-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::-ms-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::placeholder {
	color: #ffffff;
}

.footer__newslatter form button {
	border-radius: 0 50px 50px 0;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
}

.footer__social {
	text-align: right;
}

.footer__social a {
	display: inline-block;
	height: 50px;
	width: 50px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 18px;
	color: #ffffff;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
	margin-right: 6px;
}

.footer__social a:last-child {
	margin-right: 0;
}

.footer__widget {
	margin-bottom: 30px;
}

.footer__widget h5 {
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 25px;
}

.footer__address h5 {
	margin-bottom: 15px;
	font-size: 17px;
}

.footer__widget ul li {
	list-style: none;
	margin-bottom: 8px;
	line-height: 1.5;
}


.footer__widget ul li a {
	font-size: 14px;
	color: #fff;
	font-weight: 300;
}

.footer__address {
	margin-bottom: 30px;
}

.footer__address h5 {
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 25px;
}

.footer__address ul li {
	list-style: none;
	font-size: 14px;
	color: #fff;
	font-weight: 300;
	margin-bottom: 38px;
}

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

.footer__address ul li i {
	font-size: 18px;
	color: #ffff;
	margin-right: 15px;
}

.footer__map {
	height: 190px;
	margin-bottom: 30px;
}

.footer__map iframe {
	height: 250px;
}

.footer__copyright {
	background: #12191a;
	padding: 18px 0 20px;
	margin-top: 20px;
}

.footer__copyright ul {
	text-align: right;
}

.footer__copyright ul li {
	list-style: none;
	display: inline-block;
	font-size: 14px;
	color: #c4c4c4;
	margin-right: 25px;
	font-weight: 300;
	position: relative;
}

.footer__copyright ul li:after {
	position: absolute;
	right: -18px;
	top: 9px;
	height: 4px;
	width: 4px;
	background: #c4c4c4;
	content: "";
	border-radius: 50%;
}

.footer__copyright ul li:last-child {
	margin-right: 0;
}

.footer__copyright ul li:last-child:after {
	display: none;
}

.footer__copyright__text p {
	font-size: 14px;
	color: #c4c4c4;
	font-weight: 300;
	margin-bottom: 0;
}

.footer__copyright__text p i {
	color: #13a2b7;
}

.footer__copyright__text p a {
	color: #13a2b7;
}

.footer__contact li {
	list-style: none;
	color: #ffffff;
	font-size: 13px;
	line-height: 1.6;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.footer__contact li a {
	color: #ffffff;
	text-decoration: none;
	font-size: 13px;
}

.footer__contact li a:hover {
	color: #ffffff;
}


/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
	padding-top: 30px;
	padding-bottom: 30px;
}

.breadcrumb__text h2 {
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 10px;
}

/*---------------------
  About
-----------------------*/

.about {
	padding-bottom: 0;
}

.about .container {
	padding-bottom: 100px;
	border-bottom: 1px solid #e1e1e1;
}

.about__video {
	height: 280px;
	aspect-ratio: 16 / 9;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	margin-top: 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.about__video .play-btn {
	display: inline-block;
	height: 50px;
	width: 50px;
	background: #13a2b7;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	font-size: 18px;
	color: #ffffff;
}

.about__text {
	padding-left: 20px;
}

.about__text .section-title {
	margin-bottom: 25px;
}

.about__text p {
	margin-bottom: 25px;
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	color: #000000;
}

.about__text ul {
	margin-bottom: 25px;
}

.about__text ul li {
	list-style: none;
	font-size: 15px;
	color: #000000;
	line-height: 36px;
}

.about__text ul li i {
	color: #13a2b7;
	font-size: 15px;
	margin-right: 6px;
}

/* Visi dan Misi */


/*---------------------
  Testimonials
-----------------------*/

.testimonial__slider .col-lg-6 {
	max-width: 100%;
}

.testimonial__slider .owl-dots {
	text-align: center;
}

.testimonial__slider .owl-dots button {
	height: 10px;
	width: 10px;
	background: #d2d2d2;
	border-radius: 50%;
	margin-right: 6px;
}

.testimonial__slider .owl-dots button.active {
	background: #9c9c9c;
}

.testimonial__slider .owl-dots button:last-child {
	margin-right: 0;
}


@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header__menu {
		margin-right: 25px;
	}

	.header__menu ul li {
		margin-right: 25px;
	}

	.header__top__left li {
		margin-right: 10px;
	}

	.footer__newslatter form button {
		padding: 14px 15px 12px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {

	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		content: "";
		z-index: 98;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		visibility: hidden;
	}

	.offcanvas-menu-overlay.active {
		visibility: visible;
	}

	.offcanvas-menu-wrapper {
		position: fixed;
		left: -300px;
		width: 300px;
		height: 100%;
		background: #ffffff;
		padding: 50px 20px 30px 30px;
		display: block;
		z-index: 99;
		overflow-y: auto;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		opacity: 0;
	}

	.offcanvas-menu-wrapper.active {
		opacity: 1;
		left: 0;
	}

	.offcanvas__logo {
		margin-bottom: 25px;
	}

	.offcanvas__btn {
		margin-bottom: 30px;
	}

	.offcanvas__widget {
		margin-bottom: 30px;
	}

	.offcanvas__widget li {
		font-size: 15px;
		color: #111111;
		list-style: none;
		line-height: 30px;
	}

	.offcanvas__widget li i {
		color: #13a2b7;
		font-size: 15px;
		margin-right: 5px;
	}

	.offcanvas__social a {
		font-size: 16px;
		color: #111111;
		display: inline-block;
		margin-right: 20px;
	}

	.offcanvas__social a:last-child {
		margin-right: 0;
	}

	.header__top {
		display: none;
	}

	.header__menu {
		display: none;
	}

	.header .container {
		position: relative;
	}

	.footer__logo {
		margin-bottom: 30px;
	}

	.footer__newslatter {
		margin-bottom: 30px;
	}

	.footer__social {
		text-align: center;
	}

	.footer__copyright__text p {
		margin-bottom: 10px;
		text-align: center;
	}

	.footer__copyright ul {
		text-align: center;
	}

	.services__item {
		padding: 35px 30px 35px 30px;
	}
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {

	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		content: "";
		z-index: 98;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		visibility: hidden;
	}

	.offcanvas-menu-overlay.active {
		visibility: visible;
	}

	.offcanvas-menu-wrapper {
		position: fixed;
		left: -280px;
		width: 280px;
		height: 100%;
		background: #ffffff;
		padding: 50px 20px 30px 30px;
		display: block;
		z-index: 99;
		overflow-y: auto;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		opacity: 0;
	}

	.offcanvas-menu-wrapper.active {
		opacity: 1;
		left: 0;
	}

	.offcanvas__logo {
		margin-bottom: 25px;
	}

	.offcanvas__btn {
		margin-bottom: 30px;
	}

	.offcanvas__widget {
		margin-bottom: 30px;
	}

	.offcanvas__widget li {
		font-size: 15px;
		color: #111111;
		list-style: none;
		line-height: 30px;
	}

	.offcanvas__widget li i {
		color: #13a2b7;
		font-size: 15px;
		margin-right: 5px;
	}

	.offcanvas__social a {
		font-size: 16px;
		color: #111111;
		display: inline-block;
		margin-right: 20px;
	}

	.offcanvas__social a:last-child {
		margin-right: 0;
	}

	.header__top {
		display: none;
	}

	.header__menu {
		display: none;
	}

	.header .container {
		position: relative;
	}

	.footer__logo {
		margin-bottom: 30px;
		text-align: center;
	}

	.footer__newslatter {
		margin-bottom: 30px;
	}

	.footer__social {
		text-align: center;
	}

	.footer__copyright__text p {
		margin-bottom: 10px;
		text-align: center;
	}

	.footer__copyright ul {
		text-align: center;
	}

	.about__video {
		margin-bottom: 40px;
	}

	.services__btn {
		text-align: left;
		margin-bottom: 30px;
	}

	.latest__btn {
		text-align: left;
		margin-bottom: 30px;
	}

	.team__item img {
		height: auto;
		width: auto;
	}

	.gallery__container .gc__item {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	.grid-sizer {
		width: 100%;
	}

	.gallery__container {
		margin-right: 0;
	}
}


@media only screen and (max-width: 479px) {

	.services__item {
		padding: 45px 25px 45px;
	}

	.services__item__icon {
		float: none;
		margin-bottom: 25px;
	}

	.footer__newslatter form button {
		padding: 14px 15px 12px;
	}

	.footer__newslatter form {
		text-align: center;
	}

	.footer__newslatter form input {
		margin-bottom: 15px;
		padding-right: 20px;
	}

	.footer__newslatter form button {
		position: relative;
		border-radius: 50px;
		padding: 14px 30px 12px;
	}

	.header__menu {
		display: none;
	}

	.sidebar {
		width: 75vw;
	}
}

/* ========================================
   SIDEBAR CSS (dari about.html)
   ======================================== */


.burger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	cursor: pointer;
	line-height: 1;
	margin-left: 12px;
}

/* sidebar overlay */
.sidebar-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: .25s;
	z-index: 9998;
}

/* sidebar main */
.sidebar {
	position: fixed;
	top: 0;
	right: -320px;
	width: 320px;
	max-width: 85vw;
	height: 100vh;
	background: #fff;
	z-index: 9999;
	box-shadow: -10px 0 25px rgba(0, 0, 0, .15);
	transition: .25s;
	padding: 18px 16px;
	overflow-y: auto;
}

.sidebar.active {
	right: 0;
}

.sidebar-overlay.active {
	opacity: 1;
	visibility: visible;
}

/* sidebar header */
.sidebar__header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 8px;
}

/* sidebar close button */
.sidebar__close {
	position: absolute;
	top: 16px;
	left: 16px;
	font-size: 28px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #f5f5f5;
}

/* sidebar menu */
.sidebar__menu ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.sidebar__menu>ul>li {
	border-bottom: 1px solid #eee;
}

.sidebar__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 6px;
	color: #111;
	text-decoration: none;
	font-weight: 600;
}

.sidebar__menu li.active>a {
	color: #0d6efd;
}

/* dropdown sidebar */
.sidebar__menu ul.dropdown {
	display: none;
	padding-left: 10px;
	padding-bottom: 8px;
}

.sidebar__menu li.open>ul.dropdown {
	display: block;
}

.sidebar__menu ul.dropdown a {
	font-weight: 500;
	padding: 10px 6px;
}


@media (max-width: 991px) {
	.about .row>[class*="col-"] {
		display: block;
	}

	.about__text-main {
		max-height: none;
		overflow: visible;
	}
}

/* ========================================
   MOBILE MENU IN SIDEBAR (max-width: 991px)
   ======================================== */
@media only screen and (max-width: 991px) {

	.sidebar {
		display: block;
	}

	.sidebar__menu {
		display: block;
	}

	/* Hide desktop menu */
	.header__menu {
		display: none;
	}

	.header__top {
		display: none;
	}

	/* Show burger button */
	.burger-btn {
		display: flex;
		font-size: 32px;
		color: #111;
		cursor: pointer;
	}

	/* Adjust header for mobile */
	.header {
		background: #ffffff;
		box-shadow: 0 2px 10px rgba(0,0,0,0.05);
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	.header__logo img {
		max-height: 50px;
		width: auto;
	}

	.header .container {
		position: relative;
	}
}

/* ========================================
   MISI LIST STYLING
   ======================================== */
.about__text .misi__list {
	list-style: disc outside !important;
	padding-left: 25px !important;
	margin: 0 !important;
	margin-bottom: 25px !important;
}

.about__text .misi__list li {
	list-style: disc !important;
	margin-bottom: 12px !important;
	color: #000000 !important;
	font-size: 15px !important;
	line-height: 25px !important;
	font-weight: 400 !important;
	display: list-item !important;
	margin-left: 0 !important;
}

/* ========================================
   VISI MISI PIC STYLING
   ======================================== */
.visimisi__pic {
	display: flex;
	align-items: stretch;
	height: auto;
	min-height: 600px;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
}

.visimisi__pic img {
	width: auto;
	height: auto;
	object-fit: cover;
}

/* Tablet */
@media (max-width: 991px) {
	.visimisi__pic {
		min-height: 400px;
		margin-bottom: 30px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.visimisi__pic {
		min-height: auto;
		height: auto;
	}

	.visimisi__pic img {
		height: auto;
		object-fit: contain;

	}
}

/* Memberikan ruang agar angka tetap di dalam dan teks sejajar */
.about__list {
	padding-left: 15px;
	margin-bottom: 25px;
}

.about__list li {
	list-style-type: decimal;
	padding-left: 10px;
	margin-bottom: 12px;
	text-align: justify;
	display: list-item;
}

.about__list_document {
	list-style: none;
	padding: 0;
}

.about__list_document li {
	margin-bottom: 15px;
}

.about__list_document a,
.document-link {
	color: #000000;
	text-decoration: none;
	transition: all 0.3s;
	display: block;
}

.about__list_document a i,
.document-link i {
	color: #13a2b7;
	margin-right: 10px;
}

.about__list_document a:hover,
.document-link:hover {
	color: #13a2b7;
	padding-left: 5px;
}

.about__text .section-title h2 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 28px;
}

/* ========================================
	Pelayanan STYLING
   ======================================== */
/* Custom Service Card Styles */
.service-card {
	padding: 0 !important;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.3s ease;
	border: none;
	background: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	position: relative;
}

.service-card:hover {
	transform: translateY(-5px);
	background: #fff !important;
}

.service-card__image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.service-card__footer {
	padding: 20px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background 0.3s ease;
	position: absolute;
	bottom: 0;
	width: 100%;
}

.service-card:hover .service-card__footer {
	background: #13a2b7;
}

.service-card__footer h5 {
	color: #fff !important;
	margin-bottom: 0;
	font-weight: 700;
	font-size: 15px;
	text-align: left;
}

.service-card__footer .read-more {
	font-size: 13px;
	opacity: 0.9;
}

/* Modal Styles - Enhanced Animations */
.service-modal {
	display: none;
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.service-modal.active {
	opacity: 1;
	pointer-events: auto;
}

.service-modal__content {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	margin: 5% auto;
	width: 90%;
	max-width: 750px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
		0 0 1px rgba(255, 255, 255, 0.5) inset;
	transform: scale(0.8) translateY(30px);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.4s ease;
}

.service-modal.active .service-modal__content {
	transform: scale(1) translateY(0);
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35),
		0 0 1px rgba(255, 255, 255, 0.5) inset;
}

@keyframes slideInDown {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service-modal__header {
	padding: 30px 35px;
	background: linear-gradient(135deg, #13a2b7 0%, #0d7b8c 100%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 4px 15px rgba(19, 162, 183, 0.2);
	position: relative;
	overflow: hidden;
}

.service-modal__header::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	animation: shimmer 3s infinite;
}

@keyframes shimmer {
	0% {
		left: -100%;
	}

	50% {
		left: 100%;
	}

	100% {
		left: 100%;
	}
}

.service-modal__header h4 {
	color: #ffffff;
	font-weight: 700;
	font-size: 26px;
	margin: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	position: relative;
	z-index: 1;
	animation: slideInDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-modal__close {
	font-size: 32px;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.8);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	line-height: 1;
	position: relative;
	z-index: 2;
}

.service-modal__close:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.service-modal__body {
	padding: 35px;
	line-height: 1.8;
	animation: fadeInUp 0.6s ease 0.1s both;
	max-height: 60vh;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

/* Custom Scrollbar untuk Modal */
.service-modal__body::-webkit-scrollbar {
	width: 8px;
}

.service-modal__body::-webkit-scrollbar-track {
	background: #f0f0f0;
	border-radius: 10px;
}

.service-modal__body::-webkit-scrollbar-thumb {
	background: linear-gradient(to bottom, #13a2b7, #0d7b8c);
	border-radius: 10px;
	transition: all 0.3s ease;
}

.service-modal__body::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(to bottom, #0d7b8c, #0a5f71);
	box-shadow: 0 0 6px rgba(19, 162, 183, 0.4);
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service-modal__body p {
	color: #555;
	line-height: 1.8;
	font-size: 15px;
	margin-bottom: 18px;
}

.service-modal__body h5 {
	color: #13a2b7;
	font-weight: 600;
	margin-top: 20px;
	margin-bottom: 12px;
	font-size: 16px;
}

.service-modal__body img {
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-modal__body img:hover {
	transform: scale(1.03) translateY(-5px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.service-modal__body ul {
	margin-left: 20px;
}

.service-modal__body li {
	color: #666;
	margin-bottom: 10px;
	transition: all 0.3s ease;
}

.service-modal__body li:hover {
	color: #13a2b7;
	padding-left: 8px;
}

.service-modal__footer {
	padding: 20px 35px;
	text-align: right;
	background: linear-gradient(to right, #f5f5f5, #fafafa);
	border-top: 1px solid #e0e0e0;
	animation: fadeInUp 0.6s ease 0.2s both;
}

.service-modal__footer .site-btn {
	padding: 12px 35px;
	background: linear-gradient(135deg, #13a2b7 0%, #0d7b8c 100%);
	color: white;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 15px rgba(19, 162, 183, 0.3);
	position: relative;
	overflow: hidden;
}

.service-modal__footer .site-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.service-modal__footer .site-btn:hover::before {
	width: 300px;
	height: 300px;
}

.service-modal__footer .site-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(19, 162, 183, 0.4);
}

/* Responsive Modal Design */
@media (max-width: 768px) {
	.service-modal__content {
		width: 95%;
		max-width: 90vw;
		margin: 10% auto;
	}

	.service-modal__header {
		padding: 20px 25px;
	}

	.service-modal__header h4 {
		font-size: 22px;
	}

	.service-modal__body {
		padding: 25px;
	}

	.service-modal__footer {
		padding: 15px 25px;
	}

	.service-modal__footer .site-btn {
		padding: 10px 25px;
		font-size: 14px;
	}
}

/* Additional styled elements */
.service-modal__body .bg-light {
	background: linear-gradient(135deg, rgba(19, 162, 183, 0.08) 0%, rgba(13, 123, 140, 0.05) 100%);
	border-left: 4px solid #13a2b7;
	padding: 20px;
	border-radius: 8px;
	margin-top: 20px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	animation: slideInLeft 0.6s ease 0.3s both;
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.service-modal__body .bg-light:hover {
	box-shadow: 0 8px 20px rgba(19, 162, 183, 0.15);
	transform: translateX(5px);
}

.service-modal__body .row {
	margin-top: 20px;
	animation: fadeInUp 0.6s ease 0.25s both;
}

.service-modal__body hr {
	border: none;
	height: 2px;
	background: linear-gradient(90deg, transparent, #ddd, transparent);
	margin: 25px 0;
}

.service-modal__body .list-unstyled li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	padding: 8px 0;
	transition: all 0.3s ease;
	animation: fadeInRight 0.5s ease backwards;
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.service-modal__body .list-unstyled li:nth-child(1) {
	animation-delay: 0.3s;
}

.service-modal__body .list-unstyled li:nth-child(2) {
	animation-delay: 0.35s;
}

.service-modal__body .list-unstyled li:nth-child(3) {
	animation-delay: 0.4s;
}

.service-modal__body .list-unstyled li:nth-child(4) {
	animation-delay: 0.45s;
}

.service-modal__body .list-unstyled li:nth-child(5) {
	animation-delay: 0.5s;
}

.service-modal__body .list-unstyled li:hover {
	padding-left: 8px;
	color: #13a2b7;
}

.service-modal__body .list-unstyled .bi {
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 2px;
	transition: all 0.3s ease;
}

.service-modal__body .list-unstyled li:hover .bi {
	transform: rotate(360deg) scale(1.2);
}

.service-modal__body strong {
	color: #13a2b7;
	font-weight: 600;
}

/* Schedule Table */
.schedule-table {
	background: #fff;
}

.schedule-table thead {
	background-color: #13a2b7;
	color: white;
}

.schedule-table thead th {
	vertical-align: middle;
	font-weight: 600;
	border-color: #0d7b8c;
}

.schedule-table thead th.col-clinic {
	width: 20%;
}

.schedule-table thead th.col-doctor {
	width: 30%;
}

.schedule-table thead th.col-morning {
	width: 25%;
}

.schedule-table thead th.col-afternoon {
	width: 25%;
}

/* Info Box */
.info-box {
	border-left: 5px solid #13a2b7 !important;
	background: #f8f9fa;
	padding: 1.5rem;
	border-radius: 0.5rem;
}

/* Iframe Styling */
iframe {
	border: 0;
	width: 100%;
	display: block;
}

/* Room Card Styling */
.room-card {
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid #13a2b7;
	background: linear-gradient(135deg, rgba(19, 162, 183, 0.05) 0%, rgba(13, 123, 140, 0.02) 100%);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.room-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(19, 162, 183, 0.12);
}

.room-card h6 {
	margin-bottom: 10px;
	font-weight: 600;
	color: #13a2b7;
	display: flex;
	align-items: center;
	gap: 8px;
}

.room-card p {
	font-size: 14px;
	margin: 0;
	color: #555;
	line-height: 1.6;
}

/* Gaya Tabel Tarif Spesifik */
.tarif-container {
	background-color: #f8f9fa;
	border-left: 4px solid #13a2b7;
	padding: 1.5rem;
	border-radius: 8px;
	margin-top: 1.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.tarif-info-text {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	color: #111111;
	font-weight: 600;
	gap: 15px;
}

.table-tarif-rs {
	width: 100%;
	background-color: #ffffff;
	border-collapse: collapse;
}

.table-tarif-rs thead th {
	background-color: #f8f9fa;
	padding: 12px;
	text-align: center;
	border: 1px solid #dee2e6;
}

.table-tarif-rs tbody td {
	padding: 12px 20px;
	border: 1px solid #dee2e6;
}

.text-price {
	text-align: right;
	font-weight: 700;
	color: #000000;
}

/*------------------
    PPID Style
--------------------*/
.ppid__description p {
	text-align: justify;
	text-justify: inter-word;
	line-height: 1.8;
	color: #444;
	margin-bottom: 20px;
}

.ppid__image-container {
	background: #f8f9fa;
	padding: 15px;
	border-radius: 15px;
	border: 1px solid #eee;
	max-width: 80%;
	margin: 0 auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

@media (max-width: 767px) {
	.ppid__image-container {
		max-width: 100%;
		padding: 10px;
	}
}

.ppid-zoomable {
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: zoom-in;
}

.ppid-zoomable:hover {
	transform: scale(1.02);
}

/* --- PPID Split Layout Styles --- */
.ppid__image-container {
	background: #f8f9fa;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid #eee;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.ppid__image-container img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

/* Styling Box Teks di sebelah kanan */
.ppid__content-box {
	padding-left: 50px;
}

.ppid__description p {
	text-align: justify;
	line-height: 1.7;
	margin-bottom: 15px;
	font-size: 15px;
}

/* Responsif untuk Tablet & HP */
@media (max-width: 991px) {
	.ppid__content-box {
		padding-left: 0;
		margin-top: 30px;
	}
}

.breadcrumb-option {
	background: url('img/bgprofil.png') no-repeat center center;
	background-size: cover;
}

.ppid__content-box {
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ppid__image-container {
	overflow: hidden;
	border-radius: 10px;
}

.ppid__image-container img {
	transition: transform 0.3s;
}

.ppid__image-container img:hover {
	transform: scale(1.05);
}

.back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	background: #13a2b7;
	color: white;
	border-radius: 50%;
	padding: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	display: none;
	z-index: 1000;
	cursor: pointer;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.back-to-top:hover {
	background: #13a2b7;
	transform: translateY(-3px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top.show {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Cover PPID Section */

/*---------------------
  Informasi Publik Card
-----------------------*/
.informasi-publik {
	background: #fdfdfd;
}

.info-card {
	text-align: center;
	padding: 40px 20px;
	background: #ffffff;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	height: 100%;
	border: 1px solid #f2f2f2;
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	opacity: 0;
	transform: translateY(20px);
}

.info-card.visible {
	opacity: 1;
	transform: translateY(0);
	animation: slideInUp 0.6s ease-out forwards;
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.info-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 40px rgba(19, 162, 183, 0.15);
	border-color: #13a2b7;
}

.info-card__icon {
	width: 200px;
	height: 200px;
	margin: 0 auto 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.info-card__icon img {
	max-width: 100%;
	transition: all 0.3s ease;
}

.info-card:hover .info-card__icon img {
	transform: scale(1.1);
}

.info-card__text h5 {
	font-size: 16px;
	font-weight: 700;
	color: #111111;
	margin-bottom: 15px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.4;
	text-transform: uppercase;
}

.info-card__text p {
	font-size: 14px;
	color: #666666;
	line-height: 22px;
	margin-bottom: 25px;
}

.info-card__text .primary-btn {
	padding: 10px 20px;
	font-size: 12px;
	letter-spacing: 1px;
}



/* Penyesuaian khusus untuk kolom responsif */
@media only screen and (max-width: 767px) {
	.info-card {
		padding: 30px 15px;
	}
}

/* =========================
   FAQ ACCORDION STYLE
========================= */

.faq-accordion {
	margin-top: 40px;
}

.faq-item {
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0, 61, 85, 0.08);
	margin-bottom: 15px;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}

.faq-item:hover {
	box-shadow: 0 10px 28px rgba(0, 61, 85, 0.15);
}

.faq-question {
	width: 100%;
	background: #f2f7f8;
	border: none;
	outline: none;
	padding: 18px 24px;
	font-size: 16px;
	font-weight: 600;
	color: #111;
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: background 0.3s ease;
}

.faq-question i {
	font-size: 16px;
	color: #13a2b7;
	transition: transform 0.3s ease;
}

.faq-question.active {
	background: #13a2b7;
	color: #ffffff;
}

.faq-question.active i {
	color: #ffffff;
	transform: rotate(180deg);
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	padding: 0 24px;
	background: #ffffff;
	transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-answer p,
.faq-answer {
	font-size: 15px;
	color: #555;
	line-height: 26px;
}

.faq-item.open .faq-answer {
	max-height: 2000px;
	padding: 18px 24px 22px;
}


/* Sub Judul Zona Integritas */
.zona-subtitle {
	font-size: 20px;
	font-weight: 600;
	color: #111;
	margin: 40px 0 20px;
	position: relative;
}

.zona-subtitle::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 60px;
	height: 4px;
	background: #13a2b7;
	border-radius: 2px;
}

/* =========================
   ZONA LIST + ICON STYLE
========================= */

.zona-list {
	list-style: none;
	padding: 0;
	margin: 25px 0 0;
}

.zona-list li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: #ffffff;
	padding: 20px 24px;
	border-radius: 12px;
	margin-bottom: 16px;
	box-shadow: 0 8px 22px rgba(0, 61, 85, 0.08);
	transition: all 0.3s ease;
}

.zona-list li:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 35px rgba(0, 61, 85, 0.15);
}

/* ICON */
.zona-icon {
	width: 46px;
	height: 46px;
	min-width: 46px;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-top: 2px;
}

/* TEXT */
.zona-list li div {
	flex: 1;
}

.zona-list strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #111;
	margin-bottom: 6px;
}

.zona-list p {
	margin: 0;
	font-size: 14px;
	color: #555;
	line-height: 24px;
}

@media (max-width: 576px) {
	.zona-list li {
		padding: 18px 18px;
		gap: 14px;
	}

	.zona-icon {
		width: 40px;
		height: 40px;
		min-width: 40px;
		font-size: 18px;
	}

	.zona-list strong {
		font-size: 15px;
	}

	.zona-list p {
		font-size: 13px;
		line-height: 22px;
	}
}

/* =========================
   KANAL PENGADUAN STYLE
========================= */

.misi__list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.misi__list li {
	list-style: none;
}


.kanal-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: #ffffff;
	padding: 18px 22px;
	border-radius: 12px;
	margin-bottom: 14px;
	box-shadow: 0 8px 22px rgba(0, 61, 85, 0.08);
	transition: all 0.3s ease;
}

.kanal-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 35px rgba(0, 61, 85, 0.15);
}

/* ICON */
.kanal-icon {
	width: 44px;
	height: 44px;
	min-width: 44px;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-top: 2px;
}

/* TEXT */
.kanal-text {
	flex: 1;
}

.kanal-text strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #111;
	margin-bottom: 4px;
}

.kanal-text p,
.kanal-text a,
.kanal-text span {
	margin: 0;
	font-size: 14px;
	color: #555;
	line-height: 22px;
}

.kanal-text a {
	color: #13a2b7;
	font-weight: 500;
}



/* =========================
   Responsive
========================= */
@media (max-width: 576px) {
	.kanal-item {
		padding: 16px 18px;
		gap: 14px;
	}

	.kanal-icon {
		width: 38px;
		height: 38px;
		min-width: 38px;
		font-size: 18px;
	}

	.kanal-text strong {
		font-size: 14px;
	}

	.kanal-text p,
	.kanal-text a,
	.kanal-text span {
		font-size: 13px;
	}
}

/* =========================
   STANDAR PELAYANAN - DOKUMEN
========================= */

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

.about__list_document li {
	margin-bottom: 12px;
}

.about__list_document a {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	padding: 14px 18px;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0, 61, 85, 0.08);
	color: #333;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.about__list_document a i {
	font-size: 20px;
	color: #13a2b7;
	/* PDF merah */
	min-width: 22px;
}

.about__list_document a:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0, 61, 85, 0.15);
	color: #13a2b7;
}

.about__list_document a:hover i {
	color: #13a2b7;
}

/* =========================
   KOMPENSASI PELAYANAN
========================= */

.compensation-content {
	background: #ffffff;
	padding: 28px 30px;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 61, 85, 0.08);
	margin-bottom: 30px;
}

.compensation-content h3 {
	font-size: 18px;
	font-weight: 600;
	color: #111;
	margin-top: 20px;
	margin-bottom: 10px;
	position: relative;
}

.compensation-content h3::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #13a2b7;
	border-radius: 50%;
	margin-right: 8px;
}

.compensation-content ul {
	padding-left: 18px;
}

.compensation-content ul li {
	font-size: 14px;
	color: #555;
	line-height: 24px;
	margin-bottom: 8px;
}

.compensation-content p {
	font-size: 14px;
	line-height: 26px;
	color: #444;
}

/* =========================
   ABOUT ICON LIST
========================= */

.about-icon-list {
	list-style: none;
	padding: 0;
	margin-top: 25px;
}

.about-icon-list li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: #ffffff;
	padding: 20px 24px;
	border-radius: 14px;
	margin-bottom: 16px;
	box-shadow: 0 8px 22px rgba(0, 61, 85, 0.08);
	transition: all 0.3s ease;
}

.about-icon-list li:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 35px rgba(0, 61, 85, 0.15);
}

/* ICON */
.about-icon {
	width: 48px;
	height: 48px;
	min-width: 48px;

	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-top: 2px;
}

/* TEXT */
.about-text strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #111;
	margin-bottom: 6px;
}

.about-text p,
.about-text li {
	font-size: 14px;
	color: #555;
	line-height: 24px;
}

.about-text ul {
	padding-left: 18px;
	margin-top: 8px;
}

/* Responsive */
@media (max-width: 576px) {
	.about-icon-list li {
		padding: 18px;
		gap: 14px;
	}

	.about-icon {
		width: 40px;
		height: 40px;
		min-width: 40px;
		font-size: 18px;
	}

	.about-text strong {
		font-size: 15px;
	}
}

/* =========================
   SEJARAH ICON LIST
========================= */

.sejarah-icon-list {
	list-style: none;
	padding: 0;
	margin-top: 25px;
}

.sejarah-icon-list li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: #ffffff;
	padding: 20px 24px;
	border-radius: 14px;
	margin-bottom: 16px;
	box-shadow: 0 8px 22px rgba(0, 61, 85, 0.08);
	transition: all 0.3s ease;
}

.sejarah-icon-list li:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 35px rgba(0, 61, 85, 0.15);
}

/* ICON */
.sejarah-icon {
	width: 46px;
	height: 46px;
	min-width: 46px;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-top: 2px;
}

/* TEXT */
.sejarah-text strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #111;
	margin-bottom: 6px;
}

.sejarah-text p {
	margin: 0;
	font-size: 14px;
	color: #555;
	line-height: 24px;
}

/* Responsive */
@media (max-width: 576px) {
	.sejarah-icon-list li {
		padding: 18px;
		gap: 14px;
	}

	.sejarah-icon {
		width: 40px;
		height: 40px;
		min-width: 40px;
		font-size: 18px;
	}

	.sejarah-text strong {
		font-size: 15px;
	}
}

/* =========================
   Infinite 3D Carousel Style
========================= */
.carousel-3d-container {
	position: relative;
	height: 450px;
	width: 100%;
	perspective: 1000px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.carousel-3d {
	position: relative;
	width: 250px;
	height: 350px;
	transform-style: preserve-3d;
	transition: transform 0.5s ease-in-out;
}

.carousel-3d-item {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
	transition: all 0.5s ease-in-out;
	cursor: pointer;
	background: #ccc;
}

.carousel-3d-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 3D Positions */
/* Item 1 (Far Left) */
.item-1 {
	transform: translateX(-180%) scale(0.7) rotateY(35deg);
	z-index: 1;
	opacity: 0.4;
}

/* Item 2 (Left) */
.item-2 {
	transform: translateX(-100%) scale(0.85) rotateY(20deg);
	z-index: 2;
	opacity: 0.7;
}

/* Item 3 (Center - Active) */
.item-3 {
	transform: translateX(0) scale(1.1);
	z-index: 5;
	opacity: 1;
	box-shadow: 0 15px 35px rgba(19, 162, 183, 0.4);
}

/* Item 4 (Right) */
.item-4 {
	transform: translateX(100%) scale(0.85) rotateY(-20deg);
	z-index: 2;
	opacity: 0.7;
}

/* Item 5 (Far Right) */
.item-5 {
	transform: translateX(180%) scale(0.7) rotateY(-35deg);
	z-index: 1;
	opacity: 0.4;
}

/* Controls */
.carousel-3d-controls {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 50px;
	z-index: 10;
}

.carousel-3d-controls button {
	background: #13a2b7;
	color: #fff;
	border: none;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	cursor: pointer;
	transition: 0.3s;
	font-size: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.carousel-3d-controls button:hover {
	background: #178f8a;
	transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
	.carousel-3d-container {
		height: 350px;
	}

	.carousel-3d {
		width: 180px;
		height: 260px;
	}

	.carousel-3d-controls {
		padding: 0 10px;
	}

	.item-1,
	.item-5 {
		display: none;
	}
}

/* =========================
   alur Page Styles
========================= */
.alur-img {
	max-width: 100%;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
}

.about__text h5 {
	margin-top: 25px;
	font-weight: 600;
}

.about__text ul {
	padding-left: 18px;
}

/*---------------------
  Grafik Minimalis
-----------------------*/
.spad-small {
	padding-top: 50px;
	padding-bottom: 50px;
	background: #fafafa;
}

.chart-wrapper-minimal {
	background: #ffffff;
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #eee;
	height: 220px;
	/* Tinggi dibatasi agar memanjang */
	width: 100%;
	position: relative;
}

.chart-controls .chart-btn {
	background: transparent;
	border: 1px solid #13a2b7;
	color: #13a2b7;
	padding: 4px 15px;
	margin-right: 5px;
	border-radius: 4px;
	font-weight: 500;
	font-size: 12px;
	/* Font lebih kecil */
	transition: all 0.3s ease;
	cursor: pointer;
}

.chart-controls .chart-btn.active {
	background: #13a2b7;
	color: #ffffff;
}

/* Responsif */
@media (max-width: 991px) {
	.chart-wrapper-minimal {
		height: 200px;
		margin-top: 20px;
	}

	.visit-graph .section-title {
		text-align: center;
	}

	.chart-controls {
		text-align: center;
	}
}

/* ============================================
		Berita Terkini
 ============================================ */

/* Layout Berita Horizontal */
.news-horizontal {
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 20px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	border: 1px solid #f2f2f2;
}

.news-horizontal:hover {
	transform: translateY(-3px);
	box-shadow: 0px 8px 20px rgba(19, 162, 183, 0.15);
	border-color: #13a2b7;
}

.news-img {
	flex: 0 0 100px;
	/* Ukuran gambar potret */
	height: 130px;
	overflow: hidden;
	border-radius: 6px;
	margin-right: 20px;
}

.news-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-content {
	flex: 1;
}

.news-date {
	display: block;
	font-size: 11px;
	color: #13a2b7;
	font-weight: 600;
	margin-bottom: 5px;
	letter-spacing: 1px;
}

.news-horizontal h5 {
	margin: 0;
}

.news-horizontal h5 a {
	font-size: 14px;
	color: #111111;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-decoration: none;
	transition: 0.3s;
}

.news-horizontal h5 a:hover {
	color: #13a2b7;
}

/* Responsif Mobile */
@media (max-width: 576px) {
	.news-horizontal {
		flex-direction: column;
		align-items: flex-start;
	}

	.news-img {
		width: 100%;
		flex: 0 0 auto;
		aspect-ratio: 3/4;
		margin-right: 0;
		margin-bottom: 15px;
	}
}

/* ============================================
		Daftar Berita
============================================ */

/* Penyesuaian khusus kartu berita */
.latest__item {
	margin-bottom: 30px;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
	transition: all 0.3s;
}

.latest__item:hover {
	box-shadow: 0px 10px 30px rgba(19, 162, 183, 0.2);
}

.latest__item__pic {
	width: 100%;
	aspect-ratio: 4/5;
	overflow: hidden;
}

.latest__item__pic img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.latest__item__text {
	padding: 20px;
}

.latest__item__text ul {
	margin-bottom: 10px;
}

.latest__item__text ul li {
	list-style: none;
	font-size: 12px;
	color: #13a2b7;
	/* Warna khas template */
	font-weight: 500;
}

.latest__item__text h5 a {
	font-size: 15px;
	color: #111;
	font-weight: 600;
	line-height: 1.4;
	display: block;
	margin-bottom: 0;
}

.latest__item__text h5 a:hover {
	color: #13a2b7;
	text-decoration: none;
}

/* Custom style for Berita Page List (Vertical List) */
.news-list-item .news-img {
	flex: 0 0 260px;
	/* Lebar gambar landscape lebih besar */
	height: 170px;
	/* Tinggi gambar */
	margin-right: 25px;
}

.news-list-item h5 a {
	font-size: 18px;
	/* Judul lebih besar */
}

@media (max-width: 767px) {
	.news-list-item .news-img {
		flex: 0 0 100%;
		height: auto;
		aspect-ratio: 16/9;
	}
}

/* Pagination Style */
.pagination-area .active {
	background: #13a2b7;
	color: #ffffff;
	border-color: #13a2b7;
}

.pagination-area a {
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	color: #111111;
	background: #ffffff;
	border: 1px solid #e1e1e1;
	height: 40px;
	width: 40px;
	line-height: 38px;
	text-align: center;
	border-radius: 5px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	margin-right: 6px;
}

.pagination-area a:hover {
	background: #13a2b7;
	color: #ffffff;
	border-color: #13a2b7;
}

/* ============================================
		Swiper Pengumuman
============================================ */
.swiper-pengumuman {
	padding-bottom: 50px;
}

.swiper-pengumuman .swiper-slide img {
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	border-radius: 10px;
}

.swiper-pengumuman .swiper-pagination-bullet-active {
	background-color: #13a2b7;
}

.swiper-pengumuman .swiper-button-next,
.swiper-pengumuman .swiper-button-prev {
	color: #13a2b7;
}

/* ============================================
		Manfaat PPID
============================================ */

.manfaat{
padding: 0px 10%;
padding-bottom: 30px;
text-align:center;
}

.manfaat h2{
font-size:22px;
margin-top:15px;
margin-bottom:15px;
}

/* CARD */

.card-manfaat-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.card-manfaat{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:all .3s ease;
opacity:0;
transform:translateY(40px);
}

.card-manfaat:hover{
transform:translateY(-10px);
box-shadow:0 12px 30px rgba(0,0,0,0.12);
}

.card-manfaat h3{
margin-bottom:10px;
color:#0f4c81;
}


/* ANIMATION */

@keyframes fadeDown{
from{
opacity:0;
transform:translateY(-20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}