/*====================================================================
 MANORANJAN HOLIDAYS - Luxury Black • Glass • Gold
====================================================================*/
/*====================================================================
13. HERO
====================================================================*/
.luxury-tour-hero {
    position: relative;
    padding: 10px 0 10px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(rgba(5, 5, 5, 0.82), rgba(5, 5, 5, 0.95));
}

.luxury-title {
    color: #fff;
}

/*====================================================================
14. HERO OVERLAY
====================================================================*/
.luxury-tour-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at top right,
            rgba(212, 175, 55, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(212, 175, 55, 0.08),
            transparent 35%
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.55));
}

.luxury-tour-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;
    background: linear-gradient(transparent, var(--body));
}

/*====================================================================
15. BACKGROUND GLOW
====================================================================*/
.luxury-tour-hero .container::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.12);
    filter: blur(90px);
    animation: heroGlow 10s ease-in-out infinite alternate;
    pointer-events: none;
}

.luxury-tour-hero .container::after {
    content: "";
    position: absolute;
    left: -150px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.08);
    filter: blur(80px);
    animation: heroGlowReverse 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes heroGlow {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(40px) scale(1.15);
    }
}

@keyframes heroGlowReverse {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-30px) scale(1.1);
    }
}

/*====================================================================
16. HERO CONTENT
====================================================================*/
.hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    margin-bottom: 60px;
}

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

/*====================================================================
17. HERO SUBTITLE
====================================================================*/
.hero-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 28px;
    border-radius: 100px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-subtitle::before,
.hero-subtitle::after {
    content: "";
    width: 36px;
    height: 2px;
    background: var(--gold);
}

/*====================================================================
18. HERO TITLE
====================================================================*/
.hero-title {
    margin: 24px 0 18px;
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1px;
    background: linear-gradient(180deg, #fff, #f8e39d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.12);
}

/*====================================================================
19. HERO DESCRIPTION
====================================================================*/
.hero-description {
    max-width: 760px;
    margin: auto;
    font-size: 17px;
    line-height: 1.9;
    color: var(--text-light);
}

/*====================================================================
20. SEARCH WRAPPER
====================================================================*/
.luxury-search-wrapper {
    position: relative;
    z-index: 10;
    margin-top: 60px;
}

/*====================================================================
21. PREMIUM SEARCH CARD
====================================================================*/
.luxury-search-card {
    position: relative;
    padding: 20px;
    overflow: hidden;
    border-radius: 20pxr-gradient(
            180deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.03)
        );
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    transition: var(--transition);
}

.luxury-search-card:hover {
    transform: translateY(-8px);
    border-color: var(--glass-border-hover);
    box-shadow:
        0 45px 110px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(212, 175, 55, 0.1);
}

/*====================================================================
22. SEARCH CARD BORDER
====================================================================*/
.luxury-search-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(212, 175, 55, 0.25),
        transparent 70%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/*====================================================================
23. SEARCH CARD GLOW
====================================================================*/
.luxury-search-card::after {
    content: "";
    position: absolute;
    top: -140px;
    right: -120px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    filter: blur(80px);
    pointer-events: none;
}

/*====================================================================
24. SEARCH HEADER
====================================================================*/
.search-header {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    z-index: 2;
}

.search-header h2 {
    margin-bottom: 10px;
    font-size: 34px;
    font-weight: 800;
}

.search-header p {
    max-width: 620px;
    margin: auto;
}

/*====================================================================
25. FLOATING PARTICLES
====================================================================*/
.luxury-search-wrapper span.hero-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
    animation: particleMove 10s ease-in-out infinite;
}

.luxury-search-wrapper span.hero-particle:nth-child(1) {
    top: 40px;
    left: -20px;
    width: 8px;
    height: 8px;
}

.luxury-search-wrapper span.hero-particle:nth-child(2) {
    right: -30px;
    bottom: 120px;
    width: 12px;
    height: 12px;
    animation-delay: 3s;
}

.luxury-search-wrapper span.hero-particle:nth-child(3) {
    left: 50%;
    top: -20px;
    width: 6px;
    height: 6px;
    animation-delay: 5s;
}

@keyframes particleMove {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-22px);
    }

    100% {
        transform: translateY(0);
    }
}

/*====================================================================
PART 03
ENTERPRISE TABS + SEARCH FORM
====================================================================*/

/*====================================================================
26. TAB WRAPPER
====================================================================*/
.luxury-tour-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 0 0 40px;
    padding: 0;
}

/*====================================================================
27. TAB BUTTON
====================================================================*/
.tour-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 95px;
    padding: 22px;
    overflow: hidden;
    cursor: pointer;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.03)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: var(--text-light);
    transition: var(--transition);
}

/*====================================================================
28. TAB BORDER
====================================================================*/
.tour-tab::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(212, 175, 55, 0.25),
        transparent 70%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
}

/*====================================================================
29. TAB SHINE
====================================================================*/
.tour-tab::after {
    content: "";
    position: absolute;
    top: -90%;
    left: -130%;
    width: 70px;
    height: 260%;
    background: linear-gradient(
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.45),
        rgba(255, 255, 255, 0)
    );
    transform: rotate(25deg);
    transition: 1s;
}

.tour-tab:hover::after {
    left: 150%;
}

/*====================================================================
30. TAB ICON
====================================================================*/
.tour-tab i {
    font-size: 26px;
    color: var(--gold);
    transition: var(--transition);
}

/*====================================================================
31. TAB TITLE
====================================================================*/
.tour-tab span {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

/*====================================================================
32. TAB HOVER
====================================================================*/
.tour-tab:hover {
    transform: translateY(-8px);
    border-color: var(--glass-border-hover);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.05)
    );
    box-shadow: var(--shadow);
}

.tour-tab:hover i {
    transform: scale(1.12) rotate(-6deg);
}

/*====================================================================
33. TAB ACTIVE
====================================================================*/
.tour-tab.active {
    color: #111;
    border-color: transparent;
    background: linear-gradient(135deg, #ffe38e, #d4af37, #b8860b);
    box-shadow: var(--gold-shadow);
}

.tour-tab.active span,
.tour-tab.active i {
    color: #111;
}

.tour-tab.active::before,
.tour-tab.active::after {
    display: none;
}

/*====================================================================
34. TAB CONTENT
====================================================================*/
.tab-content {
    position: relative;
}

.tab-pane {
    animation: fadeUp 0.5s ease both;
}

/*====================================================================
35. FORM GRID
====================================================================*/
.luxury-search-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
}

.form-group {
    position: relative;
    grid-column: span 3;
}

/*====================================================================
36. LABEL
====================================================================*/
.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
}

.form-label i {
    font-size: 13px;
}

/*====================================================================
37. INPUT
====================================================================*/
.form-control-luxury,
.form-select-luxury {
    width: 100%;
    height: 58px;
    padding: 0 20px;
    border: none;
    outline: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: var(--transition);
}

/*====================================================================
38. PLACEHOLDER
====================================================================*/
.form-control-luxury::placeholder {
    color: var(--text-muted);
}

/*====================================================================
39. HOVER
====================================================================*/
.form-control-luxury:hover,
.form-select-luxury:hover {
    border-color: rgba(212, 175, 55, 0.22);
    background: rgba(255, 255, 255, 0.06);
}

/*====================================================================
40. FOCUS
====================================================================*/
.form-control-luxury:focus,
.form-select-luxury:focus {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
}

/*====================================================================
41. SELECT
====================================================================*/
.form-select-luxury {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 55px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 14px;
}

/*====================================================================
42. OPTION
====================================================================*/
.form-select-luxury option {
    background: #fff;
    color: #111;
}

/*====================================================================
43. SEARCH BUTTON
====================================================================*/
.search-submit {
    grid-column: span 3;
    display: flex;
}

.btn-search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 58px;
    overflow: hidden;
    border: none;
    cursor: pointer;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #111;
    background: linear-gradient(135deg, #ffe28a, #d4af37, #b8860b);
    box-shadow: var(--gold-shadow);
    transition: var(--transition);
}

/*====================================================================
44. BUTTON SHINE
====================================================================*/
.btn-search::before {
    content: "";
    position: absolute;
    top: -70%;
    left: -130%;
    width: 70px;
    height: 240%;
    background: linear-gradient(
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0)
    );
    transform: rotate(25deg);
    transition: 1s;
}

.btn-search:hover::before {
    left: 150%;
}

/*====================================================================
45. BUTTON HOVER
====================================================================*/
.btn-search:hover {
    transform: translateY(-4px);
    box-shadow:
        0 30px 60px rgba(212, 175, 55, 0.35),
        0 15px 30px rgba(0, 0, 0, 0.2);
}

.btn-search i {
    transition: var(--transition);
}

.btn-search:hover i {
    transform: translateX(5px);
}

/*====================================================================
46. FORM HELP
====================================================================*/
.form-text {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/*====================================================================
47. INVALID
====================================================================*/
.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1) !important;
}

.invalid-feedback {
    margin-top: 8px;
    font-size: 13px;
    color: #f87171;
}

/*====================================================================
PART 04
COMMON COMPONENTS
SECTION HEADER • GLASS • BADGE • BUTTON SYSTEM
====================================================================*/

/*====================================================================
48. SECTION
====================================================================*/
.section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

.section-dark {
    background: var(--body);
}

.section-light {
    background: var(--surface);
}

/*====================================================================
49. SECTION HEADER
====================================================================*/
.section-header {
    position: relative;
    max-width: 820px;
    margin: 0 auto 70px;
    text-align: center;
    z-index: 2;
}

/*====================================================================
50. SECTION SUBTITLE
====================================================================*/
.section-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 26px;
    border-radius: 60px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.16);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-subtitle::before,
.section-subtitle::after {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--gold);
}

/*====================================================================
51. SECTION TITLE
====================================================================*/
.section-title {
    margin: 22px 0 18px;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 900;
    line-height: 1.15;
    background: linear-gradient(180deg, #fff, #f7de8c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title span {
    color: var(--gold);
    -webkit-text-fill-color: var(--gold);
}

/*====================================================================
52. SECTION DESCRIPTION
====================================================================*/
.section-description {
    max-width: 700px;
    margin: auto;
    font-size: 17px;
    line-height: 1.9;
    color: var(--text-light);
}

/*====================================================================
53. SECTION DIVIDER
====================================================================*/
.section-divider {
    width: 90px;
    height: 4px;
    margin: 25px auto 0;
    border-radius: 50px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/*====================================================================
54. GLASS CARD
====================================================================*/
.glass-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.03)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08),
        transparent 35%,
        rgba(212, 175, 55, 0.04)
    );
}

.glass-card:hover {
    transform: translateY(-6px);
    border-color: var(--glass-border-hover);
    box-shadow:
        var(--shadow-lg),
        0 0 35px rgba(212, 175, 55, 0.08);
}

/*====================================================================
55. GLASS ICON
====================================================================*/
.glass-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.16);
    color: var(--gold);
    font-size: 20px;
    transition: var(--transition);
}

.glass-icon:hover {
    transform: rotate(-8deg) scale(1.08);
    background: rgba(212, 175, 55, 0.12);
}

/*====================================================================
56. BADGE
====================================================================*/
.badge-luxury {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    transition: var(--transition);
}

.badge-luxury i {
    font-size: 13px;
    color: var(--gold);
}

.badge-luxury:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.25);
    background: rgba(212, 175, 55, 0.1);
}

/*====================================================================
57. STATUS BADGE
====================================================================*/
.badge-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
    color: #86efac;
}

.badge-warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fcd34d;
}

.badge-danger {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.25);
    color: #fca5a5;
}

/*====================================================================
58. BUTTON SYSTEM
====================================================================*/
.btn-luxury {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 56px;
    padding: 0 28px;
    overflow: hidden;
    cursor: pointer;
    border: none;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
    transition: var(--transition);
}

/*====================================================================
59. PRIMARY BUTTON
====================================================================*/
.btn-primary-luxury {
    color: #111;
    background: linear-gradient(135deg, #ffe08a, #d4af37, #b8860b);
    box-shadow: var(--gold-shadow);
}

.btn-primary-luxury::before {
    content: "";
    position: absolute;
    top: -70%;
    left: -120%;
    width: 70px;
    height: 240%;
    background: linear-gradient(
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0)
    );
    transform: rotate(25deg);
    transition: 1s;
}

.btn-primary-luxury:hover::before {
    left: 150%;
}

.btn-primary-luxury:hover {
    transform: translateY(-4px);
    box-shadow:
        0 28px 55px rgba(212, 175, 55, 0.35),
        0 12px 30px rgba(0, 0, 0, 0.25);
}

/*====================================================================
60. OUTLINE BUTTON
====================================================================*/
.btn-outline-luxury {
    color: var(--gold);
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.35);
}

.btn-outline-luxury:hover {
    color: #111;
    background: var(--gold);
    border-color: var(--gold);
}

/*====================================================================
61. ICON BUTTON
====================================================================*/
.btn-icon {
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
}

/*====================================================================
62. CARD META
====================================================================*/
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.card-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
}

.card-meta-item i {
    color: var(--gold);
}

/*====================================================================
63. CARD DIVIDER
====================================================================*/
.card-divider {
    width: 100%;
    height: 1px;
    margin: 24px 0;
    background: rgba(255, 255, 255, 0.08);
}

/*====================================================================
64. PRICE
====================================================================*/
.price-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.price-label {
    font-size: 13px;
    color: var(--text-muted);
}

.price-value {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: var(--gold);
}

.price-value small {
    font-size: 15px;
    color: var(--text-light);
}

/*====================================================================
PART 05
ENTERPRISE TOUR CARD SYSTEM
(DOMESTIC • INTERNATIONAL • GROUP)
====================================================================*/

/*====================================================================
65. TOUR GRID
====================================================================*/
.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 30px;
    align-items: stretch;
}

/*====================================================================
66. TOUR CARD
====================================================================*/
.tour-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.03)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: var(--shadow);
    transition: var(--transition);
    isolation: isolate;
}

.tour-card:hover {
    transform: translateY(-10px);
    border-color: var(--glass-border-hover);
    box-shadow:
        var(--shadow-lg),
        0 0 45px rgba(212, 175, 55, 0.12);
}

/*====================================================================
67. CARD BORDER EFFECT
====================================================================*/
.tour-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(212, 175, 55, 0.22),
        transparent 70%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/*====================================================================
68. IMAGE
====================================================================*/
.tour-card-image {
    position: relative;
    height: 270px;
    overflow: hidden;
    background: #111;
}

.tour-card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: 1s;
}

.tour-card:hover .tour-card-image img {
    transform: scale(1.12);
}

/*====================================================================
69. IMAGE OVERLAY
====================================================================*/
.tour-card-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(0, 0, 0, 0.18),
        rgba(0, 0, 0, 0.82)
    );
}

.tour-card-image::after {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.14);
    filter: blur(70px);
    z-index: 1;
}

/*====================================================================
70. TOP OVERLAY
====================================================================*/
.tour-card-top {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 5;
}

/*====================================================================
71. BADGE GROUP
====================================================================*/
.tour-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/*====================================================================
72. FAVORITE
====================================================================*/
.tour-favorite {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    color: #fff;
    transition: var(--transition);
}

.tour-favorite:hover {
    background: var(--gold);
    color: #111;
    transform: rotate(-10deg);
}

/*====================================================================
73. CONTENT
====================================================================*/
.tour-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px;
}

/*====================================================================
74. TITLE
====================================================================*/
.tour-card-title {
    margin-bottom: 14px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    transition: var(--transition);
}

.tour-card:hover .tour-card-title {
    color: var(--gold);
}

/*====================================================================
75. DESCRIPTION
====================================================================*/
.tour-card-description {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-light);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*====================================================================
76. TOUR INFO
====================================================================*/
.tour-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.tour-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tour-info-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold);
    font-size: 16px;
}

.tour-info-text {
    display: flex;
    flex-direction: column;
}

.tour-info-text small {
    font-size: 12px;
    color: var(--text-muted);
}

.tour-info-text strong {
    font-size: 14px;
    color: #fff;
}

/*====================================================================
77. FEATURES
====================================================================*/
.tour-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.tour-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
}

.tour-feature i {
    color: var(--gold);
}

/*====================================================================
78. PRICE AREA
====================================================================*/
.tour-price {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tour-price small {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.tour-price h3 {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
}

.tour-price h3 span {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-light);
}

/*====================================================================
79. ACTIONS
====================================================================*/
.tour-card-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.tour-card-actions .btn-luxury {
    flex: 1;
}

/*====================================================================
80. SHINE EFFECT
====================================================================*/
.tour-card-shine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}

.tour-card-shine::before {
    content: "";
    position: absolute;
    top: -70%;
    left: -130%;
    width: 80px;
    height: 260%;
    background: linear-gradient(
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0)
    );
    transform: rotate(25deg);
    transition: 1s;
}

.tour-card:hover .tour-card-shine::before {
    left: 150%;
}

/*====================================================================
81. CARD FOOTER
====================================================================*/
.tour-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tour-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #ffd54a;
}

.tour-rating i {
    font-size: 13px;
}

.tour-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-light);
}

.tour-location i {
    color: var(--gold);
}

/*====================================================================
PART 06
ENTERPRISE IMAGE SLIDER + BOOTSTRAP CAROUSEL
====================================================================*/

/*====================================================================
82. IMAGE SLIDER
====================================================================*/
.tour-slider {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #111;
}

.tour-slider,
.tour-slider .carousel,
.tour-slider .carousel-inner,
.tour-slider .carousel-item {
    height: 100%;
}

/*====================================================================
83. CAROUSEL ITEM
====================================================================*/
.tour-slider .carousel-item {
    transition:
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.5s ease;
}

/*====================================================================
84. IMAGE
====================================================================*/
.tour-slider img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.9s ease;
}

.tour-card:hover .tour-slider img {
    transform: scale(1.08);
}

/*====================================================================
85. IMAGE OVERLAY
====================================================================*/
.tour-slider::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.18),
        rgba(0, 0, 0, 0.75)
    );
}

.tour-slider::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -100px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.14);
    filter: blur(75px);
    pointer-events: none;
    z-index: 1;
}

/*====================================================================
86. CAROUSEL CONTROL
====================================================================*/
.tour-slider .carousel-control-prev,
.tour-slider .carousel-control-next {
    top: 50%;
    width: 48px;
    height: 48px;
    opacity: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: var(--transition);
}

.tour-card:hover .carousel-control-prev,
.tour-card:hover .carousel-control-next {
    opacity: 1;
}

.tour-slider .carousel-control-prev {
    left: 15px;
}

.tour-slider .carousel-control-next {
    right: 15px;
}

/*====================================================================
87. CONTROL HOVER
====================================================================*/
.tour-slider .carousel-control-prev:hover,
.tour-slider .carousel-control-next:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-50%) scale(1.08);
}

/*====================================================================
88. CONTROL ICON
====================================================================*/
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 15px;
    height: 15px;
    filter: brightness(0) invert(1);
}

/*====================================================================
89. INDICATORS
====================================================================*/
.tour-slider .carousel-indicators {
    left: 50%;
    bottom: 18px;
    margin: 0;
    gap: 8px;
    transform: translateX(-50%);
}

.tour-slider .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    margin: 0;
    border: none;
    opacity: 0.35;
    border-radius: 50%;
    background: #fff;
    transition: var(--transition-fast);
}

.tour-slider .carousel-indicators .active {
    width: 28px;
    opacity: 1;
    border-radius: 30px;
    background: var(--gold);
}

/*====================================================================
90. LOADING
====================================================================*/
.image-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    overflow: hidden;
}

.image-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0)
    );
    transform: translateX(-100%);
    animation: imageLoading 1.5s linear infinite;
}

@keyframes imageLoading {
    100% {
        transform: translateX(100%);
    }
}

/*====================================================================
91. IMAGE PLACEHOLDER
====================================================================*/
.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #111;
}

.image-placeholder i {
    font-size: 60px;
    color: #333;
}

/*====================================================================
92. SKELETON
====================================================================*/
.image-skeleton {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #141414;
}

.image-skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
    transform: translateX(-100%);
    animation: skeletonMove 1.4s linear infinite;
}

@keyframes skeletonMove {
    100% {
        transform: translateX(100%);
    }
}

/*====================================================================
93. TOUCH DEVICE
====================================================================*/
@media (hover: none) {
    .tour-slider .carousel-control-prev,
    .tour-slider .carousel-control-next {
        opacity: 1;
    }
}

/*====================================================================
94. PERFORMANCE
====================================================================*/
.tour-slider,
.tour-slider img,
.carousel-item {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/*====================================================================
95. OBJECT FIT
====================================================================*/
.tour-slider img:not([src]),
.tour-slider img[src=""] {
    opacity: 0;
}

.tour-slider img.loaded {
    opacity: 1;
}

/*====================================================================
96. PARALLAX EFFECT
====================================================================*/
.tour-card:hover .carousel-item.active img {
    transform: scale(1.1);
}

/*====================================================================
97. IMAGE SHINE
====================================================================*/
.tour-slider .image-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}

.tour-slider .image-shine::before {
    content: "";
    position: absolute;
    top: -70%;
    left: -130%;
    width: 90px;
    height: 250%;
    background: linear-gradient(
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0)
    );
    transform: rotate(25deg);
    transition: 1s;
}

.tour-card:hover .image-shine::before {
    left: 150%;
}

/*====================================================================
98. ZOOM CURSOR
====================================================================*/
.tour-slider img {
    cursor: zoom-in;
}

/*====================================================================
99. NO IMAGE
====================================================================*/
.no-tour-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #111;
}

.no-tour-image i {
    font-size: 64px;
    color: #333;
}

/*====================================================================
PART 07
FINAL OPTIMIZATION + RESPONSIVE
====================================================================*/

/*====================================================================
101. EMPTY STATE
====================================================================*/
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 30px;
    text-align: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.03)
    );
    border: 1px dashed rgba(212, 175, 55, 0.2);
}

.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin-bottom: 25px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    font-size: 34px;
    color: var(--gold);
}

.empty-state h3 {
    margin-bottom: 12px;
    font-size: 28px;
}

.empty-state p {
    max-width: 520px;
    margin: auto;
}

/*====================================================================
102. GLOBAL LOADER
====================================================================*/
.page-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    z-index: 99999;
    transition: 0.4s;
}

.loader-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--gold);
    animation: loaderSpin 1s linear infinite;
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

/*====================================================================
103. SCROLL TO TOP
====================================================================*/
.scroll-top {
    position: fixed;
    right: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe08a, #d4af37, #b8860b);
    color: #111;
    box-shadow: var(--gold-shadow);
    transition: var(--transition);
    z-index: 100;
}

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

.scroll-top:hover {
    transform: translateY(-5px);
}

/*====================================================================
104. COMMON HOVER
====================================================================*/
a,
button,
.btn-luxury,
.badge-luxury,
.glass-card,
.tour-card,
.tour-tab {
    -webkit-tap-highlight-color: transparent;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/*====================================================================
105. ACCESSIBILITY
====================================================================*/
:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.45);
    outline-offset: 4px;
}

::selection {
    background: var(--gold);
    color: #000;
}

/*====================================================================
107. DESKTOP XXL
====================================================================*/
@media (min-width: 1600px) {
    .container {
        max-width: 1500px;
    }

    .hero-title {
        font-size: 82px;
    }

    .tour-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .tour-card-image {
        height: 250px;
    }
}

/*====================================================================
108. LAPTOP XL
====================================================================*/
@media (max-width: 1400px) {
    .container {
        max-width: 1240px;
    }

    .hero-title {
        font-size: 60px;
    }

    .tour-card-image {
        height: 260px;
    }
}

/*====================================================================
109. LAPTOP
====================================================================*/
@media (max-width: 1200px) {
    section {
        padding: 80px 0;
    }

    .luxury-search-card {
        padding: 35px;
    }

    .tour-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .form-group {
        grid-column: span 4;
    }

    .search-submit {
        grid-column: span 12;
    }
}

/*====================================================================
110. TABLET
====================================================================*/
@media (max-width: 992px) {
    .hero-title {
        font-size: 46px;
    }

    .hero-description {
        font-size: 16px;
    }

    .luxury-tour-tabs {
        grid-template-columns: 1fr;
    }

    .tour-tab {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        
    }

    .tour-tab span {
        flex: 1;
    }

    .luxury-search-form {
        grid-template-columns: repeat(6, 1fr);
    }

    .form-group {
        grid-column: span 3;
    }

    .tour-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tour-card-image {
        height: 230px;
    }
}

/*====================================================================
111. MOBILE
====================================================================*/
@media (max-width: 768px) {
    section {
        padding: 65px 0;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-subtitle,
    .section-subtitle {
        font-size: 11px;
        padding: 10px 18px;
        letter-spacing: 1px;
    }

    .luxury-search-form {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .form-group,
    .search-submit {
        grid-column: unset;
    }

    .form-control-luxury,
    .form-select-luxury,
    .btn-search,
    .btn-luxury {
        height: 54px;
        font-size: 14px;
    }

    .tour-grid {
        grid-template-columns: 1fr;
    }

    .tour-card-content {
        padding: 22px;
    }

    .tour-card-title {
        font-size: 22px;
    }

    .tour-info {
        grid-template-columns: 1fr;
    }

    .tour-card-actions {
        flex-direction: column;
    }

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

/*====================================================================
112. SMALL MOBILE
====================================================================*/
@media (max-width: 576px) {
    .container {
        padding-inline: 5px;
    }

    .hero-title {
        font-size: 20px;
    }

    .tour-tab {   
        min-height: 40px;
    }

    .luxury-search-card {
        padding: 5px 10px;
        border-radius: 10px;
    }

    .section-title {
        font-size: 20px;
    }

    .hero-subtitle::before,
    .hero-subtitle::after,
    .section-subtitle::before,
    .section-subtitle::after {
        display: none;
    }

    .tour-card-image {
        height: 210px;
    }

    .tour-card-title {
        font-size: 20px;
    }

    .price-value,
    .tour-price h3 {
        font-size: 28px;
    }

    .badge-luxury {
        font-size: 12px;
        padding: 8px 14px;
    }
}

/*====================================================================
113. REDUCED MOTION
====================================================================*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*====================================================================
114. PERFORMANCE
====================================================================*/
img,
button,
.btn-luxury,
.tour-card,
.glass-card,
.tour-slider,
.tour-tab {
    backface-visibility: hidden;
    transform: translateZ(0);
}

.tour-card,
.glass-card,
.btn-luxury,
.tour-slider {
    will-change: transform;
}

/*====================================================================
115. END
====================================================================*/