/*
 * offerings.css
 * Styles specific to the offerings.html page.
 * This file should be linked after global.css in your offerings.html.
 */

/* ========================================= */
/* Offerings Hero Section */
/* ========================================= */

.offerings-hero-section {
    /* Tailwind already handles bg-blue-700, text-white, py-16, text-center, rounded-b-xl, shadow-lg */
    /* Add any custom background or overlay if desired */
}

/* ========================================= */
/* Category Cards (General for Services & Products) */
/* ========================================= */

.services-categories-overview .category-card,
.products-categories-overview .category-card {
    /* Tailwind handles bg-gray-50, p-6, rounded-lg, shadow-md, hover:shadow-xl, transition, duration-300, transform, hover:scale-105, flex, flex-col, items-center, text-center */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border for definition */
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* Stagger animation for category cards */
.services-categories-overview .category-card:nth-child(1) { animation-delay: 0.1s; }
.services-categories-overview .category-card:nth-child(2) { animation-delay: 0.2s; }
.services-categories-overview .category-card:nth-child(3) { animation-delay: 0.3s; }
.services-categories-overview .category-card:nth-child(4) { animation-delay: 0.4s; }

.products-categories-overview .category-card:nth-child(1) { animation-delay: 0.1s; }
.products-categories-overview .category-card:nth-child(2) { animation-delay: 0.2s; }
.products-categories-overview .category-card:nth-child(3) { animation-delay: 0.3s; }


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-icon {
    /* Tailwind handles text-color, text-5xl, mb-4 */
}

.category-title {
    /* Tailwind handles text-2xl, font-semibold, text-gray-900, mb-3 */
}

.category-description {
    /* Tailwind handles text-gray-700, leading-relaxed */
}


/* ========================================= */
/* Detailed Service Sections */
/* ========================================= */

.detailed-service-section {
    /* Tailwind handles bg-gray-100/bg-white, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
}

.detailed-service-section .section-title {
    /* Specific styling for the title within this section if different from global .section-title */
}

.service-detail-card {
    /* Tailwind handles bg-white/bg-gray-50, p-6, rounded-lg, shadow-md, hover:shadow-xl, transition, duration-300, transform, hover:scale-105, flex, flex-col, items-center, text-center */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border for definition */
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* Stagger animation for service detail cards within each section */
.detailed-service-section:nth-of-type(2) .service-detail-card:nth-child(1) { animation-delay: 0.1s; } /* Swimming Programs */
.detailed-service-section:nth-of-type(2) .service-detail-card:nth-child(2) { animation-delay: 0.2s; }
.detailed-service-section:nth-of-type(2) .service-detail-card:nth-child(3) { animation-delay: 0.3s; }
.detailed-service-section:nth-of-type(2) .service-detail-card:nth-child(4) { animation-delay: 0.4s; }
.detailed-service-section:nth-of-type(2) .service-detail-card:nth-child(5) { animation-delay: 0.5s; }

.detailed-service-section:nth-of-type(3) .service-detail-card:nth-child(1) { animation-delay: 0.1s; } /* Gym & Fitness */
.detailed-service-section:nth-of-type(3) .service-detail-card:nth-child(2) { animation-delay: 0.2s; }
.detailed-service-section:nth-of-type(3) .service-detail-card:nth-child(3) { animation-delay: 0.3s; }
.detailed-service-section:nth-of-type(3) .service-detail-card:nth-child(4) { animation-delay: 0.4s; }
.detailed-service-section:nth-of-type(3) .service-detail-card:nth-child(5) { animation-delay: 0.5s; }

.detailed-service-section:nth-of-type(4) .service-detail-card:nth-child(1) { animation-delay: 0.1s; } /* Wellness & Recovery */
.detailed-service-section:nth-of-type(4) .service-detail-card:nth-child(2) { animation-delay: 0.2s; }
.detailed-service-section:nth-of-type(4) .service-detail-card:nth-child(3) { animation-delay: 0.3s; }
.detailed-service-section:nth-of-type(4) .service-detail-card:nth-child(4) { animation-delay: 0.4s; }

.detailed-service-section:nth-of-type(5) .service-detail-card:nth-child(1) { animation-delay: 0.1s; } /* Online Programs & Guides */
.detailed-service-section:nth-of-type(5) .service-detail-card:nth-child(2) { animation-delay: 0.2s; }
.detailed-service-section:nth-of-type(5) .service-detail-card:nth-child(3) { animation-delay: 0.3s; }
.detailed-service-section:nth-of-type(5) .service-detail-card:nth-child(4) { animation-delay: 0.4s; }


.service-icon {
    /* Tailwind handles text-color, text-5xl, mb-4 */
}

.service-title {
    /* Tailwind handles text-2xl, font-semibold, text-gray-900, mb-3 */
}

.service-description {
    /* Tailwind handles text-gray-600, mb-4 */
}

.btn-primary {
    /* Tailwind handles px-6, py-3, bg-blue-600, text-white, font-semibold, rounded-lg, hover:bg-blue-700, transition, duration-300, shadow-md */
}

/* ========================================= */
/* Product Listings Section */
/* ========================================= */

.product-listings-section {
    /* Tailwind handles bg-white, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
}

.product-category-listing .category-heading {
    /* Tailwind handles text-3xl, font-bold, text-gray-800, mb-8, text-center, md:text-left */
    border-bottom: 2px solid #e2e8f0; /* Subtle line under category title */
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}

.product-grid-container {
    /* Tailwind handles overflow-x-auto, pb-4 */
    /* Add custom scrollbar styling if desired */
    /* For Webkit browsers (Chrome, Safari) */
    &::-webkit-scrollbar {
        height: 8px;
    }

    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

.product-card {
    /* Tailwind handles bg-gray-50, p-5, rounded-lg, shadow-md, hover:shadow-xl, transition, duration-300, transform, hover:scale-105, flex, flex-col, items-center, text-center, flex-shrink-0, w-64 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border for definition */
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* Stagger animation for product cards within each category */
.product-category-listing:nth-of-type(1) .product-card:nth-child(1) { animation-delay: 0.1s; } /* Apparel */
.product-category-listing:nth-of-type(1) .product-card:nth-child(2) { animation-delay: 0.2s; }
.product-category-listing:nth-of-type(1) .product-card:nth-child(3) { animation-delay: 0.3s; }
.product-category-listing:nth-of-type(1) .product-card:nth-child(4) { animation-delay: 0.4s; }
.product-category-listing:nth-of-type(1) .product-card:nth-child(5) { animation-delay: 0.5s; }

.product-category-listing:nth-of-type(2) .product-card:nth-child(1) { animation-delay: 0.6s; } /* Swim Gear */
.product-category-listing:nth-of-type(2) .product-card:nth-child(2) { animation-delay: 0.7s; }
.product-category-listing:nth-of-type(2) .product-card:nth-child(3) { animation-delay: 0.8s; }
.product-category-listing:nth-of-type(2) .product-card:nth-child(4) { animation-delay: 0.9s; }

.product-category-listing:nth-of-type(3) .product-card:nth-child(1) { animation-delay: 1.0s; } /* Training Aids */
.product-category-listing:nth-of-type(3) .product-card:nth-child(2) { animation-delay: 1.1s; }
.product-category-listing:nth-of-type(3) .product-card:nth-child(3) { animation-delay: 1.2s; }
.product-category-listing:nth-of-type(3) .product-card:nth-child(4) { animation-delay: 1.3s; }

.product-image {
    /* Tailwind handles w-full, h-48, object-cover, rounded-md, mb-4 */
}

.product-name {
    /* Tailwind handles text-xl, font-semibold, text-gray-900, mb-2 */
}

.product-price {
    /* Tailwind handles text-blue-600, font-bold, text-lg, mb-3 */
}

.product-description {
    /* Tailwind handles text-gray-600, text-sm, mb-4 */
}

.btn-add-to-cart {
    /* Tailwind handles px-5, py-2, bg-blue-600, text-white, rounded-lg, hover:bg-blue-700, transition, duration-300, font-semibold, shadow-md */
}

/* ========================================= */
/* Call to Action Section (offerings-cta-section) */
/* ========================================= */

.offerings-cta-section {
    /* Tailwind handles bg-blue-600, text-white, text-center, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
}

.offerings-cta-section .btn-contact-bulk {
    /* Tailwind handles inline-block, px-8, py-4, bg-white, text-blue-700, text-xl, font-bold, rounded-full, shadow-lg, hover:bg-gray-200, transform, hover:scale-105, transition, duration-300, ease-in-out */
}