/* ==================================================
   FRONTSTORE STYLE.CSS
   Professional version matched with index.php markup.

   Structure:
   01. Design Tokens
   02. Base Reset & Global Elements
   03. Reusable Buttons & Section Helpers
   04. Navbar
   05. Hero Carousel
   06. About Section
   07. Trust Section
   08. Fleet Cards
   09. Brand Carousel Section
   10. Company Profile Video Section
   11. Membership Logo Carousel
   12. Testimonial Section
   13. Location Section
   14. FAQ Section
   15. Rental Terms Accordion Section
   16. Why Choose Section
   17. Travel Tips Article Slider Section
   18. Final CTA Section
   19. Footer
   20. Keyframes & Animations
   21. Responsive Styles
   ================================================== */

/* ==================================================
   01. Design Tokens
   Global CSS variables for theme colors, accents, borders, and gradients.
   ================================================== */

:root {
    --store-primary: #f97316;
    --store-primary-dark: #c2410c;
    --store-primary-soft: #fff7ed;
    --store-accent: #ffb347;
    --store-dark: #0f172a;
    --store-muted: #64748b;
    --store-soft: #f8fafc;
    --store-border: #e2e8f0;
    --store-gradient: linear-gradient(135deg, #f97316, #fb923c);
}

/* ==================================================
   02. Base Reset & Global Elements
   Universal defaults and page-level styling.
   ================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #ffffff;
    color: var(--store-dark);
    font-family: "Poppins", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

a {
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid rgba(249, 115, 22, .28);
    outline-offset: 3px;
}

/* ==================================================
   03. Reusable Buttons & Section Helpers
   Shared button styles, section headings, utility states, and generic spacing.
   ================================================== */

.btn-store-primary {
    background: var(--store-primary);
    color: #fff;
    border: 0;
    box-shadow: 0 12px 26px rgba(249, 115, 22, .22);
}

.btn-store-primary:hover {
    filter: brightness(.95);
    color: #fff;
}

.btn-whatsapp {
    background: #16a34a;
    color: #fff;
    border: 0;
    box-shadow: 0 12px 26px rgba(22, 163, 74, .18);
}

.btn-whatsapp:hover {
    background: #15803d;
    color: #fff;
}

#armada {
    margin-bottom: 60px;
}

.section-kicker {
    color: var(--store-primary);
    font-weight: 900;
    letter-spacing: .12em;
    font-size: .78rem;
    text-transform: uppercase;
}

.section-title {
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -1px;
}

.empty-state {
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 28px;
    padding: 54px 24px;
}

/* Dynamic menu anchor targets.
   Keeps anchor scrolling clear from the navbar height. */
.section-anchor,
section[id] {
    scroll-margin-top: 96px;
}

.section-anchor {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
}

/* ==================================================
   04. Navbar
   Header/navigation styling and brand identity elements.
   ================================================== */

.navbar-store {
    position: relative;
    z-index: 20;
    transition: all .25s ease;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.navbar-store .nav-link {
    color: var(--store-dark);
    font-size: .94rem;
    font-weight: 700;
    padding: .65rem .85rem;
    border-radius: 999px;
    transition: all .25s ease;
}

.navbar-store .nav-link:hover,
.navbar-store .nav-link:focus,
.navbar-store .nav-link.active {
    color: var(--store-primary);
    background: var(--store-primary-soft);
}

/* Optional CSS classes tenants can assign from the menu builder. */
.navbar-store .menu-item-button > .nav-link,
.navbar-store .menu-item-primary > .nav-link {
    padding: .72rem 1.1rem;
    color: #ffffff;
    background: var(--store-gradient);
    box-shadow: 0 12px 26px rgba(249, 115, 22, .20);
}

.navbar-store .menu-item-button > .nav-link:hover,
.navbar-store .menu-item-primary > .nav-link:hover {
    color: #ffffff;
    filter: brightness(.96);
    transform: translateY(-1px);
}

.navbar-store .menu-item-whatsapp > .nav-link {
    padding: .72rem 1.1rem;
    color: #ffffff;
    background: #16a34a;
    box-shadow: 0 12px 26px rgba(22, 163, 74, .18);
}

.navbar-store .menu-item-whatsapp > .nav-link:hover {
    color: #ffffff;
    background: #15803d;
    transform: translateY(-1px);
}

.navbar-store .dropdown-menu {
    margin-top: .75rem;
    padding: .65rem;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .12);
}

.navbar-store .dropdown-item {
    border-radius: 12px;
    padding: .7rem .85rem;
    color: var(--store-dark);
    font-size: .9rem;
    font-weight: 700;
}

.navbar-store .dropdown-item:hover,
.navbar-store .dropdown-item:focus {
    color: var(--store-primary);
    background: var(--store-primary-soft);
}

.navbar-store .navbar-toggler {
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 14px;
    box-shadow: none;
}

.navbar-store .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(249, 115, 22, .18);
}

.navbar-store .container {
    gap: 16px;
}

.navbar-store .navbar-brand {
    min-width: 0;
}

.navbar-store-logo,
.navbar-store .navbar-brand img {
    display: block;
    max-height: 42px;
    width: auto;
    object-fit: contain;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--store-primary), #0ea5e9);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
}

/* ==================================================
   05. Hero Carousel
   Homepage hero slider, background variants, overlay, content, indicators, and controls.
   ================================================== */

.hero-carousel-store {
    position: relative;
    overflow: hidden;
    background: #07111f;
}

.hero-carousel-store .carousel-inner,
.hero-carousel-store .carousel-item {
    min-height: 88vh;
}

.hero-slide {
    min-height: 88vh;
    background-size: cover;
    background-position: center;
    position: relative;
    isolation: isolate;
}

.hero-slide--sewa-mobil {
    background-image: url("../img/slider2.png");
}

.hero-slide--destinasi-lombok {
    background-image: url("../img/slider3.png");
}

.hero-slide--mobil-bersih {
    background-image: url("../img/slider1.webp");
}

.min-vh-hero {
    min-height: 88vh;
}

.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3, 7, 18, .78) 0%, rgba(3, 7, 18, .55) 36%, rgba(3, 7, 18, .12) 68%, rgba(3, 7, 18, .04) 100%);
    z-index: 1;
}

.hero-slide::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 40%;
    background: linear-gradient(180deg, transparent, rgba(3, 7, 18, .50));
    z-index: 1;
    pointer-events: none;
}

.hero-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 14% 22%, rgba(22, 163, 74, .28), transparent 30%), radial-gradient(circle at 44% 52%, rgba(37, 99, 235, .18), transparent 34%);
    pointer-events: none;
}

.hero-slide-content {
    position: relative;
    z-index: 2;
}

.hero-copy-panel {
    max-width: 800px;
    padding: 34px 0 52px;
    animation: heroTextIn .75s ease both;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ecfeff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .02em;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.hero-kicker i {
    color: #86efac;
}

.hero-title {
    max-width: 800px;
    color: #fff;
    font-size: clamp(2.25rem, 5.4vw, 5.35rem);
    line-height: .98;
    font-weight: 900;
    text-wrap: balance;
    text-shadow: 0 20px 45px rgba(0, 0, 0, .32);
}

.hero-title::after {
    content: "";
    display: block;
    width: 92px;
    height: 5px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #38bdf8);
    box-shadow: 0 12px 26px rgba(34, 197, 94, .30);
}

.hero-subtitle {
    max-width: 640px;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.98rem, 1.35vw, 1.15rem);
    line-height: 1.82;
    font-weight: 400;
    text-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: .9rem;
    font-weight: 700;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}

.hero-benefits i {
    color: #86efac;
    font-size: .95rem;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-btn-primary,
.hero-btn-secondary {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    padding: 0 24px;
    font-weight: 800;
    letter-spacing: -.2px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.hero-btn-primary {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
    border: 0;
    box-shadow: 0 18px 42px rgba(22, 163, 74, .30);
}

.hero-btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 24px 54px rgba(22, 163, 74, .38);
}

.hero-btn-secondary {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, .20);
    color: #fff;
    transform: translateY(-2px);
}

.hero-indicators {
    right: auto;
    bottom: 28px;
    left: calc((100% - min(1320px, 100% - 24px)) / 2);
    justify-content: flex-start;
    margin: 0;
    z-index: 5;
}

.hero-indicators [data-bs-target] {
    width: 38px;
    height: 5px;
    border-radius: 999px;
    border: 0;
    background-color: rgba(255, 255, 255, .55);
    opacity: 1;
    transition: all .25s ease;
}

.hero-indicators .active {
    width: 62px;
    background: #22c55e;
}

.hero-control {
    width: 5.5%;
    opacity: .85;
}

.hero-control .carousel-control-prev-icon,
.hero-control .carousel-control-next-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-size: 46%;
    background-color: rgba(15, 23, 42, .42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .20);
}

/* ==================================================
   06. About Section
   About card, image treatment, text, and CTA buttons.
   ================================================== */

.aboutme-section {
    background: radial-gradient(circle at top left, rgba(37, 99, 235, .08), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.aboutme-card {
    padding: 1px;
}

.aboutme-image-wrap {
    position: relative;
    height: 100%;
    min-height: 430px;
    border-radius: 28px;
    overflow: hidden;
    background: #eaf2ff;
}

.aboutme-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(15, 23, 42, .35));
    pointer-events: none;
}

.aboutme-image {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.aboutme-card:hover .aboutme-image {
    transform: scale(1.035);
}

.aboutme-text {
    color: #475569;
    font-size: 1rem;
    line-height: 1.9;
    font-weight: 400;
    margin-bottom: 16px;
}

.aboutme-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.btn-aboutmore,
.btn-aboutwa {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 800;
    transition: all .25s ease;
}

.btn-aboutmore {
    background: #ff5e00;
    color: #ffffff;
    box-shadow: 0 14px 30px rgb(255 106 0 / 22%);
}

.btn-aboutmore:hover {
    color: #ffffff;
    transform: translateY(-2px);
    filter: brightness(.96);
}

.btn-aboutwa {
    background: rgba(22, 163, 74, .10);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, .22);
}

.btn-aboutwa:hover {
    background: #16a34a;
    color: #ffffff;
    transform: translateY(-2px);
}

/* ==================================================
   07. Trust Section
   Trust/benefit cards displayed near the hero section.
   ================================================== */

.trust-section {
    position: relative;
    z-index: 4;
    margin-top: -62px;
    background: transparent;
}

.trust-heading {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.trust-heading-text {
    max-width: 620px;
    margin: 0 auto;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.8;
}

.trust-card {
    position: relative;
    height: 100%;
    padding: 32px 28px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .92));
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .08);
    transition: all .32s ease;
}

.trust-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, .14), transparent 34%), radial-gradient(circle at bottom left, rgba(22, 163, 74, .10), transparent 38%);
    opacity: 0;
    transition: opacity .32s ease;
}

.trust-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--store-primary), #16a34a);
    opacity: .75;
}

.trust-card:hover {
    transform: translateY(-8px);
    border-color: rgba(37, 99, 235, .22);
    box-shadow: 0 30px 75px rgba(15, 23, 42, .13);
}

.trust-card:hover::before {
    opacity: 1;
}

.trust-card-number {
    position: absolute;
    top: 24px;
    right: 26px;
    font-size: 2.7rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
    color: rgba(15, 23, 42, .06);
    z-index: 1;
}

.trust-icon {
    position: relative;
    z-index: 2;
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: #ffffff;
    font-size: 1.65rem;
    background: linear-gradient(135deg, var(--store-primary), #ed8f1bd9);
    box-shadow: 0 18px 35px rgba(37, 99, 235, .24);
    transition: all .32s ease;
}

.trust-card:hover .trust-icon {
    transform: rotate(-4deg) scale(1.06);
    box-shadow: 0 22px 44px rgba(37, 99, 235, .30);
}

.trust-card h5 {
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -.3px;
}

.trust-card p {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    color: #64748b;
    font-size: .92rem;
    line-height: 1.8;
    font-weight: 400;
}

/* ==================================================
   08. Fleet Cards
   Vehicle listing grid matched with index.php markup.
   Includes card, badges, metadata, price, booking button, and filter state.
   ================================================== */

.fleet-item {
    padding-right: 8px !important;
    padding-left: 8px !important;
}

.fleet-hidden {
    display: none !important;
}

.fleet-card-premium {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .075);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.fleet-card-premium:hover {
    transform: translateY(-6px);
    border-color: rgba(249, 115, 22, .28);
    box-shadow: 0 30px 70px rgba(15, 23, 42, .13);
}

.fleet-card-media {
    position: relative;
    height: 188px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef5ff, #f8fbff);
}

.fleet-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.fleet-card-premium:hover .fleet-card-image {
    transform: scale(1.045);
}

.fleet-card-overlay-top {
    position: absolute;
    top: 14px;
    right: -1px;
    left: -1px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
}

.fleet-badge-status,
.fleet-badge-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .94);
    color: #0f172a;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.fleet-badge-status {
    border-radius: 0 999px 999px 0;
}

.fleet-badge-category {
    border-radius: 999px 0 0 999px;
    border-color: rgba(226, 232, 240, .95);
}

.fleet-badge-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.fleet-badge-status.is-available {
    color: #16a34a;
}

.fleet-badge-status.is-rented {
    color: #d97706;
}

.fleet-badge-status.is-maintenance {
    color: #dc2626;
}

.fleet-badge-status.is-default {
    color: #64748b;
}

.fleet-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 18px 20px;
}

.fleet-card-title-wrap {
    min-height: 54px;
    margin-bottom: 10px;
}

.fleet-card-title {
    margin: 0;
    color: #0f172a;
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.34;
    letter-spacing: -.35px;
}

.fleet-card-subtitle {
    color: #64748b;
    font-size: .88rem;
    font-weight: 500;
}

.fleet-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 10px;
    margin-bottom: 14px;
}

.fleet-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    color: #334155;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}

.fleet-meta-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--store-primary);
    font-size: 1rem;
}

.fleet-svg-icon {
    display: block;
    width: 20px;
    height: 20px;
}

.fleet-meta-text {
    color: #475569;
    font-weight: 800;
    white-space: nowrap;
}

.fleet-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #e8eef5;
}

.fleet-price-box {
    min-width: 0;
    width: 100%;
}

.fleet-price-label {
    margin-bottom: 4px;
    color: #64748b;
    font-size: .74rem;
    font-weight: 500;
}

.fleet-price-main {
    margin-bottom: 3px;
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -.75px;
}

.fleet-price-contact {
    font-size: 1.02rem;
    letter-spacing: -.3px;
}

.fleet-price-sub {
    color: #64748b;
    font-size: .85rem;
    font-weight: 500;
}

.fleet-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 14px;
    background: #16a34a;
    color: #ffffff;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 14px 28px rgba(22, 163, 74, .18);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.fleet-book-btn:hover {
    transform: translateY(-1px);
    background: #15803d;
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(22, 163, 74, .24);
}

/* ==================================================
   09. Brand Carousel Section
   Vehicle brand logo marquee carousel.
   ================================================== */

.brand-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(249, 115, 22, .08), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.brand-heading {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.brand-heading-text {
    max-width: 650px;
    margin: 0 auto;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.8;
}

.brand-slider {
    position: relative;
    overflow: hidden;
    padding: 18px 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(226, 232, 240, .9);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .06);
}

.brand-slider::before,
.brand-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 3;
    pointer-events: none;
}

.brand-slider::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0));
}

.brand-slider::after {
    right: 0;
    background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0));
}

.brand-track {
    display: flex;
    width: max-content;
    animation: brandMarquee 34s linear infinite;
}

.brand-slider:hover .brand-track {
    animation-play-state: paused;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-right: 22px;
}

.brand-item {
    width: 150px;
    height: 92px;
    flex: 0 0 auto;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .055);
    transition: all .28s ease;
}

.brand-item:hover {
    transform: translateY(-6px);
    border-color: rgba(249, 115, 22, .35);
    box-shadow: 0 22px 45px rgba(15, 23, 42, .10);
}

.brand-logo {
    max-width: 100%;
    max-height: 48px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .72;
    transition: all .28s ease;
}

.brand-item:hover .brand-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* ==================================================
   10. Company Profile Video Section
   Company profile video card and embedded iframe wrapper.
   ================================================== */

.company-profile-section {
    position: relative;
    overflow-x: hidden;
    background: radial-gradient(circle at top right, rgba(249, 115, 22, .08), transparent 32%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.company-profile-section .company-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 24px;
}

.company-profile-section .company-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.company-profile-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 34px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .07);
}

.company-profile-text {
    color: #64748b;
    font-size: .98rem;
    line-height: 1.85;
    margin-bottom: 0;
}

.company-video-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 28px;
    background: #0f172a;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
}

.company-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==================================================
   11. Membership Logo Carousel
   Membership/partner logo carousel within the company profile area.
   ================================================== */

.membership-box {
    padding: 20px;
    border-radius: 26px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid rgba(226, 232, 240, .95);
}

.membership-title {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: -.2px;
}

.membership-slider {
    position: relative;
    overflow: hidden;
    padding: 6px 0;
}

.membership-slider::before,
.membership-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46px;
    z-index: 2;
    pointer-events: none;
}

.membership-slider::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0));
}

.membership-slider::after {
    right: 0;
    background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0));
}

.membership-track {
    display: flex;
    width: max-content;
    animation: membershipMarquee 24s linear infinite;
}

.membership-slider:hover .membership-track {
    animation-play-state: paused;
}

.membership-group {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 14px;
}

.membership-item {
    width: 118px;
    height: 76px;
    flex: 0 0 auto;
    padding: 15px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
    transition: all .28s ease;
}

.membership-item:hover {
    transform: translateY(-5px);
    border-color: rgba(249, 115, 22, .35);
    box-shadow: 0 20px 45px rgba(15, 23, 42, .10);
}

.membership-logo {
    max-width: 100%;
    max-height: 46px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .75;
    transition: all .28s ease;
}

.membership-item:hover .membership-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.04);
}

/* ==================================================
   12. Testimonial Section
   Customer testimonial cards, avatars, ratings, and quote icon.
   ================================================== */

.testimonial-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(249, 115, 22, .08), transparent 32%), radial-gradient(circle at bottom right, rgba(15, 23, 42, .05), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.testimonial-heading {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.testimonial-heading-text {
    max-width: 660px;
    margin: 0 auto;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.8;
}

.testimonial-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 30px 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .07);
    transition: all .32s ease;
}

.testimonial-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(249, 115, 22, .13), transparent 34%);
    opacity: 0;
    transition: opacity .32s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: rgba(249, 115, 22, .28);
    box-shadow: 0 30px 75px rgba(15, 23, 42, .12);
}

.testimonial-card:hover::before {
    opacity: 1;
}

.testimonial-quote-icon {
    position: absolute;
    top: 20px;
    right: 24px;
    color: rgba(249, 115, 22, .10);
    font-size: 4.2rem;
    line-height: 1;
}

.testimonial-rating {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 4px;
    color: #f97316;
    font-size: .95rem;
}

.testimonial-text {
    position: relative;
    z-index: 2;
    min-height: 118px;
    margin-bottom: 26px;
    color: #475569;
    font-size: .95rem;
    line-height: 1.85;
    font-weight: 400;
}

.testimonial-user {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(226, 232, 240, .9);
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #ffffff;
    font-size: .9rem;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(249, 115, 22, .22);
}

.testimonial-user h6 {
    margin: 0 0 3px;
    color: #0f172a;
    font-size: .96rem;
    font-weight: 900;
    letter-spacing: -.2px;
}

.testimonial-user span {
    display: block;
    color: #64748b;
    font-size: .82rem;
    font-weight: 600;
}

/* ==================================================
   13. Location Section
   Office/location information cards, WhatsApp button, and map embed.
   ================================================== */

.location-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(249, 115, 22, .08), transparent 34%), linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.location-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 34px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .07);
}

.location-text {
    color: #64748b;
    font-size: .98rem;
    line-height: 1.85;
    margin-bottom: 24px;
}

.location-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.location-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid rgba(226, 232, 240, .9);
    transition: all .28s ease;
}

.location-info-item:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 115, 22, .28);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .07);
}

.location-info-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #f97316, #fb923c);
    box-shadow: 0 12px 26px rgba(249, 115, 22, .22);
}

.location-info-item h6 {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 900;
}

.location-info-item p {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.6;
}

.location-actions {
    margin-top: 26px;
}

.btn-location-wa {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    background: #16a34a;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(22, 163, 74, .22);
    transition: all .25s ease;
}

.btn-location-wa:hover {
    color: #ffffff;
    background: #15803d;
    transform: translateY(-2px);
}

.location-map-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 430px;
    border-radius: 28px;
    background: #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
}

.location-map-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==================================================
   14. FAQ Section
   FAQ accordion layout and interaction styling.
   ================================================== */

.faq-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top right, rgba(249, 115, 22, .08), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.faq-heading {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.faq-heading-text {
    max-width: 660px;
    margin: 0 auto;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.8;
}

.faq-wrapper {
    max-width: 920px;
    margin: 0 auto;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 22px !important;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .055);
    transition: all .28s ease;
}

.faq-item:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 115, 22, .28);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .09);
}

.faq-button {
    gap: 16px;
    padding: 22px 24px;
    color: #0f172a;
    background: #ffffff;
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.5;
    box-shadow: none !important;
}

.faq-button:not(.collapsed) {
    color: #0f172a;
    background: linear-gradient(90deg, rgba(249, 115, 22, .10), rgba(255, 255, 255, .95));
}

.faq-button::after {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    margin-left: auto;
    border-radius: 14px;
    background-color: rgba(249, 115, 22, .10);
    background-size: 16px;
    background-position: center;
    transition: all .28s ease;
}

.faq-button:not(.collapsed)::after {
    background-color: #f97316;
    filter: brightness(0) invert(1);
}

.faq-number {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #f97316, #fb923c);
    font-size: .82rem;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(249, 115, 22, .22);
}

.faq-body {
    padding: 0 24px 24px 82px;
    color: #64748b;
    font-size: .95rem;
    line-height: 1.85;
    background: #ffffff;
}

/* ==================================================
   15. Rental Terms Accordion Section
   Rental requirement and terms accordion cards.
   ================================================== */

.rental-terms-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(249, 115, 22, .08), transparent 34%), linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.rental-terms-heading {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.rental-terms-heading-text {
    max-width: 690px;
    margin: 0 auto;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.8;
}

.terms-card {
    height: 100%;
    padding: 26px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .07);
}

.terms-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.terms-card-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #f97316, #fb923c);
    box-shadow: 0 16px 34px rgba(249, 115, 22, .24);
}

.terms-card-header h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -.5px;
}

.terms-card-header p {
    margin: 0;
    color: #64748b;
    font-size: .92rem;
    line-height: 1.7;
}

.terms-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.terms-item {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 18px !important;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .045);
    transition: all .28s ease;
}

.terms-item:hover {
    border-color: rgba(249, 115, 22, .28);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .075);
}

.terms-button {
    padding: 18px 20px;
    color: #0f172a;
    background: #ffffff;
    font-size: .94rem;
    font-weight: 850;
    line-height: 1.45;
    box-shadow: none !important;
}

.terms-button:not(.collapsed) {
    color: #0f172a;
    background: linear-gradient(90deg, rgba(249, 115, 22, .11), rgba(255, 255, 255, .96));
}

.terms-button::after {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background-color: rgba(249, 115, 22, .10);
    background-size: 14px;
    background-position: center;
    transition: all .28s ease;
}

.terms-button:not(.collapsed)::after {
    background-color: #f97316;
    filter: brightness(0) invert(1);
}

.terms-body {
    padding: 0 20px 20px;
    color: #64748b;
    font-size: .91rem;
    line-height: 1.8;
    background: #ffffff;
}

/* ==================================================
   16. Why Choose Section
   Service value proposition cards and hover states.
   ================================================== */

.why-choose-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(249, 115, 22, .08), transparent 34%), radial-gradient(circle at bottom right, rgba(15, 23, 42, .05), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.why-choose-heading {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.why-choose-heading-text {
    max-width: 690px;
    margin: 0 auto;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.8;
}

.why-choose-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 30px 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .065);
    transition: all .32s ease;
}

.why-choose-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(249, 115, 22, .14), transparent 36%);
    opacity: 0;
    transition: opacity .32s ease;
}

.why-choose-card::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 0;
    height: 4px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, #f97316, #fb923c);
    opacity: .85;
}

.why-choose-card:hover {
    transform: translateY(-8px);
    border-color: rgba(249, 115, 22, .30);
    box-shadow: 0 30px 75px rgba(15, 23, 42, .12);
}

.why-choose-card:hover::before {
    opacity: 1;
}

.why-choose-number {
    position: absolute;
    top: 24px;
    right: 26px;
    color: rgba(15, 23, 42, .06);
    font-size: 3rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
}

.why-choose-icon {
    position: relative;
    z-index: 2;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.55rem;
    background: linear-gradient(135deg, #f97316, #fb923c);
    box-shadow: 0 18px 35px rgba(249, 115, 22, .24);
    transition: all .32s ease;
}

.why-choose-card:hover .why-choose-icon {
    transform: rotate(-4deg) scale(1.06);
    box-shadow: 0 22px 44px rgba(249, 115, 22, .32);
}

.why-choose-card h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -.3px;
}

.why-choose-card p {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    color: #64748b;
    font-size: .92rem;
    line-height: 1.8;
}

/* ==================================================
   17. Travel Tips Article Slider Section
   Article carousel cards, controls, indicators, and links.
   ================================================== */

.travel-tips-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top right, rgba(249, 115, 22, .08), transparent 34%), linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.travel-tips-heading {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.travel-tips-heading-text {
    max-width: 690px;
    margin: 0 auto;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.8;
}

.travel-tips-carousel {
    position: relative;
    padding-bottom: 72px;
}

.travel-article-card {
    height: 100%;
    overflow: hidden;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .07);
    transition: all .32s ease;
}

.travel-article-card:hover {
    transform: translateY(-8px);
    border-color: rgba(249, 115, 22, .30);
    box-shadow: 0 30px 75px rgba(15, 23, 42, .12);
}

.travel-article-image-wrap {
    position: relative;
    display: block;
    height: 230px;
    overflow: hidden;
    background: #e2e8f0;
}

.travel-article-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(15, 23, 42, .35));
    opacity: .8;
    pointer-events: none;
}

.travel-article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.travel-article-card:hover .travel-article-image {
    transform: scale(1.06);
}

.travel-article-body {
    padding: 24px;
}

.travel-article-category {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #c2410c;
    background: rgba(249, 115, 22, .10);
    font-size: .76rem;
    font-weight: 900;
}

.travel-article-title {
    margin-bottom: 12px;
    font-size: 1.12rem;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: -.35px;
}

.travel-article-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color .25s ease;
}

.travel-article-title a:hover {
    color: #f97316;
}

.travel-article-excerpt {
    min-height: 82px;
    margin-bottom: 20px;
    color: #64748b;
    font-size: .92rem;
    line-height: 1.75;
}

.travel-article-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f97316;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 900;
    transition: all .25s ease;
}

.travel-article-link:hover {
    color: #c2410c;
    gap: 12px;
}

.travel-tips-indicators {
    bottom: 8px;
    margin-bottom: 0;
}

.travel-tips-indicators [data-bs-target] {
    width: 34px;
    height: 5px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(249, 115, 22, .35);
    opacity: 1;
}

.travel-tips-indicators .active {
    width: 48px;
    background-color: #f97316;
}

.travel-tips-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    gap: 10px;
}

.travel-tips-control {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #f97316, #fb923c);
    box-shadow: 0 14px 30px rgba(249, 115, 22, .24);
    transition: all .25s ease;
}

.travel-tips-control:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(249, 115, 22, .32);
}

/* ==================================================
   18. Final CTA Section
   Closing conversion block and WhatsApp action card.
   ================================================== */

.final-cta-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(249, 115, 22, .08), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.final-cta-card {
    position: relative;
    overflow: hidden;
    padding: 42px;
    border-radius: 36px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(124, 45, 18, .90)), linear-gradient(135deg, #f97316, #fb923c);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .18);
}

.final-cta-pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .20), transparent 28%), radial-gradient(circle at 12% 88%, rgba(249, 115, 22, .32), transparent 34%);
    pointer-events: none;
}

.final-cta-card .row {
    position: relative;
    z-index: 2;
}

.final-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 9px 15px;
    border-radius: 999px;
    color: #fff7ed;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(14px);
    font-size: .82rem;
    font-weight: 800;
}

.final-cta-title {
    max-width: 760px;
    margin-bottom: 16px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -1.4px;
}

.final-cta-text {
    max-width: 720px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, .78);
    font-size: 1rem;
    line-height: 1.85;
}

.final-cta-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.final-cta-benefit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: .88rem;
    font-weight: 700;
}

.final-cta-benefit i {
    color: #fb923c;
}

.final-cta-action-card {
    position: relative;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.final-cta-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #16a34a;
    font-size: 1.7rem;
    box-shadow: 0 16px 34px rgba(22, 163, 74, .28);
}

.final-cta-action-card h3 {
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.5px;
}

.final-cta-action-card p {
    margin-bottom: 22px;
    color: #64748b;
    font-size: .92rem;
    line-height: 1.7;
}

.btn-final-cta {
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    background: #16a34a;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(22, 163, 74, .24);
    transition: all .25s ease;
}

.btn-final-cta:hover {
    color: #ffffff;
    background: #15803d;
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(22, 163, 74, .32);
}

/* ==================================================
   19. Footer
   Footer background and closing layout styles.
   ================================================== */

footer {
    background: #0f172a;
}

.footer-powered-text {
    font-size: .7rem;
}

/* ==================================================
   20. Keyframes & Animations
   Reusable animation declarations.
   ================================================== */

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

@keyframes membershipMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes brandMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ==================================================
   21. Responsive Styles
   Breakpoints are grouped here to keep component CSS clean above.
   This file uses a desktop-first approach with max-width media queries.
   ================================================== */

/* --------------------------------------------------
   Tablets and below (max-width: 991px)
   -------------------------------------------------- */
@media (max-width: 991px) {
    /* Anchor Section */
    .section-anchor,
    section[id] {
        scroll-margin-top: 84px;
    }

    /* Navbar Section */
    .navbar-store .navbar-collapse {
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(226, 232, 240, .95);
        box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    }

    .navbar-store .navbar-nav {
        align-items: stretch !important;
    }

    .navbar-store .nav-link {
        border-radius: 14px;
    }

    .navbar-store .dropdown-menu {
        margin-top: .35rem;
        box-shadow: none;
    }
    
    /* About Section */

    .aboutme-card {
        padding: 18px;
        border-radius: 28px;
    }

    .aboutme-image-wrap,
    .aboutme-image {
        min-height: 320px;
    }

    /* Trust Section */

    .trust-section {
        margin-top: -42px;
    }

    .trust-card {
        padding: 28px 24px;
        border-radius: 24px;
    }


    /* Fleet Cards */

    .fleet-card-media {
        height: 176px;
    }

    .fleet-card-title-wrap {
        min-height: auto;
    }


    /* Company Profile Video Section */

    .company-profile-card {
        padding: 22px;
        border-radius: 28px;
    }

    .company-video-wrap {
        border-radius: 22px;
    }

    /* Location Section */

    .location-card {
        padding: 22px;
        border-radius: 28px;
    }

    .location-map-wrap {
        min-height: 360px;
        border-radius: 22px;
    }

    /* Rental Terms Accordion Section */

    .terms-card {
        padding: 22px;
        border-radius: 26px;
    }

    /* Travel Tips Article Slider Section */

    .travel-article-image-wrap {
        height: 210px;
    }

    .travel-article-excerpt {
        min-height: auto;
    }

    /* Final CTA Section */

    .final-cta-card {
        padding: 32px;
        border-radius: 30px;
    }
}

/* --------------------------------------------------
   Mobile landscape and below (max-width: 768px)
   -------------------------------------------------- */
@media (max-width: 768px) {
    /* Hero Carousel */

    .hero-carousel-store .carousel-inner,
    .hero-carousel-store .carousel-item,
    .hero-slide,
    .min-vh-hero {
        min-height: 82vh;
    }

    .hero-slide {
        background-position: center right;
    }

    .hero-slide::before {
        background: linear-gradient(90deg, rgba(3, 7, 18, .84) 0%, rgba(3, 7, 18, .66) 58%, rgba(3, 7, 18, .30) 100%);
    }

    .hero-copy-panel {
        padding: 48px 0 82px;
    }

    .hero-title {
        font-size: clamp(2.05rem, 11vw, 3.2rem);
        letter-spacing: -1.6px;
        line-height: 1.02;
    }

    .hero-title::after {
        width: 72px;
        margin-top: 18px;
    }

    .hero-subtitle {
        font-size: .95rem;
        line-height: 1.72;
    }

    .hero-benefits {
        gap: 8px;
    }

    .hero-benefits span {
        min-height: 34px;
        padding: 7px 11px;
        font-size: .78rem;
    }

    .hero-actions {
        align-items: stretch;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        min-height: 50px;
        padding: 0 18px;
    }

    .hero-control {
        display: none;
    }

    .hero-indicators {
        left: 12px;
        bottom: 22px;
    }

    /* Trust Section */

    .trust-section {
        margin-top: -28px;
    }

    .trust-heading {
        text-align: left !important;
    }

    .trust-heading-text {
        font-size: .92rem;
    }

    .trust-card {
        padding: 26px 22px;
    }

    .trust-icon {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        font-size: 1.45rem;
    }

    .trust-card-number {
        font-size: 2.35rem;
    }

    /* Fleet Cards */

    .fleet-card-media {
        height: 168px;
    }

    /* Brand Carousel Section */

    .brand-slider {
        border-radius: 22px;
        padding: 14px 0;
    }

    .brand-slider::before,
    .brand-slider::after {
        width: 58px;
    }

    .brand-group {
        gap: 14px;
        padding-right: 14px;
    }

    .brand-item {
        width: 118px;
        height: 76px;
        border-radius: 18px;
        padding: 16px;
    }

    .brand-logo {
        max-height: 38px;
    }

    .brand-track {
        animation-duration: 30s;
    }

    /* Testimonial Section */

    .testimonial-card {
        padding: 26px 22px;
        border-radius: 24px;
    }

    .testimonial-text {
        min-height: auto;
        font-size: .92rem;
    }

    .testimonial-quote-icon {
        font-size: 3.6rem;
    }

    /* FAQ Section */

    .faq-accordion {
        gap: 12px;
    }

    .faq-button {
        align-items: flex-start;
        padding: 18px;
        gap: 12px;
        font-size: .92rem;
    }

    .faq-number {
        width: 36px;
        height: 36px;
        border-radius: 13px;
        font-size: .76rem;
    }

    .faq-button::after {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        background-size: 14px;
    }

    .faq-body {
        padding: 0 18px 20px 66px;
        font-size: .9rem;
    }

    /* Why Choose Section */

    .why-choose-card {
        padding: 26px 22px;
        border-radius: 24px;
    }

    .why-choose-icon {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        font-size: 1.4rem;
    }

    .why-choose-number {
        font-size: 2.45rem;
    }

    /* Travel Tips Article Slider Section */

    .travel-tips-carousel {
        padding-bottom: 82px;
    }

    .travel-tips-controls {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .travel-article-card {
        border-radius: 24px;
    }

    .travel-article-body {
        padding: 22px;
    }
}

/* --------------------------------------------------
   Small mobile devices (max-width: 576px)
   -------------------------------------------------- */
@media (max-width: 576px) {
    /* Navbar */

    .navbar-store .container {
        align-items: center;
    }

    .navbar-store .navbar-brand img {
        max-height: 36px;
    }

    .navbar-store .btn-whatsapp {
        min-height: 40px;
        padding-right: 14px !important;
        padding-left: 14px !important;
        font-size: .85rem;
    }

    /* About Section */

    .aboutme-section {
        padding-top: 3rem !important;
    }

    .aboutme-card {
        padding: 14px;
        border-radius: 24px;
    }

    .aboutme-image-wrap,
    .aboutme-image {
        min-height: 260px;
        border-radius: 20px;
    }

    .aboutme-text {
        font-size: .92rem;
        line-height: 1.8;
    }

    .aboutme-actions {
        gap: 10px;
    }

    .btn-aboutmore,
    .btn-aboutwa {
        width: 100%;
    }


    /* Fleet Cards */

    #armada {
        margin-bottom: 42px;
    }

    .fleet-item {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .fleet-card-premium {
        border-radius: 18px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    }

    .fleet-card-media {
        height: 132px;
    }

    .fleet-card-overlay-top {
        top: 10px;
        gap: 6px;
    }

    .fleet-badge-status,
    .fleet-badge-category {
        min-height: 24px;
        gap: 5px;
        padding: 0 8px;
        font-size: .6rem;
    }

    .fleet-badge-dot {
        width: 7px;
        height: 7px;
    }

    .fleet-card-body {
        padding: 12px;
    }

    .fleet-card-title-wrap {
        min-height: 42px;
        margin-bottom: 8px;
    }

    .fleet-card-title {
        font-size: .86rem;
        line-height: 1.32;
        letter-spacing: -.2px;
    }

    .fleet-meta-row {
        gap: 5px 7px;
        margin-bottom: 10px;
    }

    .fleet-meta-item {
        min-height: 20px;
        gap: 4px;
        font-size: .62rem;
    }

    .fleet-meta-icon {
        width: 16px;
        height: 16px;
        font-size: .78rem;
    }

    .fleet-svg-icon {
        width: 15px;
        height: 15px;
    }

    .fleet-card-footer {
        gap: 9px;
        padding-top: 11px;
    }

    .fleet-price-label {
        font-size: .64rem;
    }

    .fleet-price-main {
        font-size: .86rem;
        letter-spacing: -.35px;
    }

    .fleet-price-contact {
        font-size: .78rem;
    }

    .fleet-price-sub {
        font-size: .68rem;
    }

    .fleet-book-btn {
        min-height: 34px;
        border-radius: 12px;
        font-size: .76rem;
    }

    /* Company Profile Video Section */

    .company-profile-card {
        padding: 16px;
        border-radius: 24px;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    
    .company-profile-section > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .company-profile-section .company-profile-card,
    .company-profile-section .row,
    .company-profile-section .col-lg-7 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    .company-profile-section .company-video-wrap {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
    }
    
    .company-video-wrap {
        border-radius: 0px 0px 0px 0px;
        box-shadow: none;
        background: transparent;
    }

    .membership-item {
        width: 102px;
        height: 68px;
        padding: 12px;
    }

    .membership-logo {
        max-height: 38px;
    }

    .membership-track {
        animation-duration: 22s;
    }

    /* Location Section */

    .location-card {
        padding: 16px;
        border-radius: 24px;
    }

    .location-info-item {
        padding: 14px;
        border-radius: 18px;
    }

    .location-map-wrap {
        min-height: 320px;
    }

    .btn-location-wa {
        width: 100%;
    }

    /* Rental Terms Accordion Section */

    .terms-card {
        padding: 16px;
        border-radius: 24px;
    }

    .terms-card-header {
        gap: 13px;
    }

    .terms-card-icon {
        width: 50px;
        height: 50px;
        border-radius: 17px;
        font-size: 1.25rem;
    }

    .terms-card-header h3 {
        font-size: 1.08rem;
    }

    .terms-button {
        padding: 16px;
        font-size: .9rem;
    }

    .terms-body {
        padding: 0 16px 18px;
        font-size: .88rem;
    }

    /* Final CTA Section */

    .final-cta-card {
        padding: 24px 18px;
        border-radius: 26px;
    }

    .final-cta-title {
        letter-spacing: -.8px;
    }

    .final-cta-benefits {
        gap: 10px;
    }

    .final-cta-benefit {
        width: 100%;
        justify-content: flex-start;
    }

    .final-cta-action-card {
        padding: 22px;
        border-radius: 24px;
    }
}

/* --------------------------------------------------
   Small mobile devices (max-width: 480px)
   -------------------------------------------------- */
@media (max-width: 480px) {
    /* Fleet Cards */

    .fleet-card-media {
        height: 118px;
    }

    .fleet-badge-category {
        display: none;
    }

    .fleet-card-title-wrap {
        min-height: 38px;
    }

    .fleet-card-title {
        font-size: .8rem;
    }

    .fleet-meta-row {
        gap: 4px 6px;
    }

    .fleet-meta-text {
        font-size: .58rem;
    }

    /* FAQ Section */

    .faq-button {
        padding: 16px;
    }

    .faq-body {
        padding: 0 16px 18px 16px;
    }
}