/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background-color: #ffffff; /* White */
    margin: 0;
    font-family: sans-serif; /* You might want a specific font */
}

/* Header */
.main-header {
    background-color: #ffffff; /* White */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-container {
    max-width: 1280px; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    height: 4rem; /* h-16 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo-group {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
}

.brand-icon {
    height: 2rem; /* h-8 */
    width: 2rem; /* w-8 */
    color: #8b5cf6; /* text-purple-600 */
}

.brand-name {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-900 */
}

.main-nav {
    display: none; /* hidden */
    gap: 2rem; /* space-x-8 */
}

@media (min-width: 768px) { /* md:flex */
    .main-nav {
        display: flex;
    }
}

.nav-link {
    color: #4b5563; /* text-gray-700 */
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms; /* transition-colors */
}

    .nav-link:hover {
        color: #8b5cf6; /* hover:text-purple-600 */
    }

.auth-buttons {
    display: flex;
    align-items: center;
    gap: 1rem; /* space-x-4 */
}

.signin-btn {
    color: white; /* text-gray-700 */
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms; /* transition-colors */
}

    .signin-btn:hover {
        color: white; /* hover:text-purple-600 */
    }

.get-started-btn {
    background-color: #8b5cf6; /* bg-purple-600 */
    color: #fff;
    padding: 0.5rem 1rem; /* px-4 py-2 equivalent */
    border-radius: 0.5rem; /* rounded-lg equivalent */
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    text-decoration: none; /* For link-styled buttons */
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; /* transition-colors transform */
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow */
}

    .get-started-btn:hover {
        background-color: #7c3aed; /* hover:bg-purple-700 */
        transform: scale(1.02); /* slight scale on hover */
    }


/* Hero Section */
.hero-section {
    position: relative;
    background: linear-gradient(to bottom right, #f5f3ff, #e0e7ff); /* from-purple-50 to-indigo-100 */
    padding-top: 5rem; /* py-20 */
    padding-bottom: 5rem; /* py-20 */
}

.hero-content-grid {
    display: grid;
    grid-template-columns: 1fr; /* grid-cols-1 */
    gap: 3rem; /* gap-12 */
    align-items: center;
    max-width: 1280px; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

@media (min-width: 1024px) { /* lg:grid-cols-2 */
    .hero-content-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.hero-text-group {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* space-y-8 */
}

.hero-headline-group {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}

.hero-headline {
    font-size: 3rem; /* text-5xl */
    line-height: 1.2; /* leading-tight */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-900 */
}

@media (min-width: 1024px) { /* lg:text-6xl */
    .hero-headline {
        font-size: 3.75rem;
    }
}

.hero-headline-accent {
    color: #8b5cf6; /* text-purple-600 */
    display: block;
}

.hero-description {
    font-size: 1.25rem; /* text-xl */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.625; /* leading-relaxed */
}

.hero-buttons {
    display: flex;
    flex-direction: column; /* flex-col */
    gap: 1rem; /* gap-4 */
}

@media (min-width: 640px) { /* sm:flex-row */
    .hero-buttons {
        flex-direction: row;
    }
}

.btn-primary-hero {
    background-color: #8b5cf6; /* bg-purple-600 */
    color: #ffffff; /* text-white */
    padding: 1rem 2rem; /* px-8 py-4 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    border: 2px solid #8b5cf6; /* Add border to maintain button size */
    transition-property: background-color, color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms; /* transition-colors */
    text-decoration: none; /* Ensure no underline for links */
    text-align: center; /* Center text */
    display: inline-block;
}

    .btn-primary-hero:hover {
        background-color: #ffffff; /* hover:bg-white */
        color: #8b5cf6; /* hover:text-purple-600 */
    }

.btn-secondary-hero {
    border: 2px solid #8b5cf6; /* border-2 border-purple-600 */
    color: #8b5cf6; /* text-purple-600 */
    padding: 1rem 2rem; /* px-8 py-4 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    transition-property: background-color, color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms; /* transition-colors */
    text-decoration: none;
    text-align: center; /* Center text */
    display: inline-block;
}

    .btn-secondary-hero:hover {
        background-color: #8b5cf6; /* hover:bg-purple-600 */
        color: #ffffff; /* hover:text-white */
    }

.hero-features {
    display: flex;
    align-items: center;
    gap: 2rem; /* space-x-8 */
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
}

.feature-icon {
    height: 1.25rem; /* h-5 */
    width: 1.25rem; /* w-5 */
    color: #22c55e; /* text-green-500 */
}

.hero-image-card {
    background-color: #ffffff; /* bg-white */
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    padding: 2rem; /* p-8 */
    transform: rotate(3deg); /* transform rotate-3 */
    transition: transform 300ms ease-in-out; /* transition-transform duration-300 */
}

    .hero-image-card:hover {
        transform: rotate(0deg); /* hover:rotate-0 */
    }

.hero-image {
    width: 100%; /* w-full */
    height: 24rem; /* h-96 */
    object-fit: cover;
    border-radius: 0.5rem; /* rounded-lg */
}

.hero-image-details {
    margin-top: 1rem; /* mt-4 */
    text-align: center;
}

.hero-image-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-900 */
}

.hero-image-price {
    color: #8b5cf6; /* text-purple-600 */
    font-weight: 700; /* font-bold */
    font-size: 1.125rem; /* text-lg */
}

/* Browse Categories Section */
.categories-section {
    padding-top: 5rem; /* py-20 */
    padding-bottom: 5rem; /* py-20 */
    background-color: #f9fafb; /* bg-gray-50 */
}

.section-header {
    text-align: center;
    margin-bottom: 4rem; /* mb-16 */
}

.section-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-900 */
    margin-bottom: 1rem; /* mb-4 */
}

.section-subtitle {
    font-size: 1.25rem; /* text-xl */
    color: #4b5563; /* text-gray-600 */
}

.categories-grid {
    display: grid;
    /* Auto-fit columns based on available space and number of categories */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem; /* gap-6 */
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .categories-grid {
        /* Minimum 2 columns on mobile */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (min-width: 1024px) {
    .categories-grid {
        /* Maximum 6 columns on large screens */
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        max-width: 100%;
    }
}

.category-item {
    cursor: pointer;
}

.category-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem; /* rounded-xl */
    background-color: #f8f9fa; /* Light background for padding */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* shadow-lg */
    transition: box-shadow 300ms ease-in-out; /* transition-shadow duration-300 */
    aspect-ratio: 3/4; /* Maintain consistent aspect ratio */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .category-card:hover {
        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 */
    }

.category-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Show full image without cropping */
    object-position: center;
    transition: transform 300ms ease-in-out;
}

.category-item:hover .category-image {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); /* bg-gradient-to-t from-black/60 to-transparent */
}

.category-info {
    position: absolute;
    bottom: 1rem; /* bottom-4 */
    left: 1rem; /* left-4 */
    color: #ffffff; /* text-white */
}

.category-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* font-bold */
}

.category-count {
    font-size: 0.875rem; /* text-sm */
    opacity: 0.9;
}

/* Common Styles (for sections like Most Popular Rentals, etc.) */
.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.max-width-container {
    max-width: 1280px; /* hoặc một giá trị khác phù hợp với thiết kế của bạn */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Khoảng cách từ mép cho nội dung bên trong */
    padding-right: 1rem; /* Khoảng cách từ mép cho nội dung bên trong */
}

/* Specific elements for Top Rented Outfits */
.rental-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .rental-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .rental-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.rental-item-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    transition: box-shadow 300ms ease-in-out;
    overflow: hidden;
    cursor: pointer;
}

    .rental-item-card:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

.rental-image-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20rem;
}

.rental-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mobile: show full image */
    object-position: center;
    transition: transform 300ms ease-in-out;
}

.rental-item-card:hover .rental-image {
    transform: scale(1.05);
}

/* Desktop: Use object-cover for better card appearance */
@media (min-width: 768px) {
    .rental-image {
        object-fit: cover;
    }
}

.fav-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 9999px; /* full circle */
    transition: background-color 150ms ease-in-out;
}

    .fav-button:hover {
        background-color: #ffffff;
    }

.fav-icon {
    height: 1.25rem;
    width: 1.25rem;
    color: #4b5563;
}

    .fav-icon:hover {
        color: #ef4444; /* red-500 */
    }

.rental-details {
    padding: 1.5rem;
}

.rental-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.rental-price-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.rental-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: #8b5cf6;
    white-space: pre-line;
}

.rental-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.star-icon {
    height: 1rem;
    width: 1rem;
    fill: #facc15; /* yellow-400 */
    color: #facc15; /* yellow-400 */
}

.rating-text {
    font-size: 0.875rem;
    color: #4b5563;
}

.rented-times {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Why Rent Section */
.why-rent-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: linear-gradient(to right, #7c3aed, #6366f1); /* from-purple-600 to-indigo-600 */
    color: #ffffff;
}

/* Section title and subtitle for white text (used in why-rent-section) */
.section-title-white {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    color: #ffffff; /* white text */
    margin-bottom: 1rem; /* mb-4 */
}

.section-subtitle-white {
    font-size: 1.25rem; /* text-xl */
    color: #ffffff; /* white text */
}

.why-rent-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .why-rent-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.benefit-item {
    text-align: center;
}

.benefit-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    margin-bottom: 1.5rem;
    transition: background-color 150ms ease-in-out;
}

.benefit-item:hover .benefit-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.2);
}

.benefit-icon {
    height: 3rem;
    width: 3rem;
}

.benefit-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.benefit-description {
    font-size: 1.125rem;
    opacity: 0.9;
    line-height: 1.625;
}

/* How It Works Section */
.how-it-works-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.how-it-works-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .how-it-works-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.step-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    transition: box-shadow 300ms ease-in-out;
    text-align: center;
}

    .step-card:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

.step-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background-color: #f3e8ff; /* purple-100 */
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.step-icon {
    height: 2rem;
    width: 2rem;
}

.step-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: #8b5cf6;
    margin-bottom: 0.5rem;
}

.step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

.step-description {
    color: #4b5563;
    line-height: 1.625;
}

.step-arrow-right {
    display: none;
    position: absolute;
    top: 50%;
    right: -1rem;
    transform: translateY(-50%);
}

@media (min-width: 768px) {
    .step-arrow-right {
        display: block;
    }
}

.step-arrow-icon {
    height: 2rem;
    width: 2rem;
    color: #d8b4fe; /* purple-300 */
}

/* Customer Testimonials Section */
.testimonials-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #f9fafb;
}

/* Section title and subtitle for dark text (used in testimonials-section) */
.section-title-dark {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-900 - dark text */
    margin-bottom: 1rem; /* mb-4 */
}

.section-subtitle-dark {
    font-size: 1.25rem; /* text-xl */
    color: #4b5563; /* text-gray-600 - medium gray text */
}

.testimonial-slider-wrapper {
    position: relative;
    max-width: 896px; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.testimonial-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    padding: 2rem 3rem; /* p-8 md:p-12 */
    text-align: center;
}

.testimonial-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 9999px; /* rounded-full */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    object-fit: cover;
}

.testimonial-stars {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.testimonial-star-icon {
    height: 1.5rem;
    width: 1.5rem;
    fill: #facc15; /* yellow-400 */
    color: #facc15; /* yellow-400 */
}

.testimonial-text {
    font-size: 1.25rem;
    color: #374151; /* gray-700 */
    margin-bottom: 1.5rem;
    line-height: 1.625;
}

.testimonial-author {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
}

.slider-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem;
    background-color: #ffffff;
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    transition: box-shadow 150ms ease-in-out;
}

    .slider-nav-button:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

#prev-testimonial {
    left: 1rem;
}

#next-testimonial {
    right: 1rem;
}

.slider-nav-icon {
    height: 1.5rem;
    width: 1.5rem;
    color: #4b5563;
}

.testimonial-dots-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: 0.5rem;
}

.testimonial-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    transition: background-color 150ms ease-in-out;
}

    .testimonial-dot.active {
        background-color: #8b5cf6;
    }

    .testimonial-dot:not(.active) {
        background-color: #d1d5db; /* gray-300 */
    }

/* Special Offer Banner */
.offer-banner {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: linear-gradient(to right, #10b981, #14b8a6); /* from-emerald-500 to-teal-600 */
    color: #ffffff;
    text-align: center;
}

.offer-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .offer-title {
        font-size: 3rem;
    }
}

.offer-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.offer-description {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.8;
}

.offer-button {
    background-color: #ffffff;
    color: #10b981; /* emerald-600 */
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 200ms ease-in-out;
}

    .offer-button:hover {
        background-color: #f3f4f6; /* gray-100 */
        transform: scale(1.05);
    }

/* Featured Brands Section */
.brands-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: center;
}

@media (min-width: 768px) {
    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.brand-item {
    text-align: center;
    padding: 1.5rem;
    background-color: #f9fafb; /* gray-50 */
    border-radius: 0.5rem;
    transition: background-color 150ms ease-in-out;
}

    .brand-item:hover {
        background-color: #f3f4f6; /* gray-100 */
    }

.brand-name-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #374151; /* gray-700 */
}

/* Newsletter Signup Section */
.newsletter-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #111827; /* gray-900 */
    color: #ffffff;
    text-align: center;
}

.newsletter-icon {
    height: 4rem;
    width: 4rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    color: #a78bfa; /* purple-400 */
}

.newsletter-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.newsletter-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.newsletter-form-wrapper {
    max-width: 32rem; /* max-w-md */
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form-group {
    display: flex;
    gap: 1rem;
}

.newsletter-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #1f2937;
    border: none;
}

    .newsletter-input:focus {
        outline: none;
        box-shadow: 0 0 0 2px #a78bfa; /* focus:ring-2 focus:ring-purple-500 */
    }

.newsletter-subscribe-btn {
    background-color: #8b5cf6;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    color: #ffffff;
    transition: background-color 150ms ease-in-out;
}

    .newsletter-subscribe-btn:hover {
        background-color: #7c3aed;
    }

.newsletter-privacy-text {
    font-size: 0.875rem;
    opacity: 0.7;
    margin-top: 1rem;
}

/* Footer */
.main-footer {
    background-color: #1f2937; /* gray-800 */
    color: #d1d5db; /* gray-300 */
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-brand-section {
    /* Styles for the brand logo and description in footer */
}

.footer-brand-logo-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.footer-brand-icon {
    height: 2rem;
    width: 2rem;
    color: #a78bfa; /* purple-400 */
}

.footer-brand-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.footer-description {
    color: #9ca3af; /* gray-400 */
    margin-bottom: 1rem;
}

.footer-social-links {
    display: flex;
    gap: 1rem;
}

.social-icon {
    height: 1.5rem;
    width: 1.5rem;
    color: #d1d5db;
    cursor: pointer;
    transition: color 150ms ease-in-out;
}

    .social-icon:hover {
        color: #a78bfa;
    }

.footer-column-title {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-link a {
    color: #d1d5db;
    text-decoration: none;
    transition: color 150ms ease-in-out;
}

    .footer-link a:hover {
        color: #a78bfa;
    }

.footer-bottom-bar {
    border-top: 1px solid #374151; /* border-gray-700 */
    margin-top: 3rem;
    padding-top: 2rem;
    text-align: center;
    color: #9ca3af;
}

/* General utility classes that were Tailwind-like, now custom */
.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}

.space-x-2 > *:not(:first-child) {
    margin-left: 0.5rem;
}

.space-x-4 > *:not(:first-child) {
    margin-left: 1rem;
}

.space-x-8 > *:not(:first-child) {
    margin-left: 2rem;
}

.space-y-2 > *:not(:first-child) {
    margin-top: 0.5rem;
}

.space-y-4 > *:not(:first-child) {
    margin-top: 1rem;
}

.space-y-8 > *:not(:first-child) {
    margin-top: 2rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.text-center {
    text-align: center;
}

.text-white {
    color: #ffffff;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.text-gray-900 {
    color: #1f2937;
}

.text-gray-600 {
    color: #4b5563;
}

.text-purple-600 {
    color: #8b5cf6;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.block {
    display: block;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

.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 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.object-cover {
    object-fit: cover;
}

.w-full {
    width: 100%;
}

.h-80 {
    height: 20rem;
}
/* 320px */
.h-96 {
    height: 24rem;
}
/* 384px */
.h-48 {
    height: 12rem;
}
/* 192px */
.w-20 {
    width: 5rem;
}

.h-20 {
    height: 5rem;
}

.w-16 {
    width: 4rem;
}

.h-16 {
    height: 4rem;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.w-6 {
    width: 1.5rem;
}

.h-6 {
    height: 1.5rem;
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

.w-4 {
    width: 1rem;
}

.h-4 {
    height: 1rem;
}

.w-3 {
    width: 0.75rem;
}

.h-3 {
    height: 0.75rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.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;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-8 {
    margin-top: 2rem;
}

.pt-8 {
    padding-top: 2rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.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-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.top-0 {
    top: 0;
}

.sticky {
    position: sticky;
}

.z-50 {
    z-index: 50;
}

.transform {
    transform: var(--tw-transform);
}

.rotate-3 {
    --tw-rotate: 3deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:rotate-0:hover {
    --tw-rotate: 0deg;
}

.scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
}

.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
}

.-right-4 {
    right: -1rem;
}

.left-4 {
    left: 1rem;
}

.right-4 {
    right: 1rem;
}

.bottom-4 {
    bottom: 1rem;
}

.hidden {
    display: none;
}

@media (min-width: 768px) { /* md:block */
    .md\:block {
        display: block;
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:flex {
        display: flex;
    }

    .md\:p-12 {
        padding: 3rem;
    }

    .md\:text-5xl {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) { /* lg:grid-cols-2 */
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:text-6xl {
        font-size: 3.75rem;
    }
}

@media (min-width: 640px) { /* sm:flex-row */
    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Colors for SVG fills and strokes - you'd likely define these as variables or utility classes if you go deeper */
.fill-yellow-400 {
    fill: #facc15;
}
/* Used for star icons */
.text-yellow-400 {
    color: #facc15;
}

.text-green-500 {
    color: #22c55e;
}

.text-purple-300 {
    color: #d8b4fe;
}

.text-purple-400 {
    color: #a78bfa;
}

.text-emerald-600 {
    color: #059669;
}

.bg-purple-100 {
    background-color: #f3e8ff;
}
/* For How It Works icons wrapper */
.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1);
}

.hover\:bg-white\/20:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.bg-gray-300 {
    background-color: #d1d5db;
}

.bg-gray-50 {
    background-color: #f9fafb;
}

.bg-gray-100:hover {
    background-color: #f3f4f6;
}

.from-black\/60 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.to-transparent {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}


/* Optional: Basic resets - typically in a normalize.css or similar */
* {
    box-sizing: border-box;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}

a {
    text-decoration: none;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%; /* Ensures no horizontal scroll from default styles */
    overflow-x: hidden; /* Prevent horizontal scrollbar from appearing */
}
/* Page wrapper to control overall layout, ensure it takes full height if needed */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Make sure it takes at least full viewport height */
}

/* Adjust main content area if it has excessive padding */
.main-content-area {
    flex-grow: 1; /* Allow main content to grow and push footer down */
    padding-bottom: 0; /* Remove default padding, sections within should control their own */
}

/* ... (the rest of your home.css) ... */

/* Check sections around the transition point */
.offer-banner {
    /* Existing styles */
    margin-bottom: 0; /* Ensure no bottom margin pushing the next section */
}

.newsletter-section {
    /* Existing styles */
    margin-top: 0; /* Ensure no top margin pushing down from the previous section */
}

/* Footer specific adjustments */
.main-footer {
    /* Existing styles */
    margin-top: 0; /* Ensure no top margin pushing it down */
    padding-top: 4rem; /* Already defined, keep consistent */
    padding-bottom: 4rem; /* Already defined, keep consistent */
}