:root { --c-primary: #C45C26; --c-primary-dark: #9E4A1F; --c-primary-light: #D97B4A; --c-secondary: #D4A574; --c-accent: #E8B86D; --c-accent-dark: #C9973F; --c-dark: #2C1810; --c-dark-light: #3D2317; --c-dark-medium: #4A2E1F; --c-light: #FDF6F0; --c-light-alt: #F5EDE5; --c-white: #FFFFFF; --c-gray-900: #2C1810; --c-gray-700: #5C4A40; --c-gray-600: #6B5D54; --c-gray-500: #8A7B70; --c-gray-400: #A89B91; --c-gray-300: #C5BAB0; --c-gray-200: #E0D8D0; --c-gray-100: #F0EBE6; --c-success: #2E7D4A; --c-warning: #D4A017; --c-error: #C43C3C; --c-info: #2E6B8A; --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "SF Mono", Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --fs-4xl: 3rem; --fs-5xl: 3.75rem; --fw-normal: 500; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.75; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1600px; --container-2xl: 1800px; --header-height: 78px; --header-height-scrolled: 64px; --shadow-sm: 0 1px 2px rgba(44, 24, 16, 0.05); --shadow: 0 4px 12px rgba(44, 24, 16, 0.08); --shadow-md: 0 8px 24px rgba(44, 24, 16, 0.1); --shadow-lg: 0 16px 40px rgba(44, 24, 16, 0.12); --shadow-xl: 0 24px 60px rgba(44, 24, 16, 0.15); --radius-sm: 6px; --radius: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; --transition-fast: 150ms ease; --transition: 250ms ease; --transition-slow: 400ms ease; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-tooltip: 600; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-normal); line-height: var(--lh-relaxed); color: var(--c-gray-700); background-color: var(--c-light); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; max-width: 100vw; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--c-primary); } ul, ol { list-style: none; } img, video { display: block; max-width: 100%; height: auto; } svg:not(.svg-icon) { display: block; max-width: 100%; height: auto; } .svg-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; color: inherit; flex-shrink: 0; line-height: 1; max-width: none; } .svg-icon-xs { width: 10px; height: 10px; } .svg-icon-sm { width: 16px; height: 16px; } .svg-icon-nav { width: 11px; height: 11px; } .svg-icon-md { width: 18px; height: 18px; } .svg-icon-lg { width: 20px; height: 20px; } .svg-icon-xl { width: 28px; height: 28px; } .svg-icon use { pointer-events: none; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; } button { cursor: pointer; } table { border-collapse: collapse; width: 100%; margin: 24px 0; background: #ffffff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03); border: 1px solid #E2DBD3; } table thead { background: #F3F1ED; } table thead th { padding: 18px 22px; text-align: left; font-size: 14px; font-weight: 600; color: #1E293B; text-transform: uppercase; letter-spacing: 0.3px; border: none; white-space: nowrap; } table thead th:first-child { border-top-left-radius: 14px; } table thead th:last-child { border-top-right-radius: 14px; } table tbody tr { border-bottom: 1px solid #E2DBD3; transition: background-color 0.2s ease; } table tbody tr:last-child { border-bottom: none; } table tbody tr:hover { background-color: #F7F6F3; } table tbody td { padding: 18px 22px; font-size: 15px; color: #333333; font-weight: 400; border: none; vertical-align: middle; } table tbody td:first-child { font-weight: 500; color: #1E293B; } table.table-bordered { border: 1px solid #E2DBD3; } table.table-bordered thead th { border-bottom: 1px solid #E2DBD3; } table.table-bordered tbody td { border-right: 1px solid #E2DBD3; } table.table-bordered tbody td:last-child { border-right: none; } table.table-striped tbody tr:nth-child(even) { background-color: #F7F6F3; } table.table-striped tbody tr:nth-child(even):hover { background-color: #F3F1ED; } table.table-compact thead th, table.table-compact tbody td { padding: 14px 18px; font-size: 14px; } table.table-center { text-align: center; } table.table-center thead th, table.table-center tbody td { text-align: center; } table tbody td:last-child { font-weight: 600; color: #C05A33; } table .price-cell { font-weight: 600; color: #C05A33; font-family: var(--font-display, sans-serif); } @media (max-width: 768px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; } table thead th { padding: 14px 16px; font-size: 13px; } table tbody td { padding: 14px 16px; font-size: 14px; } table.table-compact thead th, table.table-compact tbody td { padding: 12px 14px; font-size: 13px; } } .table-wrapper { overflow-x: auto; margin: 24px 0; border-radius: 14px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03); border: 1px solid #E2DBD3; } .table-wrapper table { margin: 0; box-shadow: none; border-radius: 0; border: none; } table caption { padding: 14px 22px; font-size: 14px; font-weight: 500; color: #6B7280; text-align: left; background: #F7F6F3; border-bottom: 1px solid #E2DBD3; } ::selection { background-color: var(--c-primary); color: var(--c-white); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--c-dark); letter-spacing: -0.025em; } h4, h5, h6 { font-family: var(--font-body); font-weight: 600; line-height: var(--lh-tight); color: var(--c-dark); } p { font-family: var(--font-body); font-weight: 500; letter-spacing: -0.01em; line-height: 1.7; color: #3D2317; } h1 { font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl)); } h2 { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); } h3 { font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl)); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-md); } h6 { font-size: var(--fs-base); } p { margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } .lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--c-gray-600); } small, .text-sm { font-size: var(--fs-sm); } strong, .text-bold { font-weight: var(--fw-bold); } .container { width: 100%; max-width: var(--container-xl); margin-left: auto; margin-right: auto; padding-left: var(--space-6); padding-right: var(--space-6); } .container-sm { max-width: var(--container-sm); } .container-md { max-width: var(--container-md); } .container-lg { max-width: var(--container-lg); } .container-xl { max-width: var(--container-xl); } .container-2xl { max-width: var(--container-2xl); } .container-fluid { max-width: 100%; } .grid { display: grid; gap: var(--space-6); } .grid-1 { grid-template-columns: repeat(1, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } .grid-6 { grid-template-columns: repeat(6, 1fr); } .grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } .grid-sidebar { grid-template-columns: 300px 1fr; } .grid-sidebar-right { grid-template-columns: 1fr 300px; } .grid-content { grid-template-columns: 1fr minmax(0, 800px) 1fr; } .gap-0 { gap: 0; } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .gap-10 { gap: var(--space-10); } .gap-12 { gap: var(--space-12); } .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-center { justify-content: center; align-items: center; } .flex-between { justify-content: space-between; align-items: center; } .flex-start { justify-content: flex-start; align-items: center; } .flex-end { justify-content: flex-end; align-items: center; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .flex-1 { flex: 1; } .flex-none { flex: none; } section, .section { padding: var(--space-20) 0; } .section-sm { padding: var(--space-12) 0; } .section-lg { padding: var(--space-24) 0; } .section-header { text-align: center; max-width: 700px; margin: 0 auto var(--space-12); } .section-header h2 { margin-bottom: var(--space-4); } .section-header p { font-size: var(--fs-lg); color: var(--c-gray-500); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1.5; border-radius: var(--radius); transition: all var(--transition); white-space: nowrap; cursor: pointer; } .btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); } .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--fs-md); } .btn-primary { background: var(--c-primary); color: var(--c-white); } .btn-primary:hover { background: var(--c-primary-dark); color: var(--c-white); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-secondary { background: var(--c-secondary); color: var(--c-dark); } .btn-secondary:hover { background: var(--c-accent); color: var(--c-dark); } .btn-outline { background: transparent; color: var(--c-primary); border: 2px solid var(--c-primary); } .btn-outline:hover { background: var(--c-primary); color: var(--c-white); } .btn-ghost { background: transparent; color: var(--c-gray-700); } .btn-ghost:hover { background: var(--c-gray-100); color: var(--c-dark); } .btn-white { background: var(--c-white); color: var(--c-primary); } .btn-white:hover { background: var(--c-light); color: var(--c-primary-dark); transform: translateY(-2px); } .btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-full); } .btn-icon-sm { width: 36px; height: 36px; } .btn-icon-lg { width: 52px; height: 52px; } .card { background: var(--c-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: all var(--transition); } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .card-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; } .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .card:hover .card-img img { transform: scale(1.08); } .card-badge { position: absolute; top: var(--space-4); left: var(--space-4); padding: var(--space-1) var(--space-3); background: var(--c-primary); color: var(--c-white); font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.05em; } .card-badge-accent { background: var(--c-accent); color: var(--c-dark); } .card-body { padding: var(--space-6); } .card-title { font-size: var(--fs-lg); margin-bottom: var(--space-2); } .card-text { font-size: var(--fs-sm); color: var(--c-gray-500); margin-bottom: var(--space-4); } .card-meta { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--c-gray-100); } .card-price { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-primary); } .card-price span { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--c-gray-400); } .card-horizontal { display: grid; grid-template-columns: 280px 1fr; } .card-horizontal .card-img { aspect-ratio: auto; height: 100%; } .card-simple { box-shadow: none; border: 1px solid var(--c-gray-200); } .card-simple:hover { border-color: var(--c-primary); box-shadow: var(--shadow); } .form-group { margin-bottom: var(--space-5); } .form-label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-gray-700); } .form-input, .form-select, .form-textarea { width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--fs-base); color: #4b5563; background: var(--c-white); border: 1px solid var(--c-gray-300); border-radius: var(--radius); transition: all var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(196, 92, 38, 0.15); } .form-input::placeholder { color: var(--c-gray-400); } .form-textarea { min-height: 120px; resize: vertical; } .form-help { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--c-gray-500); } .form-error { color: var(--c-error); } .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.05em; } .badge-primary { background: rgba(196, 92, 38, 0.1); color: var(--c-primary); } .badge-success { background: rgba(46, 125, 74, 0.1); color: var(--c-success); } .badge-warning { background: rgba(212, 160, 23, 0.1); color: var(--c-warning); } .topbar { background: #1a1a1a; color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 500; padding: 10px 0; } @media (max-width: 1023px) { .topbar { display: none; } } .topbar .container { display: flex; justify-content: space-between; align-items: center; } .topbar-left { display: flex; align-items: center; gap: 28px; } .topbar-item { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.9); transition: color 0.2s ease; } .topbar-item:hover { color: #fff; } .topbar-item i { font-size: 15px; color: rgba(255, 255, 255, 0.7); } .topbar-right { display: flex; align-items: center; gap: 8px; } .topbar-social { display: flex; align-items: center; gap: 4px; } .topbar-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: rgba(255, 255, 255, 0.8); border-radius: 50%; font-size: 18px; transition: all 0.2s ease; } .topbar-social a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); } .header, .site-header, .header-main { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-fixed); background: #fff; border-bottom: 1px solid #eee; transition: box-shadow 0.3s ease; min-height: 78px; display: flex; align-items: center; } .header.scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); } .header .container { display: flex; justify-content: space-between; align-items: center; min-height: 78px; width: 100%; gap: 24px; } html { scroll-padding-top: 94px; } .content-main :is(h2, h3, h4)[id], .tour-content :is(h2, h3, h4)[id], .tour-section :is(h2, h3, h4)[id], .guide-content :is(h2, h3, h4)[id], .destination-content :is(h2, h3, h4)[id] { scroll-margin-top: 94px; } @media (max-width: 1023px) { html { scroll-padding-top: 90px; } .content-main :is(h2, h3, h4)[id], .tour-content :is(h2, h3, h4)[id], .tour-section :is(h2, h3, h4)[id], .guide-content :is(h2, h3, h4)[id], .destination-content :is(h2, h3, h4)[id] { scroll-margin-top: 90px; } } .logo { display: flex; align-items: center; flex-shrink: 0; } .site-header .logo img, .header-logo img, .navbar-brand img, .header .logo img { width: 180px !important; max-width: 180px !important; height: auto !important; display: block; } @media (max-width: 768px) { .site-header .logo img, .header-logo img, .navbar-brand img, .header .logo img { width: 150px !important; max-width: 150px !important; } } .nav { display: flex; align-items: center; flex: 1; justify-content: center; } .nav-links { display: flex; align-items: center; gap: 2px; } .header .nav .nav-link { position: relative; display: flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: 15px; font-weight: 600; color: #0a0a0a; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: none; border-radius: 0; transition: color 0.2s ease; white-space: nowrap; } .header .nav .nav-link::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px; background: var(--c-primary); border-radius: 1px; transform: scaleX(0); transform-origin: center; transition: transform 0.22s ease; } .header .nav .nav-link:hover, .header .nav .nav-link.active { color: var(--c-primary); } .header .nav .nav-link:hover::after, .header .nav .nav-link.active::after { transform: scaleX(1); } .header .nav .nav-link .svg-icon, .header .nav .nav-link i { font-size: 11px; color: #525252; opacity: 1; transition: transform 0.25s ease, color 0.2s ease; } .header .nav .nav-link:hover .svg-icon, .header .nav .nav-link:hover i, .header .nav .nav-dropdown:hover > .nav-link .svg-icon, .header .nav .nav-dropdown:hover > .nav-link i { color: var(--c-primary); } .nav-dropdown:hover .nav-link .svg-icon, .nav-dropdown:hover .nav-link i { transform: rotate(180deg); } .header .nav .nav-dropdown { position: relative; } .header .nav .nav-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 340px; max-width: 420px; width: max-content; padding: 10px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08), 0 20px 48px rgba(15, 23, 42, 0.06); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease; z-index: calc(var(--z-fixed) + 10); } .header .nav .nav-dropdown:hover .nav-dropdown-menu, .header .nav .nav-dropdown-menu.visible { opacity: 1; visibility: visible; transform: translateY(0); } .header .nav .nav-dropdown-item { display: block; padding: 13px 18px; font-size: 14px; font-weight: 600; color: #141414; line-height: 1.45; letter-spacing: -0.015em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; border-radius: 10px; white-space: nowrap; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .header .nav .nav-dropdown-item:hover { background: #f5f3f0; color: var(--c-primary-dark); transform: translateX(2px); } .header .nav .nav-dropdown-item.active, .header .nav .nav-dropdown-item[aria-current="page"] { color: var(--c-primary-dark); background: #faf9f7; } .header-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .header-phone-wrapper { position: relative; flex-shrink: 0; } .header-phone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; background: none; cursor: pointer; font: inherit; line-height: 0; } .header-phone-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-primary); border-radius: 50%; color: #fff; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .header-phone-icon .svg-icon { width: 18px; height: 18px; } .header-phone:hover .header-phone-icon { transform: scale(1.04); box-shadow: 0 4px 12px rgba(196, 92, 38, 0.28); } .header-phone-text, .header-phone-label { display: none !important; } .header-phone-dropdown { position: absolute; top: calc(100% + 6px); left: 50%; right: auto; width: max-content; min-width: 0; padding: 4px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.1); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(4px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; z-index: calc(var(--z-fixed) + 10); } .header-phone-wrapper.open .header-phone-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .header-phone-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; font-size: 14px; font-weight: 600; color: #222; border: none; border-radius: 8px; background: none; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .header-phone-icon .svg-icon { width: 18px; height: 18px; color: #fff; } .header-phone-option .svg-icon, .header-phone-option i { width: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--c-primary); } .header-phone-option:hover { background: #f8f8f8; color: var(--c-primary); } .header-phone-option.is-copied span { color: #16a34a; } .lang-wrapper { position: relative; } .lang-selector { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: #333; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .lang-selector:hover { border-color: #bbb; background: #fafafa; } .lang-selector .svg-icon.svg-icon-xs { width: 10px; height: 10px; color: #888; margin-left: 2px; } .lang-selector .svg-icon:first-child, .lang-selector i:first-child { font-size: 18px; color: #555; } .lang-selector .svg-icon:last-child, .lang-selector i:last-child { font-size: 10px; color: #888; margin-left: 2px; } .lang-dropdown { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); min-width: 130px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: var(--z-dropdown); } .lang-wrapper:hover .lang-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .lang-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #333; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; } .lang-option:hover { background: #f5f5f5; } .lang-option.active { background: var(--c-primary); color: #fff; } .lang-option span { color: inherit; opacity: 0.65; font-size: 12px; font-weight: 500; } .btn-whatsapp { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); color: #fff; font-size: 14px; font-weight: 600; border-radius: 8px; transition: all 0.25s ease; white-space: nowrap; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); } .btn-whatsapp:hover { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4); } .btn-whatsapp .svg-icon, .btn-whatsapp i { font-size: 20px; } .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; cursor: pointer; border-radius: 8px; transition: background 0.2s ease; } .menu-toggle:hover { background: #f5f5f5; } .menu-toggle span { display: block; width: 22px; height: 2px; background: #222; border-radius: 2px; transition: all 0.3s ease; } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .header-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid #e5e5e5; border-radius: 50%; background: #fff; color: #333; cursor: pointer; flex-shrink: 0; line-height: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .header-search-btn:hover, .header-search-btn[aria-expanded="true"] { background: #faf7f4; border-color: var(--c-primary); color: var(--c-primary); } .header-search-btn .svg-icon { width: 16px; height: 16px; } .site-search-overlay { position: fixed; inset: 0; z-index: calc(var(--z-fixed) + 50); display: flex; align-items: flex-start; justify-content: center; padding: max(10vh, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px)); overscroll-behavior: none; } .site-search-overlay[hidden] { display: none !important; } .site-search-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .site-search-panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: min(78vh, 640px); background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.2); overflow: hidden; } .site-search-form { flex-shrink: 0; padding: 14px 14px 0; } .site-search-field { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 8px 8px 8px 14px; background: #f5f5f5; border: 1px solid #ececec; border-radius: 12px; } .site-search-icon { flex-shrink: 0; color: #888; width: 20px; height: 20px; } .site-search-field input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; line-height: 1.4; color: #111; outline: none; -webkit-appearance: none; appearance: none; } .site-search-field input::-webkit-search-decoration, .site-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .site-search-field input::placeholder { color: #999; } .site-search-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #666; cursor: pointer; flex-shrink: 0; } .site-search-close:hover { background: rgba(15, 23, 42, 0.06); color: #111; } .site-search-status { flex-shrink: 0; min-height: 1.25em; padding: 10px 18px 0; font-size: 13px; color: #777; } .site-search-results { list-style: none; margin: 0; padding: 4px 8px 14px; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, 0.22) transparent; } .site-search-results::-webkit-scrollbar { width: 6px; } .site-search-results::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } .site-search-results::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); border-radius: 999px; } .site-search-results::-webkit-scrollbar-thumb:hover { background: rgba(196, 92, 38, 0.45); } .site-search-group { margin: 0 0 10px; } .site-search-group:last-child { margin-bottom: 0; } .site-search-group-label { margin: 8px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; } .site-search-group-list { list-style: none; margin: 0; padding: 0; } .site-search-item { margin: 0; } .site-search-link { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 12px; color: inherit; text-decoration: none; transition: background 0.15s ease; } .site-search-link:hover, .site-search-link:focus-visible { background: #f7f8fb; outline: none; } .site-search-link-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; } .site-search-title { display: block; font-size: 15px; font-weight: 600; color: #0f172a; line-height: 1.35; } .site-search-excerpt { margin: 0; font-size: 13px; color: #64748b; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .site-search-badge { flex: 0 0 auto; margin-top: 2px; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; background: #eef2ff; color: #3730a3; } .site-search-badge--tour, .site-search-badge--tours { background: rgba(36, 73, 168, 0.1); color: #1e3a8a; } .site-search-badge--destination, .site-search-badge--cappadocia { background: rgba(212, 81, 34, 0.12); color: #b45309; } .site-search-badge--guide, .site-search-badge--plan { background: rgba(13, 32, 61, 0.08); color: #0d203d; } .site-search-badge--blog { background: #f1f5f9; color: #475569; } .site-search-badge--about, .site-search-badge--contact, .site-search-badge--legal, .site-search-badge--home, .site-search-badge--other { background: #f1f5f9; color: #64748b; } body.site-search-open { overflow: hidden; position: fixed; width: 100%; left: 0; right: 0; overscroll-behavior: none; touch-action: none; } body.site-search-open .site-search-overlay, body.site-search-open .site-search-results { touch-action: pan-y; } @media (max-width: 1023px) { .header-right { display: flex !important; gap: 8px; margin-left: auto; margin-right: 4px; } .header-right .header-phone-wrapper, .header-right .lang-wrapper, .header-right .btn-whatsapp { display: none !important; } .site-search-overlay { align-items: stretch; padding: max(8px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px)); } .site-search-panel { max-width: none; max-height: none; height: calc(100dvh - 18px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); border-radius: 14px; } .site-search-form { padding: 12px 12px 0; } .site-search-results { padding: 4px 6px 14px; } .site-search-link { padding: 14px 12px; } } .mobile-menu { display: none; } @media (max-width: 1023px) { .mobile-menu { display: flex; flex-direction: column; position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background: #ffffff; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transform: translateX(0); transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 9999; scrollbar-width: none; -ms-overflow-style: none; min-height: 0; } .mobile-menu::-webkit-scrollbar { display: none; } .mobile-menu.active { opacity: 1; visibility: visible; } body:has(.mobile-menu.active) { overflow: hidden; position: fixed; width: 100%; } .mobile-menu-header { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #eee; background: #fafafa; flex-shrink: 0; } .mobile-lang-dropdown { position: relative; width: auto; max-width: 140px; } .mobile-lang-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 6px 10px; background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; font-size: 12px; font-weight: 600; color: #333; cursor: pointer; transition: all 0.2s ease; } .mobile-lang-btn:hover { background: #eee; } .mobile-lang-btn i:first-child { font-size: 13px; color: #4d40ca; } .mobile-lang-btn i:last-child { font-size: 9px; color: #999; transition: transform 0.2s ease; } .mobile-lang-dropdown.active .mobile-lang-btn i:last-child { transform: rotate(180deg); } .mobile-lang-options { position: absolute; top: calc(100% + 8px); right: 0; min-width: 140px; background: #fff; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; z-index: 100; overflow: hidden; } .mobile-lang-dropdown.active .mobile-lang-options { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-lang-option { display: flex; align-items: center; gap: 10px; padding: 12px 16px; text-decoration: none; color: #333; transition: background 0.2s ease; } .mobile-lang-option:hover { background: #f8f7ff; } .mobile-lang-option.active { background: #f8f7ff; color: #4d40ca; } .mobile-lang-option span { font-weight: 600; font-size: 14px; } .mobile-lang-option small { font-size: 12px; color: #999; font-weight: 500; } .mobile-lang-option.active small { color: #4d40ca; } .mobile-menu-body { flex: 0 0 auto; padding: 16px 20px; overflow: visible; display: flex; flex-direction: column; min-height: 0; } .mobile-menu-body > * { flex-shrink: 0; } .mobile-nav-item { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .mobile-menu.active .mobile-nav-item { opacity: 1; transform: translateY(0); } .mobile-menu.active .mobile-nav-item:nth-child(1) { transition-delay: 0.05s; } .mobile-menu.active .mobile-nav-item:nth-child(2) { transition-delay: 0.1s; } .mobile-menu.active .mobile-nav-item:nth-child(3) { transition-delay: 0.15s; } .mobile-menu.active .mobile-nav-item:nth-child(4) { transition-delay: 0.2s; } .mobile-menu.active .mobile-nav-item:nth-child(5) { transition-delay: 0.25s; } .mobile-nav-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f0f0; width: 100%; gap: 12px; } .mobile-nav-link { display: flex; align-items: center; flex: 1; padding: 16px 0; font-size: 17px; font-weight: 600; color: #222; text-decoration: none; transition: color 0.2s ease; min-width: 0; } .mobile-nav-item:not(.has-submenu) .mobile-nav-link { border-bottom: 1px solid #f0f0f0; } .mobile-nav-link:hover, .mobile-nav-link:active { color: var(--c-primary); } .mobile-dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; max-width: 28px; background: none; border: none; cursor: pointer; transition: opacity 0.2s ease; position: relative; flex-shrink: 0; padding: 0; margin: 0; } .mobile-dropdown-toggle:hover { opacity: 0.7; } .mobile-dropdown-toggle i { display: none; } .mobile-dropdown-toggle::before { content: ""; position: absolute; width: 12px; height: 2px; background: #666; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: background-color 0.2s ease; border-radius: 1px; } .mobile-dropdown-toggle::after { content: ""; position: absolute; width: 2px; height: 12px; background: #666; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s ease; border-radius: 1px; } .mobile-nav-item.open .mobile-dropdown-toggle::after { opacity: 0; } .mobile-nav-item.open .mobile-dropdown-toggle::before { background: var(--c-primary); } .mobile-submenu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .mobile-nav-item.open .mobile-submenu { max-height: min(2400px, 85vh); } .mobile-submenu a { display: block; padding: 12px 16px; font-size: 15px; font-weight: 600; color: #555; border-radius: 8px; transition: all 0.15s ease; } .mobile-submenu a:hover { background: #f5f5f5; color: var(--c-primary); } .mobile-menu-footer { margin-top: 0; padding: 20px 16px; padding-top: 28px; padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid #eee; background: #fafafa; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease 0.35s, transform 0.3s ease 0.35s; flex-shrink: 0; } .mobile-menu.active .mobile-menu-footer { opacity: 1; transform: translateY(0); } body:has(.mobile-menu.active) .mobile-dest-bar, body:has(.mobile-menu.active) .mobile-book-bar { display: none !important; } .mobile-menu-greeting { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 14px; margin-bottom: 10px; background: linear-gradient(135deg, #f8f7ff 0%, #fff5f3 100%); border-radius: 10px; border: 1px solid rgba(77, 64, 202, 0.1); } .greeting-hello { font-family: var(--font-display); font-size: 14px; font-weight: 700; background: linear-gradient(135deg, #4d40ca 0%, #fb5b32 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 2px; } .greeting-text { font-size: 12px; color: #666; font-weight: 500; } .mobile-menu-footer .btn-whatsapp { width: 100%; justify-content: center; padding: 10px 18px; font-size: 13px; border-radius: 8px; } .mobile-menu-footer .btn-whatsapp span { display: inline; } .mobile-contact-link { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding: 12px 16px; background: #fff; border: 1px solid #eee; border-radius: 8px; font-size: 14px; font-weight: 500; color: #444; text-decoration: none; transition: all 0.2s ease; } .mobile-contact-link:hover { border-color: #4d40ca; color: #4d40ca; } .mobile-contact-link i { color: #4d40ca; font-size: 18px; } } .hero-v2 { position: relative; display: flex; align-items: center; background: #ffffff; padding: 60px 0 100px; padding-top: 100px; min-height: 88vh; overflow: hidden; } @media (max-width: 1023px) { .hero-v2 { padding-top: 76px; } } @media (max-width: 767px) { .hero-v2 { padding-top: 76px; } } .hero-shape { position: absolute; border-radius: 50%; pointer-events: none; } .hero-shape-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(59, 130, 246, 0.04) 0%, transparent 70%); top: -250px; right: -150px; animation: shapeFloat 15s ease-in-out infinite; } .hero-shape-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(249, 115, 22, 0.03) 0%, transparent 70%); bottom: -150px; left: -100px; animation: shapeFloat 18s ease-in-out infinite reverse; } .hero-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; position: relative; z-index: 2; } .hero-left { animation: heroFadeIn 0.8s ease-out; padding-top: 12px; } .hero-title-v2 { font-family: var(--font-display); font-size: clamp(42px, 5vw, 64px); font-weight: 800; color: #0f172a; line-height: 1.1; margin-bottom: 20px; letter-spacing: -0.025em; } .hero-title-accent { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-desc { font-size: 19px; line-height: 1.75; color: #64748b; max-width: 480px; margin-bottom: 32px; } .hero-cta-row { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; } .hero-cta-main { display: inline-flex; align-items: center; gap: 12px; padding: 18px 36px; background: #0f172a; color: #ffffff; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 14px; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.2); } .hero-cta-main:hover { background: #1e293b; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(15, 23, 42, 0.25); color: #ffffff; } .hero-cta-main i { font-size: 20px; transition: transform 0.3s ease; } .hero-cta-main:hover i { transform: translateX(4px); } .hero-cta-whatsapp { display: none; align-items: center; gap: 12px; padding: 18px 36px; background: #25d366; color: #ffffff; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 14px; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3); } .hero-cta-whatsapp i { font-size: 24px; } .hero-cta-whatsapp:hover { background: #22c55e; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4); color: #ffffff; } .hero-features { display: flex; flex-direction: column; gap: 10px; } .hero-feature { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; text-decoration: none; transition: all 0.3s ease; animation: featureSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .hero-feature:nth-child(1) { animation-delay: 0.2s; } .hero-feature:nth-child(2) { animation-delay: 0.3s; } .hero-feature:nth-child(3) { animation-delay: 0.4s; } .hero-feature:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } .feature-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-radius: 10px; flex-shrink: 0; } .hero-feature .feature-icon { color: #a1a9bb; } .hero-feature .feature-icon .svg-icon { width: 30px; height: 30px; fill: none; color: inherit; } .feature-icon i { font-size: 20px; color: #a1a9bb; } .hero-feature div { display: flex; flex-direction: column; gap: 2px; flex: 1; } .hero-feature strong { font-size: 14px; font-weight: 700; color: #0f172a; } .hero-feature span { font-size: 12px; color: #64748b; } .feature-arrow { font-size: 16px; color: #cbd5e1; transition: all 0.3s ease; margin-left: auto; } .hero-feature:hover .feature-arrow { transform: translate(3px, -3px); } .hero-right { position: relative; animation: heroFadeIn 0.8s ease-out 0.15s backwards; display: flex; align-items: center; justify-content: center; } .hero-images-wrap { position: relative; display: flex; align-items: center; margin-top: -5px; } .hero-img-main, .hero-img-secondary { border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.06); border: 4px solid #ffffff; transition: all 0.4s ease; } .hero-img-main { width: 388px; height: 521px; z-index: 2; margin-right: -15px; margin-top: 100px; } .hero-img-secondary { width: 416px; height: 565px; z-index: 1; } .hero-img-main:hover, .hero-img-secondary:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.08); } .hero-img-main img, .hero-img-secondary img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .hero-img-main:hover img, .hero-img-secondary:hover img { transform: scale(1.05); } .hero-scroll-down { position: absolute; bottom: 48px; right: 100px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 10; cursor: pointer; opacity: 0; animation: scrollDownFadeIn 1s ease-out 2s forwards; transition: all 0.3s ease; border: 0; padding: 0; background: transparent; font: inherit; color: inherit; } .hero-scroll-down:hover, .hero-scroll-down:focus { transform: translateY(-5px); outline: none; } .hero-scroll-down:hover .scroll-text, .hero-scroll-down:focus .scroll-text { color: #3b82f6; } .hero-scroll-down:hover .scroll-line, .hero-scroll-down:focus .scroll-line { background: linear-gradient(to bottom, #3b82f6 0%, transparent 100%); } .hero-scroll-down:hover .scroll-line::after, .hero-scroll-down:focus .scroll-line::after { background: #3b82f6; } .hero-scroll-down .scroll-text { font-size: 11px; font-weight: 600; color: #64748b; letter-spacing: 1.5px; text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed; margin-bottom: 8px; } .hero-scroll-down .scroll-line { width: 2px; height: 40px; background: linear-gradient(to bottom, #64748b 0%, transparent 100%); position: relative; animation: scrollLinePulse 2s ease-in-out infinite; } .hero-scroll-down .scroll-line::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: #64748b; border-radius: 50%; animation: scrollDotMove 2s ease-in-out infinite; } @media (max-width: 1200px) and (min-width: 993px) { .hero-scroll-down { bottom: 36px; right: 92px; } .hero-scroll-down .scroll-text { font-size: 10px; } .hero-scroll-down .scroll-line { height: 35px; } } @media (max-width: 992px) { .hero-scroll-down { display: none; } } @keyframes scrollDownFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollLinePulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes scrollDotMove { 0% { top: 0; opacity: 1; } 50% { top: 20px; opacity: 0.5; } 100% { top: 40px; opacity: 0; } } @keyframes heroFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes featureSlideIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes shapeFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(15px, -15px); } } @keyframes scrollPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @media (max-width: 1200px) { .hero-row { gap: 40px; } .hero-img-main { width: 320px; height: 430px; margin-top: 80px; } .hero-img-secondary { width: 340px; height: 460px; } } @media (max-width: 992px) { .hero-v2 { padding: 40px 0 60px; min-height: 80vh; } .hero-row { grid-template-columns: 1fr; gap: 40px; text-align: center; } .hero-left { order: 1; padding-top: 8px; } .hero-right { order: 2; } .hero-desc { margin-left: auto; margin-right: auto; } .hero-cta-row { justify-content: center; } .hero-features { max-width: 360px; margin: 0 auto; text-align: left; } .hero-images-wrap { justify-content: center; } .hero-img-main { width: 420px; height: 280px; margin-top: 0; margin-right: 0; } .hero-img-secondary { display: none; } .hero-shape-1, .hero-shape-2 { opacity: 0.3; } } @media (max-width: 576px) { .hero-v2 { padding: 30px 0 50px; padding-top: 80px !important; min-height: 70vh; } .hero-left { padding-top: 10px; } .hero-title-v2 { font-size: 32px; } .hero-desc { font-size: 15px; margin-bottom: 24px; } .hero-cta-row { flex-direction: column; gap: 10px; } .hero-cta-main { width: 100%; justify-content: center; padding: 14px 24px; font-size: 15px; } .hero-cta-whatsapp { display: inline-flex; width: 100%; justify-content: center; padding: 14px 24px; font-size: 15px; } .hero-features { gap: 8px; } .hero-feature { padding: 10px 14px; } .feature-icon { width: 36px; height: 36px; } .feature-icon i { font-size: 18px; } .hero-feature strong { font-size: 13px; } .hero-feature span { font-size: 11px; } .hero-img-main { width: 100%; max-width: 300px; height: 450px; border-radius: 14px; border-width: 3px; margin-top: 0; margin-right: 0; } } .brand-section { padding: 60px 0 80px; background: #fff; overflow: hidden; } .brand-text { text-align: center; font-size: 17px; line-height: 1.7; color: #555; max-width: 720px; margin: 0 auto 50px; } .brand-text strong { color: #1a1a1a; font-weight: 600; } .brand-slider { --brand-item: 170px; --brand-gap: 28px; --brand-visible: 6; position: relative; width: 100%; max-width: calc( (var(--brand-visible) * var(--brand-item)) + ((var(--brand-visible) - 1) * var(--brand-gap)) ); margin: 0 auto; overflow: hidden; } .brand-track { display: flex; gap: var(--brand-gap); width: max-content; will-change: transform; } .brand-item { flex-shrink: 0; width: var(--brand-item); height: 110px; display: flex; align-items: center; justify-content: center; } .brand-item img { max-width: 100%; max-height: 100%; object-fit: contain; } @media (max-width: 1023px) { .brand-section { display: none; } } .dest-list { padding: 100px 0; background: linear-gradient(180deg, #e8ecf4 0%, #f0f4fa 100%); position: relative; } .dest-list-header { text-align: center; max-width: 900px; margin: 0 auto 60px; } .dest-list-title { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: #1a1a2e; line-height: 1.2; margin: 0 0 20px 0; letter-spacing: -0.02em; } .dest-list-title span { color: #4d40ca; } .dest-list-subtitle { font-size: 16px; line-height: 1.7; color: #5a6277; margin: 0; } .dest-list-cards { display: flex; flex-direction: column; gap: 28px; } .dest-list-card { display: grid; grid-template-columns: 380px 1fr; align-items: center; gap: 50px; padding: 32px; background: #fff; border-radius: 24px; text-decoration: none; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .dest-list-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(77, 64, 202, 0.15); } .dest-list-img { width: 380px; height: 240px; border-radius: 18px; overflow: hidden; position: relative; z-index: 1; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15); flex-shrink: 0; } .dest-list-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .dest-list-card:hover .dest-list-img img { transform: scale(1.1); } .dest-list-content { padding-left: 24px; position: relative; z-index: 1; } .dest-list-content::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; background: linear-gradient(180deg, #4d40ca 0%, #818cf8 100%); border-radius: 4px; } .dest-list-name { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: #1a1a2e; margin: 0 0 16px 0; letter-spacing: -0.02em; transition: color 0.3s ease; } .dest-list-card:hover .dest-list-name { color: #4d40ca; } .dest-list-desc { font-size: 16px; line-height: 1.8; color: #5a6277; margin: 0; } .dest-list-cta { text-align: center; margin-top: 50px; } .dest-list-cta-btn { display: inline-flex; align-items: center; gap: 0; padding: 16px 20px 16px 32px; background: #4d40ca; color: #fff; font-size: 16px; font-weight: 600; border-radius: 50px; text-decoration: none; position: relative; overflow: hidden; z-index: 1; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 25px rgba(77, 64, 202, 0.3); } .dest-list-cta-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #fb5b32; border-radius: 50px; z-index: -1; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .dest-list-cta-btn:hover::before { width: 100%; } .dest-list-cta-btn:hover { transform: translateY(-4px); box-shadow: 0 12px 35px rgba(251, 91, 50, 0.4); color: #fff; } .dest-list-cta-btn span { margin-right: 14px; } .dest-list-cta-btn i { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #fff; color: #1a1a1a; border-radius: 50%; font-size: 16px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .dest-list-cta-btn:hover i { transform: translateX(4px); } @media (max-width: 1100px) { .dest-list-card { grid-template-columns: 320px 1fr; gap: 40px; } .dest-list-img { width: 320px; height: 220px; } .dest-list-name { font-size: 28px; } } @media (max-width: 900px) { .dest-list-card { grid-template-columns: 280px 1fr; gap: 30px; padding: 24px; } .dest-list-img { width: 280px; height: 200px; } .dest-list-name { font-size: 24px; } .dest-list-desc { font-size: 15px; } } @media (max-width: 768px) { .dest-list { padding: 70px 0; } .dest-list-title { font-size: 32px; } .dest-list-card { grid-template-columns: 1fr; gap: 24px; padding: 24px; } .dest-list-img { width: 100%; height: 220px; border-radius: 16px; } .dest-list-content { padding-left: 0; } .dest-list-content::before { display: none; } .dest-list-name { font-size: 24px; margin-bottom: 12px; } .dest-list-desc { font-size: 14px; } } @media (max-width: 480px) { .dest-list { padding: 50px 0; } .dest-list-header { margin-bottom: 40px; } .dest-list-title { font-size: 26px; } .dest-list-subtitle { font-size: 14px; } .dest-list-cards { gap: 20px; } .dest-list-card { padding: 18px; border-radius: 18px; } .dest-list-img { height: 180px; border-radius: 14px; } } .tours-section { padding: 100px 0; background: #FEF6EE; overflow: hidden; } .tours-inner { display: flex; align-items: flex-start; gap: 60px; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6); } .tours-content { flex-shrink: 0; width: 400px; padding-top: 20px; } .tours-label { display: block; font-size: 14px; font-weight: 600; color: var(--c-primary); margin-bottom: 16px; letter-spacing: 0.5px; } .tours-title { font-family: var(--font-display); font-size: 36px; font-weight: 600; line-height: 1.25; color: #1a1a1a; margin-bottom: 20px; } .tours-desc { font-size: 16px; line-height: 1.75; color: #555; margin-bottom: 36px; } .btn-fill { display: inline-flex; align-items: center; gap: 0; padding: 14px 18px 14px 26px; background: #4d40ca; color: #fff; font-size: 14px; font-weight: 600; border-radius: 50px; text-decoration: none; position: relative; overflow: hidden; z-index: 1; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .btn-fill::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #fb5b32; border-radius: 50px; z-index: -1; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .btn-fill:hover::before { width: 100%; } .btn-fill:hover { color: #fff; } .btn-fill span { margin-right: 14px; } .btn-fill i { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #fff; color: #1a1a1a; border-radius: 50%; font-size: 14px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .btn-fill:hover i { transform: translateX(3px); } .tours-btn { display: inline-flex; align-items: center; gap: 0; padding: 16px 20px 16px 32px; background: #4d40ca; color: #fff; font-size: 15px; font-weight: 600; border-radius: 50px; text-decoration: none; position: relative; overflow: hidden; z-index: 1; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .tours-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #fb5b32; border-radius: 50px; z-index: -1; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .tours-btn:hover::before { width: 100%; } .tours-btn:hover { color: #fff; } .tours-btn span { margin-right: 16px; } .tours-btn i { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; color: #1a1a1a; border-radius: 50%; font-size: 18px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .tours-btn:hover i { transform: translateX(3px); } .tours-slider { flex: 1; position: relative; overflow: hidden; padding-bottom: 90px; } .tours-track { display: flex; gap: 24px; padding-left: 24px; padding-right: 24px; } .tours-nav { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; z-index: 10; } .tours-nav-btn { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #e5e5e5; border-radius: 50%; font-size: 20px; color: #1a1a1a; cursor: pointer; transition: all 0.3s ease; } .tours-nav-btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } .tours-nav-mobile { display: none; gap: 12px; margin-top: 32px; } .tour-card { flex-shrink: 0; width: 360px; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } .tour-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); } .tour-card-img { height: 240px; overflow: hidden; } .tour-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .tour-card:hover .tour-card-img img { transform: scale(1.05); } .tour-card-body { padding: 28px; } .tour-card-body h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; } .tour-card-body p { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: #555; margin-bottom: 24px; height: 120px; overflow: hidden; } .tour-card-body .btn-fill { display: inline-flex; } @media (max-width: 1199px) { .tours-inner { flex-direction: column; padding: 0 24px; gap: 40px; } .tours-content { width: 100%; max-width: 600px; text-align: center; margin: 0 auto; } .tours-title { font-size: 34px; } .tours-slider { overflow: visible; padding-bottom: 0; } .tours-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0; transform: none !important; transition: none !important; } .tours-track .tour-card:nth-child(n+5) { display: none; } .tour-card { width: 100%; } .tours-nav { display: none; } .tours-nav-mobile { display: none; } } @media (max-width: 767px) { .tours-section { padding: 50px 0; overflow: hidden; max-width: 100vw; } .tours-inner { display: flex; flex-direction: column; padding: 0 16px; overflow: visible; gap: 30px; } .tours-slider { order: 1; overflow: visible; padding-bottom: 0; } .tours-content { order: 2; padding: 0; text-align: center; } .tours-track { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0; transform: none !important; transition: none !important; } .tours-track .tour-card:nth-child(n+5) { display: none; } .tour-card { width: 100%; } .tours-nav { display: none; } .tours-title { font-size: 24px; margin-bottom: 12px; } .tours-label { font-size: 12px; margin-bottom: 10px; } .tours-desc { font-size: 14px; margin-bottom: 20px; } .tours-btn { padding: 12px 24px; font-size: 14px; } .tour-card-img { height: 180px; } .tour-card-body { padding: 16px; } .tour-card-body h3 { font-size: 18px; margin-bottom: 8px; } .tour-card-body p { font-size: 13px; height: auto; margin-bottom: 16px; line-height: 1.6; } .tour-card-body .btn-fill { padding: 10px 18px; font-size: 13px; border-radius: 25px; } .tour-card-body .btn-fill i { width: 28px; height: 28px; font-size: 14px; } .tours-nav-mobile { display: none; } } .tours { background: var(--c-light); } .destinations { background: var(--c-light-alt); } .destination-card { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; } .destination-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .destination-card:hover img { transform: scale(1.1); } .destination-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(44, 24, 16, 0.9) 0%, rgba(44, 24, 16, 0.4) 40%, transparent 70% ); } .destination-info { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-6); z-index: 2; } .destination-info h3 { color: var(--c-white); font-size: var(--fs-xl); margin-bottom: var(--space-2); } .destination-info p { color: rgba(255, 255, 255, 0.8); font-size: var(--fs-sm); margin: 0; } .cta { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); text-align: center; } .cta h2 { color: var(--c-white); margin-bottom: var(--space-4); } .cta p { color: rgba(255, 255, 255, 0.9); font-size: var(--fs-lg); max-width: 600px; margin: 0 auto var(--space-8); } .faq { background: #fff; position: relative; overflow: hidden; } .faq-plane { position: absolute; left: 5%; top: 80px; width: 120px; opacity: 0.6; pointer-events: none; } .faq-cloud { position: absolute; right: 5%; top: 60px; width: 100px; opacity: 0.5; pointer-events: none; } .faq-balloon { position: absolute; right: 8%; bottom: 80px; width: 140px; opacity: 0.5; pointer-events: none; } @media (max-width: 1023px) { .faq-plane, .faq-cloud, .faq-balloon { display: none; } } .faq .section-label { display: block; text-align: center; font-size: 13px; font-weight: 600; color: var(--c-primary); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px; } .faq .section-header h2 { font-family: var(--font-display); font-size: 48px; font-weight: 500; text-align: center; color: #1a1a1a; font-style: italic; } .faq .section-header { margin-bottom: 60px; } .faq-list { max-width: 1300px; margin: 0 auto; } .faq-item { background: transparent; border: none; border-bottom: 1px dashed #d0d0d0; border-radius: 0; padding: 0; overflow: hidden; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .faq-item:first-child { border-top: 1px dashed #d0d0d0; } .faq-item:hover { background: rgba(0,0,0,0.01); } .faq-item.active { background: transparent; } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 28px 32px; font-family: var(--font-display); font-size: 20px; font-weight: 500; text-align: left; color: #1a1a1a; cursor: pointer; background: transparent; border: none; transition: color 0.3s ease; } .faq-question:hover { color: var(--c-primary); } .faq-question .svg-icon, .faq-question i { font-size: 20px; color: #bbb; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease; flex-shrink: 0; margin-left: 20px; width: 20px; height: 20px; } .faq-item.active .faq-question .svg-icon, .faq-item.active .faq-question i { transform: rotate(180deg); color: var(--c-primary); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease; opacity: 0; } .faq-answer-inner { padding: 0 32px 32px; font-family: var(--font-body); color: #666; font-size: 16px; line-height: 1.8; } .faq-item.active .faq-answer { max-height: 400px; opacity: 1; } .footer { background: var(--c-dark); color: var(--c-white); padding: var(--space-20) 0 var(--space-8); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--space-12); margin-bottom: var(--space-12); } .footer-brand .logo { display: inline-block; margin-bottom: var(--space-4); } .footer-brand p { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-sm); margin-bottom: var(--space-6); max-width: 300px; } .footer-social { display: flex; gap: var(--space-3); } .footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-full); font-size: var(--fs-lg); color: var(--c-white); transition: all var(--transition); } .footer-social a:hover { background: var(--c-primary); } .footer h4 { color: var(--c-white); font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-semibold); margin-bottom: var(--space-6); } .footer-links li { margin-bottom: var(--space-3); } .footer-links a { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-sm); transition: all var(--transition-fast); } .footer-links a:hover { color: var(--c-accent); } .footer-contact li { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); } .footer-contact i { color: var(--c-accent); font-size: var(--fs-lg); margin-top: 2px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-8); border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-bottom p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.5); margin: 0; } .footer-legal { display: flex; gap: var(--space-6); } .footer-legal a { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.5); } .footer-legal a:hover { color: var(--c-accent); } .discover-section { padding: 100px 0; background: #fff; } .discover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .discover-visual { position: relative; } .discover-img-wrap { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05); } .discover-img-wrap::before { content: ''; position: absolute; inset: 0; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2); z-index: 2; pointer-events: none; } .discover-img-wrap img { width: 100%; height: 560px; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); aspect-ratio: 480 / 560; } .discover-img-wrap:hover img { transform: scale(1.05); } .discover-badge { position: absolute; bottom: -20px; right: -20px; background: linear-gradient(135deg, #4d40ca 0%, #6366f1 100%); padding: 20px 24px; border-radius: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 15px 40px rgba(77, 64, 202, 0.35); z-index: 10; opacity: 0.9; } .badge-num { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: #fff; line-height: 1; } .badge-txt { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.9); line-height: 1.3; } .discover-content { padding-left: 20px; } .discover-title { font-family: var(--font-display); font-size: 42px; font-weight: 600; color: #1a1a1a; line-height: 1.2; margin-bottom: 20px; } .discover-desc { font-family: var(--font-body); font-size: 16px; color: #666; line-height: 1.7; margin-bottom: 40px; } .discover-feature { display: flex; gap: 20px; margin-bottom: 30px; } .discover-feature-icon { flex-shrink: 0; width: 60px; height: 60px; border: 2px solid #e0e0e0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #4d40ca; transition: all 0.3s ease; } .discover-feature:hover .discover-feature-icon { background: #4d40ca; border-color: #4d40ca; color: #fff; } .discover-feature-content h3 { font-size: 20px; font-weight: 600; color: #e74c3c; margin-bottom: 8px; } .discover-feature-content p { font-family: var(--font-body); font-size: 15px; color: #666; line-height: 1.6; } @media (max-width: 1023px) { .discover-section { display: none; } } .breadcrumb-bar { background: #fff; border-bottom: 1px solid #eee; padding: 14px 0; margin-top: 78px; position: relative; } @media (max-width: 1023px) { .breadcrumb-bar { margin-top: 78px; padding: 10px 0; } } @media (max-width: 767px) { .breadcrumb-bar + section { margin-top: -5px; } .breadcrumb-bar { padding: 6px 0; } .breadcrumb-item a, .breadcrumb-item span { font-size: 13px; } } .breadcrumb-nav { display: flex; align-items: center; } .breadcrumb-list { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; min-height: 22px; } .breadcrumb-item, .breadcrumb-separator { display: inline-flex; align-items: center; line-height: 1; } .breadcrumb-item a, .breadcrumb-item span { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 14px; font-weight: 500; transition: color 0.2s ease; line-height: 1; } .breadcrumb-item a { color: #666; text-decoration: none; gap: 6px; } .breadcrumb-item a:hover { color: #1a1a2e; } .breadcrumb-list .svg-icon { display: block; flex-shrink: 0; vertical-align: 0; } .breadcrumb-item a .svg-icon, .breadcrumb-item a i { width: 15px; height: 15px; } .breadcrumb-item a i { font-size: 15px; } .breadcrumb-item.active span { color: #6b7280; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .breadcrumb-separator { padding: 0 10px; color: #ccc; } .breadcrumb-separator .svg-icon { width: 12px; height: 12px; color: #ccc; } .breadcrumb-bar + section { margin-top: -25px; } .breadcrumb-bar + section.contact-section { margin-top: 0; } @media (max-width: 767px) { .breadcrumb-bar { padding: 10px 0; } .breadcrumb-item a, .breadcrumb-item span { font-size: 13px; } .breadcrumb-separator { padding: 0 6px; font-size: 10px; } } .tour-detail { padding: 60px 0 100px; background: #fff; } .tour-detail-grid { display: grid; grid-template-columns: 1fr auto; gap: 0; align-items: start; overflow: visible; } .tour-main { display: flex; flex-direction: column; gap: 14px; flex: 1; width: 100%; min-width: 0; max-width: none; padding-right: 36px; overflow: visible; } .tour-hero-img img { width: 100%; height: auto; } .tour-meta { display: flex; flex-wrap: wrap; gap: 12px 18px; color: #4b5563; font-family: var(--font-body); font-size: 14px; } .tour-meta .meta-item { display: inline-flex; align-items: center; gap: 8px; } .tour-title { font-family: var(--font-display); font-size: clamp(38px, 3.1vw, 46px); font-weight: 800; color: #2449a8; margin: 22px 0 22px; line-height: 1.08; letter-spacing: -0.025em; max-width: none; } .tour-subtitle { font-family: var(--font-body); font-size: 18px; color: #64748b; margin: 0; } .tour-content { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: #172033; margin: 18px 0 0; width: 100%; min-width: 0; max-width: none; } .tour-content > p, .tour-content > ul, .tour-content > ol { max-width: 940px; } .tour-content p { margin: 0 0 14px 0; color: #172033; font-size: 17px; line-height: 1.65; font-weight: 400; } .tour-content p:last-child { margin-bottom: 0; } .tour-content p:first-child { margin-top: 0; } .tour-content h2 { font-family: var(--font-display); font-weight: 700; color: #0d203d; font-size: clamp(27px, 2.1vw, 30px); margin: 36px 0 12px 0; line-height: 1.25; letter-spacing: -0.015em; } .guide-content h3, .destination-content h3, .content-main h3 { color: #1E293B; font-weight: 600; margin-top: 28px; margin-bottom: 10px; font-family: var(--font-display, "Plus Jakarta Sans", sans-serif); font-size: 18px; line-height: 1.3; } .tour-content h3, .tour-section h3 { color: #152a4a; font-weight: 600; margin-top: 22px; margin-bottom: 10px; font-family: var(--font-display); font-size: clamp(20px, 1.5vw, 22px); line-height: 1.35; letter-spacing: -0.01em; } .tour-content h3:first-child, .tour-section h3:first-child, .content-main h3:first-child { margin-top: 0; } .tour-content h4 { font-family: var(--font-display); font-weight: 700; color: #0d203d; font-size: clamp(27px, 2.1vw, 30px); margin: 36px 0 12px 0; line-height: 1.25; letter-spacing: -0.015em; } .tour-content h2:first-child, .tour-content h4:first-child { margin-top: 0; } .tour-content h4 strong { color: inherit; font-weight: 700; } .tour-content ul, .tour-content ol { margin: 12px 0 16px; padding-left: 1.35em; color: #172033; font-size: 17px; line-height: 1.65; max-width: 940px; } .tour-content .destination-list { margin: 12px 0 16px; max-width: 940px; } .tour-content .destination-list > ul.list, .tour-content ul.list { list-style: none; margin: 0; padding-left: 0; } .tour-content ul li, .tour-content ol li { margin-bottom: 10px; padding-left: 0.15em; color: #172033; font-size: 17px; line-height: 1.65; } .tour-content ul.list > li { position: relative; padding-left: 1.45em; margin-bottom: 10px; } .tour-content ul.list > li > .flaticon-check { display: none; } .tour-content ul.list > li::before { content: ""; position: absolute; left: 0.1em; top: 0.62em; width: 0.42em; height: 0.42em; border-radius: 50%; background: #d45122; } .tour-content ul li:last-child, .tour-content ol li:last-child { margin-bottom: 0; } .tour-content ul:not(.list) li { list-style-type: disc; } .tour-content ul:not(.list) li::marker { color: #d45122; } .tour-content ol li { list-style-type: decimal; } .tour-content ol li::marker { color: #3158d4; font-weight: 600; } .tour-content ul li strong, .tour-content ol li strong { font-weight: 700; color: #0d203d; } .tour-content strong, .tour-content b { font-weight: 700; color: #0d203d; } .tour-content .accent, .tour-content strong.accent { color: #d45122; font-weight: 700; } .tour-content em, .tour-content i { font-style: italic; color: #334155; } .tour-content a { color: #2f5699; text-decoration: underline; text-decoration-color: rgba(47, 86, 153, 0.35); text-decoration-thickness: 1px; text-underline-offset: 0.18em; font-weight: 600; transition: color 0.15s ease, text-decoration-color 0.15s ease; } .tour-content a:hover { color: #1e3f7a; text-decoration-color: rgba(30, 63, 122, 0.55); } .tour-content blockquote { margin: 24px 0; padding: 20px 24px; background: rgba(212, 81, 34, 0.04); border-left: 3px solid #d45122; border-radius: 12px; font-style: italic; color: #334155; font-weight: 400; max-width: 940px; } .tour-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 24px 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .content-sub-title { color: #1E293B; margin-top: 22px; margin-bottom: 6px; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3; } .tour-content table { margin: 28px 0; width: 100%; max-width: none; font-size: 15px; line-height: 1.55; } .tour-text-block p { margin: 0 0 18px 0; color: #172033; font-size: 17px; line-height: 1.75; font-weight: 400; } .tour-text-block p:last-child { margin-bottom: 0; } .tour-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 32px 34px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); margin-bottom: 28px; transition: all 0.3s ease; position: relative; overflow: hidden; } .tour-section::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #C05A33; opacity: 0; transition: opacity 0.3s ease; } .tour-section:hover { border-color: #d1d5db; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .tour-section:hover::before { opacity: 1; } .tour-section:last-child { margin-bottom: 0; } .tour-list { margin: 0; padding-left: 1.35em; color: #172033; font-size: 17px; line-height: 1.75; } .tour-list li { margin-bottom: 12px; color: #172033; font-size: 17px; line-height: 1.75; } .tour-list li::marker { color: #d45122; } .tour-list li:last-child { margin-bottom: 0; } .tour-list li strong { font-weight: 700; color: #0d203d; } .tour-booking-card { position: sticky; top: 90px; background: #f9fafb; border: 1px solid rgba(124, 58, 237, 0.12); border-radius: 20px; padding: 28px; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.1); width: 420px; margin-left: 24px; transition: box-shadow 0.3s ease, transform 0.3s ease; } .tour-booking-card:hover { box-shadow: 0 12px 32px rgba(124, 58, 237, 0.15); } .tour-booking-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(124, 58, 237, 0.1); } .tour-booking-header h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #6b7280; letter-spacing: 0; line-height: 1.3; } .tour-booking-header p { margin: 0; color: #6b7280; font-size: 14px; line-height: 1.5; } .tour-price-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; position: relative; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); transition: all 0.3s ease; } .tour-price-box:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4); } .price-from { font-size: 13px; color: rgba(255, 255, 255, 0.9); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0; } .price-main { display: flex; align-items: baseline; gap: 2px; line-height: 1; margin: 0; } .tour-price-box .price-currency { font-size: 20px; font-weight: 700; color: #ffffff; margin-top: 0; } .tour-price-box .price-value { font-size: 42px; font-weight: 800; color: #ffffff; line-height: 1; letter-spacing: -1px; font-family: var(--font-display); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .tour-price-box .price-note { font-size: 14px; color: rgba(255, 255, 255, 0.95); font-weight: 500; margin-top: 4px; opacity: 1; } .tour-form { display: grid; gap: 0; } .tour-form label { display: grid; gap: 8px; font-size: 14px; color: #1f2937; font-weight: 600; margin-bottom: 0; min-height: fit-content; } .tour-form label span { color: #111827; font-weight: 600; font-size: 15px; } .tour-form input, .tour-form textarea, .tour-form select { width: 100%; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 16px 18px; font-family: var(--font-body); font-size: 15px; color: #111827; background: #fff; transition: all 0.2s ease; margin-bottom: 0; } .tour-form select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .tour-form select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234d40ca' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); } .tour-form select option { padding: 10px; color: #111827; } .tour-form label:not(:last-child) { margin-bottom: 6px; } .tour-form input:focus, .tour-form textarea:focus, .tour-form select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12); background: #fafafa; } .tour-form textarea { resize: vertical; min-height: 100px; } .form-field { display: grid; gap: 8px; margin-bottom: 16px; } .form-field span { font-size: 15px; font-weight: 600; color: #111827; } .form-field input, .form-field textarea { width: 100%; padding: 16px 18px; font-size: 15px; border: 1.5px solid #d1d5db; border-radius: 12px; background: #fff; color: #111827; font-family: var(--font-body); transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; color: #1f2937; } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12); background: #fafafa; color: #111827; } .form-field input::placeholder, .form-field textarea::placeholder { color: #6b7280; font-size: 15px; } .phone-input-wrapper { display: flex; gap: 8px; align-items: stretch; } .phone-input-wrapper input[type="tel"] { flex: 1; min-width: 0; } .country-code-select { flex: 0 0 80px; width: 80px; padding: 14px 8px; font-size: 13px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-family: var(--font-body); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; transition: border-color 0.2s ease, box-shadow 0.2s ease; font-weight: 500; color: #374151; box-sizing: border-box; min-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .country-code-select:focus { outline: none; border-color: #4d40ca; box-shadow: 0 0 0 3px rgba(77, 64, 202, 0.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234d40ca' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); } .country-code-select:hover { border-color: #a855f7; } .phone-input-wrapper input[type="tel"] { flex: 1; min-width: 0; } .tour-options-label { margin-bottom: 16px; } .tour-options-label span { color: #111827; font-weight: 600; font-size: 15px; } .tour-options { display: grid; gap: 12px; margin-top: 8px; } .tour-option { display: block; cursor: pointer; position: relative; } .tour-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .tour-option-content { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 2px solid #e5e7eb; border-radius: 12px; background: #fff; transition: all 0.3s ease; position: relative; } .tour-option-content::before { content: ''; position: absolute; left: 20px; width: 20px; height: 20px; border: 2px solid #d1d5db; border-radius: 50%; background: #fff; transition: all 0.3s ease; } .tour-option-content::after { content: ''; position: absolute; left: 26px; top: 26px; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.3s ease; } .tour-option input[type="radio"]:checked + .tour-option-content { border-color: #667eea; background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); } .tour-option input[type="radio"]:checked + .tour-option-content::before { border-color: #667eea; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .tour-option input[type="radio"]:checked + .tour-option-content::after { transform: scale(1); } .tour-option:hover .tour-option-content { border-color: #667eea; background: #f8f9ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); } .tour-option-name { font-size: 15px; font-weight: 600; color: #111827; margin-left: 40px; } .tour-option-price { font-size: 18px; font-weight: 800; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-family: var(--font-display); } .tour-option input[type="radio"]:checked + .tour-option-content .tour-option-name { color: #667eea; font-weight: 700; } .booking-btn { width: 100%; justify-content: center; gap: 0; font-size: 16px; padding: 16px 20px 16px 28px; margin-top: 12px; margin-bottom: 12px; } .booking-btn span { color: #fff !important; margin-right: 14px; } .booking-btn i { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #fff; color: #1a1a1a !important; border-radius: 50%; font-size: 16px; transition: transform 0.3s ease; } .booking-btn:hover i { transform: translateX(4px); } .booking-safe { display: flex; align-items: center; gap: 8px; color: #4b5563; font-size: 13px; } .booking-safe i { color: #16a34a; } .tour-date-label { display: grid; gap: 8px; margin-bottom: 16px; } .tour-date-label span { font-size: 14px; font-weight: 600; color: #1f2937; } .date-input { position: relative; display: block; max-width: 100%; overflow: visible; } .date-input input[type="text"] { width: 100%; padding: 14px 16px; font-size: 16px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; font-family: var(--font-body); box-sizing: border-box; margin: 0; outline: none; box-shadow: 0 0 0 0 transparent; color: #1f2937; } .date-input input[type="text"]:hover { border-color: #a855f7; } .date-input input[type="text"]:focus { border-color: #4d40ca; box-shadow: 0 0 0 3px rgba(77, 64, 202, 0.15); } .calendar { position: absolute; top: calc(100% + 8px); left: 0; right: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2); width: 100%; max-width: min(340px, calc(100vw - 32px)); box-sizing: border-box; z-index: 1000; display: none; overflow: hidden; } .calendar-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; } .calendar-header button { background: #f3f4f6; border: none; font-size: 20px; font-weight: 600; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; color: #374151; line-height: 1; } .calendar-header button:hover { background: #7c3aed; color: #fff; transform: scale(1.05); } .calendar-header button:active { transform: scale(0.95); } .calendar-header span { font-weight: 600; font-size: 15px; color: #111827; text-transform: capitalize; } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); padding: 12px 20px 8px; gap: 4px; } .calendar-weekdays span { text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; padding: 6px 0; text-transform: uppercase; letter-spacing: 0.5px; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 8px 20px 20px; gap: 4px; } .calendar-grid div { text-align: center; padding: 0; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: #374151; transition: all 0.15s ease; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; min-height: 36px; } .calendar-grid div:hover:not(.disabled) { background: #f3e8ff; color: #7c3aed; } .calendar-grid div.disabled { color: #d1d5db; cursor: not-allowed; opacity: 0.4; pointer-events: none; } .calendar-grid div.today { background: #ede9fe; color: #7c3aed; font-weight: 600; border: 2px solid #7c3aed; } .calendar-grid div.selected { background: #7c3aed; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3); } .calendar-grid div.selected.today { background: #7c3aed; color: #fff; border-color: #7c3aed; } @media (max-width: 767px) { html.calendar-popup-open, body.calendar-popup-open { overflow: hidden; touch-action: none; overscroll-behavior: none; } .calendar { position: fixed; left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 32px)); max-width: calc(100vw - 32px); margin: 0; z-index: 10050; } } @media (max-width: 480px) { .calendar { width: calc(100vw - 24px); max-width: calc(100vw - 24px); } .calendar-header { padding: 12px 12px; } .calendar-weekdays { padding: 10px 8px 6px; gap: 2px; } .calendar-weekdays span { font-size: 10px; padding: 4px 0; } .calendar-grid { padding: 6px 8px 14px; gap: 2px; } .calendar-grid div { font-size: 13px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; min-width: 0; } } .tour-gallery-bento { position: relative; width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; overflow: visible; } .gallery-bento-stage { position: relative; background: #fff; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 20px; padding: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); overflow: visible; } .gallery-bento-grid { display: grid; grid-template-columns: 1.45fr 0.95fr; grid-template-rows: 1fr 1fr; gap: 10px; height: clamp(300px, 38vw, 460px); min-height: 300px; } .gallery-bento-grid--compact { grid-template-columns: 1.45fr 0.95fr; } .gallery-bento-grid--single { grid-template-columns: 1fr; grid-template-rows: 1fr; } .gallery-bento-grid--single .gallery-bento-main { grid-row: 1; grid-column: 1; } .gallery-bento-main { grid-row: 1 / 3; grid-column: 1; position: relative; height: 100%; border-radius: 14px; overflow: hidden; background: #eceef1; min-height: 0; } .gallery-bento-main::after, .gallery-bento-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)); pointer-events: none; z-index: 1; } .gallery-bento-media { position: absolute; inset: 0; } .gallery-bento-main img, .gallery-bento-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; cursor: zoom-in; opacity: 1; transform: scale(1.008); transition: opacity 520ms cubic-bezier(0.45, 0.05, 0.25, 1), transform 680ms cubic-bezier(0.22, 1, 0.36, 1); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .gallery-bento-main img.is-changing, .gallery-bento-thumb img.is-changing { opacity: 0.84; transform: scale(1.016); } .gallery-bento-main:hover img:not(.is-changing), .gallery-bento-thumb:hover img:not(.is-changing) { transform: scale(1.022); } .gallery-bento-side { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-rows: 1fr 1fr; gap: 8px; height: 100%; min-height: 0; } .gallery-bento-thumb { position: relative; border: none; padding: 0; margin: 0; border-radius: 14px; overflow: hidden; background: #eceef1; cursor: zoom-in; min-height: 0; text-align: left; } .gallery-bento-main-meta { position: absolute; left: 10px; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); pointer-events: none; } .gallery-bento-main-meta .gallery-bento-counter { position: static; flex-shrink: 0; padding: 0; background: none; color: #fff; font-size: 12px; font-weight: 600; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); letter-spacing: 0.02em; } .gallery-bento-main-meta .gallery-bento-main-label { position: static; left: auto; bottom: auto; max-width: min(100%, 300px); font-size: 11px; padding: 4px 9px; } .gallery-bento-main-meta .gallery-bento-main-label i { font-size: 10px; } .gallery-bento-thumb .gallery-bento-label { left: 8px; bottom: 8px; max-width: calc(100% - 16px); min-height: 20px; padding: 3px 7px; font-size: 10px; gap: 3px; border-radius: 8px; } .gallery-bento-thumb .gallery-bento-label i { font-size: 9px; } .gallery-bento-label { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(15, 23, 42, 0.06); color: #334155; font-size: 10px; font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); transition: opacity 420ms cubic-bezier(0.45, 0.05, 0.25, 1); } .gallery-bento-label.is-fading { opacity: 0.78; } .gallery-bento-label i { flex-shrink: 0; color: #64748b; opacity: 1; } .gallery-bento-label span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; word-break: break-word; line-height: 1.15; } .gallery-bento-main-label { z-index: 3; } @keyframes gallery-nav-volcano { 0% { opacity: 0.76; transform: scale(0.94); } 12% { opacity: 0.8; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.06); } 72% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.76; transform: scale(0.94); } } @keyframes gallery-nav-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 72% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } } .gallery-bento-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 56px; height: 56px; border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 999px; background: #fff; color: #1554e8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16); isolation: isolate; transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.22s ease; } .gallery-bento-nav::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient( circle, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.62) 45%, rgba(255, 255, 255, 0) 70% ); z-index: -1; pointer-events: none; animation: gallery-nav-volcano 4.5s cubic-bezier(0.42, 0, 0.58, 1) infinite; } .gallery-bento-nav::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: gallery-nav-ring 4.5s cubic-bezier(0.42, 0, 0.58, 1) infinite; } .gallery-bento-nav i { position: relative; z-index: 1; font-size: 34px; font-weight: 700; line-height: 1; } .gallery-bento-nav:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2); } .gallery-bento-nav.is-active { transform: translateY(-50%) scale(0.94); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14); } .gallery-bento-prev { left: -14px; } .gallery-bento-next { right: -14px; } @media (prefers-reduced-motion: reduce) { .gallery-bento-nav::before, .gallery-bento-nav::after { animation: none; } .gallery-bento-main img, .gallery-bento-thumb img { transition: opacity 0.2s ease; transform: none !important; } .gallery-bento-main img.is-changing, .gallery-bento-thumb img.is-changing { opacity: 0.94; } } .gallery-bento-viewall { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-end; min-height: 40px; margin-top: 10px; padding: 0 16px; border: 1px solid rgba(21, 84, 232, 0.22); border-radius: 999px; background: #fff; color: #1554e8; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .gallery-bento-viewall:hover { background: #f5f8ff; border-color: rgba(21, 84, 232, 0.45); transform: translateY(-1px); } .gallery-bento-viewall i { font-size: 16px; } .gallery-bento-grid--single .gallery-bento-main-meta { left: 10px; bottom: 10px; } .gallery-bento-grid--single .gallery-bento-main-meta .gallery-bento-main-label { max-width: calc(100% - 48px); } .gallery-bento-main img:not(.loaded):not([src]), .gallery-bento-thumb img:not(.loaded):not([src]) { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: loading-shimmer 1.5s infinite; } @keyframes loading-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .tour-gallery { position: relative; margin: 10px 0 6px 0; overflow: hidden; } .lightbox-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .lightbox-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 0.35s ease, box-shadow 0.35s ease; } .lightbox-thumbs .thumb img:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.18); } .gallery-lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .gallery-lightbox.open { display: flex; opacity: 1; pointer-events: auto; } .gallery-lightbox .lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); cursor: pointer; transition: opacity 0.3s ease; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(3px); } .gallery-lightbox .lightbox-content { position: relative; width: min(92vw, 1280px); max-width: 95vw; max-height: 95vh; z-index: 1; background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; max-height: 85vh; min-height: 0; overflow: hidden; background: #eceef1; border-radius: 4px; } .lightbox-loader { display: none; position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; z-index: 3; border: 3px solid rgba(21, 84, 232, 0.18); border-top-color: #1554e8; border-radius: 50%; animation: lightbox-spin 0.75s linear infinite; pointer-events: none; } .lightbox-loader.is-active { display: block; } .lightbox-error { display: none; margin: 0; padding: 20px 16px; max-width: 280px; text-align: center; font-size: 14px; line-height: 1.5; color: #4b5563; } .lightbox-error.is-active { display: block; } @keyframes lightbox-spin { to { transform: rotate(360deg); } } .gallery-lightbox .lightbox-content img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 85vh; margin: 0 auto; border-radius: 4px; object-fit: contain; opacity: 0; transition: opacity 420ms cubic-bezier(0.45, 0.05, 0.25, 1); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .gallery-lightbox .lightbox-content img.is-loaded, .gallery-lightbox .lightbox-content img.is-placeholder { opacity: 1; } .gallery-lightbox .lightbox-content img.is-changing { opacity: 0.58; } .gallery-lightbox .lightbox-content img.is-upgrading { opacity: 0.88; } .gallery-lightbox .lightbox-content img[src=""] { opacity: 0; } .lightbox-notice { display: none; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; margin: 0; padding: 8px 14px; max-width: calc(100% - 24px); border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 12px; line-height: 1.4; text-align: center; pointer-events: none; } .lightbox-notice.is-active { display: block; } .gallery-lightbox .lightbox-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,0.1); color: #1f2937; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s ease; z-index: 10; } .gallery-lightbox .lightbox-close:hover { background: rgba(0,0,0,0.15); transform: scale(1.1); } .gallery-lightbox .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.9); color: #1f2937; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all 0.2s ease; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .gallery-lightbox .lightbox-nav:hover { background: #fff; border-color: rgba(0,0,0,0.2); box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-50%) scale(1.05); } .gallery-lightbox .lightbox-prev { left: 12px; } .gallery-lightbox .lightbox-next { right: 12px; } .gallery-lightbox .lightbox-counter { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.5); color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; z-index: 10; } .lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; z-index: 1; background: #fff; border: 4px solid rgba(0,0,0,0.08); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.22); padding: 14px; } .lightbox-content img { width: 100%; max-height: 80vh; object-fit: contain; background: #000; border-radius: 12px; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(0,0,0,0.12); color: #111827; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: background 0.2s ease, transform 0.2s ease; } .lightbox-nav:hover { background: rgba(0,0,0,0.18); transform: translateY(-50%) scale(1.04); } .lightbox-nav.prev { left: 14px; } .lightbox-nav.next { right: 14px; } .lightbox-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0,0,0,0.7); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .mobile-book-bar { display: none !important; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #eee; box-shadow: 0 -1px 8px rgba(0,0,0,0.04); z-index: 1000; padding: 0; } @media (min-width: 1025px) { .mobile-book-bar { display: none !important; } } .mobile-book-bar-inner { max-width: 1200px; margin: 0 auto; padding: 6px 10px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); display: flex !important; align-items: center; justify-content: space-between !important; gap: 10px; width: 100%; } .mobile-book-info { display: flex; align-items: baseline; gap: 4px; flex: 0 0 auto; margin-right: auto; order: 1; } .mobile-book-label { font-size: 11px; color: #6b7280; font-weight: 500; } .mobile-book-price { font-family: var(--font-display); font-size: 20px; font-weight: 800; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .mobile-book-unit { font-size: 11px; color: #6b7280; } .mobile-book-btn { display: flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%); color: #fff; border: none; padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(124,58,237,0.25); white-space: nowrap; flex-shrink: 0; margin-left: 0; order: 2; } .mobile-book-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,0.4); } .mobile-book-btn i { font-size: 18px; } @media (max-width: 1100px) { .tour-detail-grid { grid-template-columns: 1fr; } .tour-booking-card { display: block; position: relative; top: auto; width: 100%; max-width: 100%; margin-left: 0; margin-top: 40px; order: 999; } .tour-detail { padding-bottom: 90px; } } @media (max-width: 1024px) { body.tour-detail-page { padding-bottom: 86px; } @supports selector(body:has(.tour-detail)) { body:has(.tour-detail) { padding-bottom: 86px; } } .tour-title { font-size: clamp(34px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.025em; margin: 18px 0 18px; } .tour-content h2 { font-size: clamp(25px, 2.4vw, 28px); } .tour-content h3, .tour-section h3 { font-size: clamp(19px, 2vw, 21px); } .tour-content h4 { font-size: clamp(25px, 2.4vw, 28px); margin: 32px 0 12px; } .tour-content h4:first-child { margin-top: 0; } .tour-content p { font-size: 16.5px; line-height: 1.62; } .tour-main { padding-right: 0; } .mobile-book-bar { display: flex !important; padding: 0; margin-bottom: 0; min-height: 70px; background: rgba(255, 255, 255, 0.96); border-top: 1px solid rgba(15, 23, 42, 0.1); box-shadow: 0 -12px 35px rgba(15, 23, 42, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .mobile-book-bar-inner { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } } @media (max-width: 767px) { .tour-detail { padding: 18px 0 0; background: #fff; } .tour-title { font-size: clamp(29px, 6.5vw, 34px); line-height: 1.1; letter-spacing: -0.025em; margin: 14px 0 16px; } .tour-subtitle { font-size: 16px; } .tour-content { font-size: 16px; margin-top: 14px; } .tour-content > p, .tour-content > ul, .tour-content > ol { max-width: 100%; } .tour-content p { font-size: 16px; line-height: 1.62; margin-bottom: 12px; } .tour-content h2 { font-size: clamp(23px, 5vw, 25px); margin-top: 28px; margin-bottom: 10px; } .guide-content h3, .destination-content h3, .content-main h3 { font-size: 20px; } .tour-content h3, .tour-section h3 { font-size: clamp(19px, 4.5vw, 20px); margin-top: 20px; margin-bottom: 8px; } .tour-content h4 { font-size: clamp(23px, 5vw, 25px); margin: 28px 0 10px; } .tour-content h4:first-child { margin-top: 0; } .tour-content ul, .tour-content ol { font-size: 16px; padding-left: 1.2em; } .tour-content ul.list > li { padding-left: 1.35em; } .tour-main { padding-right: 0; gap: 14px; } .tour-section { padding: 24px 22px; margin-bottom: 20px; border-radius: 12px; } .tour-gallery-bento { padding: 0; } .gallery-bento-stage { border-radius: 20px; padding: 8px; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.13); } .gallery-bento-grid { grid-template-columns: 1.2fr 0.8fr; gap: 7px; height: 254px; min-height: 254px; } .gallery-bento-main, .gallery-bento-thumb { border-radius: 14px; } .gallery-bento-nav { width: 48px; height: 48px; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18); } .gallery-bento-nav::before { inset: -8px; } .gallery-bento-nav i { font-size: 26px; } .gallery-bento-prev { left: -10px; } .gallery-bento-next { right: -10px; } .gallery-bento-main-meta { left: 10px; bottom: 10px; gap: 5px; max-width: calc(100% - 20px); } .gallery-bento-main-meta .gallery-bento-counter { font-size: 12px; } .gallery-bento-label { min-height: 20px; padding: 3px 7px; font-size: 10px; gap: 3px; border-radius: 8px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); } .gallery-bento-label i { font-size: 9px; } .gallery-bento-thumb .gallery-bento-label { left: 8px; bottom: 8px; font-size: 9px; padding: 2px 6px; } .gallery-bento-viewall { min-height: 38px; margin-top: 12px; padding: 0 16px; font-size: 13px; } .gallery-lightbox .lightbox-content { width: min(98vw, 1280px); max-width: 98vw; max-height: 95vh; padding: 8px; } .gallery-lightbox .lightbox-content img { max-height: 85vh; } } .more-tours { position: relative; overflow: hidden; padding-top: clamp(72px, 6vw, 96px); padding-bottom: 96px; background-color: #f4f7fb; background-image: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(99, 102, 241, 0.1), transparent 68%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(77, 64, 202, 0.06), transparent 62%), linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); border-top: 1px solid rgba(148, 163, 184, 0.2); } .more-tours .container { position: relative; z-index: 1; max-width: none; width: calc(100% - 48px); margin-left: auto; margin-right: auto; } .more-tours .section-header-center { margin-bottom: 42px; } .more-tours .section-header-center .section-label { display: inline-block; margin-bottom: 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: transparent; background: linear-gradient(135deg, #4d40ca 0%, #6366f1 55%, #7c3aed 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .more-tours .section-header-center h2 { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #0f172a; } .more-tours-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .more-tours .tour-card-v2 { height: 100%; min-width: 0; min-height: 540px; background: #fff; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 22px; box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .more-tours .tour-card-v2:hover { transform: translateY(-6px); border-color: rgba(99, 102, 241, 0.28); box-shadow: 0 22px 46px rgba(15, 23, 42, 0.11); } .more-tours .tour-card-link { height: 100%; display: flex; flex-direction: column; } .more-tours .tour-card-img { position: relative; flex-shrink: 0; height: 260px; overflow: hidden; border-radius: 22px 22px 0 0; background: #e8edf3; } .more-tours .tour-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .more-tours .tour-card-v2:hover .tour-card-img img { transform: scale(1.04); } .more-tours .tour-badge { top: 12px; left: 12px; border-radius: 10px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18); } .more-tours .tour-card-body { flex: 1; display: flex; flex-direction: column; padding: 28px 28px 24px; } .more-tours .tour-card-body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; margin: 0 0 16px; font-size: 23px; line-height: 1.16; font-weight: 700; color: #1e3fa3; transition: color 0.25s ease; } .more-tours .tour-card-v2:hover .tour-card-body h3 { color: #4d40ca; } .more-tours .tour-card-body p { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.8em; margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: #64748b; } .more-tours .tour-card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(226, 232, 240, 0.95); } .more-tours .tour-price { font-size: 15px; font-weight: 700; color: #059669; line-height: 1.3; } .more-tours .tour-price i { margin-right: 4px; vertical-align: -1px; } .more-tours .tour-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #4d40ca; transition: gap 0.25s ease, color 0.25s ease; } .more-tours .tour-card-v2:hover .tour-btn { gap: 10px; color: #4338ca; } .more-tours-footer { margin-top: 58px; display: flex; justify-content: center; } .more-tours-footer .btn-fill { display: inline-flex; align-items: center; justify-content: center; min-width: 280px; min-height: 64px; padding: 0 24px 0 36px; border-radius: 999px; font-size: 16px; font-weight: 800; background: linear-gradient(135deg, #4d40ca 0%, #6366f1 55%, #7c3aed 100%); box-shadow: 0 22px 50px rgba(89, 70, 230, 0.32); transition: transform 0.3s ease, box-shadow 0.3s ease; } .more-tours-footer .btn-fill::before { background: linear-gradient(135deg, #fb5b32 0%, #f97316 100%); border-radius: 999px; } .more-tours-footer .btn-fill:hover { transform: translateY(-3px); box-shadow: 0 28px 65px rgba(89, 70, 230, 0.4); } .more-tours-footer .btn-fill span { margin-right: 18px; } .more-tours-footer .btn-fill i { width: 42px; height: 42px; font-size: 17px; } @media (max-width: 1199px) { .more-tours .container { width: calc(100% - 40px); } .more-tours-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .more-tours .tour-card-v2 { min-height: 510px; } .more-tours .tour-card-img { height: 230px; } .more-tours .tour-card-body { padding: 22px 22px 20px; } .more-tours .tour-card-body h3 { font-size: 20px; line-height: 1.2; margin-bottom: 12px; } .more-tours .tour-card-body p { min-height: 4.65em; margin-bottom: 12px; font-size: 14px; line-height: 1.55; } .more-tours .tour-card-footer { padding-top: 16px; } .more-tours .tour-price { font-size: 14px; } .more-tours .tour-btn { font-size: 13px; } .more-tours-footer { margin-top: 48px; } .more-tours-footer .btn-fill { min-width: 260px; min-height: 58px; font-size: 15px; } .more-tours-footer .btn-fill i { width: 38px; height: 38px; font-size: 16px; } } @media (max-width: 767px) { .more-tours { padding-top: 56px; padding-bottom: 72px; } .more-tours .container { width: calc(100% - 28px); } .more-tours .section-header-center { margin-bottom: 32px; } .more-tours-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .more-tours .tour-card-v2 { min-height: auto; } .more-tours .tour-card-img { height: 190px; } .more-tours .tour-card-body { padding: 20px 18px 18px; } .more-tours .tour-card-body h3 { font-size: 18px; min-height: 0; line-height: 1.25; margin-bottom: 10px; } .more-tours .tour-card-body p { font-size: 14px; min-height: 0; } .more-tours-footer { margin-top: 40px; } .more-tours-footer .btn-fill { width: 100%; max-width: 340px; min-width: 0; min-height: 58px; justify-content: center; } } @media (max-width: 520px) { .more-tours { padding-top: 48px; } .more-tours-grid { grid-template-columns: 1fr; gap: 16px; } .more-tours .tour-card-v2 { min-height: auto; } .more-tours .tour-card-img { height: 220px; } .more-tours .tour-card-body p { min-height: 0; } } .tours-hero { padding: 40px 0 30px; background: #fff; text-align: center; } .tours-hero h1 { font-family: var(--font-display); font-size: 42px; font-weight: 800; color: #2755CC; margin: 0 0 10px 0; line-height: 1.2; letter-spacing: 0.01em; } .tours-hero p { font-family: var(--font-body); font-size: 18px; color: #C05A33; font-weight: 500; margin: 0; max-width: 600px; margin: 0 auto; } .tours-page { padding: 20px 0 80px; background: #f9fafb; } .tours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .tour-card-v2 { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: all 0.3s ease; } .tour-card-v2:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.1); } .tour-card-link { text-decoration: none; display: block; } .tour-card-img { position: relative; height: 200px; overflow: hidden; background: #e5e7eb; } .tour-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; opacity: 0; } .tour-card-img img.loaded, .tour-card-img img[src] { opacity: 1; } .tour-card-v2:hover .tour-card-img img { transform: scale(1.08); } .tour-badge { position: absolute; top: 14px; left: 14px; padding: 6px 12px; background: #4d40ca; color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 8px; } .tour-badge.hot { background: linear-gradient(135deg, #f97316, #ef4444); } .tour-card-body { padding: 20px; } .tour-card-v2 .tour-card-body h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #2755CC; margin: 0 0 12px 0; line-height: 1.3; transition: color 0.2s ease; } .tour-card-v2:hover .tour-card-body h3 { color: #1E3FA3; } .tour-card-body h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #1f2937; margin: 0 0 10px 0; line-height: 1.3; } .tour-card-body p { font-family: var(--font-body); font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0 0 16px 0; } .tour-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #f3f4f6; } .tour-price { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #059669; } .tour-btn { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #4d40ca; transition: gap 0.2s; } .tour-card-v2:hover .tour-btn { gap: 10px; } .tours-cta { padding: 60px 0; background: linear-gradient(135deg, #4d40ca 0%, #6366f1 100%); } .tours-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; } .tours-cta-content h2 { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: #fff; margin: 0 0 8px 0; } .tours-cta-content p { font-family: var(--font-body); font-size: 16px; color: rgba(255,255,255,0.8); margin: 0; } .tours-cta-btn { display: flex; align-items: center; gap: 10px; padding: 16px 48px; min-width: 200px; background: #25d366; color: #fff !important; font-family: var(--font-body); font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 14px; transition: all 0.3s ease; box-shadow: 0 8px 24px rgba(37,211,102,0.3); justify-content: center; } .tours-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(37,211,102,0.4); color: #fff !important; } .tours-cta-btn i { font-size: 22px; } @media (max-width: 1199px) { .tours-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991px) { .tours-grid { grid-template-columns: repeat(2, 1fr); } .tours-hero h1 { font-size: 34px; } } @media (max-width: 767px) { .tours-hero { padding: 30px 0; } .tours-hero h1 { font-size: 28px; letter-spacing: -0.3px; } .tours-hero p { font-size: 16px; } .tour-card-v2 .tour-card-body h3 { font-size: 18px; } .tours-grid { grid-template-columns: 1fr; gap: 20px; } .tour-card-img { height: 180px; } .tours-cta-inner { flex-direction: column; text-align: center; } .tours-cta-content h2 { font-size: 26px; } } .content-page { padding: 60px 0 80px; background: #fff; } .content-wrapper { max-width: 1200px; margin: 0 auto; } .content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 50px; align-items: start; position: relative; } .content-main { max-width: 100%; min-width: 0; overflow-x: clip; } .content-header { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #e5e7eb; } .content-body { margin-bottom: 40px; } .content-main h1 { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: #2755CC; line-height: 1.2; margin: 0 0 22px 0; letter-spacing: 0.01em; } .content-intro { font-family: var(--font-body); font-size: 17px; color: #374151; line-height: 1.85; margin-bottom: 30px; font-weight: 400; } .content-main .content-lead { font-family: var(--font-body); font-size: 17px; color: #374151; line-height: 1.85; margin: 0 0 22px; font-weight: 400; } .content-main h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #1E293B; margin: 34px 0 14px 0; line-height: 1.3; } .content-main h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: #1E293B; margin: 20px 0 6px 0; line-height: 1.3; } .content-main p { font-family: var(--font-body); font-size: 16px; color: #333333; line-height: 1.75; margin-bottom: 12px; font-weight: 400; } .content-main strong { font-weight: 700 !important; color: #C05A33 !important; } .content-main .accent { color: #C05A33; font-weight: 700; } .content-main ul { margin: 20px 0; padding-left: 24px; } .content-main ul li { font-family: var(--font-body); font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 12px; position: relative; } .content-main ul li::marker { color: #C05A33; } .content-toc, .toc, .table-of-contents, .contents-box { margin: 26px 0 32px; padding: 16px 18px; background: #ffffff; border: 1px solid #edf0f5; border-left: 3px solid #d85b3f; border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); } .content-toc--inline { max-width: 100%; } .content-toc-title, .toc-title, .contents-title, .table-of-contents-title { font-family: var(--font-body); margin: 0 0 14px; font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #111827; } .content-toc-list, .toc ul, .table-of-contents ul, .contents-box ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; row-gap: 10px; margin: 0; padding: 0; list-style: none; } .content-toc-list li, .toc li, .table-of-contents li, .contents-box li { margin: 0; padding: 0; } .content-toc-list a, .toc a, .table-of-contents a, .contents-box a { display: inline-block; font-family: var(--font-body); font-size: 14px; line-height: 1.45; font-weight: 600; color: #10233f; text-decoration: none; transition: color 0.18s ease, transform 0.18s ease; } .content-toc-list a:hover, .toc a:hover, .table-of-contents a:hover, .contents-box a:hover { color: #d85b3f; transform: translateX(2px); } @media (max-width: 768px) { .content-toc, .toc, .table-of-contents, .contents-box { margin: 22px 0 28px; padding: 16px; border-left-width: 3px; border-radius: 10px; } .content-toc-title, .toc-title, .contents-title, .table-of-contents-title { margin-bottom: 12px; font-size: 12px; } .content-toc-list, .toc ul, .table-of-contents ul, .contents-box ul { grid-template-columns: 1fr; row-gap: 9px; } .content-toc-list a, .toc a, .table-of-contents a, .contents-box a { font-size: 13.5px; line-height: 1.4; } } .content-main table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--font-body); font-size: 15px; } .content-main table th, .content-main table td { border: 1px solid #e5e7eb; padding: 12px 14px; text-align: left; vertical-align: top; line-height: 1.55; } .content-main table th { background: #f8fafc; font-weight: 700; color: #1E293B; } .content-main table tbody tr:nth-child(even) { background: #fafafa; } .article-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #e5e7eb; } .article-meta-item { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 14px; color: #6b7280; } .article-meta-item i { font-size: 18px; color: #9ca3af; } .share-box { margin-top: 50px; padding: 24px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .share-label { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #374151; } .share-buttons { display: flex; gap: 10px; } .share-btn { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s ease; } .share-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); } .share-facebook { background: #1877f2; } .share-twitter { background: #1da1f2; } .share-whatsapp { background: #25d366; } .share-linkedin { background: #0a66c2; } .share-copy { background: #6b7280; } .author-box { margin-top: 40px; padding: 28px; background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; display: flex; gap: 24px; align-items: flex-start; } .author-avatar { width: 80px; height: 80px; border-radius: 16px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 12px; } .author-avatar img { max-width: 100%; height: auto; } .author-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; } .author-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #1f2937; margin: 4px 0 10px 0; } .author-bio { font-family: var(--font-body); font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0 0 14px 0; } .author-social { display: flex; gap: 12px; } .author-social a { width: 36px; height: 36px; border-radius: 10px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 18px; transition: all 0.3s ease; } .author-social a:hover { background: #4d40ca; color: #fff; } .related-articles { margin-top: 50px; padding-top: 40px; border-top: 1px solid #e5e7eb; } .related-articles h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #1f2937; margin: 0 0 24px 0; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .related-card { text-decoration: none; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; transition: all 0.3s ease; } .related-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(18, 34, 68, 0.12); } .related-card-img { height: 140px; overflow: hidden; } .related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .related-card:hover .related-card-img img { transform: scale(1.03); } .related-card-content { padding: 16px; } .related-card-cat { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: #4d40ca; text-transform: uppercase; letter-spacing: 0.5px; } .related-card-content h4 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #1f2937; margin: 6px 0 0 0; line-height: 1.4; } @media (max-width: 767px) { .article-meta { gap: 12px; } .share-box { flex-direction: column; align-items: flex-start; } .author-box { flex-direction: column; text-align: center; align-items: center; } .author-social { justify-content: center; } .related-grid { grid-template-columns: 1fr; } } .content-image { margin: 28px auto; width: 100%; max-width: 100%; border-radius: 16px; overflow: hidden; background: transparent; line-height: 0; } .content-image img { display: block; width: 100%; height: auto; max-width: 100%; vertical-align: middle; opacity: 1; } .content-image img:not(.loaded) { background: #f3f4f6; } .content-image.ratio-16-9 { aspect-ratio: 16 / 9; } .content-image.ratio-4-3 { aspect-ratio: 4 / 3; } .content-image.ratio-3-2 { aspect-ratio: 3 / 2; } .content-image.ratio-16-9 img, .content-image.ratio-4-3 img, .content-image.ratio-3-2 img { width: 100%; height: 100%; object-fit: cover; } .img-full { width: 100%; } .img-large { width: 85%; margin-left: auto; margin-right: auto; } .img-medium { width: 70%; margin-left: auto; margin-right: auto; } .img-small { width: 50%; margin-left: auto; margin-right: auto; } .img-left { float: left; width: 45%; margin: 0 24px 16px 0; border-radius: 12px; } .img-right { float: right; width: 45%; margin: 0 0 16px 24px; border-radius: 12px; } .img-inline-left { float: left; width: 280px; margin: 6px 20px 12px 0; border-radius: 10px; } .img-inline-right { float: right; width: 280px; margin: 6px 0 12px 20px; border-radius: 10px; } .img-inline-sm { float: left; width: 180px; margin: 4px 16px 10px 0; border-radius: 8px; } .img-rounded { border-radius: 20px; } .img-rounded-lg { border-radius: 28px; } .img-shadow { box-shadow: 0 8px 30px rgba(0,0,0,0.12); } .content-main::after { content: ""; display: table; clear: both; } @media (max-width: 767px) { .img-large, .img-medium, .img-small { width: 100%; } .img-left, .img-right { float: none; width: 100%; margin: 20px 0; } .img-inline-left, .img-inline-right { float: none; width: 100%; margin: 16px 0; } .img-inline-sm { float: none; width: 100%; margin: 16px 0; } } .content-sidebar { position: relative; z-index: 2; width: 100%; max-width: 360px; } .content-sidebar-ph { width: 360px; max-width: 360px; pointer-events: none; visibility: hidden; } .sidebar-box { background: #fff; border-radius: 20px; padding: 24px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .sidebar-box h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #1f2937; margin: 0 0 16px 0; line-height: 1.2; padding-bottom: 14px; border-bottom: 2px solid #e5e7eb; } .sidebar-scroll { max-height: 75vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #c7d2fe #f0f0f5; } .sidebar-scroll::-webkit-scrollbar { width: 5px; } .sidebar-scroll::-webkit-scrollbar-track { background: #f0f0f5; border-radius: 10px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #818cf8, #6366f1); border-radius: 10px; } .sidebar-section h4 { font-size: 12px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 8px; padding: 0; border-top: 1px solid #e5e7eb; padding-top: 14px; font-family: var(--font-body); } .sidebar-section:first-child h4 { border-top: none; padding-top: 0; margin-top: 0; } .sidebar-links { list-style: none; padding: 0; margin: 0; } .sidebar-links a { display: block; padding: 11px 14px; font-size: 15px; line-height: 1.4; color: #374151; text-decoration: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; position: relative; font-family: var(--font-body); font-weight: 500; } .sidebar-links a::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: 500; color: #d1d5db; transition: all 0.2s ease; } .sidebar-links a:hover { color: #4d40ca; background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); } .sidebar-links a:hover::after { color: #4d40ca; transform: translateY(-50%) translateX(3px); } .sidebar-links a.active { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); color: #4338ca; font-weight: 600; box-shadow: inset 3px 0 0 #6366f1; } .sidebar-links a.active::after { color: #6366f1; } .sidebar-links a:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; } @media (pointer: coarse) { .sidebar-links a { padding: 13px 16px; } } .blog-sidebar { display: flex; flex-direction: column; gap: 18px; padding-right: 0; } .sidebar-widget { background: #fff; border-radius: 16px; padding: 24px; border: 1px solid #e5e7eb; } .sidebar-widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #f3f4f6; } .sidebar-widget h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #1f2937; margin: 0; } .sidebar-view-all { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #7c3aed; text-decoration: none; transition: gap 0.2s ease; } .sidebar-view-all:hover { gap: 8px; color: #6366f1; } .sidebar-view-all i { font-size: 14px; } .sidebar-recent-posts { display: flex; flex-direction: column; gap: 16px; } .sidebar-recent-posts .recent-post-item { display: flex !important; gap: 14px !important; text-decoration: none; color: inherit; padding: 14px !important; background: #f9fafb !important; border-radius: 14px !important; border: 1px solid #e5e7eb !important; transition: all 0.25s ease; margin-bottom: 0; } .sidebar-recent-posts .recent-post-item:hover { background: #fff !important; border-color: #d1d5db !important; box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important; transform: translateY(-3px); } .sidebar-recent-posts .recent-post-item img { width: 72px !important; height: 72px !important; object-fit: cover; border-radius: 10px !important; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .sidebar-recent-posts .recent-post-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 2px 0; } .sidebar-recent-posts .recent-post-content h4 { font-size: 14px !important; font-weight: 600 !important; color: #4b5563 !important; margin: 0 0 6px 0 !important; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; } .sidebar-recent-posts .recent-post-item:hover h4 { color: #6366f1 !important; } .sidebar-recent-posts .recent-post-content span { font-size: 12px; color: #9ca3af; display: flex; align-items: center; gap: 4px; } .mobile-dest-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #fff; border-top: 1px solid #eee; box-shadow: 0 -2px 12px rgba(0,0,0,0.06); padding: 6px 10px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); } .mobile-dest-bar::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; background: #e5e7eb; border-radius: 2px; } .mobile-dest-bar-inner { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; } .mobile-dest-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px; background: linear-gradient(135deg, #4d40ca 0%, #6366f1 100%); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(99,102,241,0.2); } .mobile-dest-btn:hover { box-shadow: 0 4px 12px rgba(99,102,241,0.3); } .mobile-dest-btn i { font-size: 14px; } .mobile-tours-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px; background: #fff; color: #1a1a2e; font-family: var(--font-body); font-size: 12px; font-weight: 600; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .mobile-tours-btn:hover { border-color: #4d40ca; color: #4d40ca; } .mobile-tours-btn i { font-size: 14px; } .fab-sidebar { position: fixed; right: 24px; bottom: 100px; z-index: 9998; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, #4d40ca 0%, #7c3aed 100%); color: #fff; font-size: 22px; display: none; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(77, 64, 202, 0.35); transition: transform 0.3s ease, box-shadow 0.3s ease; } .fab-sidebar:hover { transform: scale(1.05); box-shadow: 0 14px 32px rgba(77, 64, 202, 0.45); } .fab-sidebar i { font-size: 24px; } .sidebar-drawer { position: fixed; top: 0; right: 0; width: 85%; max-width: 340px; height: 100vh; background: #fff; z-index: 9998; box-shadow: -10px 0 24px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; border-left: 1px solid #eee; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .sidebar-drawer.open { transform: translateX(0); } .sidebar-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #1a1a2e; } .sidebar-drawer-close { background: transparent; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #666; transition: color 0.2s ease; } .sidebar-drawer-close:hover { color: #1a1a2e; } .sidebar-drawer-body { padding: 16px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; } .sidebar-drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 9997; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .sidebar-drawer-backdrop.show { opacity: 1; pointer-events: auto; } @media (max-width: 1199px) { .content-sidebar { display: none; } .mobile-dest-bar { display: block; } .content-page { padding-bottom: 100px; } } @media (max-width: 1023px) { .content-page { padding: 40px 0 60px; } .content-grid { grid-template-columns: 1fr; gap: 40px; } .content-main h1 { font-size: 30px; letter-spacing: -0.3px; } .content-main h2 { font-size: 22px; } .guide-content h3, .destination-content h3, .content-main h3 { font-size: 20px; } .content-main h4 { font-size: 17px; } .content-main p { font-size: 16px; line-height: 1.75; } } @media (max-width: 767px) { .content-page { padding: 30px 0 50px; } .content-main h1 { font-size: 26px; letter-spacing: -0.3px; } .content-main h2 { font-size: 20px; } .guide-content h3, .destination-content h3, .content-main h3 { font-size: 18px; } .content-main h4 { font-size: 16px; } .content-main p { font-size: 15px; line-height: 1.7; } .content-intro { font-size: 15px; } .sidebar-box { padding: 20px; } .sidebar-widget { padding: 20px; } .blog-sidebar { max-height: none; overflow: visible; } .sidebar-recent-posts { max-height: none; } } .contact-section { padding: 80px 0 0 0; background: #fff; position: relative; overflow: hidden; } .contact-deco { position: absolute; pointer-events: none; z-index: 0; } .contact-deco-1 { left: 3%; top: 30%; width: 100px; opacity: 0.12; } .contact-deco-2 { left: 5%; bottom: 25%; width: 80px; opacity: 0.1; } .contact-section .container { position: relative; z-index: 1; } .contact-mobile-header { display: none; text-align: center; margin-bottom: 40px; } .contact-mobile-header h1 { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: #2755CC; margin: 0 0 12px 0; } .contact-mobile-header p { font-family: var(--font-body); font-size: 15px; color: #666; margin: 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact-info-side { order: 1; } .contact-form-wrapper { order: 2; } .contact-info-header { margin-bottom: 40px; } .contact-info-label { display: inline-block; font-size: 14px; font-weight: 600; color: #C05A33; margin-bottom: 16px; } .contact-info-title { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: #2755CC; line-height: 1.2; margin: 0 0 20px 0; } .contact-info-desc { font-size: 15px; line-height: 1.7; color: #374151; margin: 0; } .contact-info-cards { display: flex; flex-direction: column; gap: 24px; } .contact-card { display: flex; align-items: flex-start; gap: 20px; padding: 24px 0; border-bottom: 1px dashed rgba(0,0,0,0.1); } .contact-card:last-child { border-bottom: none; } .contact-card-icon { width: 60px; height: 60px; background: rgba(192, 90, 51, 0.08); border: 1px solid rgba(192, 90, 51, 0.15); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-card-icon i { font-size: 26px; color: #C05A33; } .contact-card-content { padding-top: 4px; } .contact-card-label { display: block; color: #C05A33; font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .contact-card-content h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #1E293B; margin: 0; line-height: 1.5; } .contact-card-content h4 a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .contact-card-content h4 a:hover { color: #C05A33; } .contact-trust { display: flex; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.08); } .contact-trust-item { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, #f8faf8 0%, #f0f8f0 100%); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 12px; flex: 1; } .contact-trust-item i { font-size: 28px; color: #22c55e; } .contact-trust-item div { display: flex; flex-direction: column; } .contact-trust-item span { font-size: 12px; color: #666; margin-bottom: 2px; } .contact-trust-item strong { font-size: 15px; font-weight: 700; color: #1E293B; } .contact-form-wrapper { background: #f8f8fc; border-radius: 24px; padding: 48px; position: relative; overflow: hidden; } .contact-form-wrapper h3 { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: #1E293B; margin-bottom: 12px; padding-left: 16px; border-left: 4px solid #C05A33; } .contact-form-wrapper > p { font-family: var(--font-body); font-size: 15px; color: #666; line-height: 1.7; margin-bottom: 32px; } .contact-form { display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { position: relative; } $form-group input, .form-group textarea, .form-group select { width: 100%; padding: 16px 20px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; font-family: var(--font-body); font-size: 15px; color: #333333; transition: all 0.3s ease; } .form-group input::placeholder, .form-group textarea::placeholder { color: #999; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #C05A33; box-shadow: 0 0 0 3px rgba(192, 90, 51, 0.1); } .form-group select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; } .form-group select:invalid, .form-group select option[value=""] { color: #999; } .form-group textarea { resize: vertical; min-height: 140px; } .contact-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 36px; background: #1a1a2e; color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 600; border: none; border-radius: 50px; cursor: pointer; transition: all 0.4s ease; width: fit-content; } .contact-submit-btn i { width: 36px; height: 36px; background: #fff; color: #2755CC; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.3s ease; } .contact-submit-btn:hover { background: #1E3FA3; } .contact-submit-btn:hover i { background: #C05A33; color: #fff; transform: translateX(4px); } .contact-form-deco { position: absolute; right: -20px; bottom: 20px; width: 100px; opacity: 0.15; transform: rotate(-15deg); pointer-events: none; } .map-section { width: 100%; height: 450px; background: #f5f5f5; margin-top: -1px; } .map-section iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 1023px) { .page-header-desktop { display: none; } .contact-mobile-header { display: block; } .contact-section { padding: 40px 0 0 0; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .contact-info-side { order: 2; } .contact-info-header { text-align: center; margin-bottom: 30px; } .contact-info-title { font-size: 32px; } .contact-info-cards { gap: 20px; } .contact-trust { flex-direction: column; gap: 16px; } .contact-form-wrapper { order: 1; } .contact-deco { display: none; } } @media (min-width: 768px) and (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } .contact-form-wrapper { order: 1; } .contact-info-side { order: 2; } .contact-info-header { text-align: center; } .contact-info-title { font-size: 28px; } .contact-info-cards { gap: 16px; } } @media (max-width: 767px) { .contact-section { padding: 30px 0 0 0; } .contact-mobile-header { margin-bottom: 30px; } .contact-mobile-header h1 { font-size: 28px; } .contact-mobile-header p { font-size: 14px; } .contact-card { padding: 16px 0; } .contact-card-icon { width: 50px; height: 50px; } .contact-card-icon i { font-size: 22px; } .contact-card-content h4 { font-size: 17px; } .contact-form-wrapper { padding: 32px 24px; } .contact-form-wrapper h3 { font-size: 24px; } .form-row { grid-template-columns: 1fr; } .contact-submit-btn { width: 100%; justify-content: center; } .contact-form-deco { display: none; } .map-section { height: 300px; } } .footer-new { background: #FEF6EE; position: relative; overflow: hidden; } .footer-deco { position: absolute; pointer-events: none; opacity: 0.4; } .footer-deco-balloon { left: 0; top: 200px; width: 80px; } .footer-deco-cloud { right: 50px; top: 80px; width: 100px; } .footer-deco-plane { right: 50px; bottom: 100px; width: 120px; } .footer-cta-new { padding: 40px 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .footer-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 28px 40px; background: linear-gradient(135deg, #4d40ca 0%, #6366f1 100%); border-radius: 18px; position: relative; overflow: hidden; box-shadow: 0 15px 40px rgba(77, 64, 202, 0.25); } .footer-cta-box::before { content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none; } .footer-cta-box::after { content: ''; position: absolute; bottom: -30%; left: 10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); pointer-events: none; } .footer-cta-left { display: flex; align-items: center; gap: 24px; position: relative; z-index: 1; } .footer-cta-icon { width: 54px; height: 54px; background: rgba(255,255,255,0.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .footer-cta-icon i, .footer-cta-icon .svg-icon { color: #fff; } .footer-cta-icon i { font-size: 24px; } .footer-cta-icon .svg-icon { width: 24px; height: 24px; } .footer-cta-text-wrap h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 4px 0; } .footer-cta-text-wrap p { font-size: 14px; color: rgba(255,255,255,0.8); margin: 0; line-height: 1.4; } .footer-cta-button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; background: #fff; color: #4d40ca; font-size: 14px; font-weight: 600; border-radius: 50px; text-decoration: none; position: relative; z-index: 1; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 6px 20px rgba(0,0,0,0.12); flex-shrink: 0; } .footer-cta-button:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 35px rgba(0,0,0,0.2); color: #4d40ca; } .footer-cta-button i { font-size: 18px; transition: transform 0.3s ease; } .footer-cta-button:hover i { transform: translateX(4px); } .footer-main { padding: 60px 0; } .footer-grid-new { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 240px; gap: 40px; } .footer-contact-block { display: flex; flex-direction: column; gap: 24px; } .footer-contact-item { display: flex; align-items: center; gap: 16px; } .footer-contact-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--c-primary), #e85d3b); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; } .footer-contact-label { display: block; font-size: 13px; color: #999; margin-bottom: 4px; } .footer-contact-value { font-size: 16px; font-weight: 600; color: #1a1a1a; transition: color 0.3s ease; } .footer-contact-value:hover { color: var(--c-primary); } .footer-social-new { display: flex; gap: 12px; margin-top: 10px; } .footer-social-new a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #1a1a1a; border-radius: 50%; color: #fff; font-size: 18px; transition: all 0.3s ease; } .footer-social-new a:hover { background: #1a1a2e; } .footer-links-block h4 { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 24px; padding-left: 16px; border-left: 3px solid var(--c-primary); } .footer-links-block ul { list-style: none; } .footer-links-block li { margin-bottom: 14px; } .footer-links-block a { color: #666; font-size: 15px; transition: all 0.3s ease; } .footer-links-block a:hover { color: var(--c-primary); } .footer-instagram h4 { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 24px; padding-left: 16px; border-left: 3px solid var(--c-primary); } .footer-insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 250px; } .footer-insta-grid a { aspect-ratio: 1; border-radius: 6px; overflow: hidden; } .footer-insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .footer-insta-grid a:hover img { transform: scale(1.1); } .footer-copyright { background: #1a1a1a; padding: 20px 0; } .footer-copyright-inner { display: flex; justify-content: space-between; align-items: center; } .footer-copyright p { color: rgba(255,255,255,0.7); font-size: 14px; } .footer-copyright a { color: rgba(255,255,255,0.7); font-size: 14px; transition: color 0.3s ease; } .footer-copyright a:hover { color: #fff; } @media (max-width: 1299px) { .footer-grid-new { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 35px; } .footer-instagram { display: none; } } @media (max-width: 1023px) { .footer-deco { display: none; } .footer-grid-new { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 30px; } .footer-cta-new { display: none; } } @media (max-width: 900px) { .footer-grid-new { grid-template-columns: 1fr 1fr; gap: 35px; } } @media (max-width: 767px) { .footer-grid-new { grid-template-columns: 1fr; gap: 25px; padding: 0 10px; } .footer-contact-block { align-items: center; text-align: center; background: none; padding: 0; gap: 8px; } .footer-contact-item { flex-direction: row; text-align: left; background: none; padding: 10px 0; border-radius: 0; margin-bottom: 0; width: 100%; max-width: 280px; gap: 12px; } .footer-contact-icon { width: 42px; height: 42px; font-size: 18px; flex-shrink: 0; } .footer-contact-label { font-size: 11px; } .footer-contact-value { font-size: 14px; } .footer-social-new { justify-content: center; gap: 10px; margin-top: 15px; } .footer-social-new a { width: 40px; height: 40px; font-size: 18px; } .footer-links-block { text-align: center; padding: 0 10px; } .footer-links-block h4 { border-left: none; padding-left: 0; border-bottom: 2px solid var(--c-primary); padding-bottom: 8px; display: inline-block; margin-bottom: 12px; font-size: 15px; } .footer-links-block ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; } .footer-links-block li { margin: 0; } .footer-links-block a { padding: 6px 0; display: inline-block; font-size: 14px; } .footer-links-block a:hover { padding-left: 0; } .footer-links-block:nth-child(3), .footer-instagram { display: none; } .footer-copyright-inner { flex-direction: column; gap: 8px; text-align: center; } .footer-main { padding: 40px 0 30px; } } .ttc-chat-widget { position: fixed; right: 24px; bottom: 28px; z-index: 9999; font-family: var(--font-body); pointer-events: none; } .ttc-chat-bubble, .ttc-chat-panel { pointer-events: auto; } .ttc-chat-bubble { width: 56px; height: 56px; border: none; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .ttc-chat-bubble:hover { transform: scale(1.05); box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45); } .ttc-chat-bubble:focus-visible, .ttc-chat-close:focus-visible, .ttc-chat-action:focus-visible { outline: 2px solid #128c7e; outline-offset: 3px; } .ttc-chat-panel { position: absolute; right: 0; bottom: calc(56px + 16px); width: 360px; height: auto; max-height: min(520px, calc(100vh - 120px)); display: none; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16), 0 4px 14px rgba(15, 23, 42, 0.08); } .ttc-chat-panel.is-open { display: flex; bottom: 12px; } .ttc-chat-bubble.is-hidden { display: none; } .ttc-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 16px; background: linear-gradient(135deg, #128c7e 0%, #25d366 100%); color: #fff; } .ttc-chat-header-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .ttc-chat-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; } .ttc-chat-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 2px; } .ttc-chat-brand { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.25; color: #fff; } .ttc-chat-role { margin: 2px 0 0; font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, 0.9); } .ttc-chat-close { flex-shrink: 0; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: background 0.2s ease; } .ttc-chat-close:hover { background: rgba(255, 255, 255, 0.28); } .ttc-chat-body { padding: 20px 16px 16px; flex: 0 0 auto; overflow-y: auto; } .ttc-chat-body h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; line-height: 1.2; font-weight: 800; color: #0f172a; } .ttc-chat-question { margin: 0 0 8px; font-size: 15.5px; line-height: 1.45; font-weight: 700; color: #111827; } .ttc-chat-text { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: #526079; } .ttc-chat-note { margin: 0 0 16px; font-size: 13.5px; line-height: 1.4; color: #16a34a; font-weight: 700; } .ttc-chat-action { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 0; padding: 13px 16px; border: none; border-radius: 14px; background: #25d366; color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .ttc-chat-action:hover { background: #1ebe57; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37, 211, 102, 0.34); color: #fff; } @media (max-width: 767px) { .ttc-chat-widget { right: 18px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); } body:has(.mobile-dest-bar) .ttc-chat-widget, body:has(.mobile-book-bar) .ttc-chat-widget, body:has(.mobile-blog-bar) .ttc-chat-widget { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } .ttc-chat-panel { position: fixed; left: 12px; right: 12px; width: auto; max-width: calc(100vw - 24px); bottom: calc(90px + 56px + 12px + env(safe-area-inset-bottom, 0px)); max-height: min(520px, calc(100vh - 120px)); } .ttc-chat-panel.is-open { bottom: calc(90px + 12px + env(safe-area-inset-bottom, 0px)); } body:not(:has(.mobile-dest-bar)):not(:has(.mobile-book-bar)):not(:has(.mobile-blog-bar)) .ttc-chat-panel { bottom: calc(28px + 56px + 12px + env(safe-area-inset-bottom, 0px)); } body:not(:has(.mobile-dest-bar)):not(:has(.mobile-book-bar)):not(:has(.mobile-blog-bar)) .ttc-chat-panel.is-open { bottom: calc(28px + 12px + env(safe-area-inset-bottom, 0px)); } } body:has(.mobile-menu.active) .ttc-chat-widget { opacity: 0; visibility: hidden; pointer-events: none; } .text-primary { color: var(--c-primary); } .text-accent { color: var(--c-accent); } .text-dark { color: var(--c-dark); } .text-gray { color: var(--c-gray-500); } .text-light { color: var(--c-gray-400); } .text-white { color: var(--c-white); } .text-success { color: var(--c-success); } .text-warning { color: var(--c-warning); } .text-error { color: var(--c-error); } .bg-primary { background-color: var(--c-primary); } .bg-light { background-color: var(--c-light); } .bg-white { background-color: var(--c-white); } .bg-dark { background-color: var(--c-dark); } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .m-0 { margin: 0; } .m-auto { margin: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); } .mt-12 { margin-top: var(--space-12); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-10 { margin-bottom: var(--space-10); } .mb-12 { margin-bottom: var(--space-12); } .p-0 { padding: 0; } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .w-full { width: 100%; } .h-full { height: 100%; } .min-h-screen { min-height: 100vh; } .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .rounded { border-radius: var(--radius); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); } .shadow { box-shadow: var(--shadow); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-none { box-shadow: none; } .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-100 { opacity: 1; } .pointer { cursor: pointer; } .pointer-none { pointer-events: none; } .transition { transition: all var(--transition); } .transition-fast { transition: all var(--transition-fast); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-fadeIn { animation: fadeIn 0.5s ease forwards; } .animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; } .animate-fadeInDown { animation: fadeInDown 0.6s ease forwards; } .animate-slideInLeft { animation: slideInLeft 0.6s ease forwards; } .animate-slideInRight { animation: slideInRight 0.6s ease forwards; } .animate-scaleIn { animation: scaleIn 0.5s ease forwards; } .animate-pulse { animation: pulse 2s infinite; } .animate-spin { animation: spin 1s linear infinite; } .delay-100 { animation-delay: 100ms; } .delay-200 { animation-delay: 200ms; } .delay-300 { animation-delay: 300ms; } .delay-400 { animation-delay: 400ms; } .delay-500 { animation-delay: 500ms; } @media (min-width: 1600px) { .container { padding-left: var(--space-10); padding-right: var(--space-10); } } @media (max-width: 1599px) { .header .nav .nav-link { padding: 10px 14px; font-size: 14px; } .header .nav .nav-link::after { left: 14px; right: 14px; } .header-right { gap: 14px; } } @media (max-width: 1199px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--space-8); } .header .nav .nav-link { padding: 10px 12px; font-size: 14px; } .header .nav .nav-link::after { left: 12px; right: 12px; } .btn-whatsapp span { display: none; } .btn-whatsapp { padding: 12px; border-radius: 50%; } } @media (max-width: 1023px) { :root { --header-height: 78px; } section, .section { padding: var(--space-16) 0; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .card-horizontal { grid-template-columns: 1fr; } } @media (max-width: 767px) { section, .section { padding: var(--space-12) 0; } .section-header { margin-bottom: var(--space-8); } .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; } .grid-sidebar, .grid-sidebar-right { grid-template-columns: 1fr; } .topbar { display: none; } .header .container { min-height: 78px; } .nav { display: none; } .menu-toggle { display: flex; } .mobile-menu { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background: var(--c-white); padding: var(--space-4); overflow-y: auto; transform: translateX(100%); transition: transform var(--transition); z-index: var(--z-fixed); } .mobile-menu.active { transform: translateX(0); } .mobile-nav-link { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-dark); border-bottom: 1px solid var(--c-gray-100); } .mobile-nav-link:hover { color: var(--c-primary); background: var(--c-light); } .mobile-menu-footer { padding: var(--space-6) var(--space-4); padding-bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-gray-200); margin-top: 0; } .mobile-menu-footer .btn-whatsapp { width: 100%; justify-content: center; padding: var(--space-4); } .scroll-indicator-wrapper { width: 20px; height: 35px; } .scroll-line { height: 6px; } .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); text-align: center; } .footer-brand p { max-width: 100%; } .footer-social { justify-content: center; } .footer-contact li { justify-content: center; } .footer-bottom { flex-direction: column; gap: var(--space-4); text-align: center; } .footer-legal { flex-wrap: wrap; justify-content: center; gap: var(--space-4); } } @media (max-width: 1100px) { .header-phone-wrapper { display: none; } } @media (max-width: 1023px) { .topbar { display: none; } .nav { display: none; } .menu-toggle { display: flex; } .header .container { min-height: 78px; } } @media (max-width: 479px) { .container { padding-left: var(--space-4); padding-right: var(--space-4); padding: 14px 24px; } } .blog-hero-compact { padding: 50px 0 45px; background: linear-gradient(135deg, #f8f7ff 0%, #fff5f3 100%); text-align: left; border-bottom: 1px solid #eee; position: relative; overflow: hidden; } .blog-hero-compact::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(77, 64, 202, 0.08) 0%, transparent 70%); pointer-events: none; } .blog-hero-compact .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; z-index: 1; } .blog-hero-compact h1 { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: #1a1a2e; margin: 0; line-height: 1.2; } .blog-hero-compact h1::after { content: ''; display: block; width: 60px; height: 4px; background: linear-gradient(90deg, #4d40ca, #fb5b32); border-radius: 2px; margin-top: 16px; } .blog-hero-compact p { font-size: 16px; color: #666; margin: 0; max-width: 380px; text-align: right; line-height: 1.7; } .blog-detail-hero { padding: 50px 0 45px; } .blog-detail-hero .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .blog-detail-hero h1 { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: #1a1a2e; margin: 0; line-height: 1.2; } .blog-detail-hero h1::after { content: ''; display: block; width: 60px; height: 4px; background: linear-gradient(90deg, #4d40ca, #fb5b32); border-radius: 2px; margin-top: 16px; } .blog-detail-hero p { font-size: 16px; color: #666; margin: 0; max-width: 380px; text-align: right; line-height: 1.7; } .blog-section { padding: 60px 0 80px; background: #f9fafb; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; } .blog-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .blog-card-img { position: relative; display: block; height: 220px; overflow: hidden; } .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .blog-card:hover .blog-card-img img { transform: scale(1.1); } .blog-card-category { position: absolute; bottom: 16px; left: 16px; background: rgba(255,255,255,0.95); color: #7c3aed; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 14px; border-radius: 6px; backdrop-filter: blur(10px); } .blog-card-body { padding: 24px; } .blog-card-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .blog-card-meta span { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #9ca3af; } .blog-card-meta i { font-size: 14px; } .blog-card-body h3 { margin: 0 0 12px 0; } .blog-card-body h3 a { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #1f2937; text-decoration: none; line-height: 1.35; transition: color 0.2s ease; } .blog-card-body h3 a:hover { color: #7c3aed; } .blog-card-body p { font-size: 15px; color: #6b7280; line-height: 1.6; margin: 0; } .blog-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; } .pagination-btn { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 16px; background: #fff; color: #374151; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 12px; border: 1px solid #e5e7eb; transition: all 0.2s ease; } .pagination-btn:hover { background: #f3f4f6; border-color: #d1d5db; } .pagination-btn.active { background: #7c3aed; color: #fff; border-color: #7c3aed; } .pagination-next { gap: 8px; } .pagination-dots { color: #9ca3af; padding: 0 8px; } .blog-newsletter { padding: 80px 0; background: #0f172a; } .newsletter-box { max-width: 800px; margin: 0 auto; text-align: center; } .newsletter-content { margin-bottom: 32px; } .newsletter-content i { font-size: 48px; color: #7c3aed; margin-bottom: 16px; display: block; } .newsletter-content h3 { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 12px; } .newsletter-content p { font-size: 16px; color: #9ca3af; } .newsletter-form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto; } .newsletter-form input { flex: 1; padding: 16px 20px; background: #1e293b; border: 1px solid #334155; border-radius: 12px; color: #fff; font-size: 15px; } .newsletter-form input::placeholder { color: #64748b; } .newsletter-form input:focus { outline: none; border-color: #7c3aed; } .newsletter-form button { display: flex; align-items: center; gap: 8px; padding: 16px 28px; background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; font-size: 15px; font-weight: 600; border: none; border-radius: 12px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .newsletter-form button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4); } @media (max-width: 1100px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .blog-hero-compact h1 { font-size: 32px; } .blog-hero-compact h1::after, .blog-detail-hero h1::after { margin: 16px auto 0; } .blog-hero-compact .container, .blog-detail-hero .container { flex-direction: column; text-align: center; gap: 20px; } .blog-hero-compact p, .blog-detail-hero p { text-align: center; max-width: 100%; } .blog-detail-hero h1 { font-size: 32px; } } @media (max-width: 700px) { .blog-section { padding: 40px 0 60px; } .blog-section .section-header { margin-bottom: 24px; } .blog-section .section-header h2 { font-size: 24px; } .blog-grid { grid-template-columns: 1fr; gap: 16px; } .blog-card { border-radius: 14px; } .blog-card-img { height: 180px; } .blog-card-body { padding: 16px; } .blog-card-body h3 { font-size: 17px; margin-bottom: 8px; } .blog-card-body p { font-size: 13px; margin-bottom: 12px; } .blog-hero-compact { padding: 40px 0 30px; } .blog-hero-compact h1 { font-size: 28px; } .newsletter-form { flex-direction: column; } .newsletter-content h3 { font-size: 26px; } } .mobile-blog-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #fff; border-top: 1px solid #eee; box-shadow: 0 -2px 12px rgba(0,0,0,0.06); padding: 6px 10px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); } .mobile-blog-bar::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; background: #e5e7eb; border-radius: 2px; } .mobile-blog-bar-inner { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; } .mobile-blog-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px; font-family: var(--font-body); font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .mobile-blog-btn-tours { background: linear-gradient(135deg, #4d40ca 0%, #6366f1 100%); color: #fff; border: none; box-shadow: 0 2px 8px rgba(99,102,241,0.2); } .mobile-blog-btn-posts { background: #fff; color: #1a1a2e; border: 1px solid #e5e7eb; } .mobile-blog-btn-posts:hover { border-color: #4d40ca; color: #4d40ca; } .mobile-blog-btn i { font-size: 14px; } @media (max-width: 1023px) { .mobile-blog-bar { display: block; } } @media print { .header, .footer, .btn, .menu-toggle { display: none !important; } body { background: white; color: black; } a { text-decoration: underline; } } .content-sidebar.blog-sidebar .sidebar-widget .sidebar-recent-posts a.recent-post-item { display: flex; gap: 14px; padding: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; margin-bottom: 12px; transition: all 0.25s ease; } .content-sidebar.blog-sidebar .sidebar-widget .sidebar-recent-posts a.recent-post-item:last-child { margin-bottom: 0; } .content-sidebar.blog-sidebar .sidebar-widget .sidebar-recent-posts a.recent-post-item:hover { background: #fff; border-color: #cbd5e1; box-shadow: 0 8px 20px rgba(0,0,0,0.08); transform: translateY(-3px); } .content-sidebar.blog-sidebar .sidebar-widget .sidebar-recent-posts a.recent-post-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; } .content-sidebar.blog-sidebar .sidebar-widget .sidebar-recent-posts a.recent-post-item .recent-post-content h4 { font-size: 14px; font-weight: 600; color: #475569; margin: 0 0 6px 0; line-height: 1.4; } .content-sidebar.blog-sidebar .sidebar-widget .sidebar-recent-posts a.recent-post-item:hover .recent-post-content h4 { color: #6366f1; } .content-sidebar.blog-sidebar .sidebar-widget .sidebar-recent-posts a.recent-post-item .recent-post-content span { font-size: 12px; color: #94a3b8; } .related-articles { margin-top: 48px; padding-top: 40px; border-top: 1px solid #e5e7eb; } .related-articles h3 { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: #1a1a2e; margin: 0 0 28px 0; position: relative; display: inline-block; } .related-articles h3::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 50px; height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 2px; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .related-card { text-decoration: none; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(99,102,241,0.1); box-shadow: 0 4px 20px rgba(99,102,241,0.08); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; position: relative; } .related-card::before { content: none; display: none; } .related-card:hover::before { content: none; display: none; } .related-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(18, 34, 68, 0.12); border-color: rgba(36, 73, 168, 0.18); } .related-card-img { height: 200px; overflow: hidden; position: relative; } .related-card-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(99,102,241,0) 0%, rgba(99,102,241,0.03) 50%, rgba(99,102,241,0.12) 100%); z-index: 1; transition: opacity 0.25s ease; pointer-events: none; } .related-card:hover .related-card-img::before { opacity: 0.7; } .related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .related-card:hover .related-card-img img { transform: scale(1.03); } .related-card-content { padding: 24px 22px 28px; position: relative; background: #fff; } .related-card-cat { font-family: var(--font-body); font-size: 10px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); border-radius: 20px; box-shadow: 0 4px 12px rgba(99,102,241,0.3); position: absolute; top: -14px; left: 22px; } .related-card-cat::before { content: '✦'; font-size: 8px; } .related-card-content h4 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #1f2937; margin: 16px 0 0 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s ease; } .related-card:hover .related-card-content h4 { color: #2449a8; } .related-card-content p { font-size: 14px; line-height: 1.7; color: #64748b; margin: 12px 0 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .related-card-content::after { content: '→'; position: absolute; bottom: 20px; right: 20px; font-size: 18px; font-weight: 600; color: #2449a8; opacity: 0; transform: translateX(-6px); transition: opacity 0.25s ease, transform 0.25s ease; } .related-card:hover .related-card-content::after { opacity: 0.85; transform: translateX(0); } @media (max-width: 1023px) { .related-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .related-card-img { height: 180px; } } @media (max-width: 767px) { .related-articles { margin-top: 36px; padding-top: 32px; } .related-grid { grid-template-columns: 1fr; gap: 20px; } .related-card-img { height: 220px; } .related-card-content p { -webkit-line-clamp: 3; } .related-articles h3 { font-size: 20px; } .related-card-cat { top: -12px; left: 16px; padding: 5px 10px; font-size: 9px; } } .about-hero { padding: 50px 0 60px; background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%); } .about-hero-content { max-width: 450px; text-align: center; margin: 0 auto; } .about-label { display: inline-block; font-size: 11px; font-weight: 600; color: #6366f1; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; padding: 5px 12px; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); border-radius: 16px; } .about-hero h1 { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: #1f2937; margin: 0 0 16px 0; line-height: 1.15; } .about-intro { font-size: 15px; line-height: 1.6; color: #64748b; margin: 0; max-width: 100%; } .about-story { padding: 80px 0; background: #fff; } .about-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: stretch; } .about-image-col { position: relative; width: 100%; display: flex; min-height: 520px; } .about-img-main { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); width: 100%; max-width: none; flex: 1 1 auto; align-self: stretch; min-height: 520px; position: relative; display: block; background: #f0f0f0; } .about-img-main img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } .about-image-col .discover-badge { bottom: -16px; right: -12px; } .about-content-col .section-label { display: inline-block; font-size: 12px; font-weight: 700; color: #6366f1; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 12px; } .about-content-col h1 { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: #1f2937; margin: 0; line-height: 1.2; } .about-content-col h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: #1f2937; margin: 0 0 24px 0; line-height: 1.25; } .about-text p { font-size: 16px; line-height: 1.8; color: #64748b; margin: 0 0 16px 0; } .about-text p:last-child { margin-bottom: 0; } .about-features-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #1a1a2e; margin: 0 0 24px 0; } .about-features { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; } .about-feature { display: flex; gap: 16px; align-items: flex-start; } .feature-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feature-icon i { font-size: 22px; color: #6366f1; } .feature-content h4 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #1f2937; margin: 0 0 6px 0; } .feature-content p { font-size: 14px; line-height: 1.6; color: #64748b; margin: 0; } .why-choose-us { padding: 80px 0; background: #f8fafc; } .section-header-center { text-align: center; margin-bottom: 48px; } .section-header-center .section-label { display: inline-block; font-size: 12px; font-weight: 700; color: #6366f1; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; } .section-header-center h2 { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: #1f2937; margin: 0; } .choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .choose-card { background: #fff; padding: 32px 24px; border-radius: 16px; text-align: center; border: 1px solid #e5e7eb; transition: all 0.3s ease; } .choose-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); border-color: transparent; } .choose-icon { width: 64px; height: 64px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .choose-icon i { font-size: 28px; color: #fff; } .choose-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #1f2937; margin: 0 0 12px 0; } .choose-card p { font-size: 14px; line-height: 1.65; color: #64748b; margin: 0; } .about-stats { padding: 60px 0; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; } .stat-item { color: #fff; } .stat-number { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1; margin-bottom: 8px; } .stat-number span { font-size: 32px; opacity: 0.8; } .stat-item p { font-size: 15px; font-weight: 500; margin: 0; opacity: 0.9; } .about-cta { padding: 80px 0; background: #1f2937; } .about-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; } .cta-content h2 { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: #fff; margin: 0 0 12px 0; } .cta-content p { font-size: 16px; color: rgba(255,255,255,0.7); margin: 0; } .cta-buttons { display: flex; gap: 16px; flex-shrink: 0; } .btn-outline-light { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-size: 15px; font-weight: 600; color: #fff; background: transparent; border: 2px solid rgba(255,255,255,0.3); border-radius: 12px; text-decoration: none; transition: all 0.3s ease; } .btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); } @media (max-width: 1199px) { .choose-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } } @media (max-width: 991px) { .about-hero h1 { font-size: 36px; } .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-image-col { min-height: 360px; } .about-img-main { width: 100%; max-width: none; min-height: 360px; height: 360px; } .about-img-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .about-image-col .discover-badge { bottom: -12px; right: 0; } .about-cta-inner { flex-direction: column; text-align: center; } } @media (max-width: 767px) { .about-hero { padding: 40px 0 60px; } .about-hero h1 { font-size: 28px; } .about-intro { font-size: 16px; } .about-story, .why-choose-us, .about-cta { padding: 60px 0; } .about-img-main { width: 100%; max-width: none; min-height: 280px; height: 280px; } .about-img-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .about-content-col h2 { font-size: 28px; } .section-header-center h2 { font-size: 28px; } .choose-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-number { font-size: 36px; } .cta-buttons { flex-direction: column; width: 100%; } .cta-buttons a { justify-content: center; } }