/* Define custom colors */
:root {
    --ame-blue: #2563eb; /* A bit darker, closer to common blue in Tailwind for gradients */
    --ame-orange: #f97316; /* Tailwind orange-500 */
    --purple-400: #a78bfa; /* Tailwind purple-400 */
    --purple-600: #7c3aed; /* Tailwind purple-600 */
    --blue-400: #60a5fa; /* Tailwind blue-400 */
    --blue-600: #2563eb; /* Tailwind blue-600 */
    --green-400: #4ade80; /* Tailwind green-400 */
    --green-600: #16a34a; /* Tailwind green-600 */
    --pink-400: #f472b6; /* Tailwind pink-400 */
    --pink-600: #db2777; /* Tailwind pink-600 */
    /* Neutral colors for light mode */
    --bs-body-bg: #f8f9fa; /* bg-gray-50 */
    --bs-body-color: #212529; /* text-gray-900 */
    --bs-card-bg: #ffffff; /* bg-white */
    --bs-border-color: #e2e8f0; /* border-gray-200 */
    --bs-heading-color: #1a202c; /* text-gray-900 */
    --bs-text-muted: #6b7280; /* text-gray-600 */
    --bs-gray-100: #f3f4f6; /* bg-gray-100 */
    --bs-gray-50: #f9fafb; /* bg-gray-50 */
    --bs-gray-200: #e5e7eb; /* border-gray-200 / group-hover:border-gray-200 */
}

/* Dark mode variables */
html[data-bs-theme="dark"] {
    --bs-body-bg: #1f2937; /* dark:bg-gray-900 or dark:bg-gray-800 */
    --bs-body-color: #f3f4f6; /* dark:text-gray-100 */
    --bs-card-bg: #1f2937; /* dark:bg-gray-800 or dark:bg-gray-900 for inner elements */
    --bs-border-color: #374151; /* dark:border-gray-700 */
    --bs-heading-color: #f3f4f6; /* dark:text-white */
    --bs-text-muted: #9ca3af; /* dark:text-gray-300 */
    --bs-gray-700: #374151; /* dark:bg-gray-700 */
    --bs-gray-800: #1f2937; /* dark:from-gray-800 */
    --bs-gray-600: #4b5563; /* dark:group-hover:border-gray-600 */
}

/* Helper for Tailwind's line-clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Common Transitions */
.transition-all-300 {
    transition: all 0.3s ease-out;
}

.transition-all-400 {
    transition: all 0.4s ease-out;
}

.transition-opacity-500 {
    transition: opacity 0.5s ease-out;
}

.transition-transform-500 {
    transition: transform 0.5s ease-out;
}

.transition-colors-300 {
    transition: color 0.3s ease-out;
}

/* Card container and sticky behavior */
.custom-col-span {
    /* This mimics lg:col-span-1 for a grid. In a full Bootstrap grid,
       you'd use a col class like .col-lg-4, and this wrapper
       would just adjust inner content if needed. */
}

.sticky-top-8 {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 2rem; /* top-8 (8 * 0.25rem = 2rem) */
}

/* Main Card Styles */
.main-card {
    border: 1px solid var(--bs-border-color); /* border border-gray-200 dark:border-gray-700 */
    border-radius: 0.75rem; /* rounded-lg, slightly more than 0.5rem for better visual */
    overflow: hidden;
    background-color: var(--bs-card-bg); /* bg-white dark:bg-gray-800 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
}

/* Card Header Section */
.card-header-main {
    background: linear-gradient(to right, var(--ame-blue), var(--ame-orange)); /* bg-gradient-to-r from-ame-blue to-ame-orange */
    color: white;
    padding: 1.5rem; /* p-4, increased for better look */
    position: relative;
    overflow: hidden;
}

.header-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.1; /* opacity-10 */
    transition: opacity 0.5s ease-out;
}

.card-header-main:hover .header-overlay {
    opacity: 0.2; /* hover:opacity-20 */
}

.header-circle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8); /* Adjusted for better visibility */
    border-radius: 9999px; /* rounded-full */
    transition: transform 0.5s ease-out;
}

    .header-circle.top-right {
        top: 0;
        right: 0;
        width: 6rem; /* w-24 */
        height: 6rem; /* h-24 */
        transform: translateY(-3rem) translateX(3rem); /* -translate-y-12 translate-x-12 */
    }

.card-header-main:hover .header-circle.top-right {
    transform: translateY(-3rem) translateX(3rem) scale(1.1); /* hover:scale-110 */
}

.header-circle.bottom-left {
    bottom: 0;
    left: 0;
    width: 5rem; /* w-20 */
    height: 5rem; /* h-20 */
    transform: translateY(2.5rem) translateX(-2.5rem); /* translate-y-10 -translate-x-10 */
}

.card-header-main:hover .header-circle.bottom-left {
    transform: translateY(2.5rem) translateX(-2.5rem) scale(1.1); /* hover:scale-110 */
}

.header-content-wrapper {
    position: relative;
    z-index: 10;
}

.header-icon-box {
    padding: 0.65rem; /* p-2, slightly larger */
    background-color: rgba(255, 255, 255, 0.25); /* bg-white/20, slightly more opaque */
    border-radius: 0.65rem; /* rounded-lg */
    backdrop-filter: blur(5px); /* backdrop-blur-sm, slightly more blur */
    transition: all 0.3s ease-out;
}

    .header-icon-box:hover {
        background-color: rgba(255, 255, 255, 0.4); /* hover:bg-white/30 */
        transform: scale(1.15); /* hover:scale-110, slightly more aggressive */
    }

.header-icon {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    transition: transform 0.3s ease-out;
}

.header-title {
    font-size: 1.125rem; /* text-base, slightly larger for prominence */
    font-weight: 700; /* font-bold */
    letter-spacing: 0.03em; /* tracking-wide, slightly more */
    transition: all 0.3s ease-out;
}

.header-subtitle {
    color: rgba(255, 255, 255, 0.95); /* text-white/90 */
    font-size: 0.8125rem; /* text-xs, slightly larger */
    transition: color 0.3s ease-out;
}

/* Card Body - Trend Items */
.card-body-trends {
    padding: 1.5rem; /* p-5 */
}

.trend-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* space-y-3 */
}

.trend-item-wrapper {
    position: relative;
    cursor: pointer;
}

.trend-item-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    border-radius: 0.65rem; /* rounded-lg, slightly more for visual consistency */
    transition: opacity 0.4s ease-out;
}

.trend-item-wrapper:hover .trend-item-overlay {
    opacity: 0.08; /* group-hover:opacity-8 */
}

/* Specific item gradients for icon background and overlay */
.item-ai .trend-item-overlay {
    background: linear-gradient(to right, var(--purple-400), var(--purple-600));
}

.item-ai .item-icon-bg {
    background: linear-gradient(to right, var(--purple-400), var(--purple-600));
}

.item-voice .trend-item-overlay {
    background: linear-gradient(to right, var(--blue-400), var(--blue-600));
}

.item-voice .item-icon-bg {
    background: linear-gradient(to right, var(--blue-400), var(--blue-600));
}

.item-sustainable .trend-item-overlay {
    background: linear-gradient(to right, var(--green-400), var(--green-600));
}

.item-sustainable .item-icon-bg {
    background: linear-gradient(to right, var(--green-400), var(--green-600));
}

.item-micro-influencer .trend-item-overlay {
    background: linear-gradient(to right, var(--pink-400), var(--pink-600));
}

.item-micro-influencer .item-icon-bg {
    background: linear-gradient(to right, var(--pink-400), var(--pink-600));
}


.trend-item-content-card {
    position: relative;
    padding: 0.9rem; /* p-3, slightly more for internal spacing */
    border-radius: 0.65rem; /* rounded-lg, consistent with overlay */
    border: 1px solid var(--bs-border-color); /* border border-gray-100 dark:border-gray-700 */
    transition: all 0.4s ease-out;
    background-color: var(--bs-card-bg); /* Default background */
}

.trend-item-wrapper:hover .trend-item-content-card {
    border-color: var(--bs-gray-200); /* group-hover:border-gray-200 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* group-hover:shadow-xl */
    transform: translateY(-0.25rem); /* group-hover:-translate-y-1 */
    background-color: rgba(249, 250, 251, 0.85); /* group-hover:bg-gray-50/80, slightly more opaque */
}

html[data-bs-theme="dark"] .trend-item-wrapper:hover .trend-item-content-card {
    border-color: var(--bs-gray-600); /* dark:group-hover:border-gray-600 */
    background-color: rgba(31, 41, 55, 0.85); /* dark:group-hover:bg-gray-700/80, slightly more opaque */
}

.item-icon-bg {
    padding: 0.65rem; /* p-2, consistent with header icon */
    border-radius: 0.65rem; /* rounded-lg */
    color: white;
    flex-shrink: 0;
    transition: all 0.4s ease-out;
}

.trend-item-wrapper:hover .item-icon-bg {
    transform: scale(1.15); /* group-hover:scale-110, slightly more aggressive */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* group-hover:shadow-xl */
}

.item-title {
    font-weight: 600; /* font-semibold */
    color: var(--bs-heading-color);
    font-size: 0.9375rem; /* text-sm, slightly larger */
    transition: all 0.3s ease-out;
}

.trend-item-wrapper:hover .item-title {
    color: var(--ame-blue); /* group-hover:text-ame-blue */
}

.item-percentage {
    font-size: 0.75rem; /* text-xs */
    font-weight: 500;
    color: #15803d; /* text-green-600, slightly darker */
    background-color: #dcfce7; /* bg-green-100, slightly darker */
    padding: 0.1875rem 0.625rem; /* px-2 py-1 */
    border-radius: 9999px; /* rounded-full */
    transition: all 0.3s ease-out;
}

.trend-item-wrapper:hover .item-percentage {
    background-color: #bbf7d0; /* group-hover:bg-green-200 */
    transform: scale(1.1); /* group-hover:scale-105, slightly more */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* group-hover:shadow-md */
}

.item-description {
    font-size: 0.75rem; /* text-xs */
    color: var(--bs-text-muted);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease-out;
}

.trend-item-wrapper:hover .item-description {
    color: #4b5563; /* group-hover:text-gray-700 */
}

html[data-bs-theme="dark"] .trend-item-wrapper:hover .item-description {
    color: #e5e7eb; /* dark:group-hover:text-gray-200 */
}

.item-category {
    font-size: 0.75rem;
    color: var(--ame-blue);
    font-weight: 500;
    transition: all 0.3s ease-out;
}

.trend-item-wrapper:hover .item-category {
    color: var(--ame-orange); /* group-hover:text-ame-orange */
}

/* Collapsible Content */
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, margin-top 0.5s ease-out;
}

.trend-item-wrapper.active .collapsible-content {
    max-height: 150px; /* Adjusted to accommodate more text if needed */
    opacity: 1;
    margin-top: 0.75rem; /* mt-3 */
}

.collapsible-content-inner {
    padding-top: 0.75rem; /* pt-3 */
    border-top: 1px solid var(--bs-border-color); /* border-t border-gray-200 dark:border-gray-700 */
    transition: border-color 0.3s ease-out;
}

.collapsible-content p {
    font-size: 0.75rem;
    color: #374151; /* text-gray-700 */
    line-height: 1.6; /* leading-relaxed, slightly more line height */
    transition: color 0.3s ease-out;
}

html[data-bs-theme="dark"] .collapsible-content p {
    color: #d1d5db; /* dark:text-gray-300 */
}

.sparkles-icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--ame-orange);
    transition: transform 0.3s ease-out;
}

.trend-item-wrapper:hover .sparkles-icon {
    transform: scale(1.15); /* group-hover:scale-110 */
}

.trend-tag {
    font-size: 0.75rem;
    color: var(--ame-orange);
    font-weight: 500;
    transition: all 0.3s ease-out;
}

/* Call to Action Section */
.cta-section {
    border-top: 1px solid var(--bs-border-color); /* border-t border-gray-200 dark:border-gray-700 */
    padding: 1.5rem; /* p-5 */
    background: linear-gradient(to bottom right, var(--bs-gray-50), var(--bs-gray-100)); /* bg-gradient-to-br from-gray-50 to-gray-100 */
    transition: all 0.5s ease-out;
}

html[data-bs-theme="dark"] .cta-section {
    background: linear-gradient(to bottom right, var(--bs-gray-800), var(--bs-gray-700)); /* dark:from-gray-800 dark:to-gray-700 */
}

.cta-section:hover {
    background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.05), rgba(249, 115, 22, 0.05)); /* hover:from-ame-blue/5 hover:to-ame-orange/5 */
}

.cta-icon-wrapper {
    width: 2.75rem; /* w-10, slightly larger */
    height: 2.75rem; /* h-10 */
    background-color: rgba(37, 99, 235, 0.15); /* bg-ame-blue/10, slightly more opaque */
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem; /* mx-auto mb-3 */
    transition: all 0.4s ease-out;
}

    .cta-icon-wrapper:hover {
        background-color: rgba(37, 99, 235, 0.25); /* hover:bg-ame-blue/20 */
        transform: scale(1.15); /* hover:scale-110 */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
    }

.cta-icon {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    color: var(--ame-blue);
    transition: transform 0.3s ease-out;
}

.cta-icon-wrapper:hover .cta-icon {
    transform: scale(1.15); /* hover:scale-110 */
}

.cta-title {
    font-weight: 600;
    color: var(--bs-heading-color);
    margin-bottom: 0.5rem;
    font-size: 0.9375rem; /* text-sm */
    transition: color 0.3s ease-out;
}

.cta-description {
    font-size: 0.75rem;
    color: var(--bs-text-muted);
    margin-bottom: 1rem;
    transition: color 0.3s ease-out;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* w-full */
    background-color: var(--ame-blue);
    color: white;
    font-size: 0.8125rem; /* text-xs, slightly larger */
    font-weight: 500;
    padding: 0.75rem 1.25rem; /* py-2.5 px-4, slightly more padding */
    border-radius: 0.65rem; /* rounded-lg, consistent */
    text-decoration: none;
    transition: all 0.4s ease-out;
    border: none; /* Ensure no default button border */
}

    .cta-button:hover {
        background-color: var(--ame-orange); /* hover:bg-ame-orange */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-xl */
        transform: scale(1.03) translateY(-0.15rem); /* hover:scale-105 hover:-translate-y-1, slightly less aggressive for a smoother feel */
        color: white;
    }

.cta-button-icon {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 0.3s ease-out;
}

.cta-button:hover .cta-button-icon {
    transform: scale(1.15); /* hover:scale-110 */
}
/* Section styles */
.section-py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Container styles */
.container-mx-auto-px-4 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Max width for container */
.max-w-4xl-mx-auto {
    max-width: 56rem; /* Equivalent to 4xl in Tailwind */
    margin-left: auto;
    margin-right: auto;
}

/* Grid styles */
.grid-cols-1-md-grid-cols-3-gap-8 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
}

@media (min-width: 768px) { /* md breakpoint */
    .grid-cols-1-md-grid-cols-3-gap-8 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Card styles */
.card {
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    align-items:center;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* border-gray-200 */
    color: #1f2937; /* text-ame-dark */
}

/* Dark mode card styles */
@media (prefers-color-scheme: dark) {
    .card {
        border-color: #4a556833; /* border-gray-700 */
        color: #ffffff; /* dark:text-white */
    }
}

/* Icon container styles */
.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
    border-radius: 9999px; /* rounded-full */
    margin-bottom: 1rem; /* mb-4 */
}

/* Specific icon container background colors */
.icon-container.blue-bg {
    background-color: rgba(59, 130, 246, 0.1); /* bg-ame-blue/10 */
}

.icon-container.orange-bg {
    background-color: rgba(249, 115, 22, 0.1); /* bg-ame-orange/10 */
}

.icon-container.green-bg {
    background-color: #d1fae5; /* bg-green-100 */
}

/* SVG icon styles */
.icon-container svg {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
}

/* Specific SVG icon colors */
.icon-container.blue-bg svg {
    color: #3b82f6; /* text-ame-blue */
}

.icon-container.orange-bg svg {
    color: #f97316; /* text-ame-orange */
}

.icon-container.green-bg svg {
    color: #059669; /* text-green-600 */
}

/* Heading (h3) styles */
h3.card-title {
    font-size: 1.5rem; /* text-2xl */
    line-height: 2rem;
    font-weight: 700; /* font-bold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #1f2937; /* text-ame-dark */
}



/* Paragraph (p) styles */
p.card-description {
    color: #4b5563; /* text-gray-600 */
}

/* Dark mode paragraph (p) styles */
@media (prefers-color-scheme: dark) {
    p.card-description {
        color: #d1d5db; /* dark:text-gray-300 */
    }
}