/* Combined and Optimized CSS */

/* Custom Analog Way Colors for Tailwind */
:root {
    --color-analog-way-dark-blue: #0A233D; /* Dark Blue */
    --color-analog-way-orange-accent: #FF6600; /* Vibrant Orange Accent */
    --color-analog-way-light-orange-bg: #FFEDCC; /* Lighter shade for backgrounds/icons */
    --color-analog-way-orange: #FF8C00; /* Another orange variable, keeping both for now */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Light gray background */
    color: #1e293b; /* Dark slate gray text */
}

.container {
    max-width: 1200px;
}

/* Buttons */
.btn-primary {
    background-color: var(--color-analog-way-orange-accent); /* Using custom colors for buttons */
    @apply text-white font-semibold py-3 px-8 rounded-full shadow-lg transition duration-300 ease-in-out;
}

.btn-primary:hover {
    background-color: #CC5200; /* Slightly darker orange for hover */
    transform: translateY(-2px); /* Subtle lift effect */
}

/* Headings */
.section-heading {
    @apply text-5xl md:text-6xl font-black text-center mb-8; /* Increased size and boldness */
    color: var(--color-analog-way-orange-accent); /* Priority given to the first definition's color */
    margin-bottom: 20px; /* Specific pixel value overrides mb-8 if it's based on rem */
}

.sub-heading {
    @apply text-4xl md:text-5xl font-bold text-center mb-6; /* Increased size, kept bold, added text-center */
    color: var(--color-analog-way-orange-accent); /* Priority given to the first definition's color */
}

/* Cards */
.card {
    @apply bg-white rounded-xl shadow-lg p-6 lg:p-8 transition-all duration-300 ease-in-out; /* Added transition for hover */
    padding: 10px; /* This specific value will override padding from @apply if smaller */
}

.card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Enhanced shadow */
}

/* FAQ */
.faq-item {
    @apply bg-white rounded-lg shadow-sm p-5 mb-4 transition-all duration-300 ease-in-out;
    margin-bottom: 20px; /* This specific value will override mb-4 if smaller */
}

.faq-item:hover {
    transform: scale(1.01); /* Subtle scale on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.faq-item a {
    color: var(--color-analog-way-orange-accent);
    text-decoration: underline;
}

/* Benefits */
.benefit-title {
    color: var(--color-analog-way-dark-blue);
}

.benefit-icon-bg {
    background-color: var(--color-analog-way-light-orange-bg);
    transition: transform 0.3s ease-in-out;
}

.benefit-icon-bg:hover {
    transform: rotate(5deg) scale(1.1); /* Subtle rotation and scale on hover */
}

/* Images */
img {
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

img:hover {
    filter: brightness(1.05); /* Slightly brighter on hover */
}

/* Language Switcher */
.lang-switcher-top {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 50; /* Higher z-index takes precedence */
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .lang-switcher-top {
        margin-top: 5.5rem;
    }
}

.lang-switcher-top button,
.lang-switcher-top a {
    background-color: rgba(255, 255, 255, 0.9); /* Preference to the more specific white rgba */
    border-radius: 9999px; /* Fully rounded */
    padding: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent; /* Default border */
    display: flex; /* To center emoji */
    align-items: center; /* To center emoji */
    justify-content: center; /* To center emoji */
}

.lang-switcher-top button:hover,
.lang-switcher-top a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.lang-switcher-top button.active,
.lang-switcher-top a.active {
    border-color: var(--color-analog-way-orange-accent); /* Highlight active language */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

.lang-switcher-top button span,
.lang-switcher-top a span {
    font-size: 1.5rem; /* Emoji size */
    line-height: 1;
}

/* Download Button */
.button-container {
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    width: 100%; /* Ensures the container takes full width */
    margin-top: 20px;
}

.download-button {
    border-radius: 9999px; /* Fully rounded */
    padding: 0.75rem 1.5rem; /* Adjust padding for desired size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Space between icon and text */
    background-color: #ef4444; /* A nice red, preference to the more specific color */
    color: #ffffff; /* White text */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Soft shadow */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Smooth transitions */
    text-decoration: none; /* Remove underline for links */
    font-weight: 500; /* Medium font weight */
    font-size: 1rem; /* Base font size */
    cursor: pointer;
    outline: none; /* Remove outline on focus */
    border: none; /* No default border */
}

.download-button:hover {
    background-color: #dc2626; /* Darker red on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.download-button:active {
    background-color: #b91c1c; /* Even darker red on click */
    transform: translateY(0); /* Return to original position */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Smaller shadow on click */
}

.download-button svg {
    width: 1.25rem; /* Icon size */
    height: 1.25rem; /* Icon size */
    fill: currentColor; /* Inherit color from parent (white) */
}

/* Scrollable Content */
.scrollable-content {
    max-height: 25rem; /* Approximate height to show about 10 cities */
    overflow: hidden; /* Hide scrollbar, JavaScript handles scrolling */
    position: relative; /* Needed for absolute positioning of cloned content */
    padding-bottom: 1rem; /* Space at the bottom */
    cursor: grab; /* Default cursor for draggable content */
}

/* Ensure smooth scrolling for the animated part */
.scroll-animation-container {
    will-change: transform; /* Optimize for animation */
}

/* Links within large text */
.text-lg a {
    color: var(--color-analog-way-orange-accent) !important;
    text-decoration: underline !important;
}

/* Image Grid */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.image-grid img {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}