:root{--primary-color: #00AF87;--secondary-color: #FF6B35;--background-color: #FFFFFF;--text-color: #2C3E50;--accent-color: #F8F9FA;--hero-overlay: #1A365D;--border-color: #E2E8F0;--shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);--shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);--shadow-heavy: 0 10px 25px rgba(0, 0, 0, 0.45);--border-radius: 8px;--spacing: 20px;--transition: all 0.3s ease} *{margin: 0;padding: 0;box-sizing: border-box} img{opacity: 0;transition: opacity 0.3s ease;will-change: opacity} img.loaded{opacity: 1} .hero-image,
.page-header-image,
.city-image img{opacity: 1 !important} .optimized-image{background-color: #f5f5f5;transition: opacity 0.4s ease-in-out} .optimized-image.loading-placeholder{background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size: 200% 100%;animation: shimmer 1.5s infinite} .optimized-image.has-placeholder{background-blend-mode: multiply;filter: blur(2px);transition: filter 0.3s ease} .optimized-image.has-placeholder.loaded{filter: blur(0)} .optimized-image.loading{opacity: 0.7} .optimized-image.loaded{opacity: 1} .optimized-image.fallback-image{border: 2px solid #ff9800;opacity: 0.9} img[data-src]{background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size: 200% 100%;animation: shimmer 1.5s infinite} @keyframes shimmer{0%{background-position: 200% 0} 100%{background-position: -200% 0}
} .city-image{aspect-ratio: 16/10;overflow: hidden;background-color: #f5f5f5} .city-image img{width: 100%;height: 100%;object-fit: cover;object-position: center;transition: transform 0.3s ease, opacity 0.3s ease} img[loading="lazy"]{content-visibility: auto;contain-intrinsic-size: 270px 180px} img[fetchpriority="high"]{content-visibility: visible} .hero-image,
.page-header-image{width: 100%;height: 580px;object-fit: cover;object-position: center center;display: block;opacity: 1 !important} .hero-background{aspect-ratio: 16/9;min-height: 580px;position: relative;overflow: hidden;contain: layout style paint} .hero{contain: layout style paint} .fonts-loaded{font-display: swap} .hero-title{font-size: 3.5rem;font-weight: 700;color: white;text-align: center;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);margin-bottom: 1rem} .hero-subtitle{font-size: 1.25rem;color: rgba(255, 255, 255, 0.9);text-align: center;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);margin-bottom: 2rem} .hero-content{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 3;width: 100%;padding: 0 20px} .hero-overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(26, 54, 93, 0.7) 0%, rgba(0, 175, 135, 0.6) 100%);z-index: 2} @keyframes slideInFade{from{opacity: 0;transform: translateY(20px) scale(0.95)} to{opacity: 1;transform: translateY(0) scale(1)}
} @keyframes spin{from{transform: rotate(0deg)} to{transform: rotate(360deg)}
} .search-results-container *::-webkit-scrollbar{width: 6px} .search-results-container *::-webkit-scrollbar-track{background: rgba(0, 0, 0, 0.05);border-radius: 10px} .search-results-container *::-webkit-scrollbar-thumb{background: rgba(0, 175, 135, 0.3);border-radius: 10px;transition: background 0.3s ease} .search-results-container *::-webkit-scrollbar-thumb:hover{background: rgba(0, 175, 135, 0.5)} .search-input-group{transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)} .search-input{transition: all 0.2s ease} .search-input:focus{outline: none;box-shadow: 0 0 0 3px rgba(0, 175, 135, 0.1)} .cities-grid,
.destinations-grid{min-height: 400px;contain: layout style paint} button,
input,
select,
textarea,
a{touch-action: manipulation} .city-card{contain: layout} .search-results-container{contain: layout style} html{scroll-behavior: smooth} body{font-family: 'Lato', sans-serif;font-size: 14px;line-height: 1.6;color: var(--text-color);background-color: var(--background-color);-webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} @media (min-width: 768px){body{font-size: 14px}
} h1, h2, h3, h4, h5, h6{font-family: 'Montserrat', sans-serif;font-weight: 600;margin-bottom: 0.5em;line-height: 1.2} h1{font-size: 1.625rem}
h2{font-size: 1.375rem}
h3{font-size: 1.125rem}
h4{font-size: 0.975rem}
h5{font-size: 0.875rem}
h6{font-size: 0.775rem} @media (min-width: 768px){h1{font-size: 2.375rem} h2{font-size: 1.875rem} h3{font-size: 1.625rem} h4{font-size: 1.375rem} h5{font-size: 1.125rem} h6{font-size: 0.975rem}
} p{margin-bottom: 1em} a{color: var(--primary-color);text-decoration: none;transition: var(--transition)} a:hover{color: var(--secondary-color)} img{max-width: 100%;height: auto;display: block} .container{max-width: 1200px;margin: 0 auto;padding: 0 16px} @media (min-width: 480px){.container{padding: 0 20px}
} @media (min-width: 1240px){.container{padding: 0 var(--spacing)}
} .btn{display: inline-flex;align-items: center;justify-content: center;gap: 8px;padding: 14px 20px;min-height: 44px;border: none;border-radius: var(--border-radius);font-family: 'Montserrat', sans-serif;font-weight: 500;font-size: 12px;cursor: pointer;transition: var(--transition);text-decoration: none;text-align: center;touch-action: manipulation;-webkit-user-select: none;user-select: none} @media (min-width: 768px){.btn{padding: 12px 24px;font-size: 14px;min-height: auto}
} .btn-primary{background-color: var(--primary-color);color: white} .btn-primary:hover{background-color: #008f6e;transform: translateY(-2px);box-shadow: var(--shadow-medium)} .btn-secondary{background-color: var(--secondary-color);color: white} .btn-secondary:hover{background-color: #e55a2b;transform: translateY(-2px)} .btn-outline{background-color: transparent;color: var(--primary-color);border: 2px solid var(--primary-color)} .btn-outline:hover{background-color: var(--primary-color);color: white} .header{position: fixed;top: 0;left: 0;right: 0;background-color: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);box-shadow: var(--shadow-light);z-index: 1000;transition: var(--transition)} .navbar{padding: 18px 0} .navbar .container{display: flex;align-items: center;justify-content: space-between} .logo{display: flex;align-items: center;gap: 10px;font-family: 'Montserrat', sans-serif;font-size: 0.985rem;font-weight: 700;color: black} .logo i{font-size: 0.975rem} .nav-list{display: flex;list-style: none;gap: 30px} .nav-link{font-family: 'Montserrat', sans-serif;font-weight: 500;color: black;position: relative} .nav-link:hover,
.nav-link.active{color: var(--primary-color)} .nav-link::after{content: '';position: absolute;bottom: -5px;left: 0;width: 0;height: 2px;background-color: var(--primary-color);transition: var(--transition)} .nav-link:hover::after,
.nav-link.active::after{width: 100%} .nav-toggle{display: none;flex-direction: column;cursor: pointer;gap: 4px;padding: 10px;border: none;background: none;min-height: 44px;min-width: 44px;align-items: center;justify-content: center} .nav-toggle .bar{width: 25px;height: 3px;background-color: var(--text-color);transition: var(--transition);border-radius: 2px} .nav-toggle.active .bar:nth-child(1){transform: rotate(45deg) translate(5px, 5px)} .nav-toggle.active .bar:nth-child(2){opacity: 0} .nav-toggle.active .bar:nth-child(3){transform: rotate(-45deg) translate(7px, -6px)} @media (max-width: 768px){.nav-toggle{display: flex} .nav-menu{position: fixed;top: 70px;left: 0;width: 100%;height: calc(100vh - 70px);background-color: rgba(255, 255, 255, 0.98);backdrop-filter: blur(10px);transform: translateX(-100%);transition: transform 0.3s ease;z-index: 999} .nav-menu.active{transform: translateX(0)} .nav-list{flex-direction: column;align-items: center;justify-content: flex-start;gap: 0;padding-top: 40px;height: 100%;width: 100%} .nav-item{width: 100%;text-align: center} .nav-link{display: block;padding: 20px;font-size: 0.975rem;border-bottom: 1px solid rgba(0, 0, 0, 0.1);width: 100%} .nav-link::after{display: none} .nav-link:hover{background-color: rgba(0, 175, 135, 0.1)} body.nav-open{overflow: hidden;position: fixed;width: 100%}
} .hero{position: relative;height: 80vh;min-height: 600px;display: flex;align-items: center;overflow: hidden;margin-top: 0px} @media (min-width: 768px){.hero{height: 100vh;min-height: 700px;margin-top: 0}
} .hero-background{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;overflow: hidden} .hero-image{width: 100%;height: 100%;object-fit: cover;object-position: center center;display: block;opacity: 0;transition: opacity 0.5s ease-in-out} .hero-image.loaded{opacity: 1} .hero-overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 100%);z-index: 1} .hero-content{position: relative;z-index: 2;color: white;text-align: center;width: 100%;display: flex;align-items: center;justify-content: center;min-height: 100%} .hero-title{font-size: 3.375rem;font-weight: 700;margin-bottom: 20px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3)} @media (min-width: 768px){.hero-title{font-size: 4rem;margin-bottom: 30px}
} .hero-subtitle{font-size: 1.375rem;margin-bottom: 40px;max-width: 600px;margin-left: auto;margin-right: auto;opacity: 0.9;line-height: 1.5} @media (min-width: 768px){.hero-subtitle{font-size: 1.5rem;margin-bottom: 50px;max-width: 700px}
} .search-box{max-width: 600px;margin: 0 auto;width: 100%;padding: 0 16px} @media (min-width: 768px){.search-box{max-width: 700px;padding: 0}
} .search-form{position: relative;width: 100%} .search-input-group{display: flex;align-items: center;background-color: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 50px;padding: 8px;box-shadow: var(--shadow-heavy);position: relative;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px)} .search-input{flex: 1;border: none;outline: none;padding: 15px 50px 15px 20px;font-size: 14px;color: #2C3E50;background-color: rgba(255, 255, 255, 0.9);min-height: 44px;-webkit-appearance: none;appearance: none;border-radius: 50px;line-height: 1.4} .search-input::placeholder{color: rgba(44, 62, 80, 0.7)} .search-icon-right{position: absolute;right: 20px;top: 50%;transform: translateY(-50%);background: none;border: none;color: var(--primary-color);cursor: pointer;font-size: 0.975rem;padding: 4px;transition: var(--transition);display: flex;align-items: center;justify-content: center;height: 100%;line-height: 1} .search-icon-right:hover{color: #008f6e;transform: translateY(-50%) scale(1.05)} .page-header{position: relative;height: 300px;display: flex;align-items: center;margin-top: 76px;overflow: hidden} @media (min-width: 768px){.page-header{height: 400px}
} .page-header-background{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -2;overflow: hidden} .page-header-image{width: 100%;height: 100%;object-fit: cover;object-position: center center;display: block;opacity: 0;transition: opacity 0.5s ease-in-out} .page-header-image.loaded{opacity: 1} .page-header-overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, var(--hero-overlay) 0%, rgba(0, 175, 135, 0.7) 100%);z-index: -1} .page-header-content{position: relative;z-index: 1;color: white;text-align: center;width: 100%} .page-title{font-size: 2rem;font-weight: 700;margin-bottom: 10px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);line-height: 1.1} @media (min-width: 768px){.page-title{font-size: 3rem;margin-bottom: 15px}
} .page-subtitle{font-size: 1.2rem;opacity: 0.9} section{padding: 40px 0} .section-header{text-align: center;margin-bottom: 30px} .section-title{font-size: 1.75rem;color: var(--text-color);margin-bottom: 15px} @media (min-width: 768px){section{padding: 60px 0} .section-header{margin-bottom: 50px} .section-title{font-size: 2.5rem;margin-bottom: 20px}
} @media (min-width: 1024px){section{padding: 80px 0} .section-header{margin-bottom: 60px}
} .section-subtitle{font-size: 1.1rem;color: #64748b;max-width: 600px;margin: 0 auto} .featured-cities{background-color: var(--accent-color)} .cities-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 15px;max-width: 100%} @media (min-width: 480px){.cities-grid{grid-template-columns: 1fr 1fr;gap: 20px}
} @media (min-width: 768px){.cities-grid{grid-template-columns: repeat(3, 1fr);gap: 30px}
} @media (min-width: 1024px){.cities-grid{grid-template-columns: repeat(3, 1fr);gap: 30px}
} .city-card{position: relative;border-radius: var(--border-radius);overflow: hidden;cursor: pointer;transition: var(--transition);box-shadow: var(--shadow-light)} .city-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-heavy)} .city-image{position: relative;height: 180px;overflow: hidden;background-color: #f8fafc} @media (min-width: 480px){.city-image{height: 200px}
} @media (min-width: 768px){.city-image{height: 240px}
} .city-image img{width: 100%;height: 100%;object-fit: cover;object-position: center;transition: var(--transition);display: block;border: none;outline: none} .city-card:hover .city-image img{transform: scale(1.1)} .city-overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);display: flex;align-items: flex-end;padding: 10px} @media (min-width: 375px){.city-overlay{padding: 12px}
} @media (min-width: 480px){.city-overlay{padding: 20px}
} @media (min-width: 768px){.city-overlay{padding: 30px}
} .city-info{color: white} .city-name{font-size: 1.2rem;font-weight: 600;margin-bottom: 3px;line-height: 1.2} @media (min-width: 480px){.city-name{font-size: 1.5rem;margin-bottom: 5px}
} @media (min-width: 768px){.city-name{font-size: 1.8rem}
} .city-country{font-size: 0.85rem;opacity: 0.8;margin-bottom: 8px} @media (min-width: 480px){.city-country{font-size: 0.9rem;margin-bottom: 10px}
} @media (min-width: 768px){.city-country{font-size: 1rem}
} .city-rating{display: flex;align-items: center;gap: 3px;font-size: 0.8rem} @media (min-width: 480px){.city-rating{gap: 5px;font-size: 0.9rem}
} @media (min-width: 768px){.city-rating{font-size: 1rem}
} .city-rating i{color: var(--secondary-color);font-size: 0.7rem} @media (min-width: 480px){.city-rating i{font-size: 0.8rem}
} @media (min-width: 768px){.city-rating i{font-size: 0.9rem}
} .travel-stories{background-color: white} .stories-grid{display: grid;grid-template-columns: 1fr;gap: 20px;margin-bottom: 30px} @media (min-width: 480px){.stories-grid{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 25px;margin-bottom: 40px}
} @media (min-width: 768px){.stories-grid{grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px;margin-bottom: 50px}
} .story-card{background-color: white;border-radius: var(--border-radius);overflow: hidden;box-shadow: var(--shadow-light);transition: var(--transition)} .story-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-heavy)} .story-card.featured{grid-column: span 2} .story-image{position: relative;height: 250px;overflow: hidden} .story-image img{width: 100%;height: 100%;object-fit: cover;object-position: center;display: block} .story-category{position: absolute;top: 15px;left: 15px;background-color: var(--primary-color);color: white;padding: 5px 12px;border-radius: 20px;font-size: 0.85rem;font-weight: 500} .story-content{padding: 25px} .story-title{font-size: 1.4rem;margin-bottom: 15px;color: var(--text-color)} .story-excerpt{color: #64748b;margin-bottom: 20px;line-height: 1.6} .story-meta{display: flex;align-items: center;justify-content: space-between;font-size: 0.9rem} .author-info{display: flex;align-items: center;gap: 10px} .author-avatar{width: 40px;height: 40px;border-radius: 50%;object-fit: cover} .author-name{font-weight: 500;color: var(--text-color)} .story-date{color: #64748b} .stories-cta{text-align: center} .destinations-content{padding: 60px 0} .filter-section{margin-bottom: 50px} .filter-tabs{display: flex;justify-content: center;gap: 20px;flex-wrap: wrap} .filter-tab{background-color: transparent;border: 2px solid var(--border-color);color: var(--text-color);padding: 10px 20px;border-radius: 25px;font-family: 'Poppins', sans-serif;font-weight: 500;cursor: pointer;transition: var(--transition)} .filter-tab:hover,
.filter-tab.active{background-color: var(--primary-color);color: white;border-color: var(--primary-color)} .destinations-grid{display: flex;flex-direction: column;gap: 40px;max-width: 100%} .view-all-section{text-align: center;margin-top: 50px;padding: 30px 0} .view-all-btn{background: linear-gradient(135deg, var(--primary-color) 0%, #008f6e 100%);color: white;border: none;padding: 16px 32px;border-radius: 50px;font-family: 'Montserrat', sans-serif;font-weight: 600;font-size: 16px;cursor: pointer;transition: var(--transition);display: inline-flex;align-items: center;gap: 12px;box-shadow: var(--shadow-medium);min-width: 220px;justify-content: center} .view-all-btn:hover{transform: translateY(-3px);box-shadow: 0 8px 25px rgba(0, 175, 135, 0.4);background: linear-gradient(135deg, #008f6e 0%, var(--primary-color) 100%)} .view-all-btn:active{transform: translateY(-1px)} .view-all-btn i{transition: var(--transition)} .view-all-btn:hover i{transform: translateY(2px)} .view-all-btn.loading{opacity: 0.7;pointer-events: none} .view-all-btn.loading span{opacity: 0.8} .view-all-section.hidden{display: none} .destination-card{background-color: white;border-radius: var(--border-radius);overflow: hidden;box-shadow: var(--shadow-light);transition: var(--transition)} .destination-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-heavy)} .destination-image{position: relative;height: 200px;overflow: hidden} @media (min-width: 480px){.destination-image{height: 220px}
} @media (min-width: 768px){.destination-image{height: 260px}
} .destination-image img{width: 100%;height: 100%;object-fit: cover;object-position: center;transition: var(--transition);display: block;border: none;outline: none} .destination-overlay{position: absolute;top: 15px;right: 15px} .destination-rating{background-color: rgba(255, 255, 255, 0.9);padding: 5px 10px;border-radius: 20px;display: flex;align-items: center;gap: 5px;font-weight: 500} .destination-rating i{color: var(--secondary-color)} .destination-content{padding: 25px} .destination-name{font-size: 1.5rem;margin-bottom: 5px} .destination-country{color: var(--primary-color);font-weight: 500;margin-bottom: 15px} .destination-description{color: #64748b;margin-bottom: 20px;line-height: 1.6} .destination-features{display: flex;flex-wrap: wrap;gap: 8px} .feature-tag{background-color: var(--accent-color);color: var(--text-color);padding: 4px 12px;border-radius: 15px;font-size: 0.85rem;font-weight: 500} .blog-content{padding: 60px 0} .blog-categories{display: flex;justify-content: center;gap: 15px;margin-bottom: 50px;flex-wrap: wrap} .category-btn{background-color: transparent;border: 2px solid var(--border-color);color: var(--text-color);padding: 8px 20px;border-radius: 20px;font-family: 'Poppins', sans-serif;font-weight: 500;cursor: pointer;transition: var(--transition)} .category-btn:hover,
.category-btn.active{background-color: var(--primary-color);color: white;border-color: var(--primary-color)} .blog-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px;margin-bottom: 50px} .blog-card{background-color: white;border-radius: var(--border-radius);overflow: hidden;box-shadow: var(--shadow-light);transition: var(--transition)} .blog-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-heavy)} .blog-card.featured{grid-column: span 2} .blog-image{position: relative;height: 250px;overflow: hidden} .blog-image img{width: 100%;height: 100%;object-fit: cover;object-position: center;display: block} .blog-category{position: absolute;top: 15px;left: 15px;background-color: var(--secondary-color);color: white;padding: 5px 12px;border-radius: 20px;font-size: 0.85rem;font-weight: 500} .blog-content{padding: 25px} .blog-title{font-size: 1.4rem;margin-bottom: 15px;color: var(--text-color)} .blog-excerpt{color: #64748b;margin-bottom: 20px;line-height: 1.6} .blog-meta{display: flex;align-items: center;justify-content: space-between;gap: 15px} .author-info{display: flex;align-items: center;gap: 12px} .author-avatar{width: 45px;height: 45px;border-radius: 50%;object-fit: cover} .author-details{display: flex;flex-direction: column} .author-name{font-weight: 600;color: var(--text-color);font-size: 0.9rem} .author-title{font-size: 0.8rem;color: #64748b} .blog-stats{display: flex;flex-direction: column;align-items: flex-end;font-size: 0.85rem;color: #64748b} .blog-date{margin-bottom: 2px} .load-more-section{text-align: center} .about-content{padding: 60px 0} .about-intro{margin-bottom: 80px} .content-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 60px;align-items: center} .content-text h2{font-size: 2.2rem;margin-bottom: 25px;color: var(--text-color)} .content-image{border-radius: var(--border-radius);overflow: hidden;box-shadow: var(--shadow-medium)} .about-values{margin-bottom: 80px} .values-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 40px;margin-top: 50px} .value-card{text-align: center;padding: 30px 20px;background-color: white;border-radius: var(--border-radius);box-shadow: var(--shadow-light);transition: var(--transition)} .value-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-medium)} .value-icon{width: 80px;height: 80px;background-color: var(--primary-color);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;color: white;font-size: 2rem} .value-card h3{font-size: 1.3rem;margin-bottom: 15px;color: var(--text-color)} .about-team{margin-bottom: 80px} .team-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 40px;margin-top: 50px} .team-member{text-align: center;background-color: white;padding: 30px;border-radius: var(--border-radius);box-shadow: var(--shadow-light);transition: var(--transition)} .team-member:hover{transform: translateY(-5px);box-shadow: var(--shadow-medium)} .member-image{width: 120px;height: 120px;border-radius: 50%;overflow: hidden;margin: 0 auto 20px;box-shadow: var(--shadow-medium)} .member-image img{width: 100%;height: 100%;object-fit: cover;object-position: center;display: block} .member-info h4{font-size: 1.3rem;margin-bottom: 5px;color: var(--text-color)} .member-role{color: var(--primary-color);font-weight: 600;margin-bottom: 15px} .member-bio{color: #64748b;line-height: 1.6} .about-approach{margin-bottom: 80px} .approach-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 40px;margin-top: 50px} .approach-item{background-color: white;padding: 40px 30px;border-radius: var(--border-radius);box-shadow: var(--shadow-light);transition: var(--transition);text-align: center;border: 1px solid #e2e8f0} .approach-item:hover{transform: translateY(-8px);box-shadow: var(--shadow-medium);border-color: var(--primary-color)} .approach-icon{width: 70px;height: 70px;background: linear-gradient(135deg, var(--primary-color) 0%, #00c49a 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 25px;color: white;font-size: 1.8rem} .approach-item h3{font-size: 1.4rem;margin-bottom: 20px;color: var(--text-color);font-weight: 600} .approach-item p{color: #64748b;line-height: 1.7} .about-mission{margin-bottom: 80px;background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);padding: 60px 40px;border-radius: var(--border-radius)} .mission-content{display: grid;grid-template-columns: 2fr 1fr;gap: 60px;align-items: center} .mission-text h2{font-size: 2.2rem;margin-bottom: 25px;color: var(--text-color)} .mission-text p{margin-bottom: 20px;color: #64748b;line-height: 1.7} .mission-list{list-style: none;margin-top: 25px} .mission-list li{margin-bottom: 15px;color: #64748b;line-height: 1.6;padding-left: 25px;position: relative} .mission-list li::before{content: '✓';position: absolute;left: 0;color: var(--primary-color);font-weight: bold;font-size: 1.1rem} .mission-image{border-radius: var(--border-radius);overflow: hidden;box-shadow: var(--shadow-medium)} .rounded-image{width: 100%;height: auto;object-fit: cover;object-position: center;display: block} .about-why-choose{margin-bottom: 80px} .why-choose-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 40px;margin-top: 50px} .choice-item{background: white;padding: 35px 25px;border-radius: var(--border-radius);box-shadow: var(--shadow-light);transition: var(--transition);text-align: center;border-left: 4px solid var(--primary-color)} .choice-item:hover{transform: translateY(-5px);box-shadow: var(--shadow-medium)} .choice-icon{width: 65px;height: 65px;background: linear-gradient(135deg, var(--secondary-color) 0%, #ff8c42 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;color: white;font-size: 1.6rem} .choice-item h3{font-size: 1.3rem;margin-bottom: 15px;color: var(--text-color);font-weight: 600} .choice-item p{color: #64748b;line-height: 1.6} .about-stats{background: linear-gradient(135deg, var(--primary-color) 0%, #00c49a 100%);padding: 60px 40px;border-radius: var(--border-radius);margin-bottom: 80px} .about-stats .section-title{color: white;text-align: center;margin-bottom: 0} .stats-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 40px;margin-top: 40px} .stat-item{text-align: center;background: rgba(255, 255, 255, 0.1);padding: 30px 20px;border-radius: var(--border-radius);backdrop-filter: blur(10px)} .stat-number{font-size: 3rem;font-weight: 700;color: white;font-family: 'Montserrat', sans-serif} .stat-label{font-size: 1.1rem;color: rgba(255, 255, 255, 0.9);font-weight: 500;margin-top: 10px} .about-commitment{margin-bottom: 60px} .commitment-content h2{font-size: 2.2rem;text-align: center;margin-bottom: 50px;color: var(--text-color)} .commitment-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px} .commitment-item{background: white;padding: 30px;border-radius: var(--border-radius);box-shadow: var(--shadow-light);border: 1px solid #e2e8f0;transition: var(--transition)} .commitment-item:hover{box-shadow: var(--shadow-medium);border-color: var(--primary-color)} .commitment-item h3{font-size: 1.3rem;margin-bottom: 15px;color: var(--text-color);font-weight: 600} .commitment-item p{color: #64748b;line-height: 1.6} .legal-content{padding: 100px 0 80px;max-width: 800px;margin: 0 auto} .legal-header{text-align: center;margin-bottom: 50px} .legal-header h1{font-size: 2.5rem;color: var(--text-color);margin-bottom: 15px} .last-updated{color: #64748b;font-style: italic} .legal-text{line-height: 1.8} .legal-section{margin-bottom: 40px} .legal-section h2{font-size: 1.5rem;color: var(--text-color);margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid var(--primary-color)} .legal-section h3{font-size: 1.2rem;color: var(--text-color);margin: 25px 0 15px} .legal-section ul{margin-left: 30px;margin-bottom: 20px} .legal-section li{margin-bottom: 8px} .section-separator{grid-column: 1 / -1;margin: 40px 0 20px 0;padding: 20px;text-align: center;background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);border-radius: var(--border-radius);border: 1px solid rgba(16, 185, 129, 0.2)} .separator-title{font-size: 1.5rem;color: var(--primary-color);margin-bottom: 8px;font-weight: 600;display: flex;align-items: center;justify-content: center;gap: 10px} .separator-title i{font-size: 1.2rem;color: var(--secondary-color)} .separator-subtitle{color: #64748b;font-size: 0.95rem;margin: 0} .newsletter{background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);color: white;text-align: center;padding: 80px 0} .newsletter-title{font-size: 2.2rem;margin-bottom: 15px} .newsletter-subtitle{font-size: 1.1rem;margin-bottom: 40px;opacity: 0.9} .newsletter-form{max-width: 500px;margin: 0 auto} .newsletter-input-group{display: flex;background-color: white;border-radius: 50px;padding: 8px;box-shadow: var(--shadow-medium)} .newsletter-input{flex: 1;border: none;outline: none;padding: 15px 20px;font-size: 16px;color: var(--text-color);border-radius: 50px;min-height: 44px;-webkit-appearance: none;appearance: none} .newsletter-btn{background-color: var(--primary-color);color: white;border: none;padding: 15px 30px;border-radius: 50px;font-family: 'Poppins', sans-serif;font-weight: 500;cursor: pointer;transition: var(--transition);white-space: nowrap} .newsletter-btn:hover{background-color: #008f6e;transform: scale(1.05)} .footer{background-color: var(--text-color);color: white;padding: 60px 0 20px} .footer-content{display: grid;grid-template-columns: 1fr 2fr;gap: 60px;margin-bottom: 40px} .footer-brand{max-width: 300px} .footer-logo{display: flex;align-items: center;gap: 10px;font-family: 'Poppins', sans-serif;font-size: 1.5rem;font-weight: 700;color: var(--primary-color);margin-bottom: 20px} .footer-logo i{font-size: 1.8rem} .footer-description{color: #94a3b8;line-height: 1.6;margin-bottom: 30px} .social-links{display: flex;gap: 15px} .social-link{width: 40px;height: 40px;background-color: var(--primary-color);color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: var(--transition)} .social-link:hover{background-color: var(--secondary-color);transform: translateY(-2px)} .footer-links{display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px} .footer-heading{font-family: 'Poppins', sans-serif;font-size: 1.2rem;margin-bottom: 20px;color: white} .footer-list{list-style: none} .footer-list li{margin-bottom: 10px} .footer-list a{color: #94a3b8;transition: var(--transition)} .footer-list a:hover{color: var(--primary-color)} .footer-bottom{text-align: center;padding-top: 20px;border-top: 1px solid #475569;color: #94a3b8} @media (max-width: 1024px) and (min-width: 769px){.search-box{max-width: 80%} .search-input-group{padding: 10px} .search-input{padding: 12px 55px 12px 18px;font-size: 15px} .search-icon-right{right: 18px;font-size: 1.05rem;padding: 4px}
} @media (max-width: 768px){.nav-menu{position: fixed;top: 70px;left: -100%;width: 100%;height: calc(100vh - 70px);background-color: white;flex-direction: column;justify-content: flex-start;align-items: center;transition: var(--transition);box-shadow: var(--shadow-medium);z-index: 999} .nav-menu.active{left: 0} .nav-list{flex-direction: column;gap: 20px;padding: 50px 0} .nav-toggle{display: flex} .nav-toggle.active .bar:nth-child(1){transform: rotate(45deg) translate(5px, 5px)} .nav-toggle.active .bar:nth-child(2){opacity: 0} .nav-toggle.active .bar:nth-child(3){transform: rotate(-45deg) translate(7px, -6px)} h1{font-size: 2rem} h2{font-size: 1.8rem} h3{font-size: 1.3rem} .hero-title{font-size: 2.5rem} .page-title{font-size: 2.2rem} .section-title{font-size: 2rem} .container{padding: 0 15px} .hero{height: 85vh;min-height: 600px} .hero-content{padding: 0 20px} .hero-title{font-size: 2.2rem;line-height: 1.2;margin-bottom: 15px} .hero-subtitle{font-size: 1rem;margin-bottom: 30px;max-width: 100%} .search-box{max-width: 90%;margin: 0 auto} .search-input-group{flex-direction: row;padding: 8px;border-radius: 50px;gap: 0} .search-input{padding: 12px 50px 12px 15px;text-align: left;font-size: 16px;border-radius: 50px;color: #2C3E50;background-color: rgba(255, 255, 255, 0.9)} .search-input::placeholder{font-size: 14px;color: rgba(44, 62, 80, 0.7)} .search-icon-right{right: 15px;font-size: 1rem;padding: 3px} .page-header{height: 300px} .stories-grid, .blog-grid{grid-template-columns: 1fr;gap: 20px} .top-attractions-grid{grid-template-columns: 1fr !important;gap: 15px} .all-attractions-grid{grid-template-columns: 1fr;gap: 20px} .attraction-card-detailed{padding: 20px;margin-bottom: 15px} .attraction-header .attraction-name{font-size: 1.3rem;line-height: 1.2;word-break: break-word} .attraction-tags{gap: 6px} .tag{font-size: 0.8rem;padding: 4px 8px;white-space: nowrap} .attraction-description{font-size: 0.95rem;line-height: 1.5} .insider-tip{padding: 15px;margin: 15px 0} .insider-tip h4{font-size: 1rem} .practical-info-detailed{padding: 15px;margin-top: 15px} .practical-info-detailed h4{font-size: 1rem} .story-card.featured, .blog-card.featured{grid-column: span 1} .content-grid{grid-template-columns: 1fr;gap: 40px} .content-image{order: -1} .values-grid{grid-template-columns: 1fr;gap: 30px} .team-grid{grid-template-columns: 1fr;gap: 30px} .stats-grid{grid-template-columns: repeat(2, 1fr);gap: 30px} .footer-content{grid-template-columns: 1fr;gap: 40px;text-align: center} .footer-links{grid-template-columns: 1fr;gap: 30px} .newsletter-input-group{flex-direction: column;padding: 15px;border-radius: 15px} .newsletter-input{margin-bottom: 10px;border-radius: 10px} .newsletter-btn{border-radius: 10px} .filter-tabs{flex-direction: row;justify-content: center;align-items: center;gap: 10px;flex-wrap: wrap} .blog-categories{flex-direction: column;align-items: center;gap: 10px} section{padding: 60px 0} .section-header{margin-bottom: 40px}
} @media (max-width: 480px){.hero-title{font-size: 2rem} .page-title{font-size: 1.8rem} .section-title{font-size: 1.6rem} .stats-grid{grid-template-columns: 1fr} .stat-number{font-size: 2.5rem} .hero{height: 70vh;min-height: 500px} .page-header{height: 250px} .top-attractions-grid{grid-template-columns: 1fr !important;gap: 12px}
} .fade-in{opacity: 0;transform: translateY(30px);transition: all 0.6s ease} .fade-in.visible{opacity: 1;transform: translateY(0)} .hidden{display: none}
.block{display: block}
.inline{display: inline}
.inline-block{display: inline-block}
.flex{display: flex}
.inline-flex{display: inline-flex}
.grid{display: grid}
.table{display: table} .flex-row{flex-direction: row}
.flex-col{flex-direction: column}
.flex-wrap{flex-wrap: wrap}
.flex-nowrap{flex-wrap: nowrap}
.items-start{align-items: flex-start}
.items-center{align-items: center}
.items-end{align-items: flex-end}
.items-stretch{align-items: stretch}
.justify-start{justify-content: flex-start}
.justify-center{justify-content: center}
.justify-end{justify-content: flex-end}
.justify-between{justify-content: space-between}
.justify-around{justify-content: space-around}
.justify-evenly{justify-content: space-evenly}
.flex-1{flex: 1 1 0%}
.flex-auto{flex: 1 1 auto}
.flex-none{flex: none} .grid-cols-1{grid-template-columns: repeat(1, 1fr)}
.grid-cols-2{grid-template-columns: repeat(2, 1fr)}
.grid-cols-3{grid-template-columns: repeat(3, 1fr)}
.grid-cols-4{grid-template-columns: repeat(4, 1fr)}
.grid-cols-5{grid-template-columns: repeat(5, 1fr)}
.grid-cols-6{grid-template-columns: repeat(6, 1fr)}
.col-span-1{grid-column: span 1 / span 1}
.col-span-2{grid-column: span 2 / span 2}
.col-span-3{grid-column: span 3 / span 3}
.col-span-4{grid-column: span 4 / span 4}
.col-span-full{grid-column: 1 / -1} .gap-0{gap: 0}
.gap-1{gap: 0.25rem}
.gap-2{gap: 0.5rem}
.gap-3{gap: 0.75rem}
.gap-4{gap: 1rem}
.gap-5{gap: 1.25rem}
.gap-6{gap: 1.5rem}
.gap-8{gap: 2rem}
.gap-10{gap: 2.5rem}
.gap-12{gap: 3rem}
.gap-16{gap: 4rem}
.gap-20{gap: 5rem} .m-0{margin: 0}
.m-1{margin: 0.25rem}
.m-2{margin: 0.5rem}
.m-3{margin: 0.75rem}
.m-4{margin: 1rem}
.m-5{margin: 1.25rem}
.m-6{margin: 1.5rem}
.m-8{margin: 2rem}
.m-10{margin: 2.5rem}
.m-12{margin: 3rem}
.m-16{margin: 4rem}
.m-20{margin: 5rem}
.m-auto{margin: auto} .mx-0{margin-left: 0;margin-right: 0}
.mx-1{margin-left: 0.25rem;margin-right: 0.25rem}
.mx-2{margin-left: 0.5rem;margin-right: 0.5rem}
.mx-3{margin-left: 0.75rem;margin-right: 0.75rem}
.mx-4{margin-left: 1rem;margin-right: 1rem}
.mx-6{margin-left: 1.5rem;margin-right: 1.5rem}
.mx-8{margin-left: 2rem;margin-right: 2rem}
.mx-auto{margin-left: auto;margin-right: auto} .my-0{margin-top: 0;margin-bottom: 0}
.my-1{margin-top: 0.25rem;margin-bottom: 0.25rem}
.my-2{margin-top: 0.5rem;margin-bottom: 0.5rem}
.my-3{margin-top: 0.75rem;margin-bottom: 0.75rem}
.my-4{margin-top: 1rem;margin-bottom: 1rem}
.my-6{margin-top: 1.5rem;margin-bottom: 1.5rem}
.my-8{margin-top: 2rem;margin-bottom: 2rem}
.my-12{margin-top: 3rem;margin-bottom: 3rem}
.my-16{margin-top: 4rem;margin-bottom: 4rem}
.my-20{margin-top: 5rem;margin-bottom: 5rem} .mt-0{margin-top: 0}
.mt-1{margin-top: 0.25rem}
.mt-2{margin-top: 0.5rem}
.mt-3{margin-top: 0.75rem}
.mt-4{margin-top: 1rem}
.mt-6{margin-top: 1.5rem}
.mt-8{margin-top: 2rem}
.mt-12{margin-top: 3rem}
.mt-16{margin-top: 4rem}
.mt-20{margin-top: 5rem} .mb-0{margin-bottom: 0}
.mb-1{margin-bottom: 0.25rem}
.mb-2{margin-bottom: 0.5rem}
.mb-3{margin-bottom: 0.75rem}
.mb-4{margin-bottom: 1rem}
.mb-6{margin-bottom: 1.5rem}
.mb-8{margin-bottom: 2rem}
.mb-12{margin-bottom: 3rem}
.mb-16{margin-bottom: 4rem}
.mb-20{margin-bottom: 5rem}
.mb-40{margin-bottom: 40px} .ml-0{margin-left: 0}
.ml-2{margin-left: 0.5rem}
.ml-4{margin-left: 1rem}
.ml-6{margin-left: 1.5rem}
.ml-8{margin-left: 2rem}
.ml-auto{margin-left: auto} .mr-0{margin-right: 0}
.mr-2{margin-right: 0.5rem}
.mr-4{margin-right: 1rem}
.mr-6{margin-right: 1.5rem}
.mr-8{margin-right: 2rem}
.mr-auto{margin-right: auto} .p-0{padding: 0}
.p-1{padding: 0.25rem}
.p-2{padding: 0.5rem}
.p-3{padding: 0.75rem}
.p-4{padding: 1rem}
.p-5{padding: 1.25rem}
.p-6{padding: 1.5rem}
.p-8{padding: 2rem}
.p-10{padding: 2.5rem}
.p-12{padding: 3rem}
.p-16{padding: 4rem}
.p-20{padding: 5rem} .px-0{padding-left: 0;padding-right: 0}
.px-1{padding-left: 0.25rem;padding-right: 0.25rem}
.px-2{padding-left: 0.5rem;padding-right: 0.5rem}
.px-3{padding-left: 0.75rem;padding-right: 0.75rem}
.px-4{padding-left: 1rem;padding-right: 1rem}
.px-6{padding-left: 1.5rem;padding-right: 1.5rem}
.px-8{padding-left: 2rem;padding-right: 2rem}
.px-12{padding-left: 3rem;padding-right: 3rem} .py-0{padding-top: 0;padding-bottom: 0}
.py-1{padding-top: 0.25rem;padding-bottom: 0.25rem}
.py-2{padding-top: 0.5rem;padding-bottom: 0.5rem}
.py-3{padding-top: 0.75rem;padding-bottom: 0.75rem}
.py-4{padding-top: 1rem;padding-bottom: 1rem}
.py-6{padding-top: 1.5rem;padding-bottom: 1.5rem}
.py-8{padding-top: 2rem;padding-bottom: 2rem}
.py-12{padding-top: 3rem;padding-bottom: 3rem}
.py-16{padding-top: 4rem;padding-bottom: 4rem}
.py-20{padding-top: 5rem;padding-bottom: 5rem} .text-xs{font-size: 0.75rem;line-height: 1rem}
.text-sm{font-size: 0.875rem;line-height: 1.25rem}
.text-base{font-size: 1rem;line-height: 1.5rem}
.text-lg{font-size: 1.125rem;line-height: 1.75rem}
.text-xl{font-size: 1.25rem;line-height: 1.75rem}
.text-2xl{font-size: 1.5rem;line-height: 2rem}
.text-3xl{font-size: 1.875rem;line-height: 2.25rem}
.text-4xl{font-size: 2.25rem;line-height: 2.5rem}
.text-5xl{font-size: 3rem;line-height: 1}
.text-6xl{font-size: 3.75rem;line-height: 1} .font-thin{font-weight: 100}
.font-light{font-weight: 300}
.font-normal{font-weight: 400}
.font-medium{font-weight: 500}
.font-semibold{font-weight: 600}
.font-bold{font-weight: 700}
.font-extrabold{font-weight: 800}
.font-black{font-weight: 900} .text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.text-justify{text-align: justify} .text-white{color: #ffffff}
.text-black{color: #000000}
.text-gray-50{color: #f9fafb}
.text-gray-100{color: #f3f4f6}
.text-gray-200{color: #e5e7eb}
.text-gray-300{color: #d1d5db}
.text-gray-400{color: #9ca3af}
.text-gray-500{color: #6b7280}
.text-gray-600{color: #4b5563}
.text-gray-700{color: #374151}
.text-gray-800{color: #1f2937}
.text-gray-900{color: #111827}
.text-primary{color: var(--primary-color)}
.text-secondary{color: var(--secondary-color)} .bg-transparent{background-color: transparent}
.bg-white{background-color: #ffffff}
.bg-black{background-color: #000000}
.bg-gray-50{background-color: #f9fafb}
.bg-gray-100{background-color: #f3f4f6}
.bg-gray-200{background-color: #e5e7eb}
.bg-gray-300{background-color: #d1d5db}
.bg-gray-400{background-color: #9ca3af}
.bg-gray-500{background-color: #6b7280}
.bg-gray-600{background-color: #4b5563}
.bg-gray-700{background-color: #374151}
.bg-gray-800{background-color: #1f2937}
.bg-gray-900{background-color: #111827}
.bg-primary{background-color: var(--primary-color)}
.bg-secondary{background-color: var(--secondary-color)}
.bg-accent{background-color: var(--accent-color)} .border{border-width: 1px}
.border-0{border-width: 0}
.border-2{border-width: 2px}
.border-4{border-width: 4px}
.border-t{border-top-width: 1px}
.border-r{border-right-width: 1px}
.border-b{border-bottom-width: 1px}
.border-l{border-left-width: 1px} .border-gray-200{border-color: #e5e7eb}
.border-gray-300{border-color: #d1d5db}
.border-primary{border-color: var(--primary-color)}
.border-secondary{border-color: var(--secondary-color)} .rounded-none{border-radius: 0}
.rounded-sm{border-radius: 0.125rem}
.rounded{border-radius: 0.25rem}
.rounded-md{border-radius: 0.375rem}
.rounded-lg{border-radius: 0.5rem}
.rounded-xl{border-radius: 0.75rem}
.rounded-2xl{border-radius: 1rem}
.rounded-full{border-radius: 9999px} .w-0{width: 0}
.w-full{width: 100%}
.w-auto{width: auto}
.w-1\/2{width: 50%}
.w-1\/3{width: 33.333333%}
.w-2\/3{width: 66.666667%}
.w-1\/4{width: 25%}
.w-3\/4{width: 75%} .h-0{height: 0}
.h-full{height: 100%}
.h-auto{height: auto}
.h-screen{height: 100vh} .static{position: static}
.fixed{position: fixed}
.absolute{position: absolute}
.relative{position: relative}
.sticky{position: sticky} .z-0{z-index: 0}
.z-10{z-index: 10}
.z-20{z-index: 20}
.z-30{z-index: 30}
.z-40{z-index: 40}
.z-50{z-index: 50} .overflow-hidden{overflow: hidden}
.overflow-auto{overflow: auto}
.overflow-x-auto{overflow-x: auto}
.overflow-y-auto{overflow-y: auto} .shadow-none{box-shadow: none}
.shadow-sm{box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)}
.shadow{box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)}
.shadow-md{box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}
.shadow-lg{box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}
.shadow-xl{box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)} .opacity-0{opacity: 0}
.opacity-25{opacity: 0.25}
.opacity-50{opacity: 0.5}
.opacity-75{opacity: 0.75}
.opacity-100{opacity: 1} .transition{transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms}
.transition-all{transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms}
.duration-150{transition-duration: 150ms}
.duration-300{transition-duration: 300ms}
.duration-500{transition-duration: 500ms} .transform{transform: translatevar(--tw-translate-x, 0) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1))}
.scale-95{--tw-scale-x: 0.95;--tw-scale-y: 0.95}
.scale-100{--tw-scale-x: 1;--tw-scale-y: 1}
.scale-105{--tw-scale-x: 1.05;--tw-scale-y: 1.05} @media (min-width: 640px){.sm\:block{display: block} .sm\:flex{display: flex} .sm\:grid{display: grid} .sm\:hidden{display: none} .sm\:grid-cols-1{grid-template-columns: repeat(1, 1fr)} .sm\:grid-cols-2{grid-template-columns: repeat(2, 1fr)} .sm\:grid-cols-3{grid-template-columns: repeat(3, 1fr)} .sm\:text-sm{font-size: 0.875rem;line-height: 1.25rem} .sm\:text-base{font-size: 1rem;line-height: 1.5rem} .sm\:text-lg{font-size: 1.125rem;line-height: 1.75rem} .sm\:text-xl{font-size: 1.25rem;line-height: 1.75rem} .sm\:px-6{padding-left: 1.5rem;padding-right: 1.5rem} .sm\:py-8{padding-top: 2rem;padding-bottom: 2rem}
} @media (min-width: 768px){.md\:block{display: block} .md\:flex{display: flex} .md\:grid{display: grid} .md\:hidden{display: none} .md\:grid-cols-1{grid-template-columns: repeat(1, 1fr)} .md\:grid-cols-2{grid-template-columns: repeat(2, 1fr)} .md\:grid-cols-3{grid-template-columns: repeat(3, 1fr)} .md\:grid-cols-4{grid-template-columns: repeat(4, 1fr)} .md\:flex-row{flex-direction: row} .md\:flex-col{flex-direction: column} .md\:text-sm{font-size: 0.875rem;line-height: 1.25rem} .md\:text-base{font-size: 1rem;line-height: 1.5rem} .md\:text-lg{font-size: 1.125rem;line-height: 1.75rem} .md\:text-xl{font-size: 1.25rem;line-height: 1.75rem} .md\:text-2xl{font-size: 1.5rem;line-height: 2rem} .md\:text-3xl{font-size: 1.875rem;line-height: 2.25rem} .md\:px-8{padding-left: 2rem;padding-right: 2rem} .md\:py-12{padding-top: 3rem;padding-bottom: 3rem} .md\:py-16{padding-top: 4rem;padding-bottom: 4rem}
} @media (min-width: 1024px){.lg\:block{display: block} .lg\:flex{display: flex} .lg\:grid{display: grid} .lg\:hidden{display: none} .lg\:grid-cols-1{grid-template-columns: repeat(1, 1fr)} .lg\:grid-cols-2{grid-template-columns: repeat(2, 1fr)} .lg\:grid-cols-3{grid-template-columns: repeat(3, 1fr)} .lg\:grid-cols-4{grid-template-columns: repeat(4, 1fr)} .lg\:grid-cols-5{grid-template-columns: repeat(5, 1fr)} .lg\:flex-row{flex-direction: row} .lg\:text-base{font-size: 1rem;line-height: 1.5rem} .lg\:text-lg{font-size: 1.125rem;line-height: 1.75rem} .lg\:text-xl{font-size: 1.25rem;line-height: 1.75rem} .lg\:text-2xl{font-size: 1.5rem;line-height: 2rem} .lg\:text-3xl{font-size: 1.875rem;line-height: 2.25rem} .lg\:text-4xl{font-size: 2.25rem;line-height: 2.5rem} .lg\:px-12{padding-left: 3rem;padding-right: 3rem} .lg\:py-20{padding-top: 5rem;padding-bottom: 5rem}
} @media (min-width: 1280px){.xl\:grid-cols-4{grid-template-columns: repeat(4, 1fr)} .xl\:grid-cols-5{grid-template-columns: repeat(5, 1fr)} .xl\:grid-cols-6{grid-template-columns: repeat(6, 1fr)} .xl\:text-5xl{font-size: 3rem;line-height: 1} .xl\:text-6xl{font-size: 3.75rem;line-height: 1}
} .visible{display: block} ::-webkit-scrollbar{width: 8px} ::-webkit-scrollbar-track{background: var(--accent-color)} ::-webkit-scrollbar-thumb{background: var(--primary-color);border-radius: 4px} ::-webkit-scrollbar-thumb:hover{background: #008f6e} .css-tabs{margin: 40px 0} .css-tabs input[type="radio"]{display: none} .css-tabs .tab-labels{display: flex;border-bottom: 2px solid var(--border-color);margin-bottom: 30px;overflow-x: auto;scrollbar-width: none;-ms-overflow-style: none} .css-tabs .tab-labels::-webkit-scrollbar{display: none} .css-tabs .tab-label{background: transparent;border: none;padding: 12px 15px;font-family: 'Poppins', sans-serif;font-weight: 500;font-size: 14px;color: var(--text-color);cursor: pointer;transition: var(--transition);border-bottom: 3px solid transparent;white-space: nowrap;position: relative;min-height: 44px;display: flex;align-items: center;justify-content: center} @media (min-width: 768px){.css-tabs .tab-label{padding: 15px 25px;font-size: 16px}
} .css-tabs .tab-label:hover{color: var(--primary-color);background-color: var(--accent-color)} .css-tabs input[type="radio"]:checked + .tab-label{color: var(--primary-color);border-bottom-color: var(--primary-color);background-color: var(--accent-color)} .css-tabs .tab-content{display: none;animation: fadeInTab 0.3s ease-in-out} .css-tabs input[type="radio"]#tab1:checked ~ #content1,
.css-tabs input[type="radio"]#tab2:checked ~ #content2,
.css-tabs input[type="radio"]#tab3:checked ~ #content3,
.css-tabs input[type="radio"]#tab4:checked ~ #content4,
.css-tabs input[type="radio"]#tab5:checked ~ #content5{display: block} @keyframes fadeInTab{from{opacity: 0;transform: translateY(10px)} to{opacity: 1;transform: translateY(0)}
} .horizontal-scroll{display: flex;overflow-x: auto;scroll-behavior: smooth;gap: 20px;padding: 20px 0;scrollbar-width: thin;scrollbar-color: var(--primary-color) var(--accent-color)} .horizontal-scroll::-webkit-scrollbar{height: 8px} .horizontal-scroll::-webkit-scrollbar-track{background: var(--accent-color);border-radius: 4px} .horizontal-scroll::-webkit-scrollbar-thumb{background: var(--primary-color);border-radius: 4px} .horizontal-scroll::-webkit-scrollbar-thumb:hover{background: #008f6e} .horizontal-scroll-item{flex: 0 0 auto;min-width: 300px;background: white;border-radius: var(--border-radius);box-shadow: var(--shadow-light);transition: var(--transition);position: relative} .horizontal-scroll-item:hover{transform: translateY(-5px);box-shadow: var(--shadow-heavy)} .scroll-container{position: relative} .scroll-arrow{position: absolute;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;background: rgba(255, 255, 255, 0.9);border: 2px solid var(--primary-color);border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;z-index: 10;transition: var(--transition);color: var(--primary-color);font-size: 16px;box-shadow: var(--shadow-medium)} .scroll-arrow:hover{background: var(--primary-color);color: white;transform: translateY(-50%) scale(1.1)} .scroll-arrow.left{left: -20px} .scroll-arrow.right{right: -20px} .css-carousel{display: flex;overflow-x: auto;scroll-snap-type: x mandatory;scroll-behavior: smooth;gap: 0;scrollbar-width: none;-ms-overflow-style: none} .css-carousel::-webkit-scrollbar{display: none} .css-carousel-item{flex: 0 0 100%;scroll-snap-align: start;position: relative} .travel-info-tabs{background: white;border-radius: var(--border-radius);box-shadow: var(--shadow-light);overflow: hidden;margin: 40px 0} .travel-info-tabs .tab-labels{background: var(--accent-color);border-bottom: none;margin: 0;padding: 0} .travel-info-tabs .tab-label{background: var(--accent-color);border: none;border-bottom: none;border-right: 1px solid var(--border-color)} .travel-info-tabs .tab-label:last-child{border-right: none} .travel-info-tabs input[type="radio"]:checked + .tab-label{background: white;border-bottom: none;position: relative} .travel-info-tabs input[type="radio"]:checked + .tab-label::after{content: '';position: absolute;bottom: -1px;left: 0;right: 0;height: 1px;background: white} .travel-info-tabs .tab-content{padding: 30px;background: white} .quick-facts{margin: 40px 0} .quick-facts-scroll{display: flex;overflow-x: auto;gap: 20px;padding: 20px 0;scroll-behavior: smooth;scrollbar-width: thin;scrollbar-color: var(--primary-color) var(--accent-color)} .quick-fact-card{flex: 0 0 auto;min-width: 250px;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));color: white;padding: 25px;border-radius: var(--border-radius);text-align: center;box-shadow: var(--shadow-medium);transition: var(--transition)} .quick-fact-card:hover{transform: translateY(-5px) scale(1.02);box-shadow: var(--shadow-heavy)} .quick-fact-icon{font-size: 2.5rem;margin-bottom: 15px;opacity: 0.9} .quick-fact-title{font-family: 'Poppins', sans-serif;font-size: 1.2rem;font-weight: 600;margin-bottom: 10px} .quick-fact-description{font-size: 0.9rem;opacity: 0.9;line-height: 1.4} .travel-tips-scroll{display: flex;overflow-x: auto;gap: 25px;padding: 20px 0;scroll-behavior: smooth} .travel-tip-card{flex: 0 0 auto;min-width: 320px;background: white;border-radius: var(--border-radius);padding: 25px;box-shadow: var(--shadow-light);border-left: 4px solid var(--primary-color);transition: var(--transition)} .travel-tip-card:hover{transform: translateY(-3px);box-shadow: var(--shadow-medium);border-left-color: var(--secondary-color)} .tip-number{background: var(--primary-color);color: white;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 600;font-size: 14px;margin-bottom: 15px} .tip-title{font-family: 'Poppins', sans-serif;font-size: 1.1rem;font-weight: 600;color: var(--text-color);margin-bottom: 10px} .tip-content{color: #64748b;line-height: 1.5;font-size: 0.95rem} @media (max-width: 768px){.css-tabs .tab-label{padding: 8px 10px;font-size: 0.75rem;min-width: 80px;gap: 4px} .css-tabs .tab-label i{font-size: 0.8rem} .horizontal-scroll-item{min-width: 280px} .quick-fact-card{min-width: 220px;padding: 20px} .travel-tip-card{min-width: 280px;padding: 20px} .scroll-arrow{width: 35px;height: 35px;font-size: 14px}
} @media (max-width: 480px){.css-tabs .tab-labels{margin-bottom: 20px;gap: 2px;padding: 2px} .css-tabs .tab-label{padding: 6px 8px;font-size: 0.7rem;min-width: 75px;gap: 2px} .css-tabs .tab-label i{font-size: 0.7rem} .horizontal-scroll{gap: 15px} .horizontal-scroll-item{min-width: 250px} .quick-fact-card{min-width: 200px;padding: 18px} .travel-tip-card{min-width: 250px;padding: 18px}
} .city-overview{padding: 60px 0;background: white} .overview-content{display: grid;grid-template-columns: 2fr 1fr;gap: 50px;align-items: start} .overview-text{font-size: 1.1rem;line-height: 1.7;color: var(--text-color)} .overview-text p{margin-bottom: 20px} .quick-facts{background: var(--accent-color);padding: 30px;border-radius: var(--border-radius);box-shadow: var(--shadow-light)} .quick-facts h3{font-family: 'Poppins', sans-serif;color: var(--text-color);margin-bottom: 20px;font-size: 1.3rem} .facts-grid{display: grid;gap: 15px} .fact-item{display: flex;align-items: center;gap: 12px;font-size: 0.95rem;color: var(--text-color)} .fact-item i{color: var(--primary-color);width: 20px;font-size: 1.1rem} .highlights{padding: 80px 0;background: var(--accent-color)} .highlights-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px} .highlight-card{background: white;padding: 30px;border-radius: var(--border-radius);box-shadow: var(--shadow-light);transition: var(--transition);border-left: 4px solid var(--primary-color)} .highlight-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-medium)} .highlight-category{background: var(--primary-color);color: white;padding: 6px 12px;border-radius: 15px;font-size: 0.8rem;font-weight: 500;display: inline-block;margin-bottom: 15px;text-transform: uppercase;letter-spacing: 0.5px} .highlight-title{font-family: 'Poppins', sans-serif;color: var(--text-color);font-size: 1.3rem;margin-bottom: 15px;font-weight: 600} .highlight-description{color: #64748b;line-height: 1.6} .city-details{padding: 80px 0;background: white} .attractions-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 25px;margin-top: 25px} .attraction-card{background: var(--accent-color);padding: 25px;border-radius: var(--border-radius);border-left: 4px solid var(--secondary-color);transition: var(--transition)} .attraction-card:hover{transform: translateY(-3px);box-shadow: var(--shadow-light)} .attraction-card h4{font-family: 'Poppins', sans-serif;color: var(--text-color);margin-bottom: 8px;font-size: 1.2rem} .attraction-type{color: var(--secondary-color);font-weight: 500;font-size: 0.9rem;margin-bottom: 12px} .attraction-card p{color: #64748b;line-height: 1.5} .cuisine-overview{margin-bottom: 40px;font-size: 1.1rem;line-height: 1.6;color: var(--text-color)} .cuisine-section{margin-bottom: 40px} .cuisine-section h4{font-family: 'Poppins', sans-serif;color: var(--primary-color);margin-bottom: 20px;font-size: 1.3rem} .dishes-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 20px} .dish-card{background: var(--accent-color);padding: 20px;border-radius: var(--border-radius);border-top: 3px solid var(--secondary-color)} .dish-card h5{font-family: 'Poppins', sans-serif;color: var(--text-color);margin-bottom: 10px;font-size: 1.1rem} .dish-card p{color: #64748b;line-height: 1.5;font-size: 0.95rem} .restaurants-list{display: grid;gap: 15px} .restaurant-item{background: var(--accent-color);padding: 20px;border-radius: var(--border-radius);border-left: 4px solid var(--primary-color)} .restaurant-item h5{font-family: 'Poppins', sans-serif;color: var(--text-color);margin-bottom: 5px} .restaurant-item p{color: #64748b;font-size: 0.9rem} .transport-sections{display: grid;gap: 30px} .transport-section h4{font-family: 'Poppins', sans-serif;color: var(--primary-color);margin-bottom: 15px;font-size: 1.2rem} .transport-section p{color: var(--text-color);line-height: 1.6;background: var(--accent-color);padding: 20px;border-radius: var(--border-radius)} .accommodation-overview{margin-bottom: 30px;font-size: 1.1rem;line-height: 1.6;color: var(--text-color)} .tabbed-content-section{padding: 60px 0;background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);position: relative} .tabbed-content-section::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.03) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(255, 107, 53, 0.02) 0%, transparent 40%);pointer-events: none} .css-tabs{position: relative} .css-tabs input[type="radio"]{display: none} .tab-labels{display: flex;border-bottom: 3px solid #e2e8f0;margin-bottom: 30px;gap: 2px;overflow-x: auto;background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);border-radius: 12px 12px 0 0;padding: 8px 8px 0 8px;scrollbar-width: none;-ms-overflow-style: none;scroll-behavior: smooth;-webkit-overflow-scrolling: touch} .tab-labels::-webkit-scrollbar{display: none} @media (max-width: 768px){.tab-labels{gap: 4px;padding: 4px;margin-bottom: 20px;border-radius: 8px 8px 0 0}
} @media (max-width: 480px){.tab-labels{gap: 2px;padding: 2px;margin-bottom: 15px;border-radius: 6px 6px 0 0}
} .tab-label{padding: 12px 20px;background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);border: 2px solid #e2e8f0;border-bottom: none;border-radius: 6px 6px 0 0;cursor: pointer;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);font-weight: 600;color: #64748b;white-space: nowrap;display: flex;align-items: center;gap: 8px;min-width: 110px;justify-content: center;position: relative;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);font-size: 0.9rem} @media (max-width: 768px){.tab-label{padding: 8px 10px;font-size: 0.7rem;min-width: 80px;gap: 4px;border-radius: 4px;border: 1px solid #e2e8f0} .tab-label i{font-size: 0.7rem}
} @media (max-width: 480px){.tab-label{padding: 6px 8px;font-size: 0.65rem;min-width: 70px;gap: 3px} .tab-label i{font-size: 0.65rem}
} .tab-label:hover{background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 100%);color: var(--primary-color);transform: translateY(-2px);box-shadow: 0 6px 16px rgba(16, 185, 129, 0.15);border-color: rgba(16, 185, 129, 0.3)} .tab-label i{transition: all 0.3s ease} .tab-label:hover i{transform: scale(1.1);color: var(--primary-color)} .css-tabs input[type="radio"]#tab-top5:checked ~ .tab-labels label[for="tab-top5"],
.css-tabs input[type="radio"]#tab-all-attractions:checked ~ .tab-labels label[for="tab-all-attractions"],
.css-tabs input[type="radio"]#tab-plan-trip:checked ~ .tab-labels label[for="tab-plan-trip"],
.css-tabs input[type="radio"]#tab-faqs:checked ~ .tab-labels label[for="tab-faqs"]{background: linear-gradient(145deg, var(--primary-color) 0%, #059669 50%, #0d9488 100%);color: white;border-color: var(--primary-color);box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);transform: translateY(-3px)} .css-tabs input[type="radio"]#tab-top5:checked ~ .tab-labels label[for="tab-top5"] i,
.css-tabs input[type="radio"]#tab-all-attractions:checked ~ .tab-labels label[for="tab-all-attractions"] i,
.css-tabs input[type="radio"]#tab-plan-trip:checked ~ .tab-labels label[for="tab-plan-trip"] i,
.css-tabs input[type="radio"]#tab-faqs:checked ~ .tab-labels label[for="tab-faqs"] i{color: white;transform: scale(1.1)} .tab-content{display: none;animation: fadeIn 0.3s ease-in} .css-tabs input[type="radio"]#tab-top5:checked ~ #content-top5,
.css-tabs input[type="radio"]#tab-all-attractions:checked ~ #content-all-attractions,
.css-tabs input[type="radio"]#tab-plan-trip:checked ~ #content-plan-trip,
.css-tabs input[type="radio"]#tab-faqs:checked ~ #content-faqs{display: block} @keyframes fadeIn{from{opacity: 0;transform: translateY(10px)} to{opacity: 1;transform: translateY(0)}
} .top-attractions-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 25px} .top-attraction-card{background: white;border-radius: var(--border-radius);border: 2px solid #E2E8F0;padding: 25px;display: flex;gap: 20px;transition: var(--transition)} .top-attraction-card:hover{border-color: var(--primary-color);transform: translateY(-2px);box-shadow: var(--shadow-medium)} .attraction-rank{background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));color: white;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 1.2rem;flex-shrink: 0} .attraction-summary h3{margin: 0 0 10px 0;color: var(--text-color);font-size: 1.3rem} .attraction-tags-compact{display: flex;gap: 8px;margin-bottom: 12px;flex-wrap: wrap} .tag-compact{padding: 4px 8px;border-radius: 12px;font-size: 0.8rem;font-weight: 500} .tag-compact.cost{background: #FEF3C7;color: #92400E} .tag-compact.time{background: #DBEAFE;color: #1E40AF} .tag-compact.gem{background: #F3E8FF;color: #7C3AED} .attraction-highlight{color: #64748B;line-height: 1.6;margin-bottom: 12px} .quick-tip{background: #FEF7ED;border-left: 3px solid var(--secondary-color);padding: 8px 12px;border-radius: 4px;display: flex;align-items: flex-start;gap: 8px;font-size: 0.9rem} .quick-tip i{color: var(--secondary-color);margin-top: 2px} .all-attractions-grid{display: grid;grid-template-columns: 1fr;gap: 30px} .attraction-card-detailed{background: white;border-radius: var(--border-radius);border: 2px solid #E2E8F0;padding: 25px;transition: var(--transition);overflow: hidden} .attraction-card-detailed:hover{border-color: var(--primary-color);box-shadow: var(--shadow-medium)} .attraction-header{margin-bottom: 20px} .attraction-header .attraction-name{font-family: 'Poppins', sans-serif;font-size: 1.5rem;color: var(--text-color);margin-bottom: 12px;line-height: 1.3} .attraction-tags{display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 15px} .attraction-content{line-height: 1.6} .attraction-description{color: var(--text-color);margin-bottom: 20px;font-size: 1rem;line-height: 1.6} .insider-tip{background: linear-gradient(135deg, #f8f9ff 0%, #e8f4f8 100%);border-left: 4px solid var(--primary-color);padding: 20px;border-radius: 8px;margin: 20px 0} .insider-tip h4{color: var(--primary-color);margin-bottom: 10px;font-size: 1.1rem;display: flex;align-items: center;gap: 8px} .practical-info-detailed{background: #f8f9fa;border-radius: 8px;padding: 20px;margin-top: 20px} .practical-info-detailed h4{color: var(--text-color);margin-bottom: 15px;font-size: 1.1rem;display: flex;align-items: center;gap: 8px} .trip-planning-grid{display: grid;grid-template-columns: 1fr;gap: 20px} .planning-card{background: white;border-radius: var(--border-radius);border: 2px solid #E2E8F0;overflow: hidden;transition: var(--transition)} .planning-card:hover{border-color: var(--primary-color);box-shadow: var(--shadow-light)} .planning-header{background: linear-gradient(135deg, var(--primary-color), #00C9A7);color: white;padding: 20px;display: flex;align-items: center;gap: 12px} .planning-header i{font-size: 1.2rem} .planning-header h3{margin: 0;font-size: 1.2rem} .planning-content{padding: 25px} .planning-content p{line-height: 1.6;color: var(--text-color);margin-bottom: 15px} .budget-category{margin-bottom: 20px;padding: 15px;background: #F8FAFC;border-radius: 8px;border-left: 4px solid var(--secondary-color)} .budget-category h4{margin: 0 0 10px 0;color: var(--primary-color);display: flex;align-items: center;gap: 8px} .budget-section h4{margin: 0 0 10px 0;color: var(--primary-color);display: flex;align-items: center;gap: 8px;font-size: 1rem} .budget-list{margin: 0;padding-left: 20px;list-style-type: disc} .budget-list li{margin-bottom: 8px;line-height: 1.5;color: var(--text-color)} .photo-spots-grid,
.hidden-gems-grid{display: grid;gap: 10px} .photo-spot-item,
.hidden-gem-item{display: flex;gap: 12px;padding: 12px;background: #F8FAFC;border-radius: 6px;border-left: 3px solid var(--secondary-color)} .spot-number,
.gem-number{background: var(--secondary-color);color: white;width: 24px;height: 24px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 600;flex-shrink: 0;font-size: 0.8rem} .spot-details h4,
.gem-details h4{margin: 0 0 3px 0;color: var(--text-color);font-size: 0.9rem;font-weight: 600} .spot-details p,
.gem-details p{margin: 0;color: #64748B;font-size: 0.8rem;line-height: 1.3} .discovery-grid::before{content: '';position: absolute;top: 50%;right: 15px;transform: translateY(-50%);width: 2px;height: 16px;background: linear-gradient(to bottom, transparent, var(--primary-color), transparent);border-radius: 1px;opacity: 0.4;animation: fadeInOut 4s infinite;z-index: 10;pointer-events: none} .discovery-grid::after{content: '→';position: absolute;top: 15px;right: 25px;color: var(--primary-color);font-size: 1rem;opacity: 0.3;animation: slideHint 5s infinite;z-index: 10;pointer-events: none} @keyframes fadeInOut{0%, 100%{opacity: 0.3} 50%{opacity: 0.8}
} @keyframes slideHint{0%, 80%, 100%{transform: translateX(0);opacity: 0.3} 3%, 10%{transform: translateX(3px);opacity: 0.6}
} @media (max-width: 480px){.discovery-grid::before, .discovery-grid::after{display: none}
} .faqs-comprehensive{display: grid;gap: 20px} .faq-item-detailed{background: white;border: 2px solid #E2E8F0;border-radius: var(--border-radius);overflow: hidden;transition: var(--transition)} .faq-item-detailed:hover{border-color: var(--primary-color);box-shadow: var(--shadow-light)} .faq-question-detailed{background: #F8FAFC;padding: 20px;border-bottom: 1px solid #E2E8F0} .faq-question-detailed h3{margin: 0;color: var(--text-color);display: flex;align-items: center;gap: 10px;font-size: 1.1rem} .faq-question-detailed i{color: var(--primary-color)} .faq-answer-detailed{padding: 20px} .faq-answer-detailed p{margin: 0;line-height: 1.6;color: #64748B} @media (max-width: 768px){.tab-labels{flex-direction: row;overflow-x: auto;gap: 4px;scroll-behavior: smooth;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none;padding: 4px} .tab-labels::-webkit-scrollbar{display: none} .tab-label{flex-shrink: 0;min-width: 100px;padding: 8px 12px;border: 1px solid #E2E8F0;border-radius: 6px;text-align: center;font-size: 0.75rem;font-weight: 500;gap: 6px;background: #ffffff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)} .tab-label i{font-size: 0.8rem} .top-attractions-grid{grid-template-columns: 1fr} .trip-planning-grid{grid-template-columns: 1fr} .top-attraction-card{flex-direction: column;text-align: center}
} .neighborhoods-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 25px} .neighborhood-card{background: var(--accent-color);padding: 25px;border-radius: var(--border-radius);border-left: 4px solid var(--primary-color)} .neighborhood-card h4{font-family: 'Poppins', sans-serif;color: var(--text-color);margin-bottom: 10px;font-size: 1.2rem} .suitable-for{color: var(--secondary-color);font-weight: 500;margin-bottom: 12px;font-size: 0.9rem} .neighborhood-card p{color: #64748b;line-height: 1.5} .tips-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 25px} .tip-card{background: var(--accent-color);padding: 25px;border-radius: var(--border-radius);border-left: 4px solid var(--secondary-color);position: relative} .tip-card .tip-number{position: absolute;top: -15px;left: 20px;background: var(--secondary-color)} .tip-category{color: var(--primary-color);font-weight: 600;margin-bottom: 10px;font-size: 0.9rem;text-transform: uppercase;letter-spacing: 0.5px} .tip-card p{color: var(--text-color);line-height: 1.5} .practical-info{padding: 80px 0;background: var(--accent-color)} .info-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));gap: 40px} .info-card{background: white;padding: 40px;border-radius: var(--border-radius);box-shadow: var(--shadow-light)} .info-card h3{font-family: 'Poppins', sans-serif;color: var(--text-color);margin-bottom: 25px;font-size: 1.5rem;display: flex;align-items: center;gap: 12px} .info-card h3 i{color: var(--primary-color)} .budget-ranges{display: grid;gap: 15px;margin-bottom: 30px} .budget-item{display: flex;justify-content: space-between;align-items: center;padding: 12px 15px;background: var(--accent-color);border-radius: 8px} .budget-label{font-weight: 500;color: var(--text-color)} .budget-amount{color: var(--primary-color);font-weight: 600} .typical-costs h4{font-family: 'Poppins', sans-serif;color: var(--text-color);margin-bottom: 15px} .typical-costs p{margin-bottom: 8px;color: var(--text-color)} .climate-overview{margin-bottom: 25px;font-size: 1.05rem;line-height: 1.6;color: var(--text-color)} .seasons-info{display: grid;gap: 20px} .season-item{background: var(--accent-color);padding: 20px;border-radius: var(--border-radius);border-left: 4px solid var(--primary-color)} .season-item h4{font-family: 'Poppins', sans-serif;color: var(--text-color);margin-bottom: 8px} .temperature{color: var(--secondary-color);font-weight: 500;margin-bottom: 10px} .season-item p{color: #64748b;line-height: 1.5} .breadcrumb{margin-top: 15px;font-size: 0.9rem} .breadcrumb a{color: rgba(255, 255, 255, 0.8);text-decoration: none;transition: var(--transition)} .breadcrumb a:hover{color: white} .breadcrumb span{color: rgba(255, 255, 255, 0.6);margin: 0 8px} @media (max-width: 768px){.overview-content{grid-template-columns: 1fr;gap: 30px} .highlights-grid{grid-template-columns: 1fr} .attractions-grid{grid-template-columns: 1fr} .info-grid{grid-template-columns: 1fr} .neighborhoods-grid{grid-template-columns: 1fr} .tips-grid{grid-template-columns: 1fr} .dishes-grid{grid-template-columns: 1fr}
} @media (max-width: 480px){.city-overview, .highlights, .city-details, .practical-info{padding: 40px 0} .highlight-card, .attraction-card, .neighborhood-card, .tip-card{padding: 20px} .info-card{padding: 25px} .quick-facts{padding: 20px}
} .generated-badge{position: absolute;top: 12px;left: 12px;background: linear-gradient(135deg, var(--primary-color), #00C9A7);color: white;padding: 4px 8px;border-radius: 4px;font-size: 0.8rem;font-weight: 500;display: flex;align-items: center;gap: 4px;z-index: 2} .generated-badge i{font-size: 0.7rem} .section-separator{grid-column: 1 / -1;text-align: center;margin: 40px 0 20px 0;padding: 20px;background: linear-gradient(135deg, var(--accent-color), #F1F5F9);border-radius: var(--border-radius);border: 2px dashed var(--primary-color)} .separator-title{color: var(--primary-color);font-size: 1.3rem;font-weight: 600;display: flex;align-items: center;justify-content: center;gap: 8px;margin: 0} .separator-title i{color: var(--secondary-color)} .city-card{position: relative;cursor: pointer;transition: var(--transition)} .city-card:hover{transform: translateY(-2px)} .city-link{position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 3;display: block} .destination-card.generated-city{border: 2px solid transparent;background: linear-gradient(white, white) padding-box, linear-gradient(135deg, var(--primary-color), var(--secondary-color)) border-box} .destination-card.generated-city:hover{box-shadow: 0 8px 30px rgba(0, 175, 135, 0.15)} .discovery-cards{padding: 60px 0;background: linear-gradient(135deg, #ffffff 0%, #f1f8ff 30%, #e8f6f3 70%, #f0fdf4 100%);position: relative;overflow: hidden} .discovery-cards::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.08) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);pointer-events: none} .discovery-section-header{position: relative} .scroll-hint{display: inline-flex;align-items: center;gap: 8px;font-size: 0.9rem;color: #64748b;margin-top: 10px;padding: 8px 16px;background: rgba(255, 255, 255, 0.8);border-radius: 20px;border: 1px solid #e2e8f0} .scroll-hint i{font-size: 0.8rem;color: var(--primary-color)} @media (min-width: 1024px){.scroll-hint{display: none}
} .scroll-indicators{display: flex;justify-content: center;align-items: center;gap: 30px;margin-top: 25px;padding: 20px;background: rgba(255, 255, 255, 0.9);border-radius: 15px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05)} .scroll-indicator{display: flex;flex-direction: column;align-items: center;gap: 8px;color: #64748b;font-size: 0.85rem;text-align: center} .scroll-icon{width: 40px;height: 40px;border: 2px solid var(--primary-color);border-radius: 8px;display: flex;align-items: center;justify-content: center;color: var(--primary-color);background: rgba(16, 185, 129, 0.1);position: relative;overflow: hidden} .scroll-icon i{font-size: 1.2rem;animation: scrollPulse 2s ease-in-out infinite} .scroll-icon.horizontal i{animation: scrollHorizontal 2s ease-in-out infinite} @keyframes scrollPulse{0%, 100%{transform: translateY(0);opacity: 0.7} 50%{transform: translateY(-3px);opacity: 1}
} @keyframes scrollHorizontal{0%, 100%{transform: translateX(0);opacity: 0.7} 50%{transform: translateX(3px);opacity: 1}
} .discovery-scroll-dots{display: flex;justify-content: center;align-items: center;gap: 12px;margin-top: 15px;padding: 10px;position: relative} .scroll-dot{width: 8px;height: 8px;border-radius: 50%;background: #d1d5db;transition: all 0.4s ease;position: relative;cursor: pointer;border: 1px solid transparent} .scroll-dot:nth-child(1){background: var(--primary-color);transform: scale(1.2);border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2)} .scroll-dot:hover{background: var(--secondary-color);transform: scale(1.3);border-color: var(--secondary-color);box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.3)} .scroll-dot:nth-child(1)::after{content: '';position: absolute;top: -1px;left: -1px;right: -1px;bottom: -1px;border-radius: 50%;border: 1px solid var(--primary-color);animation: scrollDotPulse 3s ease-in-out infinite;opacity: 0.6} @keyframes scrollDotPulse{0%, 70%, 100%{transform: scale(1);opacity: 0.4} 35%{transform: scale(1.3);opacity: 0.8}
} .discovery-scroll-dots::after{content: 'Swipe to explore';position: absolute;bottom: -5px;left: 50%;transform: translateX(-50%);font-size: 0.75rem;color: #64748b;font-weight: 500;opacity: 0.8} .discovery-grid:hover ~ .discovery-scroll-dots .scroll-dot:nth-child(1){animation-play-state: paused;background: #94a3b8} .discovery-grid:hover ~ .discovery-scroll-dots .scroll-dot:nth-child(2){background: var(--primary-color);transform: scale(1.1);border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2)} .discovery-grid:active ~ .discovery-scroll-dots .scroll-dot:nth-child(2){background: var(--secondary-color);transform: scale(1.2)} @media (min-width: 1200px){.discovery-scroll-dots{display: none}
} @media (max-width: 768px){.discovery-scroll-dots{margin-top: 10px;padding: 10px} .scroll-dot{width: 10px;height: 10px} .discovery-scroll-dots::after{font-size: 0.7rem;bottom: -8px}
} @media (max-width: 768px){.discovery-grid:active ~ .discovery-scroll-dots .scroll-dot{background: var(--secondary-color);transform: scale(1.1)} .discovery-grid:active ~ .discovery-scroll-dots .scroll-dot:nth-child(2){transform: scale(1.2);box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.3)}
} @media (max-width: 768px){.scroll-indicators{gap: 20px;padding: 15px} .scroll-indicator{font-size: 0.8rem} .scroll-icon{width: 35px;height: 35px}
} .discovery-grid{position: relative;display: flex;overflow-x: auto;gap: 20px;margin-top: 25px;padding: 10px 0 20px 0;scroll-behavior: smooth;scrollbar-width: none;-ms-overflow-style: none;-webkit-overflow-scrolling: touch;scroll-snap-type: x mandatory} .discovery-grid::-webkit-scrollbar{display: none} .discovery-grid::-webkit-scrollbar{height: 8px} .discovery-grid::-webkit-scrollbar-track{background: var(--accent-color);border-radius: 4px} .discovery-grid::-webkit-scrollbar-thumb{background: var(--primary-color);border-radius: 4px} .discovery-grid::-webkit-scrollbar-thumb:hover{background: #008f6e} .discovery-card{flex: 0 0 auto;min-width: 280px;max-width: 320px;height: 550px;background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);border-radius: 16px;overflow: hidden;box-shadow: 0 12px 32px rgba(16, 185, 129, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);border: 1px solid rgba(16, 185, 129, 0.1);display: flex;flex-direction: column;scroll-snap-align: start;position: relative} .discovery-card:hover{transform: translateY(-8px) scale(1.02);box-shadow: 0 20px 48px rgba(16, 185, 129, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);border-color: rgba(16, 185, 129, 0.25)} .discovery-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, var(--primary-color) 0%, #059669 50%, var(--secondary-color) 100%);opacity: 0.9;z-index: 1} .discovery-header{background: linear-gradient(135deg, var(--primary-color) 0%, #059669 30%, #0d9488 70%, #0f766e 100%);color: white;padding: 18px 20px;display: flex;align-items: center;gap: 12px;flex-shrink: 0;position: relative;z-index: 2;box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3)} .discovery-header::after{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);pointer-events: none} .discovery-header i{font-size: 1.2rem;opacity: 0.9} .discovery-header h3{margin: 0;font-size: 1.1rem;font-weight: 600} .discovery-content{padding: 20px;flex: 1;overflow-y: auto;scrollbar-width: thin;scrollbar-color: var(--primary-color) var(--accent-color)} .discovery-content::-webkit-scrollbar{width: 4px} .discovery-content::-webkit-scrollbar-track{background: #f1f5f9} .discovery-content::-webkit-scrollbar-thumb{background: var(--primary-color);border-radius: 2px} .discovery-content p{margin-bottom: 12px;line-height: 1.5;color: var(--text-color);font-size: 0.9rem} .discovery-content strong{color: var(--primary-color);font-weight: 600} .budget-section{margin-bottom: 15px;padding-bottom: 12px;border-bottom: 1px solid #e2e8f0} .budget-section:last-child{border-bottom: none;margin-bottom: 0} .budget-section h4{color: var(--secondary-color);margin-bottom: 8px;font-size: 1rem;font-weight: 600} .budget-list{margin: 0;padding-left: 16px;list-style-type: disc} .budget-list li{margin-bottom: 6px;line-height: 1.4;color: var(--text-color);font-size: 0.85rem} .secrets-list{display: grid;gap: 10px} .secret-item{display: flex;gap: 12px;align-items: flex-start;padding: 12px;background: var(--accent-color);border-radius: 8px;border-left: 3px solid var(--secondary-color)} .secret-number{background: var(--secondary-color);color: white;width: 24px;height: 24px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 600;flex-shrink: 0;font-size: 0.8rem} .secret-item p{margin: 0;color: var(--text-color);font-size: 0.85rem;line-height: 1.4} .dining-section{margin-bottom: 15px;padding-bottom: 12px;border-bottom: 1px solid #e2e8f0} .dining-section:last-child{border-bottom: none;margin-bottom: 0} .dining-section h4{color: var(--secondary-color);margin-bottom: 8px;font-size: 1rem;font-weight: 600;display: flex;align-items: center;gap: 8px} .dining-section h4 i{font-size: 0.9rem} .dining-section p{margin: 0;font-size: 0.85rem;line-height: 1.4} .secret-number{background: var(--secondary-color);color: white;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 600;font-size: 0.9rem;flex-shrink: 0} .secret-item p{margin: 0;line-height: 1.6;color: var(--text-color)} .attractions-detailed{padding: 80px 0;background: white} .attractions-detailed-grid{display: grid;gap: 40px;margin-top: 40px} .attraction-detailed-card{background: white;border-radius: 15px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);overflow: hidden;border: 1px solid #e2e8f0;position: relative;transition: all 0.3s ease} .attraction-detailed-card:hover{box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);transform: translateY(-2px)} .attraction-number{position: absolute;top: 20px;left: 20px;background: var(--primary-color);color: white;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 1.1rem;z-index: 2} .attraction-detailed-content{padding: 30px;padding-left: 80px} .attraction-name{font-size: 1.5rem;color: var(--text-color);margin-bottom: 15px;font-weight: 700;line-height: 1.3} .attraction-tags{display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 20px} .tag{padding: 6px 12px;border-radius: 20px;font-size: 0.85rem;font-weight: 500;display: inline-flex;align-items: center;gap: 5px} .cost-tag{background: #dcfce7;color: #166534} .time-tag{background: #dbeafe;color: #1e40af} .experience-tag{background: #fef3c7;color: #92400e} .gem-tag{background: #fce7f3;color: #be185d} .family-tag{background: #e0e7ff;color: #3730a3} .attraction-description{margin-bottom: 25px} .attraction-description p{line-height: 1.7;color: var(--text-color);margin-bottom: 15px} .attraction-special-info{display: grid;gap: 20px;margin-bottom: 25px} .insider-tip-detailed,
.photo-tip{padding: 20px;border-radius: 10px;border-left: 4px solid var(--secondary-color)} .insider-tip-detailed{background: linear-gradient(135deg, #fef7cd, #fef3c7)} .photo-tip{background: linear-gradient(135deg, #dbeafe, #bfdbfe)} .insider-tip-detailed h4,
.photo-tip h4{display: flex;align-items: center;gap: 10px;margin-bottom: 12px;font-size: 1.1rem;color: var(--text-color);font-weight: 600} .insider-tip-detailed p,
.photo-tip p{margin: 0;line-height: 1.6;color: var(--text-color)} .insider-tip{background: #fff7ed;padding: 18px;border-radius: 10px;margin-bottom: 20px;border: 1px solid #fed7aa} .insider-tip h4{margin-bottom: 12px;color: var(--secondary-color);font-weight: 600;font-size: 1.1rem;display: flex;align-items: center;gap: 8px} .insider-tip p{margin: 0;color: var(--text-color);line-height: 1.6} .practical-info-detailed{background: var(--accent-color);padding: 18px;border-radius: 10px;margin-bottom: 20px} .practical-info-detailed h4{margin-bottom: 12px;color: var(--primary-color);font-weight: 600;font-size: 1.1rem;display: flex;align-items: center;gap: 8px} .practical-grid{display: grid;gap: 8px;margin-bottom: 0} .practical-item{display: flex;align-items: flex-start;gap: 12px;padding: 10px 12px;background: white;border-radius: 6px;border-left: 3px solid var(--primary-color)} .practical-item i{color: var(--primary-color);font-size: 1rem;margin-top: 2px;flex-shrink: 0} .practical-item div{flex: 1} .practical-item strong{display: inline;color: var(--text-color);margin-right: 8px;font-weight: 600} .practical-item span,
.practical-item a{color: #64748b;line-height: 1.4} .practical-item a{color: var(--primary-color);text-decoration: none} .practical-item a:hover{text-decoration: underline} .accessibility-info{display: flex;align-items: center;gap: 10px;padding: 15px;background: #f1f5f9;border-radius: 8px;color: var(--text-color)} .accessibility-info i{color: var(--secondary-color)} .interest-tags{display: flex;flex-wrap: wrap;align-items: center;gap: 10px;margin-top: 20px;padding-top: 20px;border-top: 1px solid #e2e8f0} .interest-tags strong{color: var(--text-color);font-weight: 600} .interest-tag{background: var(--primary-color);color: white;padding: 4px 10px;border-radius: 15px;font-size: 0.8rem;font-weight: 500} .logistics-section{padding: 80px 0;background: linear-gradient(135deg, #f8fafc 0%, var(--accent-color) 100%)} .logistics-grid{display: grid;grid-template-columns: 1fr;gap: 20px;margin-top: 40px} .logistics-planning-grid{display: grid;grid-template-columns: 1fr;gap: 20px;margin-top: 20px;width: 100%;box-sizing: border-box} .logistics-card{background: white;border-radius: 15px;overflow: hidden;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;width: 100%;min-width: 0;box-sizing: border-box} .logistics-card:hover{transform: translateY(-3px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15)} .logistics-header{background: linear-gradient(135deg, var(--primary-color), #059669);color: white;padding: 20px;display: flex;align-items: center;gap: 15px;flex-wrap: wrap} .logistics-header i{font-size: 1.5rem} .logistics-header h3{margin: 0;font-size: 1.3rem;font-weight: 600} .logistics-content{padding: 20px;word-wrap: break-word;overflow-wrap: break-word} .logistics-content p{line-height: 1.7;color: var(--text-color);margin-bottom: 15px} .transport-tips, .accommodation-tips{margin-top: 25px;padding: 20px;background: var(--accent-color);border-radius: 8px;border-left: 4px solid var(--primary-color)} .transport-tips h4, .accommodation-tips h4{color: var(--primary-color);margin-bottom: 15px;font-weight: 600;font-size: 1.1rem} .transport-tips ul, .accommodation-tips ul{margin: 0;padding-left: 20px} .transport-tips li, .accommodation-tips li{color: var(--text-color);line-height: 1.5;margin-bottom: 8px} .suggested-itinerary{margin-top: 25px} .itinerary-day{margin-bottom: 25px;padding: 20px;background: var(--accent-color);border-radius: 8px;border-left: 4px solid var(--primary-color)} .itinerary-day h4{color: var(--primary-color);margin-bottom: 15px;font-weight: 600;font-size: 1.1rem;display: flex;align-items: center;gap: 10px} .itinerary-day ul{margin: 0;padding-left: 20px} .itinerary-day li{color: var(--text-color);line-height: 1.6;margin-bottom: 8px} .seasonal-highlights{margin-top: 25px;padding-top: 25px;border-top: 1px solid #e2e8f0} .seasonal-highlights h4{color: var(--primary-color);margin-bottom: 20px;font-weight: 600} .season-item{margin-bottom: 20px;padding: 15px;background: var(--accent-color);border-radius: 8px;border-left: 4px solid var(--secondary-color)} .season-item h5{display: flex;align-items: center;gap: 8px;margin-bottom: 10px;color: var(--text-color);font-weight: 600} .season-item i{color: var(--secondary-color)} .season-item p{margin: 0;color: #64748b;line-height: 1.6} .dining-culture{padding: 80px 0;background: white} .dining-grid{margin-top: 40px} .dining-card{background: white;border-radius: 15px;overflow: hidden;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);border-top: 4px solid var(--secondary-color)} .dining-header{background: linear-gradient(135deg, var(--secondary-color), #f97316);color: white;padding: 25px;display: flex;align-items: center;gap: 15px} .dining-header i{font-size: 1.5rem} .dining-header h3{margin: 0;font-size: 1.4rem;font-weight: 600} .dining-content{padding: 30px} .dining-section{margin-bottom: 25px;padding-bottom: 20px;border-bottom: 1px solid #e2e8f0} .dining-section:last-child{border-bottom: none;margin-bottom: 0} .dining-section h4{display: flex;align-items: center;gap: 10px;margin-bottom: 15px;color: var(--text-color);font-weight: 600;font-size: 1.2rem} .dining-section i{color: var(--secondary-color)} .dining-section p{line-height: 1.7;color: var(--text-color);margin: 0} .dining-tips{background: var(--accent-color);padding: 20px;border-radius: 10px;border-left: 4px solid var(--primary-color)} @media (max-width: 768px){.discovery-grid, .logistics-grid{grid-template-columns: 1fr;gap: 20px} .attraction-detailed-content{padding: 20px;padding-left: 60px} .attraction-number{width: 35px;height: 35px;font-size: 1rem;top: 15px;left: 15px} .attraction-tags{gap: 6px} .tag{font-size: 0.8rem;padding: 5px 10px} .practical-grid{gap: 10px;grid-template-columns: 1fr} .practical-item{padding: 12px;flex-direction: column;align-items: flex-start;gap: 8px;word-break: break-word} .practical-item i{margin-top: 0} .practical-item div{width: 100%} .practical-item strong{display: block;margin-bottom: 4px;color: var(--primary-color)} .practical-item span{display: block;word-break: break-word;overflow-wrap: break-word} .practical-item a{word-break: break-all;color: var(--primary-color);text-decoration: underline}
} @media (max-width: 480px){.discovery-cards, .attractions-detailed, .logistics-section, .dining-culture{padding: 60px 0} .attraction-detailed-content{padding: 15px;padding-left: 50px} .all-attractions-grid{gap: 15px} .attraction-card-detailed{padding: 15px;margin-bottom: 10px} .attraction-header .attraction-name{font-size: 1.2rem;line-height: 1.2} .attraction-tags{gap: 4px;margin-bottom: 12px} .tag{font-size: 0.75rem;padding: 3px 6px} .attraction-description{font-size: 0.9rem;line-height: 1.4} .insider-tip{padding: 12px;margin: 12px 0} .insider-tip h4{font-size: 0.95rem;gap: 6px} .insider-tip p{font-size: 0.85rem;line-height: 1.4} .practical-info-detailed{padding: 12px;margin-top: 12px} .practical-info-detailed h4{font-size: 0.95rem;gap: 6px} .practical-item{padding: 10px;gap: 6px;font-size: 0.85rem} .practical-item strong{font-size: 0.85rem} .practical-item span{font-size: 0.85rem;line-height: 1.3} .attraction-number{width: 30px;height: 30px;font-size: 0.9rem;top: 12px;left: 12px} .attraction-name{font-size: 1.3rem} .discovery-header, .logistics-header, .dining-header{padding: 20px} .discovery-content, .logistics-content, .dining-content{padding: 20px} .top-attraction-card{flex-direction: column;padding: 15px;gap: 12px} .attraction-rank{width: 35px;height: 35px;font-size: 1rem;align-self: flex-start}
} .faq-section{padding: 80px 0;background: linear-gradient(135deg, #f8fafc 0%, var(--accent-color) 100%)} .faq-grid{display: grid;gap: 25px;margin-top: 40px} .faq-item{background: white;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);transition: all 0.3s ease;border-left: 4px solid var(--primary-color)} .faq-item:hover{transform: translateY(-2px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12)} .faq-question{background: linear-gradient(135deg, var(--primary-color), #22c55e);color: white;padding: 20px 25px} .faq-question h3{margin: 0;font-size: 0.975rem;font-weight: 600;display: flex;align-items: center;gap: 12px} .faq-question i{font-size: 1.075rem;opacity: 0.9} .faq-answer{padding: 25px} .faq-answer p{margin: 0;line-height: 1.7;color: var(--text-color)} @media (max-width: 768px){.faq-section{padding: 60px 0} .faq-question{padding: 15px 20px} .faq-question h3{font-size: 0.875rem} .faq-answer{padding: 20px}
} @media (max-width: 480px){.faq-grid{gap: 15px} .faq-question{padding: 12px 15px} .faq-answer{padding: 15px}
} @media (max-width: 768px){button, .btn, a, input[type="submit"], .filter-tab, .tab-label, .nav-link{min-height: 44px;min-width: 44px;touch-action: manipulation;user-select: none} input[type="email"], input[type="text"], input[type="search"], textarea{font-size: 14px;-webkit-appearance: none;appearance: none;transform: translateZ(0)} .css-tabs .tab-labels, .filter-tabs, .discovery-grid{scroll-behavior: smooth;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none} .city-card:hover, .story-card:hover, .discovery-card:hover{transform: none} .city-card:active, .story-card:active, .discovery-card:active{transform: scale(0.98);transition: transform 0.1s ease} .discovery-cards{padding: 40px 0} .discovery-card{min-width: 250px;max-width: 280px;height: 420px} .discovery-header{padding: 12px 16px} .discovery-header h3{font-size: 0.875rem} .discovery-content{padding: 16px} p, li{line-height: 1.6} .section-subtitle, .hero-subtitle{font-size: 0.875rem;line-height: 1.5}
} .no-content-section{padding: 80px 0;text-align: center} .no-content-message{max-width: 600px;margin: 0 auto;padding: 60px 40px;background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);border-radius: 20px;box-shadow: var(--shadow-medium);border: 2px dashed var(--primary-color)} .no-content-icon{font-size: 3.875rem;color: var(--primary-color);margin-bottom: 30px;opacity: 0.7} .no-content-message h3{font-size: 1.875rem;color: var(--text-color);margin-bottom: 20px;font-weight: 600} .no-content-message p{font-size: 0.975rem;color: #666;margin-bottom: 30px;line-height: 1.6} .no-content-message .btn{margin: 0 10px 10px 0;display: inline-block} @media (max-width: 768px){.no-content-message{padding: 40px 20px;margin: 0 20px} .no-content-icon{font-size: 2.875rem} .no-content-message h3{font-size: 1.375rem} .no-content-message .btn{display: block;margin: 10px 0;width: 100%}
} .smart-link-processed a[style*="color: green"],
.internally-linked a[style*="color: green"],
a[style*="color: green"][style*="text-decoration: underline"]{color: inherit !important;text-decoration: none !important;border-bottom: none !important} .related-content + .related-content,
.auto-related-content + .auto-related-content,
.related-pages-section + .related-pages-section,
.related-content:nth-of-type(n+2){display: none !important} @media (min-width: 768px){.trip-planning-grid{grid-template-columns: repeat(2, 1fr);gap: 25px} .logistics-grid{grid-template-columns: repeat(2, 1fr);gap: 25px} .logistics-planning-grid{grid-template-columns: repeat(2, 1fr);gap: 25px}
} @media (max-width: 767px){.logistics-card{max-width: 100%;width: 100%} .logistics-content{padding: 15px;font-size: 14px} .logistics-header{padding: 15px;font-size: 1.1rem} .logistics-header h3{font-size: 1.1rem} .transport-tips, .accommodation-tips{padding: 15px;margin-top: 15px} .itinerary-day{padding: 15px;margin-bottom: 15px}
} @media (min-width: 1024px){.trip-planning-grid{grid-template-columns: repeat(3, 1fr);gap: 30px} .logistics-grid{grid-template-columns: repeat(3, 1fr);gap: 30px} .logistics-planning-grid{grid-template-columns: repeat(3, 1fr);gap: 30px}
} .blog-controls{display: flex;flex-direction: column;gap: 25px;margin-bottom: 40px;padding: 30px;background: white;border-radius: var(--border-radius);box-shadow: var(--shadow-light)} .blog-search .search-bar{position: relative;max-width: 400px} .blog-search .search-input{width: 100%;padding: 12px 45px 12px 15px;border: 2px solid #e2e8f0;border-radius: var(--border-radius);font-size: 1rem;transition: border-color 0.3s ease} .blog-search .search-input:focus{outline: none;border-color: var(--primary-color)} .blog-search .search-icon{position: absolute;right: 15px;top: 50%;transform: translateY(-50%);color: #64748b} .blog-filters .filter-tabs{display: flex;gap: 10px;flex-wrap: wrap} .filter-tab{background: #f8f9fa;border: 2px solid #e2e8f0;color: #64748b;padding: 10px 20px;border-radius: 25px;cursor: pointer;transition: all 0.3s ease;font-weight: 500} .filter-tab:hover{border-color: var(--primary-color);color: var(--primary-color)} .filter-tab.active{background: var(--primary-color);border-color: var(--primary-color);color: white} .blog-posts-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px;margin-bottom: 40px} .blog-posts-grid .blog-post{display: flex;flex-direction: column;background: white;border-radius: var(--border-radius);box-shadow: var(--shadow-light);overflow: hidden;transition: var(--transition);min-height: auto} .blog-posts-grid .blog-post:hover{transform: translateY(-5px);box-shadow: var(--shadow-heavy)} .blog-post-image{position: relative;height: 240px;overflow: hidden} .blog-post-image img{width: 100%;height: 100%;object-fit: cover;transition: var(--transition)} .blog-posts-grid .blog-post:hover .blog-post-image img{transform: scale(1.05)} .blog-post-category{position: absolute;top: 15px;left: 15px;background: var(--primary-color);color: white;padding: 4px 12px;border-radius: 15px;font-size: 0.8rem;font-weight: 500} .blog-post-content{padding: 25px;display: flex;flex-direction: column;flex-grow: 1} .blog-post-meta{display: flex;gap: 20px;margin-bottom: 15px;font-size: 0.9rem;color: #64748b} .blog-post-meta span{display: flex;align-items: center;gap: 5px} .blog-post-title{margin-bottom: 15px;font-size: 1.4rem;line-height: 1.3} .blog-post-title a{color: var(--text-color);text-decoration: none;transition: var(--transition)} .blog-post-title a:hover{color: var(--primary-color)} .blog-post-excerpt{color: #64748b;line-height: 1.6;margin-bottom: 20px;flex-grow: 1} .blog-post-tags{display: flex;gap: 8px;margin-bottom: 20px;flex-wrap: wrap} .blog-tag{background: var(--accent-color);color: var(--primary-color);padding: 4px 12px;border-radius: 15px;font-size: 0.8rem;font-weight: 500} .blog-post-read-more{color: var(--primary-color);text-decoration: none;font-weight: 600;display: flex;align-items: center;gap: 5px;align-self: flex-start;transition: var(--transition)} .blog-post-read-more:hover{color: var(--secondary-color)} .blog-post-read-more i{transition: var(--transition)} .blog-post-read-more:hover i{transform: translateX(5px)} .loading-blogs{grid-column: 1 / -1;text-align: center;padding: 60px 20px;color: #64748b} .loading-blogs .loading-spinner{width: 40px;height: 40px;border: 4px solid #f3f4f6;border-top: 4px solid var(--primary-color);border-radius: 50%;animation: spin 1s linear infinite;margin: 0 auto 20px} @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)}
} .blog-card{background: white;border-radius: var(--border-radius);overflow: hidden;box-shadow: var(--shadow-light);transition: all 0.3s ease;display: flex;flex-direction: column;height: 100%} .blog-card:hover{box-shadow: var(--shadow-medium);transform: translateY(-5px)} .blog-image{position: relative;height: 200px;overflow: hidden;flex-shrink: 0;background: #f8fafc} .blog-image img{width: 100% !important;height: 100% !important;object-fit: cover !important;transition: transform 0.3s ease;opacity: 1 !important;display: block !important;visibility: visible !important} .blog-card:hover .blog-image img{transform: scale(1.05)} .blog-image-placeholder{width: 100%;height: 100%;background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);display: flex;align-items: center;justify-content: center;color: #94a3b8;font-size: 3rem} .blog-category{position: absolute;top: 15px;left: 15px;background-color: var(--secondary-color);color: white;padding: 6px 15px;border-radius: 20px;font-size: 0.8rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px} .blog-content{padding: 25px;display: flex;flex-direction: column;flex-grow: 1} .blog-title{margin-bottom: 15px} .blog-link{color: var(--text-color);text-decoration: none;font-size: 1.3rem;font-weight: 600;line-height: 1.4;transition: color 0.3s ease} .blog-link:hover{color: var(--primary-color)} .blog-excerpt{color: #64748b;margin-bottom: 20px;line-height: 1.6;flex-grow: 1;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden} .blog-meta{display: flex;align-items: center;justify-content: space-between;gap: 15px;margin-bottom: 15px;padding-top: 15px;border-top: 1px solid #f1f5f9} .author-info{display: flex;align-items: center;gap: 12px} .author-avatar{font-size: 2rem;color: var(--primary-color)} .author-details{display: flex;flex-direction: column} .author-name{font-weight: 600;color: var(--text-color);font-size: 0.9rem} .author-title{font-size: 0.8rem;color: #64748b} .blog-stats{display: flex;flex-direction: column;align-items: flex-end;font-size: 0.8rem;color: #64748b} .blog-date{margin-bottom: 4px;font-weight: 500} .reading-time{font-size: 0.75rem;color: #94a3b8} .blog-tags{display: flex;flex-wrap: wrap;gap: 8px} .blog-tag{background: #f1f5f9;color: #64748b;padding: 4px 10px;border-radius: 12px;font-size: 0.75rem;font-weight: 500} .load-more-section{text-align: center;margin-top: 40px} .no-blogs-message{text-align: center;padding: 60px 20px} @media (max-width: 768px){.blog-controls{padding: 20px;gap: 20px} .blog-search .search-bar{max-width: 100%} .filter-tabs{justify-content: center} .filter-tab{padding: 8px 16px;font-size: 0.9rem} .blog-posts-grid{grid-template-columns: 1fr;gap: 20px} .blog-posts-grid .blog-post-content{padding: 20px} .blog-post-image{height: 200px} .blog-post-meta{flex-direction: column;gap: 8px;align-items: flex-start} .blog-post-title{font-size: 1.2rem} .blog-card .blog-content{padding: 20px} .blog-meta{flex-direction: column;align-items: flex-start;gap: 10px} .blog-stats{align-items: flex-start}
} .blog-post{min-height: 100vh;display: flex;flex-direction: column} .blog-header{background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);padding: 40px 0 60px;position: relative;margin-top: 86px} .blog-header::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(59, 130, 246, 0.05) 50%, rgba(255, 107, 53, 0.05) 100%);pointer-events: none} .blog-breadcrumb{display: flex;align-items: center;gap: 8px;margin-bottom: 30px;font-size: 0.9rem;position: relative;z-index: 1} .blog-breadcrumb a{color: #64748b;text-decoration: none;display: flex;align-items: center;gap: 6px;transition: color 0.3s ease} .blog-breadcrumb a:hover{color: var(--primary-color)} .breadcrumb-separator{color: #94a3b8;margin: 0 4px} .current-page{color: var(--primary-color);font-weight: 500;max-width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap} .blog-meta-header{display: flex;align-items: center;justify-content: space-between;margin-bottom: 25px;gap: 20px;position: relative;z-index: 1} .blog-category-badge{background: linear-gradient(135deg, var(--secondary-color), #ff8a65);color: white;padding: 8px 16px;border-radius: 20px;font-size: 0.8rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3)} .blog-reading-info{display: flex;align-items: center;gap: 20px;font-size: 0.85rem;color: #64748b} .blog-reading-info i{color: var(--primary-color);margin-right: 6px} .blog-main-title{font-family: 'Montserrat', sans-serif;font-size: 2.5rem;font-weight: 700;color: var(--text-color);line-height: 1.2;margin-bottom: 25px;position: relative;z-index: 1} .blog-excerpt-header{font-size: 1.1rem;color: #64748b;line-height: 1.6;margin-bottom: 30px;position: relative;z-index: 1} .blog-excerpt-header p{margin: 0;font-weight: 400} .blog-author-info{display: flex;align-items: center;gap: 15px;padding: 20px;background: rgba(255, 255, 255, 0.8);border-radius: 12px;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.2);position: relative;z-index: 1} .author-avatar{font-size: 2.5rem;color: var(--primary-color)} .author-details{display: flex;flex-direction: column} .author-name{font-weight: 600;color: var(--text-color);font-size: 1rem} .author-title{font-size: 0.85rem;color: #64748b;margin-top: 2px} .blog-featured-image{padding: 0;margin-bottom: 50px} .featured-image-wrapper{position: relative;border-radius: 16px;overflow: hidden;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);margin-top: 40px} .featured-img{width: 100%;height: 400px;object-fit: cover;display: block !important;opacity: 1 !important;transition: transform 0.6s ease} .featured-image-wrapper:hover .featured-img{transform: scale(1.05)} .blog-content-section{flex-grow: 1;padding: 60px 0;background: white} .blog-content-wrapper{max-width: 800px;margin: 0 auto;padding: 0 20px} .blog-body{font-family: 'Lato', sans-serif;font-size: 1.1rem;line-height: 1.8;color: var(--text-color);margin-bottom: 50px} .blog-body h2{font-family: 'Montserrat', sans-serif;font-size: 1.8rem;font-weight: 600;color: var(--text-color);margin: 40px 0 20px;padding-bottom: 10px;border-bottom: 2px solid var(--primary-color)} .blog-body h3{font-family: 'Montserrat', sans-serif;font-size: 1.4rem;font-weight: 600;color: var(--text-color);margin: 30px 0 15px} .blog-body h4{font-family: 'Montserrat', sans-serif;font-size: 1.2rem;font-weight: 600;color: var(--text-color);margin: 25px 0 12px} .blog-body p{margin: 0 0 20px;text-align: justify} .blog-body ul, .blog-body ol{margin: 20px 0;padding-left: 30px} .blog-body li{margin-bottom: 8px} .blog-body blockquote{background: var(--accent-color);border-left: 4px solid var(--primary-color);margin: 30px 0;padding: 20px 25px;font-style: italic;border-radius: 8px} .blog-body strong{color: var(--text-color);font-weight: 600} .blog-tags-section{background: var(--accent-color);padding: 30px;border-radius: 12px;margin-bottom: 40px} .tags-title{font-family: 'Montserrat', sans-serif;color: var(--text-color);margin: 0 0 20px;font-size: 1.1rem;display: flex;align-items: center;gap: 8px} .tags-title i{color: var(--primary-color)} .tag-list{display: flex;flex-wrap: wrap;gap: 10px} .blog-tag-item{background: white;color: var(--text-color);padding: 8px 16px;border-radius: 20px;font-size: 0.85rem;font-weight: 500;border: 1px solid #e2e8f0;transition: all 0.3s ease} .blog-tag-item:hover{background: var(--primary-color);color: white;border-color: var(--primary-color)} .blog-actions{display: flex;align-items: center;justify-content: space-between;gap: 30px;padding: 30px 0;border-top: 1px solid #e2e8f0} .back-to-blogs-btn{display: inline-flex;align-items: center;gap: 10px;background: var(--primary-color);color: white;padding: 12px 24px;border-radius: 8px;text-decoration: none;font-weight: 500;transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3)} .back-to-blogs-btn:hover{background: #059669;transform: translateY(-2px);box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4)} .social-share{display: flex;align-items: center;gap: 15px} .share-text{font-size: 0.9rem;color: #64748b;font-weight: 500} .share-buttons{display: flex;gap: 10px} .share-btn{width: 40px;height: 40px;border-radius: 8px;display: flex;align-items: center;justify-content: center;text-decoration: none;color: white;transition: all 0.3s ease} .share-btn.facebook{background: #1877f2} .share-btn.twitter{background: #1da1f2} .share-btn.linkedin{background: #0077b5} .share-btn:hover{transform: translateY(-2px);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2)} @media (max-width: 768px){.blog-header{padding: 20px 0 40px} .blog-breadcrumb{margin-bottom: 20px;font-size: 0.8rem} .current-page{max-width: 200px} .blog-meta-header{flex-direction: column;align-items: flex-start;gap: 15px;margin-bottom: 20px} .blog-reading-info{gap: 15px;font-size: 0.8rem} .blog-main-title{font-size: 1.8rem;margin-bottom: 20px} .blog-excerpt-header{font-size: 1rem;margin-bottom: 25px} .blog-author-info{padding: 15px;gap: 12px} .author-avatar{font-size: 2rem} .featured-img{height: 250px} .blog-content-section{padding: 40px 0} .blog-content-wrapper{padding: 0 15px} .blog-body{font-size: 1rem;line-height: 1.7} .blog-body h2{font-size: 1.5rem;margin: 30px 0 15px} .blog-body h3{font-size: 1.3rem;margin: 25px 0 12px} .blog-body h4{font-size: 1.1rem;margin: 20px 0 10px} .blog-tags-section{padding: 20px;margin-bottom: 30px} .blog-actions{flex-direction: column;gap: 20px;text-align: center} .back-to-blogs-btn{align-self: stretch;justify-content: center} .social-share{flex-direction: column;gap: 12px}
} @media (max-width: 480px){.blog-main-title{font-size: 1.6rem} .blog-body{font-size: 0.95rem} .featured-img{height: 200px} .blog-content-wrapper{padding: 0 10px}
} .blog-post{position: relative} .blog-post::after{content: '';position: fixed;bottom: 0;left: 0;height: 4px;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));transition: width 0.3s ease;z-index: 1000} .city-card img,
.destination-card img,
.blog-card img,
.story-card img,
.discovery-card img,
.city-image img,
.destination-image img,
.blog-image img,
.story-image img,
.featured-img,
.featured-image img,
.featured-image-wrapper img{width: 100% !important;height: 100% !important;object-fit: cover !important;object-position: center !important;display: block !important;opacity: 1 !important;visibility: visible !important;border: none !important;outline: none !important} .featured-image{width: 100%;margin: 20px 0;border-radius: 12px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1)} .featured-image img{width: 100% !important;height: 300px !important;object-fit: cover !important;display: block !important;opacity: 1 !important} @media (max-width: 768px){.about-approach{margin-bottom: 50px} .approach-grid{grid-template-columns: 1fr;gap: 25px;margin-top: 30px} .approach-item{padding: 25px 20px} .approach-icon{width: 60px;height: 60px;font-size: 1.5rem;margin-bottom: 20px} .approach-item h3{font-size: 1.2rem;margin-bottom: 15px} .about-mission{margin-bottom: 50px;padding: 40px 20px} .mission-content{grid-template-columns: 1fr;gap: 30px} .mission-text h2{font-size: 1.8rem;margin-bottom: 20px;text-align: center} .mission-image{order: -1} .about-why-choose{margin-bottom: 50px} .why-choose-grid{grid-template-columns: 1fr;gap: 25px;margin-top: 30px} .choice-item{padding: 25px 20px} .choice-icon{width: 55px;height: 55px;font-size: 1.4rem;margin-bottom: 15px} .choice-item h3{font-size: 1.2rem;margin-bottom: 12px} .about-stats{padding: 40px 20px;margin-bottom: 50px} .stats-grid{grid-template-columns: repeat(2, 1fr);gap: 25px;margin-top: 30px} .stat-item{padding: 20px 15px} .stat-number{font-size: 2.2rem} .stat-label{font-size: 1rem} .about-commitment{margin-bottom: 40px} .commitment-content h2{font-size: 1.8rem;margin-bottom: 30px} .commitment-grid{grid-template-columns: 1fr;gap: 20px} .commitment-item{padding: 20px} .commitment-item h3{font-size: 1.2rem;margin-bottom: 12px}
} @media (max-width: 480px){.about-mission{padding: 30px 15px} .about-stats{padding: 30px 15px} .stats-grid{grid-template-columns: 1fr;gap: 20px} .approach-item, .choice-item, .commitment-item{padding: 20px 15px} .mission-text h2, .commitment-content h2{font-size: 1.6rem}
} .destinations-stats{margin: 40px 0} .stats-grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;max-width: 600px;margin: 0 auto} .stat-item{text-align: center;padding: 25px;background: linear-gradient(135deg, rgba(0, 175, 135, 0.05) 0%, rgba(255, 107, 53, 0.05) 100%);border-radius: var(--border-radius);border: 1px solid rgba(0, 175, 135, 0.1);transition: var(--transition)} .stat-item:hover{transform: translateY(-5px);box-shadow: var(--shadow-medium)} .stat-number{font-size: 3rem;font-weight: 700;color: var(--primary-color);line-height: 1;margin-bottom: 8px;font-family: 'Montserrat', sans-serif} .stat-label{font-size: 1rem;color: var(--text-color);font-weight: 500;text-transform: uppercase;letter-spacing: 0.5px} .explore-header{text-align: center;max-width: 600px;margin: 60px auto 40px} .explore-header h2{font-size: 2.5rem;color: var(--text-color);margin-bottom: 15px;font-weight: 600} .explore-header p{font-size: 1.1rem;color: #6B7280;line-height: 1.6} .search-section{margin: 40px 0;display: flex;justify-content: center} .search-container{position: relative;width: 100%;max-width: 500px} .search-input{width: 100%;padding: 16px 50px 16px 20px;border: 2px solid #E5E7EB;border-radius: 50px;font-size: 16px;background: white;transition: var(--transition);box-shadow: var(--shadow-light)} .search-input:focus{outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(0, 175, 135, 0.1)} .search-icon{position: absolute;right: 20px;top: 50%;transform: translateY(-50%);color: #6B7280;font-size: 1.1rem;pointer-events: none} .continent-tabs{display: flex;justify-content: center;gap: 15px;margin: 40px 0;flex-wrap: wrap} .continent-tab{padding: 12px 24px;border: 2px solid #E5E7EB;background: white;color: var(--text-color);border-radius: 50px;font-weight: 500;cursor: pointer;transition: var(--transition);white-space: nowrap} .continent-tab:hover{border-color: var(--primary-color);color: var(--primary-color)} .continent-tab.active{background: var(--primary-color);color: white;border-color: var(--primary-color)} .destinations-grid{margin: 50px 0} .continent-section{margin-bottom: 70px;border-radius: 16px;background: linear-gradient(135deg, rgba(0, 175, 135, 0.02) 0%, rgba(255, 107, 53, 0.02) 100%);border: 1px solid rgba(0, 175, 135, 0.08);padding: 30px;transition: var(--transition);width: 100%} .continent-section:hover{border-color: rgba(0, 175, 135, 0.15);box-shadow: 0 8px 25px rgba(0, 175, 135, 0.08)} .continent-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;padding-bottom: 15px;border-bottom: 2px solid rgba(0, 175, 135, 0.1)} .continent-title{font-size: 2.2rem;color: var(--text-color);margin: 0;font-weight: 700;position: relative} .continent-count{font-size: 1rem;color: var(--primary-color);background: rgba(0, 175, 135, 0.1);padding: 8px 16px;border-radius: 25px;font-weight: 600;border: 1px solid rgba(0, 175, 135, 0.2)} .continent-cities{display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px} @media (min-width: 768px){.continent-cities{grid-template-columns: repeat(4, 1fr);gap: 20px}
} @keyframes fadeIn{from{opacity: 0;transform: translateY(10px)} to{opacity: 1;transform: translateY(0)}
} .filtered-section{margin-bottom: 50px} .filtered-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 40px;padding: 25px;background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);border-radius: 16px;color: white} .filtered-title{font-size: 2.5rem;margin: 0;font-weight: 700} .filtered-count{font-size: 1.1rem;background: rgba(255, 255, 255, 0.2);padding: 10px 20px;border-radius: 25px;font-weight: 600;backdrop-filter: blur(10px)} .filtered-cities{display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px} @media (min-width: 768px){.filtered-cities{grid-template-columns: repeat(4, 1fr);gap: 20px}
} .destination-card{position: relative;background: white;border: 1px solid #E5E7EB;border-radius: 12px;padding: 18px;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);cursor: pointer;overflow: hidden;height: 100%;display: flex;flex-direction: column;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);min-height: 200px;text-decoration: none;color: inherit} .destination-card:hover{transform: translateY(-8px);box-shadow: 0 12px 40px rgba(0, 175, 135, 0.15);border-color: var(--primary-color)} .destination-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));transform: scaleX(0);transition: transform 0.4s ease;border-radius: 16px 16px 0 0} .destination-card:hover::before{transform: scaleX(1)} .destination-flag{display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;border-radius: 50%;background: linear-gradient(135deg, rgba(0, 175, 135, 0.1) 0%, rgba(255, 107, 53, 0.1) 100%);margin-bottom: 15px;border: 2px solid rgba(0, 175, 135, 0.15);transition: var(--transition)} .destination-card:hover .destination-flag{background: linear-gradient(135deg, rgba(0, 175, 135, 0.15) 0%, rgba(255, 107, 53, 0.15) 100%);border-color: var(--primary-color);transform: scale(1.1)} .flag-emoji{font-size: 1.8rem;line-height: 1;filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))} .destination-info{margin-bottom: 15px;flex-grow: 1} .destination-name{font-size: 1.1rem;font-weight: 700;color: var(--text-color);margin-bottom: 6px;line-height: 1.3;font-family: 'Montserrat', sans-serif} .destination-country{font-size: 0.9rem;color: #6B7280;margin: 0;font-weight: 500} .destination-footer{display: flex;justify-content: flex-end;align-items: center;margin-top: auto;padding-top: 15px;border-top: 1px solid #F3F4F6} .destination-cta{display: flex;align-items: center;gap: 8px;color: var(--primary-color);font-weight: 600;font-size: 0.9rem;opacity: 0.8;transition: var(--transition);position: relative;z-index: 3;cursor: pointer} .destination-card:hover .destination-cta{opacity: 1;transform: translateX(3px)} .destination-cta i{font-size: 0.8rem;transition: var(--transition)} .destination-card:hover .destination-cta i{transform: translateX(2px)} .loading-state{text-align: center;padding: 60px 20px;color: #6B7280} .loading-spinner{margin-bottom: 20px} .loading-spinner i{font-size: 2rem;color: var(--primary-color)} .no-results{text-align: center;padding: 60px 20px;color: #6B7280} .no-results-icon{margin-bottom: 20px} .no-results-icon i{font-size: 3rem;color: #D1D5DB} .no-results h3{font-size: 1.3rem;color: var(--text-color);margin-bottom: 10px} .error-state{text-align: center;padding: 60px 20px;background: #FEF2F2;border: 1px solid #FECACA;border-radius: var(--border-radius);margin: 40px 0} .error-icon{margin-bottom: 20px} .error-icon i{font-size: 3rem;color: #EF4444} .error-state h3{color: #DC2626;margin-bottom: 10px} .error-state p{color: #7F1D1D} @media (max-width: 768px){.stats-grid{grid-template-columns: repeat(3, 1fr);gap: 15px} .stat-item{padding: 20px 15px} .stat-number{font-size: 2.2rem} .stat-label{font-size: 0.85rem} .explore-header h2{font-size: 2rem} .explore-header p{font-size: 1rem} .continent-tabs{gap: 10px} .continent-tab{padding: 10px 18px;font-size: 0.9rem} .destination-card{padding: 15px;min-height: 180px} .destination-flag{width: 45px;height: 45px;margin-bottom: 10px} .flag-emoji{font-size: 1.6rem} .destination-name{font-size: 1rem} .destination-country{font-size: 0.85rem} .continent-title{font-size: 1.6rem} .continent-section{padding: 20px;margin-bottom: 50px} .continent-header{flex-direction: column;align-items: flex-start;gap: 10px}
} @media (max-width: 480px){.stats-grid{grid-template-columns: 1fr;gap: 20px} .continent-cities, .filtered-cities{gap: 12px} .search-input{padding: 14px 45px 14px 18px;font-size: 15px} .search-icon{right: 18px;font-size: 1rem} .continent-tabs{flex-direction: row;justify-content: flex-start;gap: 8px;overflow-x: auto;-webkit-overflow-scrolling: touch;padding: 0 10px} .continent-tab{flex-shrink: 0;padding: 8px 16px;font-size: 0.85rem;min-width: fit-content} .destination-card{padding: 12px;min-height: 160px} .destination-name{font-size: 0.95rem} .destination-country{font-size: 0.8rem}
} .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}