/* Custom Barco Colors for Tailwind */
:root {
    --color-barco-main: #F00000; /* Barco Red */
    --color-barco-light-red-bg: #FFCCCC; /* Lighter shade for backgrounds/icons */
    --color-barco-button: #C00000
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Light gray background */
    color: #1e293b; /* Dark slate gray text */
}
.container {
    max-width: 1200px;
}
.btn-primary {
    /* Using custom colors for buttons */
    background-color: var(--color-barco-button);
    @apply text-white font-semibold py-3 px-8 rounded-full shadow-lg transition duration-300 ease-in-out;
}
.btn-primary:hover {
    background-color: var(--color-barco-light-red-bg); /* Slightly darker red for hover */
    transform: translateY(-2px); /* Subtle lift effect */
    color: var(--color-barco-main);
}

.section-heading {
    /* Made bigger and bolder */
    @apply text-5xl md:text-6xl font-black text-center mb-8; /* Increased size and boldness */
    color: var(--color-barco-main);
    margin-bottom: 20px;
}
.sub-heading {
    @apply text-3xl md:text-4xl font-bold mb-6;
    color: var(--color-barco-main);
}
.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;
}
.card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Enhanced shadow */
}
.faq-item {
    @apply bg-white rounded-lg shadow-sm p-5 mb-4 transition-all duration-300 ease-in-out;
    margin-bottom: 20px;
}
.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-barco-main);
	text-decoration: underline;
}

/* Specific coloring for benefit titles and icons */
.benefit-title {
    color: var(--color-barco-main);
}
.benefit-icon-bg {
    background-color: var(--color-barco-light-red-bg);
    transition: transform 0.3s ease-in-out;
}
.benefit-icon-bg:hover {
    transform: rotate(5deg) scale(1.1); /* Subtle rotation and scale on hover */
}

/* Image hover effect */
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 styles */
.lang-switcher-top {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    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);
    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-barco-main); /* 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;
}
.button-container {
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center;     /* Centers content vertically */
    //min-height: 100vh;       /* Ensures the container takes up at least the full viewport height */
    width: 100%;             /* Ensures the container takes full width */
    margin-top: 20px;
}

.download-button {
    /* Pill shape */
    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 */

    /* Colors and shadows */
    background-color: #ef4444; /* A nice red */
    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) */
}