@charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Top Bar
	3.2 Logo
	3.3 Main Nav
	3.4 Menu
4. Home
	4.1 Home Slider
	4.2 Home Slider Nav
	4.3 Home Slider Dots
5. Search
6. Section Title
7. Intro
8. CTA
	8.1 CTA Slider
9. Offers
10. Testimonials
	10.1 Testimonials Slider
11. Trending
12. Contact
13. Footer
	13.1 Footer - About
	13.2 Footer - Blog
	13.3 Footer - Tags
	13.4 Footer - Contact Info
14. Copyright


******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
@font-face
{
	font-family: 'Beyond';
	src: url('../fonts/beyond_the_mountains.otf')  format('truetype'),
		 url('../fonts/beyond_the_mountains.ttf')  format('opentype');
}

/*********************************
2. Body and some general stuff
*********************************/

html {
  scroll-behavior: smooth;
}

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: 'Poppins', sans-serif;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	line-height: 2;
	font-weight: 400;
	color: #929191;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	border-bottom: solid 1px #ffa07f;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: #FF6347;
}
p a:hover
{
	color: #FFFFFF;
	background: #ffa07f;
}
p a:hover::after
{
	opacity: 0.2;
}
::selection
{
	
}
p::selection
{
	
}
h1{font-size: 48px;}
h2{font-size: 36px;}
h3{font-size: 24px;}
h4{font-size: 18px;}
h5{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
	font-family: 'Poppins', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection
{
	
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.nopadding
{
	padding: 0px !important;
}
.button
{
	display: inline-block;
	height: 53px;
	border-radius: 27px;
	overflow: hidden;
}
.button_bcg
{
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 100%;
	background: #001032;
	z-index: -1;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.button:hover .button_bcg
{
	left: -100%;
}
.button a
{
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	line-height: 53px;
	padding-left: 46px;
	padding-right: 46px;
	white-space: nowrap;
	z-index: 2;
}
.button span
{
	display: inline-block;
	vertical-align: middle;
	width: 5.75px;
	height: 5.63px;
	background: #FFFFFF;
	border-radius: 50%;
	margin-right: 2px;
}
.button span:first-child
{
	margin-left: 10px;
}
.button span:nth-child(2)
{
	opacity: 0.6;
}
.button span:last-child
{
	opacity: 0.4;
	margin-right: 0px;
}

/*********************************
3. Header
*********************************/

.header
{
	position: fixed;
	width: 100%;
	background: rgba(0, 138, 217, 0.2);
	z-index: 12;
}
.header.scrolled
{
	background: rgba(0, 138, 217, 0.6);
}

/*********************************
3.1 Top Bar
*********************************/

.top_bar
{
	width: 100%;
	height: 36px;
	/* background: #008AD9; */
	background: #001032;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.header.scrolled .top_bar
{
	visibility: hidden;
	opacity: 0;
	height: 0px;
}
.phone
{
	display: inline-block;
	margin-right: 36px;
	line-height: 36px;
	font-size: 10px;
	font-weight: 600;
	color: #FFFFFF;
}
.social_list_item
{
	position: relative;
	display: inline-block;
	margin-right: 3px;
}
.social_list_item:last-child
{
	margin-right: 0px;
}
.social_list_item a
{
	display: block;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 36px;
}
.social_list_item:hover a i
{
	color: #fa9e1c;
}
.social_list_item a i
{
	font-size: 12px;
	color: #FFFFFF;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.social_list_item a:hover
{
	color: #FFFFFF;
}
.user_box_link
{
	display: inline-block;
}
.user_box_link a
{
	display: block;
	font-size: 10px;
	line-height: 36px;
	font-weight: 600;
	color: #FFFFFF;
	text-transform: uppercase;
}
.user_box_link a:hover
{
	color: #fa9e1c;
}
.user_box_login
{
	margin-right: 15px;
}
.user_box_login::after
{
	display: block;
	position: absolute;
	top: 15px;
	right: -9px;
	background: #FFFFFF;
	width: 1px;
	height: 9px;
	content: '';
}
.main_nav_col
{
	height: 143px;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.header.scrolled .main_nav_col
{
	height: 100px;
}

/*********************************
3.2 Logo
*********************************/

.logo_container
{
	-webkit-transform: translateY(-6px);
	-moz-transform: translateY(-6px);
	-ms-transform: translateY(-6px);
	-o-transform: translateY(-6px);
	transform: translateY(-6px);
}
.header.scrolled .logo_container
{
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}
.logo a
{
	font-family: 'Open Sans', sans-serif;
	font-size: 30px;
	color: #f4f4f8;
	font-weight: 800;
	text-transform: uppercase;
}
.logo a img
{
	display: inline-block;
	vertical-align: baseline;
	margin-right: 9px;
	-webkit-transform: translateY(2px);
	-moz-transform: translateY(2px);
	-ms-transform: translateY(2px);
	-o-transform: translateY(2px);
	transform: translateY(2px);
}

/*********************************
3.3 Main Nav
*********************************/

.main_nav_container {
    margin-right: 0;
}

.main_nav_list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.main_nav_item a {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    /* text-transform: uppercase; */
    padding: 10px 0;
    position: relative;
    display: inline-block;
}

.main_nav_item a::after {
    content: '';
    display: block;
    position: absolute;
    left: -1px;
    bottom: -5px;
    width: calc(100% + 2px);
    height: 2px;
    background: #018ADA;
    opacity: 0;
    transition: all 200ms ease;
}

.main_nav_item a:hover::after {
    opacity: 1;
}

/* Optional: Hamburger icon spacing */
.hamburger {
    margin-left: 20px;
}

/* Hapus semua terkait search */
/* .content_search,
.search_form,
.mag_glass {
    display: none !important;
} */

/*********************************
3.4 Menu
*********************************/

.hamburger
{
	display: none;
	-webkit-transform: translateY(-3px);
	-moz-transform: translateY(-3px);
	-ms-transform: translateY(-3px);
	-o-transform: translateY(-3px);
	transform: translateY(-3px);
	cursor: pointer;
	margin-left: 20px;
}
.header.scrolled .hamburger
{
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}
.hamburger i
{
	font-size: 24px;
	color: #FFFFFF;
}
.hamburger:hover i
{
	color: #018ADA;
}
.menu
{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(to right, #018ADA, #001032);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
}
.menu.active
{
	opacity: 0.95;
	visibility: visible;
}
.menu_content
{
	width: 100%;
	height: 100%;
}
.menu_item
{
	position: relative;
	margin-bottom: 3px;
}
.menu_item:last-child
{
	margin-bottom: 0px;
}
.menu_logo
{
	margin-bottom: 28px;
}
.menu_logo a img
{
	width: 40px !important;
}
.menu_item a
{
	display: inline-block;
	position: relative;
	font-family: 'Beyond';
	font-size: 36px;
	color: #FFFFFF;
	font-weight: 400;
}
.menu_item a::after
{
	display: block;
	position: absolute;
	top: 60%;
	left: 0;
	width: 0;
	height: 4px;
	background: #FFFFFF;
	letter-spacing: 2px;
	content: '';
	z-index: 10;
	pointer-events: none;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 400ms ease;
}
.menu_item:hover a::after
{
	width: 100%;
}
.menu_close_container
{
	position: absolute;
	top: 94px;
	right: 122px;
	width: 21px;
	height: 21px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.menu_close
{
	top: 9px;
	width: 21px;
	height: 3px;
	background: #FFFFFF;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close::after
{
	display: block;
	position: absolute;
	top: -9px;
	left: 9px;
	content: '';
	width: 3px;
	height: 21px;
	background: #FFFFFF;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close_container:hover .menu_close,
.menu_close_container:hover .menu_close::after
{
	background: #fa9e1c;
}

/*********************************
4. Home
*********************************/

.home
{
	width: 100%;
	height: 100vh;
}


/*********************************
4.1 Home Slider
*********************************/

.home_slider_container
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: rgba(0, 0, 0, 0.6); 
}
.home_slider
{
	width: 100%;
	height: 100%;
}
.home_slider_item
{
	width: 100%;
	height: 100%;
}
.home_slider_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	opacity:0.5;
}
.home_slider_content
{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 11;
}
.home_slider_content h1
{
	margin-bottom: 0px;
}
.home_slider_content h1:first-child
{
	font-size: 45px;
	margin-top: 60px;
	font-weight: 1000;
	color: #001032;
}
.home_slider_content h1:nth-child(2)
{
	font-family: 'Beyond';
	font-size: 45px;
	color: #FFFFFF;
	margin-top: -34px;
}
.home_slider_button
{
	margin-top: 40px;
}
.flipInX
{
	animation-delay: 600ms;
}

/*********************************
4.2 Home Slider Nav
*********************************/

.home_slider_nav
{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 11;
	cursor: pointer;
}
.home_slider_prev
{
	left: 50px;
}
.home_slider_next
{
	right: 50px;
}
.home_slider_prev:hover .nav_path,
.home_slider_prev:hover .nav_arrow
{
	fill: url(#home_grad_prev);
}
.home_slider_next:hover .nav_arrow,
.home_slider_next:hover .nav_path
{
	fill: url(#home_grad_next);
}

/*********************************
4.3 Home Slider Dots
*********************************/

.home_slider_dots
{
	position: absolute;
	right: 50px;
	bottom: 45px;
	z-index: 10;
}
.home_slider_custom_dots
{

}
.home_slider_custom_dot
{
	display: inline-block;
	position: relative;
	height: 35px;
	line-height: 35px;
	color: #FFFFFF;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.home_slider_custom_dot:hover
{
	color: #ffffff;
}
.home_slider_custom_dot:hover.active div
{
	border-color: #001032;
}
.home_slider_custom_dot.active
{
	padding-left: 13px;
	padding-right: 9px;
	margin-right: 3px;
}
.home_slider_custom_dot div
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: solid 2px transparent;
	border-radius: 18px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.home_slider_custom_dot.active div
{
	border: solid 2px #FFFFFF;
}

/*********************************
5. Search
*********************************/

.search
{
	width: 100%;
	height: 192px;
	background: linear-gradient(to right, #001032, #018ADA);
	z-index: 10;
}
.search_tabs_container
{
	position: absolute;
	bottom: 100%;
	left: 15px;
	width: calc(100% - 30px);
}
.search_tabs
{
	height: 94px;
}
.search_tab
{
	font-size: 14px;
	font-weight: 700;
	color: #FFFFFF;
	text-align: center;
	height: 100%;
	flex-grow: 1;
	background: #018ADA;
	cursor: pointer;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.search_tab img {
  margin-left: 60px; /* ganti dari margin-right karena posisi di kanan */
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.search_tab:first-child
{
	border-top-left-radius: 94px;
	padding-left: 7px;
}
.search_tab:last-child
{
	border-top-right-radius: 94px;
	padding-right: 7px;
}
.search_tab.active
{
	background: #001032;
	color: #FFFFFF;
}
.search_tab.active img
{
	-webkit-filter: brightness(200%) grayscale(100%);
	-moz-filter: brightness(200%) grayscale(100%);
	-ms-filter: brightness(200%) grayscale(100%);
	-o-filter: brightness(200%) grayscale(100%);
  	filter: brightness(200%) grayscale(100%);
}
.search_tab:hover
{
	background: #001032;
	color: #FFFFFF;
}
.search_tab:hover img
{
	-webkit-filter: brightness(200%) grayscale(100%);
	-moz-filter: brightness(200%) grayscale(100%);
	-ms-filter: brightness(200%) grayscale(100%);
	-o-filter: brightness(200%) grayscale(100%);
  	filter: brightness(200%) grayscale(100%);
}
.search_panel
{
	display: flex;
	width: 100%;
	height: 100%;
	-webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
.search_panel_content
{
	width: 100%;
	height: 100%;
}
.search_input
{
	width: 100%;
	height: 46px;
	border: none;
	outline: none;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 13px;
	font-weight: 600;
	color: #929191;
}
.search_item:first-child
{
	width: 15%;
}
.search_item:nth-child(3)
{
	width: 25%;
}
.search_item:nth-child(5)
{
	width: 20.947%;
}
.search_item div
{
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF;
	/* text-transform: uppercase; */
	margin-bottom: 14px;
}
.dropdown_item_select
{
	-webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    appearance:none;
	-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	-webkit-user-select: none;
	background-image: url(../images/dropdown.webp);
	background-position: center right;
	background-repeat: no-repeat;
	border: solid 1px #FFFFFF;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}
.dropdown_item_select::-ms-expand
{
    display: none;
}
.dropdown_item_select:hover
{
	border: solid 1px #fa9e1c;
}
.dropdown_item_select:focus
{
	outline-color: #fa9e1c;
}
.search_button
{
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	/* text-transform: uppercase; */
	line-height: 53px;
	padding-left: 46px;
	padding-right: 46px;
	background: #001032;
	-webkit-transform: translateY(15px);
	-moz-transform: translateY(15px);
	-ms-transform: translateY(15px);
	-o-transform: translateY(15px);
	transform: translateY(15px);
	border: none;
	outline: none;
	cursor: pointer;
}
.search_button:hover
{
	opacity: 0.8;
}

@media (max-width: 768px) {
  .search_tab img {
    width: 24px;   /* Atur ukuran sesuai kebutuhan, misal 24px */
    height: auto;  /* biar proporsional */
  }
}

@media (max-width: 768px) {
  .search_panel_content {
    align-items: center !important;   /* pusatkan elemen secara horizontal */
    justify-content: center !important; /* pusatkan isi secara horizontal */
    flex-direction: column !important; /* tetap kolom agar responsive */
  }
  
  .search_panel_content > .search_item {
    width: 100%; /* biar input dan select full width di mobile */
    max-width: 400px; /* optional supaya input tidak terlalu lebar */
  }
  
  .search_panel_content > .search_button {
    align-self: center !important; /* pastikan button benar-benar di tengah */
    margin-top: 15px; /* beri jarak atas */
  }
}

/*********************************
6. Section Title
*********************************/

.section_title
{
	font-size: 30px;
	font-weight: 700;
	color: #2d2c2c;
	margin-top: -8px;
}

/*********************************
7. Intro
*********************************/

.intro
{
	width: 100%;
	padding-top: 100px;
	padding-bottom: 105px;
}
.intro_title
{
	font-weight: 700;
	color: #2d2c2c;
	margin-top: -14px;
}
.intro_text
{
	margin-top: 21px;
}
.intro_text p
{
	font-size: 24px;
	font-style: italic;
	color: #929191;
	line-height: 1.336;
	margin-bottom: 0px;
}
.intro_items
{
	margin-top: 69px;
}
.intro_item
{
	width: 100%;
	height: 425px;
}
.intro_item_overlay
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: rgba(49, 18, 75, 0.55);
}
.intro_item_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}
.intro_item_content
{
	width: 100%;
	height: 100%;
	z-index: 3;
}
.intro_date
{
	position: absolute;
	top: 35px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: auto;
	padding-left: 39px;
	padding-right: 39px;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 27px;
	background: #fa9e1c;
	border-radius: 14px;
}
.intro_button
{
	position: absolute;
	bottom: 51px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
.intro_center
{

}
.intro_center h1
{
	font-size: 59px;
	font-weight: 700;
	color: #FFFFFF;
	letter-spacing: -0.05em;
}
.intro_price
{
	font-size: 14px;
	font-weight: 400;
	color: #FFFFFF;
	margin-top: -4px;
}
.rating
{
	margin-top: 10px;
}
.rating i
{
	font-size: 19px;
	margin-right: 4px;
}
.rating i:last-child
{
	margin-right: 0px;
}
.rating_1 i:first-child{color: #ffeb8d;}
.rating_2 i:first-child{color: #ffeb8d;}
.rating_2 i:nth-child(2){color: #fed46b;}
.rating_3 i:first-child{color: #ffeb8d;}
.rating_3 i:nth-child(2){color: #fed46b;}
.rating_3 i:nth-child(3){color: #fbb53d;}
.rating_4 i:first-child{color: #ffeb8d;}
.rating_4 i:nth-child(2){color: #fed46b;}
.rating_4 i:nth-child(3){color: #fbb53d;}
.rating_4 i:nth-child(4){color: #fa9e1b;}
.rating_5 i:first-child{color: #ffeb8d;}
.rating_5 i:nth-child(2){color: #fed46b;}
.rating_5 i:nth-child(3){color: #fbb53d;}
.rating_5 i:nth-child(4){color: #fa9e1b;}
.rating_5 i:nth-child(5){color: #ef910a;}

  .section-title {
    background: linear-gradient(to right, #018ADA, #00c4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
  }

/*********************************
8. CTA
*********************************/

.cta
{
	padding-top: 125px;
	padding-bottom: 116px;
}
.cta_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

/*********************************
8.1 CTA Slider
*********************************/

.cta_slider_container
{

}
.cta_item {
	padding-top: 75px;
	padding-bottom: 61px;
	padding-left: 90px;
	padding-right: 90px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 16px;
}

.cta_title
{
	font-size: 30px;
	font-weight: 700;
	color: #000000;
}
.cta_text
{
	font-weight: 600;
	line-height: 2.29;
	margin-top: 14px;
	margin-bottom: 0px;
	color: #000000;
}
.cta_button
{
	margin-top: 38px;
}
.rating_r i::before
{
	font-family: 'FontAwesome';
	content: "\f006";
	font-style: normal;
	font-size: 19px;
	margin-right: 4px;
}
.cta_slider_nav
{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 10;
	cursor: pointer;
}
.cta_slider_prev
{
	left: -75px;
}
.cta_slider_next
{
	right: -75px;
}
.cta_slider_prev:hover .nav_path,
.cta_slider_prev:hover .nav_arrow
{
	fill: url(#cta_grad_prev);
}
.cta_slider_next:hover .nav_path,
.cta_slider_next:hover .nav_arrow
{
	fill: url(#cta_grad_next);
}

/*********************************
9. Offers
*********************************/

.section_title {
	font-size: 40px;
	font-weight: bold;
}

.offers {
	width: 100%;
	padding-top: 105px;
	padding-bottom: 43px;
	background: #ffffff;
	margin-bottom: 90px;
}

.offers_items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 90px;
}

.offers_item {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.offers_image_container {
	width: 100%;
	overflow: hidden;
}

.offers_image_container img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.article-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.article-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

.article-card img {
  transition: transform 0.4s ease;
}

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

.card-body {
  background-color: #ffffff !important;
  padding: 1rem !important;
}

.section_title {
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .article-card:hover {
    transform: none; 
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
  }
  .article-card:hover img {
    transform: none;
  }
}

@media (max-width: 767.98px) {
  /* Buat kolom full width tapi beri margin bawah */
  .col-md-4 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 1.5rem; /* jarak bawah antar card */
  }

  /* Pastikan card di dalam kolom ada padding dan margin yang cukup */
  .article-card {
    margin-bottom: 1rem; /* jarak internal card */
  }

  /* Kurangi padding container agar card gak terlalu melebar */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/*********************************
10. Testimonials
*********************************/

.testimoni-section {
	background-image: url('/images/testimoni.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.testimoni-section h2 {
	font-weight: 700;
	font-size: 2rem;
}

.testimoni-wrapper {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 1rem;
	margin: 0 auto;
	max-width: 100%;
}

.testimoni-wrapper::-webkit-scrollbar {
	height: 8px;
}

.testimoni-wrapper::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 10px;
}

.testimoni-card {
	background: transparent;
	flex: 0 0 auto;
	width: 350px;
	border-radius: 1rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	scroll-snap-align: start;
	-webkit-border-radius:;
	-moz-border-radius:;
	-ms-border-radius:;
	-o-border-radius:;
}

.testimoni-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.testimoni-card img {
	width: 100%;
	border-radius: 1rem;
	object-fit: cover;
}

/*********************************
11. Mengapa Harus Kami
*********************************/

  .about {
      background: url('/images/mengapakami.webp') no-repeat left center;
      background-size: contain;
      min-height: 500px;
      transition: background 0.5s ease-in-out;
    }

    /* Background dan styling untuk mobile */
    @media (max-width: 768px) {
      .about {
        background: url('/images/mengapakami-mobile2.webp') no-repeat center top;
        background-size: cover;
        min-height: 900px;
      }
    }

    /* Responsif font dan padding */
    @media (max-width: 1024px) {
      .about h2.section-title {
        font-size: 1.5rem !important;
      }

      .about p.section-title {
        font-size: 0.9rem !important;
      }

      .about .d-flex.p-4 {
        padding: 0.75rem !important;
      }
    }

	/* Default styling (desktop) */
.about h2.section-title {
  text-align: start;  /* kanan */
  font-size: 2.5rem;
}

.about p.section-title {
  font-size: 1.25rem;
  text-align: start; /* kiri */
}

/* Styling untuk mobile */
@media (max-width: 768px) {
  .about h2.section-title {
    text-align: center !important;
    font-size: 1.8rem !important;
  }

  .about p.section-title {
    text-align: center !important;
    font-size: 1.1rem !important;
  }
}

/*********************************
12. Contact
*********************************/

 .contact {
  position: relative;
  z-index: 1;
}

.contact_background {
	  background-image: url('/images/kontak.webp');
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

@media (max-width: 767.98px) {
  .contact_background {
    background-image: url('/images/kontakmobile.webp');
  }
  
  .col-lg-7 {
    max-width: 90% !important;
    flex: 0 0 90% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .contact_form_container {
    padding: 30px 20px !important;
    margin-top: 40px !important;
  }
}

.contact_form_container {
  position: relative;
  z-index: 2;
  padding: 60px 48px;
  border-radius: 12px;
  margin-top: 20px; /* margin default */
  max-width: 100%;
  box-sizing: border-box;
}

/* Margin lebih besar untuk layar laptop dan desktop */
@media (min-width: 992px) {
  .contact_form_container {
    margin-top: 100px !important;
    padding: 60px 48px;
  }
}

/* Responsive untuk tablet dan mobile */
@media (max-width: 991.98px) {
  .contact_form_container {
    padding: 40px 24px;
    margin-top: 40px !important;
    border-radius: 10px;
  }

  .contact_title {
    font-size: 24px;
  }

  .input_field,
  .contact_form_message {
    font-size: 14px;
    padding: 10px 12px;
    margin-top: 12px;
  }

  .form_submit_button {
    padding: 12px 28px;
    font-size: 14px;
    margin-top: 20px;
  }
}

/* Responsive untuk smartphone kecil */
@media (max-width: 480px) {
  .contact_form_container {
    padding: 30px 16px;
    margin-top: 30px !important;
    border-radius: 8px;
  }

  .contact_title {
    font-size: 20px;
  }

  .input_field,
  .contact_form_message {
    font-size: 13px;
    padding: 8px 10px;
    margin-top: 10px;
  }

  .form_submit_button {
    padding: 10px 24px;
    font-size: 13px;
    margin-top: 18px;
  }
}

.contact_title {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
  color: #000;
}

.input_field,
.contact_form_message {
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #000;
  font-size: 16px;
  margin-top: 16px;
  padding: 10px 14px;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
}

.input_field:focus,
.contact_form_message:focus {
  border: 1px solid #018ADA;
  background-color: #fff;
  outline: none;
}

.contact_form_message {
  resize: none;
  height: 120px;
}

.form_submit_button {
  margin-top: 30px;
  background-color: #018ADA;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.form_submit_button:hover {
  background-color: #016fb9;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


/*********************************
13. Social Media
*********************************/

 /* Styling untuk WhatsApp Widget */
        .whatsapp-widget {
            position: fixed;
            bottom: 90px;
            right: 20px;
            z-index: 1000;
        }

        .whatsapp-icon {
            background-color: #25D366;
            padding: 12px;
            border-radius: 50%;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }

        .whatsapp-icon:hover {
            transform: scale(1.1);
        }

        .whatsapp-icon img {
            width: 35px;
            height: 35px;
        }

        .whatsapp-content {
            display: none;
            position: absolute;
            bottom: 50px;
            right: 0;
            width: 250px;
            background: white;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            padding: 10px;
        }

        .whatsapp-content.active {
            display: block;
        }

        /* Styling untuk Instagram Widget */
        .instagram-widget {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 999;
        }

        .instagram-icon {
            background-color: #E4405F;
            padding: 12px;
            border-radius: 50%;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }

        .instagram-icon:hover {
            transform: scale(1.1);
        }

        .instagram-icon img {
            width: 35px;
            height: 35px;
        }

        .content-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .profile-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .chat-link {
            display: block;
            text-align: center;
            background: #25D366;
            color: white;
            padding: 8px;
            border-radius: 4px;
            text-decoration: none;
            margin-top: 10px;
            font-weight: bold;
        }

        .chat-link:hover {
            background: #1DA851;
        }

        @media (max-width: 600px) {
            .whatsapp-content {
                width: 250px;
            }

            .whatsapp-icon img {
                width: 35px;
                height: 35px;
            }

            .instagram-icon img {
                width: 35px;
                height: 35px;
            }
        }

/*********************************
13. Footer
*********************************/

.footer
{
	width: 100%;
	padding-top: 80px;
	padding-bottom: 104px;
	background: #018ADA;
}
.footer_title
{
	font-size: 15px;
	font-weight: 700;
	color: #FFFFFF;
	text-transform: uppercase;
}

/*********************************
13.1 Footer - About
*********************************/

.footer_about
{
	padding-top: 67px;
}
.footer_logo
{
	position: absolute;
	left: 0;
	top: -24px;
}
.footer_about_text
{
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
}
.footer_social_item
{
	display: inline-block;
	width: 31px;
	height: 31px;
	border: solid 1px #001032;
	border-radius: 50%;
	text-align: center;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	margin-right: 9px;
}
.footer_social_item:last-child
{
	margin-right: 0px;
}
.footer_social_item a
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.footer_social_item a i
{
	display: block;
	position: relative;
	color: #FFFFFF;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 12px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_social_item:hover
{
	background: #001032;
}
.footer_social_item:hover a i
{
	color: #FFFFFF;
}

/*********************************
13.2 Footer - Blog
*********************************/

.footer_blog
{
	margin-top: 39px;
}
.footer_blog_item
{
	margin-bottom: 21px;
}
.footer_blog_item:last-child
{
	margin-bottom: 0px;
}
.footer_blog_image
{
	width: 60px;
	height: 60px;
	float: left;
}
.footer_blog_image img
{
	width: 100%;
}
.footer_blog_content
{
	padding-left: 81px;
}
.footer_blog_title
{
	margin-top: -4px;
	padding-left: 1px;
}
.footer_blog_title a
{
	font-size: 14px;
	font-weight: 400;
	color: #FFFFFF;
}
.footer_blog_title a:hover
{
	color: #001032;
}
.footer_blog_date
{
	font-size: 12px;
	font-weight: 400;
	color: #001032;
	margin-top: 7px;
}

/*********************************
13.3 Footer - Tags
*********************************/

.footer_tags
{
	margin-top: 40px;
}
.tag_item
{
	height: 35px;
	float: left;
	margin-right: 9px;
	margin-bottom: 9px;
	border: solid 1px #FFFFFF;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.tag_item:hover
{
	background: #001032;
}
.tag_item a
{
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 33px;
	padding-left: 25px;
	padding-right: 25px;
}

/*********************************
13.4 Footer - Contact Info
*********************************/

.contact_info_list
{
	margin-top: 40px;
}
.contact_info_item
{
	margin-bottom: 22px;
}
.contact_info_icon
{
	width: 20px;
	height: 20px;
	margin-right: 10px;
	color: #FFFFFF;
}
.contact_info_icon img
{
	display: block;
	width: 100%;
}
.contact_info_text,
.contact_info_text a
{
	color: #FFFFFF;
	line-height: 2.14;
	margin-top: -4px;
}
.contact_info_item:hover .contact_info_text,
.contact_info_item:hover .contact_info_text a
{
	color: #001032;
}

/*********************************
14. Copyright
*********************************/

.copyright
{
	background: #001032;
}
.copyright_content
{
	height: 52px;
}
.copyright_content div
{
	font-size: 12px;
	font-weight: 600;
	color: #685677;
}
.footer_nav_container
{
	height: 52px;
}
.footer_nav
{
	
}
.footer_nav_list
{
	font-size: 0px;
}
.footer_nav_item
{
	display: inline-block;
	margin-right: 40px;
}
.footer_nav_item a
{
	font-size: 12px;
	font-weight: 600;
	color: #685677;
	text-transform: uppercase;
	line-height: 2;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_nav_item a:hover
{
	color: #FFFFFF;
}