html, body {
/* max-width: 100%; */
overflow-x: hidden;
}
:root {
--red: #D0021B;
--dark: #111111;
--white: #ffffff;
}
::-webkit-scrollbar {
display: none;
}
* {
-ms-overflow-style: none;
scrollbar-width: none;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
font-family: inherit;
}
body {
/* font-family: 'Plus Jakarta Sans', sans-serif; */
font-weight: 500;
font-size: 16px;
background: var(--white);
overflow-x: hidden;
}
.booking-widget-section {
padding: 100px 0;
position: relative;
}
/* =============================================
DESKTOP NAVBAR
============================================= */
.navbar-desktop {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.30);
}
.navbar-logo-bar {
width: 100%;
display: flex;
justify-content: center;
}
.logo-pill {
background: var(--white);
border-radius: 0 0 33px 33px;
padding: 16px 34px 16px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 22px rgba(0, 0, 0, .14);
text-decoration: none;
}
.Logo-nav {
height: 30px;
width: auto;
}
.Logo-nav-mobile{
height: 20px;
width: auto;
}
.Logo-nav-front {
height: 20px;
width: auto;
}
.navbar-menu-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 10px 0px 20px;
width: 100%;
}
.nav-item-dt {
position: relative;
}
.nav-item-dt>a,
.nav-item-dt>button {
/* font-family: 'Plus Jakarta Sans', sans-serif; */
font-size: 15px;
font-weight: 500;
color: var(--white);
background: none;
border: none;
padding: 0 40px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
white-space: nowrap;
transition: opacity .18s;
}
.nav-item-dt>a:hover,
.nav-item-dt>button:hover {
opacity: .72;
}
.nav-chevron {
font-size: 12px;
transition: transform .22s;
}
.d-chev {
font-size: 14px;
opacity: .6;
transition: transform .22s;
}
.nav-item-dt.open .nav-chevron {
transform: rotate(180deg);
}
.nav-item-dt.open .dt-dropdown {
display: block;
}
.btn-book {
background: #ED1B24 !important;
color: var(--white) !important;
border-radius: 50px !important;
padding: 9px 22px !important;
font-weight: 700 !important;
}
.btn-book:hover {
opacity: .85 !important;
}
.dt-dropdown {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 40px;
background: var(--white);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .13);
min-width: 215px;
padding: 6px 0;
z-index: 100;
}
.nav-item-dt.drop-right .dt-dropdown {
left: auto;
right: 40px;
}
.dt-dropdown a {
display: block;
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
color: var(--dark);
text-decoration: none;
white-space: nowrap;
transition: background .14s;
}
.dt-dropdown a:hover {
background: #f5f5f5;
}
.lang-btn-dt {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
color: var(--white);
background: none;
border: none;
cursor: pointer;
padding: 9px 10px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
}
.lang-dropdown {
min-width: 160px !important;
padding: 6px 0 !important;
}
.lang-option {
display: flex !important;
align-items: center;
gap: 10px;
padding: 10px 18px !important;
font-size: 14px;
font-weight: 600;
color: var(--dark) !important;
text-decoration: none;
transition: background .14s;
white-space: nowrap;
}
.lang-option:hover {
background: #f5f5f5 !important;
}
.lang-option.active {
background: #fef0f2;
}
.lang-option.active span:first-of-type {
color: var(--red);
}
.lang-option span:first-of-type {
font-weight: 700;
font-size: 13px;
min-width: 22px;
color: var(--dark);
}
.lang-name {
color: #777;
font-weight: 500;
font-size: 13px;
}
/* =============================================
MOBILE NAVBAR
============================================= */
.navbar-mobile {
display: none;
position: absolute;
z-index: 999;
align-items: center;
justify-content: space-between;
height: 64px;
width: 100%;
}
.mobile-logo-wrap {
background: none;
border-radius: 0 0 18px 0;
padding: 10px 22px 12px 12px;
display: flex;
align-items: center;
gap: 8px;
/* box-shadow: 2px 4px 16px rgba(0, 0, 0, .12); */
text-decoration: none;
height: 64px;
}
.mobile-logo-wrap-2 {
background: none;
/* border-radius: 0 0 18px 0; */
/* padding: 10px 22px 12px 16px; */
display: flex;
align-items: center;
gap: 8px;
/* box-shadow: 2px 4px 16px rgba(0, 0, 0, .12); */
text-decoration: none;
height: 64px;
}
.logo-rocky-sm {
font-weight: 800;
font-size: 20px;
color: var(--red);
font-style: italic;
text-transform: uppercase;
letter-spacing: -.5px;
line-height: 1;
display: block;
}
.logo-sub-sm {
font-size: 8px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #555;
display: block;
}
.hamburger {
background: none;
border: none;
display: flex;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 12px 18px;
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--white);
border-radius: 2px;
}
/* =============================================
MOBILE DRAWER
============================================= */
.drawer-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
z-index: 1998;
}
.drawer-overlay.show {
display: block;
}
.mobile-drawer {
position: fixed;
top: 0;
right: -100%;
width: min(320px, 88vw);
height: 100vh;
background: #000;
z-index: 1999;
transition: right .32s cubic-bezier(.4, 0, .2, 1);
overflow-y: auto;
}
.mobile-drawer.open {
right: 0;
}
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.drawer-close {
background: none;
border: none;
color: var(--white);
font-size: 20px;
cursor: pointer;
}
.drawer-row {
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.drawer-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px 20px;
color: var(--white);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 600;
background: none;
border: none;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background .14s;
}
.drawer-link:hover {
background: rgba(255, 255, 255, .05);
color: var(--white);
}
.d-chev.up {
transform: rotate(180deg);
}
.drawer-sub {
display: none;
background: rgba(255, 255, 255, .04);
}
.drawer-sub.open {
display: block;
}
.drawer-sub a {
display: block;
padding: 12px 20px 12px 34px;
color: rgba(255, 255, 255, .68);
font-size: 14px;
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, .05);
font-family: 'Plus Jakarta Sans', sans-serif;
transition: color .14s, background .14s;
}
.drawer-sub a:last-child {
border-bottom: none;
}
.drawer-sub a:hover {
color: var(--white);
background: rgba(255, 255, 255, .06);
}
/* =============================================
HERO
============================================= */
.hero-slick-wrap {
position: relative;
width: 100%;
height: 800px;
overflow: hidden;
}
.hero-slick {
height: 800px;
}
.hero-slick .hero-slide {
position: relative;
width: 100%;
height: 800px !important;
overflow: hidden;
background: #091628;
}
.hero-slick .hero-slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
object-position: center;
}
.hero-slick-wrap .slick-list,
.hero-slick-wrap .slick-track {
height: 800px !important;
}
.hero-slick-wrap .slick-slide>div {
height: 800px;
}
.hero-slick-wrap .slick-dots {
bottom: 24px;
z-index: 10;
}
.hero-slick-wrap .slick-dots li button:before {
color: #fff;
font-size: 10px;
opacity: 0.55;
}
.hero-slick-wrap .slick-dots li.slick-active button:before {
color: #fff;
opacity: 1;
}
.hero-slick-wrap .slick-prev,
.hero-slick-wrap .slick-next {
z-index: 10;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 50%;
backdrop-filter: blur(4px);
transition: background .2s;
top: 50%;
transform: translateY(-50%);
}
.hero-slick-wrap .slick-prev {
left: 20px;
}
.hero-slick-wrap .slick-next {
right: 20px;
}
.hero-slick-wrap .slick-prev:hover,
.hero-slick-wrap .slick-next:hover {
background: rgba(255, 255, 255, 0.30) !important;
}
.hero-slick-wrap .slick-prev:before,
.hero-slick-wrap .slick-next:before {
display: none;
}
.hero-slick-wrap .slick-prev:after,
.hero-slick-wrap .slick-next:after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 18px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hero-slick-wrap .slick-prev:after {
content: "\f060";
}
.hero-slick-wrap .slick-next:after {
content: "\f061";
}
.hero-section {
position: relative;
width: 100%;
height: 800px;
overflow: hidden;
background: #091628;
}
.hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-vignette {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .04) 55%, rgba(0, 0, 0, .18) 100%);
}
/* Hero Banner */
.hero-banner {
position: relative;
width: 100%;
height: 420px;
background-image: url('/Assets-RFC/banner\ FAQ.jpg');
/* ganti dengan path foto kapalmu */
background-size: cover;
background-position: 0 -66px;
display: flex;
align-items: center;
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.10);
}
.hero-banner .container {
position: relative;
z-index: 1;
}
.hero-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 62px;
font-weight: 700;
color: #ffffff;
letter-spacing: -1px;
margin: 0;
}
.hero-banner .container {
position: relative;
z-index: 1;
height: 100%;
}
.hero-title-wrap {
position: relative;
top: 58px;
/* naik turunkan nilai ini sesuai kebutuhan */
height: 100%;
}
@media (max-width: 768px) {
.hero-banner {
height: 280px;
background-position: 0;
}
.hero-title{
font-size: 40px;
}
.hero-title-wrap {
top: 0;
}
}
/* =============================================
WHY CHOOSE SECTION
============================================= */
.why-section {
padding: 0px 0 80px 0;
position: relative;
overflow: hidden;
}
.why-title {
font-size: 48px;
font-weight: 500;
font-style: italic;
background: linear-gradient(to right, #ED1B24 60%, #1E0001 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.15;
max-width: 1200px;
margin-bottom: 10px;
}
.why-desc {
font-size: 14px;
color: #999999;
max-width: 1200px;
line-height: 1.7;
margin-bottom: 10px;
}
.why-socials {
display: flex;
gap: 16px;
margin-bottom: 82px;
}
.why-socials a {
color: var(--dark);
font-size: 28px;
transition: color .18s;
text-decoration: none;
}
.why-socials a:hover {
color: var(--red);
}
.why-cards-wrap {
position: relative;
width: 100%;
overflow: visible;
}
.why-card {
background: #ED1B24;
border-radius: 20px;
padding: 24px 28px;
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 0;
margin: 0 8px;
min-height: 258px;
transition: background .2s ease;
overflow: hidden;
}
.why-card-top {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
background: #ffffff;
border-radius: 20px;
padding: 10px 20px 10px 10px;
margin-bottom: 20px;
width: 100%;
min-width: unset;
}
.why-cards-slick .slick-slide:first-child .why-card {
margin-left: 0;
}
.why-cards-slick .slick-slide:last-child .why-card {
margin-right: 0;
}
.why-card-icon {
width: 50px;
height: 50px;
min-width: 50px;
background: none;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.why-card-icon img {
width: 45px;
height: 45px;
object-fit: contain;
}
.why-card-top h4 {
font-size: 18px;
font-weight: 700;
color: var(--red);
margin: 0;
line-height: 1.2;
}
.why-card-body {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 1;
width: 100%;
}
.why-card-body h4 {
display: none;
}
.why-card-body p {
font-size: 15px;
color: rgba(255, 255, 255, 0.90);
line-height: 1.6;
text-align: left;
margin: 0;
}
.why-cards-wrap .slick-prev,
.why-cards-wrap .slick-next {
z-index: 10;
width: 40px;
height: 40px;
background: #ffffff !important;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
transition: background .2s;
}
.why-cards-wrap .slick-prev {
left: 20px;
}
.why-cards-wrap .slick-next {
right: 20px;
}
.why-cards-wrap .slick-prev:hover,
.why-cards-wrap .slick-next:hover {
background: rgb(224, 224, 224) !important;
}
.why-cards-wrap .slick-prev:before,
.why-cards-wrap .slick-next:before {
display: none;
}
.why-cards-wrap .slick-prev:after,
.why-cards-wrap .slick-next:after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 14px;
color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.why-cards-wrap .slick-prev:after {
content: "\f060";
}
.why-cards-wrap .slick-next:after {
content: "\f061";
}
.why-cards-wrap .slick-dots {
bottom: -32px;
}
.why-cards-wrap .slick-dots li button:before {
font-size: 8px;
color: #ccc;
opacity: 1;
}
.why-cards-wrap .slick-dots li.slick-active button:before {
color: var(--red);
opacity: 1;
}
.why-aksen-garis {
position: absolute;
top: -67px;
right: 0;
width: 340px;
height: auto;
pointer-events: none;
z-index: 0;
}
.why-section .container-fluid,
.why-section .why-cards-wrap {
position: relative;
z-index: 1;
}
/* =============================================
PROMO BANNER SECTION
============================================= */
.promo-section {
margin-top: 60px;
}
/* .exc-offers-title {
font-size: 48px;
font-weight: 500;
font-style: italic;
background: linear-gradient(to right, #ED1B24 50%, #1E0001 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
margin-bottom: 0;
padding-bottom: 40px;
} */
.promo-slick-wrap {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
}
.promo-slick {
height: 600px;
}
.promo-slick-wrap .slick-dots {
display: none !important;
}
.promo-slick .promo-slide {
position: relative;
width: 100%;
height: 600px !important;
overflow: hidden;
background: #091628;
}
.promo-slick .promo-slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
object-position: center;
}
.promo-slick-wrap .slick-list,
.promo-slick-wrap .slick-track {
height: 600px !important;
}
.promo-slick-wrap .slick-slide>div {
height: 600px;
}
.promo-slick-wrap .slick-prev,
.promo-slick-wrap .slick-next {
z-index: 10;
width: 48px;
height: 48px;
background: rgb(255, 255, 255) !important;
border-radius: 50%;
backdrop-filter: blur(4px);
transition: background .2s;
top: 50%;
transform: translateY(-50%);
}
.promo-slick-wrap .slick-prev {
left: 20px;
}
.promo-slick-wrap .slick-next {
right: 20px;
}
.promo-slick-wrap .slick-prev:hover,
.promo-slick-wrap .slick-next:hover {
background: rgba(255, 255, 255, 0.30) !important;
}
.promo-slick-wrap .slick-prev:before,
.promo-slick-wrap .slick-next:before {
display: none;
}
.promo-slick-wrap .slick-prev:after,
.promo-slick-wrap .slick-next:after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 18px;
color: #000000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.promo-slick-wrap .slick-prev:after {
content: "\f060";
}
.promo-slick-wrap .slick-next:after {
content: "\f061";
}
/* =============================================
PRIVATE CHARTER SECTION
============================================= */
.private-charter-section {
padding: 80px 0 100px;
background: #f5f5f5;
}
.charter-title {
font-size: 48px;
font-weight: 500;
font-style: italic;
background: linear-gradient(to right, #ED1B24 50%, #1E0001 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
margin-bottom: 0;
}
.charter-card {
background: #ffffff;
border-radius: 20px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.charter-img-wrap {
overflow: hidden;
height: 100%;
min-height: 320px;
display: flex;
}
.charter-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.charter-content {
padding: 36px 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
min-height: 300px;
}
.charter-content-top {
flex: 1;
}
.charter-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.charter-name {
font-size: 20px;
font-weight: 600;
color: #000000;
letter-spacing: 0.3px;
margin-bottom: 6px;
}
.charter-subtitle {
font-size: 16px;
color: #999999;
font-weight: 500;
margin-bottom: 0;
line-height: 1.5;
}
.charter-capacity {
padding: 6px 14px;
white-space: nowrap;
font-size: 13px;
font-weight: 600;
color: var(--dark);
flex-shrink: 0;
}
.charter-desc {
font-size: 16px;
color: #999999;
line-height: 1.7;
margin-bottom: 0;
}
.charter-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #f0f0f0;
}
.charter-price-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.charter-price-label {
font-size: 14px;
color: #888888;
font-weight: 400;
}
.charter-price {
font-size: 22px;
font-weight: 700;
color: var(--dark);
}
.btn-choose-package-homepage {
display: inline-block;
padding: 12px 28px;
border: 1px solid var(--red);
border-radius: 10px;
color: var(--red);
font-size: 14px;
font-weight: 700;
text-decoration: none;
background: transparent;
transition: background .2s, color .2s;
white-space: nowrap;
}
.btn-choose-package-homepage:hover {
background: var(--red);
color: #fff;
}
.charter-scroll-btn {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--red);
border: none;
color: #fff;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s, transform .2s;
box-shadow: 0 4px 16px rgba(208, 2, 27, 0.3);
}
.charter-scroll-btn:hover {
background: #ED1B24;
transform: translateY(3px);
}
.charter-card .row.g-0 {
padding: 0 !important;
}
/* PARTNERS */
.partners-section {
padding: 80px 0 100px;
background: #fff;
}
.partners-title {
font-size: 52px;
font-weight: 500;
font-style: italic;
background: linear-gradient(to right, #ED1B24 50%, #1E0001 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
margin-bottom: 40px;
}
.partner-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.partner-img-wrap {
width: 100%;
aspect-ratio: 1/1;
border-radius: 20px;
overflow: hidden;
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
}
.partner-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.partner-img-wrap:hover img {
transform: scale(1.04);
}
.partner-name {
font-size: 16px;
font-weight: 500;
color: var(--dark);
text-align: center;
margin: 0;
padding-top: 10px;
}
.btn-see-all {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
background: var(--red);
color: #fff;
border: none;
border-radius: 50px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background .2s, transform .2s;
box-shadow: 0 4px 16px rgba(208, 2, 27, 0.25);
}
.btn-see-all:hover {
background: #b50018;
color: #fff;
transform: translateY(-1px);
}
@media (max-width: 767px) {
.partners-title {
font-size: 36px;
margin-bottom: 0px;
margin-top: 60px;
}
.btn-see-all {
margin-bottom: 30px;
}
}
.partners-extra {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.4s ease, margin-top 0.4s ease, opacity 0.4s ease;
margin-top: 0;
opacity: 0;
}
.partners-extra > * {
min-height: 0;
overflow: hidden;
}
.partners-extra.show {
grid-template-rows: 1fr;
margin-top: 24px;
opacity: 1;
}
.btn-see-all.active {
background: #ED1B24;
}
.btn-see-all.active:hover {
background: #b50018;
}
/* =============================================
GALLERY SECTION
============================================= */
.gallery-section {
padding: 80px 0;
background: #f5f5f5;
overflow: hidden;
}
.gallery-section .container-fluid {
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
}
.gallery-slick-wrap {
position: relative;
width: 100%;
}
.gallery-slick-wrap .slick-list {
overflow: visible !important;
}
.gallery-slick .gallery-slide {
padding: 0 12px;
}
.gallery-slide-inner {
overflow: hidden;
position: relative;
width: 100%;
height: 422px;
background: #111;
transform: scale(0.70);
transition: transform .55s cubic-bezier(.4, 0, .2, 1),
opacity .55s cubic-bezier(.4, 0, .2, 1),
height .55s cubic-bezier(.4, 0, .2, 1);
}
.gallery-slick .slick-center .gallery-slide-inner {
/* height: 422px; */
opacity: 1;
transform: scale(1);
}
.gallery-slide-inner img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* placeholder untuk preview */
.gallery-slide-inner .gallery-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 1px;
}
/* Arrows */
.gallery-slick-wrap .slick-prev,
.gallery-slick-wrap .slick-next {
z-index: 10;
width: 48px;
height: 48px;
background: #ffffff !important;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
transition: background .2s;
}
.gallery-slick-wrap .slick-prev {
left: 20px;
}
.gallery-slick-wrap .slick-next {
right: 20px;
}
.gallery-slick-wrap .slick-prev:hover,
.gallery-slick-wrap .slick-next:hover {
background: #f0f0f0 !important;
}
.gallery-slick-wrap .slick-prev:before,
.gallery-slick-wrap .slick-next:before {
display: none;
}
.gallery-slick-wrap .slick-prev:after,
.gallery-slick-wrap .slick-next:after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 16px;
color: #111;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.gallery-slick-wrap .slick-prev:after {
content: "\f060";
}
.gallery-slick-wrap .slick-next:after {
content: "\f061";
}
.gallery-slick-wrap .slick-dots {
display: none !important;
}
.gallery-slick-wrap::before,
.gallery-slick-wrap::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 22%;
/* sesuaikan dengan centerPadding */
z-index: 5;
pointer-events: none;
}
.gallery-slick-wrap::before {
left: -10px;
/* sesuaikan dengan centerPadding negatif */
background: linear-gradient(to right, #f5f5f5 0%, transparent 70%);
}
.gallery-slick-wrap::after {
right: -10px;
/* sesuaikan dengan centerPadding negatif */
background: linear-gradient(to left, #f5f5f5 0%, transparent 70%);
}
/* =============================================
title section
============================================= */
.vessel-intro-section {
background: #ffffff;
padding: 60px 0 10px;
/* border-bottom: 1px solid #f0f0f0; */
}
.vessel-intro-title {
font-size: 48px;
font-weight: 500;
font-style: italic;
background: linear-gradient(to right, #ED1B24 40%, #1E0001 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
margin-bottom: 0;
}
.vessel-intro-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 1.7;
margin: 0 auto;
/* max-width: 780px; */
}
@media (max-width: 768px) {
.vessel-intro-title {
font-size: 24px;
}
.vessel-intro-desc {
font-size: 14px;
}
.vessel-intro-section {
padding: 40px 0 15px;
}
}
.timetable-desc-section {
background: #fff;
padding: 0 0 50px;
}
.timetable-desc-text {
font-size: 16px;
font-weight: 400;
color: #999999;
line-height: 1.75;
text-align: center;
margin-bottom: 28px;
}
.timetable-desc-text:last-child {
margin-bottom: 0;
}
/* =============================================
SECTION - Timetable Cards
============================================= */
.timetable-cards-section {
background: #f2f2f2;
padding: 60px 0 70px;
}
/* Wrapper tengah untuk dua card — tidak full container */
.timetable-cards-inner {
display: flex;
flex-direction: row;
gap: 20px;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
}
.timetable-card {
background: #fff;
border: 1.5px solid #d8d8d8;
border-radius: 10px;
padding: 28px 28px 32px;
flex: 1;
min-width: 0;
max-width: 520px;
}
/* Wrapper teks judul + subtitle — JANGAN overflow hidden, biarkan wrap */
.timetable-card-title-wrap {
min-width: 0;
overflow: visible;
flex: 1;
}
.timetable-card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 6px;
/* justify-content: center; */
}
.timetable-card-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
object-fit: contain;
}
/* Judul pakai FA icon inline jika tidak ada img */
.timetable-icon-fa {
font-size: 38px;
color: #ED1B24;
flex-shrink: 0;
line-height: 1;
margin-top: 2px;
}
.timetable-card-title {
font-size: 24px;
font-weight: 500;
font-style: italic;
background: linear-gradient(to right, #ED1B24 40%, #1E0001 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin-bottom: 6px;
}
.timetable-card-subtitle {
font-size: 14px;
font-weight: 400;
color: #999999;
margin: 0;
}
.timetable-times {
display: flex;
flex-wrap: wrap;
gap: 29px;
}
.timetable-time-badge {
border: 1.5px solid #d0d0d0;
border-radius: 10px;
padding: 10px 10px;
font-size: 15px;
font-weight: 600;
color: #111111;
background: #fff;
white-space: nowrap;
}
@media (max-width: 767px) {
.timetable-desc-section {
padding: 0 0 36px;
}
.timetable-desc-text {
font-size: 12px;
margin-bottom: 20px;
}
.timetable-cards-section {
padding: 36px 0 48px;
}
.timetable-cards-inner {
flex-direction: column;
flex-wrap: wrap;
}
.timetable-card {
max-width: 100%;
padding: 20px;
}
.timetable-card-title {
font-size: 18px;
}
.timetable-time-badge {
font-size: 13px;
padding: 8px 12px;
}
.timetable-times{
gap: 8px;
}
.timetable-time-badge {
border: 1.5px solid #d0d0d0;
border-radius: 10px;
padding: 10px 10px;
font-size: 12px;
font-weight: 400;
color: #000000;
background: #fff;
white-space: nowrap;
}
.timetable-card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 15px;
/* justify-content: center; */
}
.timetable-card-icon{
width: 30px;
height: 30px;
}
}
/* =============================================
SECTION - Fares
============================================= */
.fares-section {
background-color: #ffffff !important;
}
.card-fare {
background: #fff;
border-radius: 10px;
padding: 20px;
}
/* TAMBAHKAN INI - override display:grid yang lama */
.fare-header {
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 20px 20px 0;
background: #fff;
margin-bottom: 0;
}
/* Fare rows — di dalam .fare-header */
.fare-row {
padding: 20px 0;
border-bottom: 1px solid #ebebeb;
}
.fare-row:last-child {
border-bottom: none;
}
.fare-mid,
.fare-right {
text-align: left;
}
.icon-img {
width: 22.5px;
height: 30px;
object-fit: contain;
}
.icon-img-special {
width: 22.5px;
height: 30px;
object-fit: contain;
rotate: 90deg;
}
.header-left {
display: flex;
align-items: center;
gap: 12px;
color: #ef2026;
font-size: 20px;
font-weight: 600;
}
/* Label pasenger — hitam, tidak bold */
.fare-label {
font-size: 15px;
font-weight: 400;
color: #222222;
}
/* Harga — hitam, tidak merah */
.fare-price {
font-size: 15px;
font-weight: 400;
color: #222222;
text-align: center;
}
/* Notes bullet — di bawah fare rows */
.header-notes {
border-top: 1px solid #ebebeb;
padding: 16px 0 20px;
}
.header-notes ul {
margin: 0;
padding-left: 18px;
}
.header-notes li {
color: #555555;
font-size: 14px;
font-weight: 400;
line-height: 1.8;
}
/* Card wrapper — tambah gap antar card */
.card-fare {
background: #fff;
border-radius: 12px;
padding: 0;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.header-left {
font-size: 14px;
}
.fare-header .fare-column-title {
font-size: 13px;
}
.fare-label,
.fare-price {
font-size: 12px;
}
.header-notes li {
font-size: 11px;
}
}
/* ================= NOTES SECTION ================= */
.notes-wrapper {
background: #f0efef;
padding: 60px 0;
}
.notes-section {
max-width: 1040px;
margin: auto;
}
.note-title {
font-weight: 500;
margin-bottom: 10px;
}
.note-list {
color: #999;
padding-left: 20px;
line-height: 1.8;
}
.terms-title {
font-size: 16px;
line-height: 24px;
font-weight: 400;
margin-top: 20px;
}
.terms-desc {
font-size: 16px;
line-height: 24px;
color: #999;
}
.terms-desc a {
color: red;
text-decoration: underline;
}
/* ALERT BOX */
.alert-box {
background: #f8d7da;
border-radius: 20px;
padding: 20px 25px;
margin-top: 30px;
}
.alert-icon {
width: 22.5px;
height: 30px;
object-fit: contain;
}
.alert-text {
color: #e53935;
font-size: 14px;
line-height: 1.6;
}
/* =============================================
SECTION - VESSEL CARDS
============================================= */
.vessel-cards-section {
background: #f5f5f3;
padding: 40px 0;
}
.vessel-cards-section .container {
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
}
/* Each vessel row = white card with red border */
.vessel-row-card {
background: #ffffff;
border: 1.5px solid #D0021B;
border-radius: 16px;
overflow: hidden;
margin-bottom: 28px;
display: flex;
flex-direction: row;
min-height: 300px;
}
.vessel-row-card:last-child {
margin-bottom: 0;
}
/* Image side */
.vessel-img-col {
position: relative;
flex: 0 0 50%;
max-width: 50%;
overflow: hidden;
line-height: 0;
}
.vessel-img-wrap {
position: relative;
width: 100%;
height: 100%;
min-height: 280px;
}
.vessel-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
min-height: 280px;
}
.vessel-badge {
position: absolute;
bottom: 16px;
left: 16px;
background: #ffffff;
border-radius: 50px;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 8px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--red);
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
line-height: 1;
}
.seat-icon {
width: 18px;
height: 18px;
object-fit: contain;
}
/* Info side */
.vessel-info-col {
flex: 0 0 50%;
max-width: 50%;
padding: 32px 36px;
display: flex;
flex-direction: column;
justify-content: center;
background: #ffffff;
}
.vessel-name {
font-size: 42px;
font-weight: 500;
font-style: italic;
background: linear-gradient(to right, #ED1B24 20%, #1E0001 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
margin-bottom: 30px;
}
/* "Rocky" part = red italic */
.vessel-name-rocky {
color: #D0021B;
}
/* Number/suffix part = dark italic */
.vessel-name-num {
color: #111111;
font-weight: 400;
}
/* Specs grid: two columns */
.vessel-specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 20px;
}
.vessel-spec-col {
list-style: none;
padding: 0;
margin: 0;
}
.vessel-spec-col li {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 400;
color: #999999;
line-height: 1.9;
padding-left: 14px;
position: relative;
}
.vessel-spec-col li::before {
content: '•';
position: absolute;
left: 0;
color: #999999;
font-size: 13px;
}
/* Coming soon variant */
.vessel-desc-coming {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 400;
color: #999999;
line-height: 1.7;
margin-bottom: 0;
}
/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
.vessel-row-card {
flex-direction: column;
min-height: auto;
}
.vessel-img-col,
.vessel-info-col {
flex: 0 0 100%;
max-width: 100%;
}
.vessel-img-wrap,
.vessel-img {
min-height: 220px;
}
.vessel-info-col {
padding: 24px 20px;
}
.vessel-name {
font-size: 28px;
margin-bottom: 14px;
}
.vessel-spec-col li {
font-size: 12px;
}
.vessel-specs {
grid-template-columns: 1fr 1fr;
gap: 0 12px;
}
}
/* =============================================
SECTION - BAGGAGE
============================================= */
.baggage-section {
padding: 0 0 60px;
background: #fff;
}
/* Alert box — light pink background, full width di dalam container */
.baggage-alert-box {
display: flex;
align-items: center;
gap: 16px;
background: #ED1B241A;
border-radius: 20px;
padding: 30px 20px;
margin-bottom: 30px;
width: 100%;
}
.baggage-alert-icon {
width: 34px;
height: 34px;
min-width: 34px;
background: #ED1B24;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.baggage-alert-icon i {
color: #fff;
font-size: 15px;
font-weight: 900;
}
.baggage-alert-label {
/* font-family: 'Plus Jakarta Sans', sans-serif; */
font-size: 16px;
font-weight: 400;
color: #ED1B24;
margin: 0;
line-height: 1;
}
/* Bullet list */
.baggage-list {
list-style: disc;
padding-left: 22px;
margin-bottom: 22px;
}
.baggage-list li {
/* font-family: 'Plus Jakarta Sans', sans-serif; */
font-size: 16px;
font-weight: 400;
color: #999999;
line-height: 24px;
margin-bottom: 4px;
}
/* Paragraph description */
.baggage-desc {
/* font-family: 'Plus Jakarta Sans', sans-serif; */
font-size: 16px;
font-weight: 400;
color: #999999;
line-height: 24px;
margin-bottom: 0px;
}
/* Search bar — full width, pill shape, red border */
.baggage-search-wrap {
position: relative;
width: 100%;
}
.baggage-search-icon {
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
color: #ED1B24;
font-size: 16px;
pointer-events: none;
}
.baggage-search-input {
width: 100%;
height: 56px;
border: 1.8px solid #ED1B24;
border-radius: 10px;
padding: 0 28px 0 52px;
/* font-family: 'Plus Jakarta Sans', sans-serif; */
font-size: 16px;
color: #333;
outline: none;
background: #fff;
transition: box-shadow .18s;
}
.baggage-search-input::placeholder {
color: #bbb;
}
.baggage-search-input:focus {
box-shadow: 0 0 0 3px rgba(237,27,36,.10);
}
@media (max-width: 768px) {
.baggage-alert-label { font-size: 14px; }
.baggage-list li { font-size: 13px; }
.baggage-desc { font-size: 13px; }
.baggage-search-input { height: 50px; font-size: 14px; }
.baggage-section { padding: 0 0 40px; }
}
/* ===== PICKUP / DROP TABLE ===== */
.pickup-drop-section {
padding: 20px 0;
}
.pickup-table-wrapper {
/* border: 2px solid #e0e0e0; */
/* border-radius: 10px; */
overflow: hidden;
}
.pickup-table-header,
.pickup-table-row {
display: flex;
align-items: center;
padding: 14px 20px;
}
.pickup-table-header {
border: 1px solid #999999;
border-radius: 10px;
background-color: #ffffff;
}
.pickup-table-row {
border-bottom: 1px solid #999999;
font-size: 14px;
color: #222;
}
.pickup-table-row:last-child {
border-bottom: none;
}
.col-label-red {
color: #e31b23;
font-weight: 700;
font-size: 15px;
}
.col-pickup-place { flex: 5; }
.col-pickup-price { flex: 1.5; text-align: center; }
.col-pickup-cap { flex: 1.5; text-align: center; }
.col-pickup-time { flex: 1.5; text-align: right; }
.pickup-bold { font-weight: 700; }
.time-estimation {
font-weight: 400;
font-size: 12px;
}
.pickup-icon {
width: 14px;
height: 14px;
vertical-align: middle;
margin-left: 0px;
margin-bottom: 2px;
}
/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 767px) {
.pickup-table-header,
.pickup-table-row {
padding: 12px 10px;
gap: 6px;
}
.col-label-red {
font-size: 11px;
}
.pickup-table-row {
font-size: 10px;
}
.time-estimation {
display: block;
font-size: 9px;
line-height: 1.2;
}
.pickup-icon {
width: 11px;
height: 11px;
}
/* Sesuaikan flex ratio di mobile */
.col-pickup-place { flex: 3; }
.col-pickup-price { flex: 2; text-align: center; }
.col-pickup-cap { flex: 2; text-align: center; }
.col-pickup-time { flex: 1.5; text-align: right; }
}
/* =============================================
SECTION - lifejacket
============================================= */
.lifejacket-section {
background: #ffffff;
padding: 0 0 20px;
position: relative;
}
.lifejacket-section-bottom{
background: #f6f6f6;
padding: 44px 0 60px;
position: relative;
}
/* Instruksi image card */
.lifejacket-img-wrap {
/* border-radius: 16px; */
overflow: hidden;
/* box-shadow: 0 4px 24px rgba(0,0,0,0.10); */
margin-bottom: 48px;
}
.lifejacket-img-wrap img {
width: 100%;
height: auto;
display: block;
}
/* Judul Watch Video — sama persis dengan .vessel-intro-title */
.lifejacket-video-title {
font-size: 48px;
font-weight: 500;
font-style: italic;
background: linear-gradient(to right, #ED1B24 40%, #1E0001 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
margin-bottom: 32px;
text-align: center;
}
/* Video wrapper */
.lifejacket-video-wrap {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.lifejacket-video-inner {
width: 100%;
max-width: 500px;
border-radius: 0px;
overflow: hidden;
/* box-shadow: 0 4px 24px rgba(0,0,0,0.10); */
background: #f5f5f5;
}
.lifejacket-video-inner video {
width: 100%;
height: auto;
display: block;
border-radius: 0px;
}
/* Search bar — sama persis dengan .baggage-search-wrap */
.lifejacket-search-wrap {
position: relative;
width: 100%;
}
.lifejacket-search-icon {
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
color: #ED1B24;
font-size: 16px;
pointer-events: none;
}
.lifejacket-search-input {
width: 100%;
height: 56px;
border: 1.8px solid #ED1B24;
border-radius: 10px;
padding: 0 28px 0 52px;
font-size: 16px;
color: #333;
outline: none;
background: #fff;
transition: box-shadow .18s;
}
.lifejacket-search-input::placeholder {
color: #bbb;
}
.lifejacket-search-input:focus {
box-shadow: 0 0 0 3px rgba(237,27,36,.10);
}
/* Responsive */
@media (max-width: 768px) {
.lifejacket-section {
padding: 0 0 40px;
}
.lifejacket-section-bottom{
background: #f6f6f6;
padding: 40px 0 40px;
position: relative;
}
.lifejacket-video-title {
font-size: 24px;
}
.lifejacket-img-wrap {
border-radius: 12px;
margin-bottom: 36px;
}
.lifejacket-video-inner {
max-width: 100%;
}
.lifejacket-search-input {
height: 50px;
font-size: 16px;
}
}
/* =============================================
SECTION - PHOTO GALLERY GRID
============================================= */
.gallery-section-2 {
background: #f6f6f6;
padding: 50px 0 40px;
}
.gallery-img-wrap {
overflow: hidden;
border-radius: 12px;
aspect-ratio: 1 / 1;
margin-bottom: 16px;
}
.gallery-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.gallery-img-wrap:hover img {
transform: scale(1.05);
}
.btn-instagram {
display: inline-flex;
align-items: center;
gap: 9px;
background: #ED1B24;
color: var(--white);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 50px;
padding: 11px 28px;
text-decoration: none;
cursor: pointer;
transition: opacity 0.18s;
}
.btn-instagram:hover {
opacity: 0.85;
color: var(--white);
}
.btn-instagram img {
width: 18px;
height: 18px;
object-fit: contain;
}
@media (max-width: 768px) {
.gallery-section-2 {
padding: 36px 0 70px;
}
.btn-instagram {
display: inline-flex;
align-items: center;
gap: 9px;
background: #ED1B24;
color: var(--white);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 10px;
font-weight: 600;
border: none;
border-radius: 50px;
padding: 10px 15px;
text-decoration: none;
cursor: pointer;
transition: opacity 0.18s;
}
.btn-instagram img {
width: 14px;
height: 14px;
object-fit: contain;
}
}
/* =============================================
SECTION - PACKAGES
============================================= */
.packages-section {
background: #f7f7f7;
padding: 0px 0 20px;
position: relative;
overflow: hidden;
}
.packages-section-title {
font-size: 46px;
font-weight: 400;
font-style: italic;
background: linear-gradient(to right, #ED1B24 50%, #1E0001 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
text-align: center;
margin-bottom: 36px;
}
.packages-accent-img {
position: absolute;
bottom: 228px;
left: 0;
width: 200px;
pointer-events: none;
z-index: 0;
opacity: 0.85;
}
.package-card {
background: var(--white);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 2px 18px rgba(0,0,0,0.07);
transition: transform 0.25s ease, box-shadow 0.25s ease;
position: relative;
z-index: 1;
}
.package-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0,0,0,0.13);
}
.package-card-img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.package-card-body {
padding: 18px 20px 22px;
}
.package-card-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
color: #ED1B24;
text-transform: uppercase;
margin-bottom: 6px;
}
.package-card-price {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 500;
color: #222;
margin-bottom: 16px;
}
.package-card-price span {
font-weight: 400;
color: #888;
font-size: 13px;
}
.btn-choose-package {
display: block;
width: 100%;
background: #ED1B24;
color: var(--white);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 8px;
padding: 11px 0;
text-align: center;
cursor: pointer;
text-decoration: none;
transition: opacity 0.18s;
}
.btn-choose-package:hover {
opacity: 0.86;
color: var(--white);
}
@media (max-width: 768px) {
.packages-section-title {
font-size: 24px;
margin-bottom: 0;
}
.packages-section {
padding: 10px 0 60px;
}
.packages-accent-img {
width: 130px;
display: none;
}
}
/* =============================================
SECTION - EXCLUSIVE PARTNERS
============================================= */
.exclusive-partners-section .service-card {
margin: 20px;
}
.exclusive-partners-section .service-card .card-title {
font-size: 24px;
font-weight: 600;
color: #000000;
margin: 0 0 8px;
}
.exclusive-partners-section .service-card .card-desc {
font-size: 16px;
font-weight: 400;
color: #999999;
line-height: 1.7;
margin: 0;
}
.exclusive-partners-section .service-card .card-actions {
display: flex;
align-items: end;
justify-self: end;
gap: 10px;
margin-top: 16px;
}
.exclusive-partners-section .sidebar .sidebar-nav {
display: flex;
flex-direction: column;
font-weight: 400;
font-size: 16px;
line-height: 1.1;
text-decoration: none;
}
.exclusive-partners-section .sidebar .sidebar-nav .active {
border-left: 5px solid #ED1B24;
padding: 10px 10px 10px 15px;
text-decoration: none;
}
.exclusive-partners-section .sidebar .sidebar-nav .active a {
color: #ED1B24;
text-decoration: none;
}
.exclusive-partners-section .sidebar .sidebar-nav .inactive {
border-left: 5px solid #D9D9D9;
padding: 10px 10px 10px 15px;
text-decoration: none;
}
.exclusive-partners-section .sidebar .sidebar-nav .inactive a {
color: #999999;
text-decoration: none;
}
.card-actions .btn-pesan {
background: #ED1B24;
color: #fff;
border: none;
border-radius: 10px;
padding: 15px 20px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: opacity .18s;
}
.card-actions .btn-explore {
background: none;
color: #ED1B24;
border: 1px solid #ED1B24;
border-radius: 10px;
padding: 15px 20px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background .18s, color .18s;
}
.left-accent-exclusive{
position: absolute;
left: 0;
width: 200px;
pointer-events: none;
z-index: 0;
opacity: 0.85;
}
@media (max-width: 768px) {
.exclusive-partners-section .service-card .card-title {
font-size: 16px;
}
.exclusive-partners-section .service-card .card-desc {
font-size: 12px;
}
.exclusive-partners-section .service-card .card-actions {
justify-content: start;
}
.card-actions .btn-pesan,
.card-actions .btn-explore {
padding: 10px 15px;
font-size: 12px;
}
.left-accent-exclusive {
display: none;
}
.exclusive-partners-section .sidebar .sidebar-nav {
display: grid;
grid-template-columns: 1fr 1fr;
}
.exclusive-partners-section .sidebar .sidebar-nav .active {
border-left: 3px solid #ED1B24;
padding: 10px 10px 10px 15px;
text-decoration: none;
}
.exclusive-partners-section .sidebar .sidebar-nav .active a {
color: #ED1B24;
text-decoration: none;
}
.exclusive-partners-section .sidebar .sidebar-nav .inactive {
border-left: 3px solid #D9D9D9;
padding: 10px 10px 10px 15px;
text-decoration: none;
}
.exclusive-partners-section .sidebar .sidebar-nav .inactive a {
color: #999999;
text-decoration: none;
}
.exclusive-partners-section .service-card {
margin: 0 0 28px 0;
}
.exclusive-partners-section .service-card .card-actions {
justify-content: flex-start;
}
}
/* =============================================
GALLERY DESKTOP - SLICK CAROUSEL
============================================= */
.gallery.gallery-desktop {
display: flex;
flex-direction: column;
background-color: #ED1B24;
padding-top: 60px;
padding-bottom: 80px;
overflow: hidden;
}
.gallery.gallery-desktop .gallery-title {
font-size: 48px;
font-weight: 200;
font-style: italic;
color: #fff;
margin-bottom: 36px;
line-height: 1.1;
}
.gallery-slick-desktop-wrap {
position: relative;
width: 100%;
overflow: hidden;
}
/* Slide item */
.gallery-slide-dt {
padding: 0 10px;
outline: none;
}
.gallery-slide-dt img {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
}
/* ── ARROW — lingkaran putih solid ── */
.gallery-slick-desktop-wrap .slick-prev,
.gallery-slick-desktop-wrap .slick-next {
z-index: 10;
width: 52px;
height: 52px;
background: #ffffff !important;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
transition: background .2s, transform .2s;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.gallery-slick-desktop-wrap .slick-prev { left: 16px; }
.gallery-slick-desktop-wrap .slick-next { right: 16px; }
.gallery-slick-desktop-wrap .slick-prev:hover,
.gallery-slick-desktop-wrap .slick-next:hover {
background: #f0f0f0 !important;
}
.gallery-slick-desktop-wrap .slick-prev:before,
.gallery-slick-desktop-wrap .slick-next:before { display: none; }
.gallery-slick-desktop-wrap .slick-prev:after,
.gallery-slick-desktop-wrap .slick-next:after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 16px;
color: #111111;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.gallery-slick-desktop-wrap .slick-prev:after { content: "\f060"; }
.gallery-slick-desktop-wrap .slick-next:after { content: "\f061"; }
/* Dots */
.gallery-slick-desktop-wrap .slick-dots {
bottom: -40px;
}
.gallery-slick-desktop-wrap .slick-dots li button:before {
color: rgba(255,255,255,0.5);
font-size: 8px;
opacity: 1;
}
.gallery-slick-desktop-wrap .slick-dots li.slick-active button:before {
color: #ffffff;
opacity: 1;
}
/* =============================================
SECTION - GALLERY (MOBILE) - SLICK CAROUSEL
============================================= */
@media (max-width: 768px) {
/* Hide the desktop gallery layout */
.gallery-desktop {
display: none !important;
}
/* Show mobile gallery */
.gallery-mobile {
display: block !important;
}
/* Full red section wrapper */
.gallery-mobile-wrap {
background-color: #ED1B24;
width: 100%;
}
/* Title bar at top */
.gallery-mobile-title-bar {
padding: 28px 0 24px;
text-align: center;
}
.gallery-mobile-title-bar .gallery-title-mobile {
/* */
font-size: 24px;
font-weight: 500;
font-style: italic;
color: #ffffff;
margin: 0;
line-height: 1.1;
}
/* Slider container */
.gallery-mobile-slider-wrap {
padding: 0 0 36px 3px;
overflow: hidden;
}
/* Slick slider */
.gallery-mobile-slider {
width: 100%;
}
.gallery-mobile-slider .slick-list {
overflow: visible;
}
.gallery-mobile-slider .slick-track {
display: flex;
}
.gallery-mobile-slider .gallery-slide {
padding: 0 3px 0 0;
outline: none;
}
.gallery-mobile-slider .gallery-slide img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
}
/* Hide slick default arrows & dots on mobile gallery */
.gallery-mobile-slider .slick-arrow {
display: none !important;
}
.gallery-mobile-slider .slick-dots {
display: none !important;
}
.xtrip{
display: none !important;
}
}
/* On desktop: hide mobile gallery */
@media (min-width: 769px) {
.gallery-mobile {
display: none !important;
}
.gallery-desktop {
display: flex !important;
}
}
/* =============================================
SECTION - EVENT & PROMO
============================================= */
.event-promo-section .event-promo-title {
font-size: 48px;
font-weight: 500;
font-style: italic;
background: linear-gradient(to right, #ED1B24 40%, #1E0001 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
margin: 30px;
}
.event-promo-section .event-promo-image-wrap {
width: 100%;
display: flex;
gap: 20px;
}
.event-promo-image {
width: 100%;
height: 400px;
object-fit: cover;
}
@media (max-width: 768px) {
.event-promo-section .event-promo-title {
font-size: 24px;
}
.event-promo-image {
height: 240px;
}
}
/* =============================================
EVENT & PROMO SECTION - BUTTON OVERLAY
============================================= */
.event-promo-image-wrap {
position: relative;
}
.event-promo-btn-wrap {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-event-promo {
display: inline-block;
background: #ED1B24;
color: #ffffff;
border-radius: 10px;
padding: 13px 32px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
transition: opacity 0.18s, transform 0.18s;
cursor: pointer;
border: none;
}
.btn-event-promo:hover {
opacity: 0.88;
color: #ffffff;
transform: translateY(-1px);
}
@media (max-width: 768px) {
.btn-event-promo {
padding: 10px 22px;
font-size: 13px;
}
}
/* =============================================
SECTION - LOCATION
============================================= */
.location-section {
background: #ffffff;
padding: 60px 0 50px;
}
.location-section .location-title {
font-size: 48px;
font-weight: 500;
font-style: italic;
background: linear-gradient(to right, #ED1B24 30%, #1E0001 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
margin-bottom: 30px;
}
.location-section .location-card {
background: #fff;
box-shadow: 0 4px 22px rgba(0, 0, 0, .14);
display: flex;
flex-direction: column;
gap: 16px;
width: 285px;
height: 380px;
}
.location-info {
padding: 20px;
font-size: 14px;
font-weight: 400;
line-height: 150%;
}
.location-image {
width: 100%;
height: 114px;
object-fit: cover;
}
.location-maps-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #ED1B24;
text-decoration: none;
margin-top: 20px;
}
@media (max-width: 768px) {
.location-section {
padding: 40px 0 40px;
}
.location-section .location-title {
font-size: 24px;
margin-bottom: 20px;
padding: 0 0px;
background: linear-gradient(to right, #ED1B24 17%, #1E0001 32%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.location-card {
width: 100% !important;
height: auto !important;
border-radius: 0;
box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.location-image {
height: 240px;
}
.location-info {
padding: 24px 20px 28px;
}
}
/* =============================================
FAQ SECTION
============================================= */
.faq-section {
background: #fff;
/* padding: 0px 0 80px; */
}
.faq-section-title {
font-size: 42px;
font-weight: 700;
font-style: italic;
color: #D0021B;
text-align: center;
margin-bottom: 48px;
letter-spacing: -0.5px;
}
.faq-item {
/* border: 1.5px solid #ececec; */
border-radius: 12px;
margin-bottom: 20px;
overflow: hidden;
transition: border-color .2s, box-shadow .2s;
background: #ffffff;
}
.icon-img-FAQ {
width: 30px;
height: 30px;
}
.faq-item.open {
border-color: #ffffff;
/* box-shadow: 0 4px 18px rgba(0,0,0,0.06); */
}
.faq-header {
display: flex;
align-items: center;
gap: 14px;
padding: 0px 20px;
cursor: pointer;
user-select: none;
background: #ffffff;
transition: background .15s;
}
/* .faq-header:hover {
background: #fafafa;
} */
.faq-icon-wrap {
flex-shrink: 0;
width: 70px;
height: 70px;
/* background: #fff5f6; */
border: 1px solid #999999;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #D0021B;
font-size: 17px;
}
.faq-question {
flex: 1;
/* font-family: 'Plus Jakarta Sans', sans-serif; */
font-size: 24px;
font-weight: 500;
color: #000;
line-height: 1.4;
margin: 0;
}
.faq-chevron {
flex-shrink: 0;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
color: #999999;
font-size: 16.faq-section px;
transition: transform .28s cubic-bezier(.4, 0, .2, 1), color .2s;
}
.faq-item.open .faq-chevron {
transform: rotate(360deg);
color: #999999;
}
.faq-body {
max-height: 0;
overflow: hidden;
transition: max-height .38s cubic-bezier(.4, 0, .2, 1), padding .28s;
}
.faq-item.open .faq-body {
max-height: 400px;
}
.faq-body-inner {
padding: 0 20px 18px 104px;
}
.faq-answer {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 400;
color: #999999;
line-height: 1.75;
margin: 0;
}
@media (max-width: 768px) {
.faq-section-title {
font-size: 30px;
margin-bottom: 32px;
}
.faq-question {
font-size: 14px;
}
.faq-body-inner {
padding: 0 16px 16px 16px;
}
.faq-icon-wrap {
width: 36px;
height: 36px;
font-size: 15px;
}
.icon-img-FAQ {
width: 18px;
height: 18px;
}
.faq-chevron {
width: 22px;
height: 22px;
font-size: 12px;
}
}
/* =============================================
TERMS AND CONDITIONS CONTENT SECTION
============================================= */
.tnc-content-section {
background: #ffffff;
padding: 0 0 70px;
}
.tnc-item {
margin-bottom: 32px;
}
.tnc-item:last-child {
margin-bottom: 0;
}
.tnc-item-title {
font-size: 24px;
font-weight: 600;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
line-height: 1.3;
}
.tnc-item-sub {
font-size: 16px;
font-weight: 400;
color: #999999;
margin-bottom: 0px;
line-height: 1.5;
}
.tnc-item-body {
font-size: 16px;
font-weight: 400;
color: #999999;
line-height: 1.75;
margin: 0 0 8px;
}
.tnc-item-body + .tnc-item-body {
margin-top: 10px;
}
.tnc-item ul {
margin: 6px 0 0 18px;
padding: 0;
list-style: disc;
}
.tnc-item ul li {
font-size: 16px;
font-weight: 400;
color: #999999;
line-height: 1.75;
margin-bottom: 2px;
padding-left: 4px;
}
.tnc-divider {
border: none;
border-top: 1px solid #eeeeee;
margin: 10px 0;
}
.tnc-content-section .container,
.vessel-intro-section .container,
.footer-main {
max-width: 1200px !important;
}
@media (max-width: 768px) {
.tnc-content-section {
padding: 0 0 10px;
}
.tnc-item-title {
font-size: 16px;
}
.tnc-item-body,
.tnc-item ul li {
font-size: 12px;
margin: 0;
}
.tnc-divider {
margin: 5px 0;
}
}
/* =============================================
FOOTER
============================================= */
.footer-section {
background: #fff;
padding-top: 60px;
}
.footer-cta-wrap {
padding: 0 20px;
margin-bottom: 50px;
}
.footer-cta-banner {
position: relative;
border-radius: 24px;
overflow: hidden;
height: 170px;
background: url('Assets-RFC/header footer img.jpg') center/cover no-repeat;
display: flex;
align-items: center;
}
.footer-cta-banner::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
border-radius: 24px;
}
.footer-cta-inner {
position: relative;
z-index: 2;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
}
.footer-cta-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 36px;
font-weight: 400;
font-style: italic;
color: #fff;
margin: 0;
line-height: 1.2;
}
.footer-cta-title b {
font-weight: 700;
}
.footer-cta-btn {
background: #ED1B24;
color: #fff;
border: none;
border-radius: 50px;
padding: 13px 32px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: opacity .18s;
flex-shrink: 0;
}
.footer-cta-btn:hover {
opacity: .88;
}
.footer-main {
padding: 10px 0 0px;
}
.footer-logo {
height: 55px;
width: auto;
display: block;
margin-bottom: 16px;
}
.footer-socials {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.footer-socials a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
transition: opacity .18s;
text-decoration: none;
}
.footer-socials a:hover {
opacity: .75;
}
.footer-socials img {
width: 30px;
height: 30px;
object-fit: contain;
}
.footer-office-title {
font-size: 15px;
font-weight: 700;
color: #111;
/* margin-bottom: 25px; */
/* margin-top: 30px; */
}
.footer-office-title-atas {
font-size: 15px;
font-weight: 700;
color: #111;
margin-bottom: 25px;
}
.footer-info-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
}
.footer-info-row img {
width: 20px;
height: 20px;
object-fit: contain;
margin-top: 2px;
flex-shrink: 0;
}
.footer-info-row p {
font-size: 16px;
font-weight: 400;
color: #999;
line-height: 1.55;
margin: 0;
text-decoration: none;
}
.footer-map-link {
text-decoration: none;
cursor: pointer;
}
.footer-subscribe-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.footer-email-input {
width: 100%;
height: 52px;
border: 1.5px solid #ED1B24;
border-radius: 10px;
padding: 0 24px;
font-size: 15px;
color: #333;
outline: none;
background: #fff;
}
.email-input {
text-align: end;
}
.footer-email-input::placeholder {
color: #bbb;
}
.footer-email-input:focus {
border-color: #ED1B24;
box-shadow: 0 0 0 3px rgba(208, 2, 27, .08);
}
.footer-subscribe-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #ED1B24;
color: #fff;
border: none;
border-radius: 50px;
padding: 15px 24px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: opacity .18s;
height: 50px;
width: auto;
margin-bottom: 10px;
}
.footer-subscribe-btn:hover {
opacity: .88;
}
.footer-subscribe-btn img {
width: 18px;
height: 18px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.footer-subscribe-desc {
font-size: 16px;
font-weight: 400;
color: #999;
line-height: 1.55;
margin: 0 0 24px;
}
.footer-payment-title {
font-size: 15px;
font-weight: 700;
color: #111;
margin-bottom: 14px;
}
.footer-payment-logos {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.footer-payment-logos img {
height: 22px;
width: auto;
object-fit: contain;
}
.footer-payment-desc {
font-size: 16px;
font-weight: 400;
color: #999;
line-height: 1.6;
margin: 0;
}
.footer-divider {
border: none;
border-top: 1px solid #999999;
margin: 10px 0 0;
}
.footer-bottom-bar {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0 24px;
}
.footer-bottom-bar p {
font-size: 16px;
font-weight: 400;
color: #000;
margin: 0;
}
.footer-bottom-bar a {
color: #333;
text-decoration: none;
font-weight: 400;
}
.footer-col-lembongan {
padding-top: 0px;
}
.mobile-design {
display: none;
}
/* (kode baru) Footer top row wrapper */
.footer-top-row {
padding-bottom: 30px;
border-bottom: none;
}
/* (kode baru) Col kiri: logo + sosial + email stacked */
.footer-col-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* (kode baru) Col tengah: subscribe center vertikal */
.footer-col-mid {
display: flex;
flex-direction: column;
align-items: start;
text-align: start;
padding-top: 65px;
}
/* (kode baru) Col kanan: tripadvisor */
.footer-col-right {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 65px;
}
.footer-col-right .TA_certificateOfExcellence {
width: 100%;
max-width: 340px;
}
.footer-col-right .TA_certificateOfExcellence ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col-right .widCOEImg {
width: 234px;
max-width: 340px;
height: auto;
display: block;
}
/* (kode baru) Footer bottom wrap full width */
.footer-bottom-bar-wrap {
padding: 0 20px;
}
/* (kode baru) teks kiri/kanan bottom bar */
.footer-bottom-left {
font-size: 16px;
font-weight: 400;
color: #000;
margin: 0;
}
.footer-bottom-right {
font-size: 16px;
font-weight: 400;
color: #000;
margin: 0;
}
.footer-bottom-right a {
color: #333;
text-decoration: none;
}
/* (kode baru) Mobile override untuk footer top row */
@media (max-width: 767px) {
.footer-col-left {
align-items: center;
}
.footer-col-left .footer-socials {
justify-content: center;
}
.footer-col-left .footer-email-input {
width: 100%;
}
.footer-col-mid {
align-items: flex-start;
text-align: left;
margin-top: 4px;
}
.footer-col-right {
align-items: flex-start;
margin-top: 20px;
}
.footer-col-right .widCOEImg {
max-width: 240px;
}
.footer-bottom-bar {
flex-direction: column;
align-items: flex-start;
gap: 4px;
text-align: left;
}
.footer-bottom-bar-wrap {
padding: 0 12px;
}
}
@media (max-width: 991px) {
.footer-cta-inner {
padding: 0 28px;
}
.footer-col-lembongan {
padding-top: 0;
}
}
/* =============================================
MOBILE FONT SIZES
============================================= */
@media (max-width: 767px) {
/* ---- WHY SECTION ---- */
.why-title {
font-size: 24px;
}
.why-desc {
font-size: 12px;
}
.why-socials a {
font-size: 20px;
}
.why-card-body h4 {
font-size: 16px;
}
.why-card-body p {
font-size: 12px;
}
/* WHY SECTION */
.why-title {
font-size: 24px;
padding-top: 81px;
}
.why-desc {
font-size: 12px;
}
.why-socials a {
font-size: 20px;
}
.why-cards-wrap {
margin-bottom: 50px;
position: relative;
}
/* Card utama */
.why-card {
flex-direction: column;
padding: 16px;
width: 280px;
min-height: auto;
height: auto;
gap: 12px;
border-radius: 18px;
margin: 0;
align-items: stretch;
overflow: visible;
}
/* Kotak putih ikon + judul di atas */
.why-card-top {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
background: #ffffff;
border-radius: 14px;
padding: 10px 14px 10px 10px;
width: 100%;
min-width: unset;
margin-bottom: 0;
}
.why-card-top h4 {
font-size: 14px;
font-weight: 700;
color: #ED1B24;
line-height: 1.3;
margin: 0;
}
/* Ikon kecil di dalam kotak putih */
.why-card-icon {
width: 44px;
height: 44px;
min-width: 44px;
background: #ffffff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
align-self: auto;
flex-shrink: 0;
}
.why-card-icon img {
width: 26px;
height: 26px;
object-fit: contain;
}
/* Body deskripsi di bawah */
.why-card-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0;
}
.why-card-body h4 {
display: none;
}
.why-card-body p {
font-size: 13px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.92);
text-align: left;
margin: 0;
}
/* Slick */
.why-cards-slick .slick-slide {
width: 280px;
margin-right: 12px;
}
.why-cards-slick .slick-track {
display: flex;
gap: 0;
}
.why-cards-slick .slick-list {
overflow: visible;
}
/* Arrows */
.why-cards-wrap .slick-prev,
.why-cards-wrap .slick-next {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: #ffffff;
border-radius: 50%;
z-index: 10;
top: 50%;
transform: translateY(-50%);
}
.why-cards-wrap .slick-prev { left: 10px; }
.why-cards-wrap .slick-next { right: 10px; }
.why-cards-wrap .slick-prev:before,
.why-cards-wrap .slick-next:before {
display: none;
}
.why-cards-wrap .slick-prev:after,
.why-cards-wrap .slick-next:after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 12px;
color: #000;
}
.why-cards-wrap .slick-prev:after { content: "\f060"; }
.why-cards-wrap .slick-next:after { content: "\f061"; }
/* Dots */
.why-cards-wrap .slick-dots {
bottom: -40px;
}
.why-cards-wrap .slick-dots li button:before {
color: #ccc;
font-size: 8px;
}
.why-cards-wrap .slick-dots li.slick-active button:before {
color: #000;
}
/* ---- PROMO SECTION ---- */
.promo-slick-wrap {
height: 220px;
}
.promo-slick,
.promo-slick .promo-slide {
height: 220px !important;
}
.promo-slick-wrap .slick-list,
.promo-slick-wrap .slick-track {
height: 220px !important;
}
.promo-slick-wrap .slick-slide>div {
height: 220px;
}
/* ---- PRIVATE CHARTER SECTION ---- */
.charter-title {
font-size: 24px;
}
.charter-name {
font-size: 16px;
}
.charter-subtitle {
font-size: 12px;
}
.charter-desc {
font-size: 12px;
}
.charter-price-label {
font-size: 12px;
}
.charter-price {
font-size: 16px;
}
.charter-capacity {
font-size: 12px;
}
.btn-choose-package-homepage {
font-size: 12px;
padding: 10px 18px;
}
.charter-content {
padding: 24px 20px;
min-height: auto;
}
.charter-img-wrap {
min-height: 220px;
}
.charter-header {
flex-direction: column;
gap: 10px;
}
.charter-footer {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
/* ---- GALLERY SECTION MOBILE ---- */
.gallery-slick .gallery-slide {
padding: 0 0px !important;
}
.gallery-slick .slick-track {
display: flex !important;
align-items: center !important;
}
.gallery-slick .slick-slide {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.gallery-slick .slick-slide>div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.gallery-slide-inner {
width: 100% !important;
max-width: 260px !important;
height: 160px !important;
transform: scale(0.88) !important;
transition: transform .4s ease-out, opacity .4s ease-out !important;
margin: 0 auto !important;
}
.gallery-slick .slick-center .gallery-slide-inner {
max-width: 360px !important;
height: 210px !important;
transform: scale(1) !important;
opacity: 1 !important;
}
.gallery-slide-inner img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.gallery-slick-wrap::before,
.gallery-slick-wrap::after {
display: none !important;
}
.gallery-slick-wrap .slick-prev,
.gallery-slick-wrap .slick-next {
width: 36px !important;
height: 36px !important;
z-index: 20 !important;
}
.gallery-slick-wrap .slick-prev {
left: 5px !important;
}
.gallery-slick-wrap .slick-next {
right: 5px !important;
}
/* =============================================
FOOTER
============================================= */
.footer-section {
padding-top: 30px;
}
.footer-cta-banner {
height: auto;
padding: 32px 0;
}
.footer-cta-inner {
flex-direction: row;
gap: 16px;
text-align: left;
padding: 0 24px;
align-items: center;
}
.footer-cta-title {
font-size: 20px;
flex: 1;
}
.footer-cta-btn {
flex-shrink: 0;
padding: 12px 24px;
font-size: 14px;
}
.footer-cta-wrap {
padding: 0 12px;
margin-bottom: 10px;
}
.footer-logo {
display: block;
margin: 0 auto 16px;
height: 45px;
}
.footer-socials {
justify-content: center;
gap: 12px;
margin-bottom: 24px;
}
.footer-socials img {
width: 22px;
height: 22px;
}
.email-input {
text-align: left !important;
width: 100% !important;
margin-bottom: 10px;
padding: 0 20px;
}
.footer-email-input {
width: 100% !important;
display: block;
}
.footer-email-input::placeholder {
color: #ED1B24;
}
.footer-subscribe-btn {
width: auto !important;
padding: 10px 15px;
height: 46px;
font-size: 12px;
margin-bottom: 8px;
margin-left: 10px;
}
.footer-subscribe-desc {
font-size: 12px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
}
.footer-office-title {
font-size: 12px;
margin-bottom: 25px;
margin-top: 30px;
}
.footer-office-title-atas {
font-size: 12px;
margin-bottom: 25px;
margin-top: 0px;
}
.footer-info-row p {
font-size: 12px;
}
.footer-payment-logos {
justify-content: space-between;
}
.footer-info-row img {
width: 16px;
height: 16px;
}
.footer-payment-title {
font-size: 14px;
}
.footer-payment-desc {
font-size: 13px;
}
.footer-payment-logos img {
height: auto;
width: 70px;
}
.footer-bottom-bar p {
font-size: 13px;
}
.list-info {
padding: 0 20px;
}
.desktop-design {
display: none;
}
.mobile-design {
align-items: center;
gap: 5px;
display: block;
}
.mobile-design img {
height: 18px;
vertical-align: middle;
}
.why-aksen-garis {
left: 270px;
}
.why-title br {
display: none;
}
.partners-section {
padding: 0;
}
/* Partners Mobile - Container Fluid */
.partners-section .container-fluid {
padding-left: 0;
padding-right: 0;
}
.partners-slick-wrap {
width: 100%;
overflow: hidden;
}
.partners-slick .partner-card {
padding: 0 5px;
transition: transform .3s ease;
transform: scale(0.85);
}
.partners-slick .slick-center .partner-card {
transform: scale(1);
}
.partners-slick-wrap .slick-prev,
.partners-slick-wrap .slick-next,
.partners-slick-wrap .slick-dots {
display: none !important;
}
.partner-name {
padding-top: 5px;
}
.hero-img {
height: 444px;
}
.booking-widget-container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.booking-widget-section>div {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.booking-widget-section {
padding: 0;
}
.hero-section {
background: #F6F6F6;
}
.why-title {
padding-top: 81px;
}
.hero-section {
position: inherit;
height: 800px;
}
.charter-header {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.charter-header>div:first-child {
flex: 1;
min-width: 0;
}
.charter-name {
font-size: 16px;
margin-bottom: 4px;
line-height: 1.3;
color: #000;
}
/* Subtitle dipisah, italic, ukuran 12px */
.charter-subtitle {
font-size: 12px !important;
font-style: italic !important;
line-height: 1.4;
margin-bottom: 0;
}
/* Max Person - tanpa background, tanpa rounded */
.charter-capacity {
font-size: 12px !important;
font-weight: 600;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
white-space: nowrap;
flex-shrink: 0;
color: #000;
}
/* Deskripsi */
.charter-desc {
font-size: 12px;
margin: 12px 0;
line-height: 1.5;
}
/* Footer: Oneway + Harga di kiri, Choose Package di kanan */
.charter-footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 16px;
padding-top: 0;
border-top: none;
}
/* Harga di bawah Oneway */
.charter-price-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.charter-price-label {
font-size: 12px;
color: #888;
}
.charter-price {
font-size: 18px;
font-weight: 600;
color: #111;
line-height: 1.2;
}
.btn-choose-package-homepage {
font-size: 12px;
padding: 10px 14px;
white-space: nowrap;
flex-shrink: 0;
}
.charter-content {
padding: 16px;
}
/* Gambar dalam canvas - border-radius 10px, padding 0 */
.charter-img-wrap {
min-height: 180px;
border-radius: 10px;
overflow: hidden;
}
.charter-img {
border-radius: 20px;
padding: 10px;
}
/* Title Private Charter */
.charter-title {
font-size: 24px;
}
}