/* Clean, organized CSS - Import all components */

/* Import all component stylesheets */
@import url('./components/variables.css');
@import url('./components/base.css');
@import url('./components/navbar.css');
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/utilities.css');
@import url('./components/landing-background.css');
@import url('./components/landing-sections.css');
@import url('./components/gradient-text.css');
@import url('./components/headings.css');
@import url('./components/blog.css');
@import url('./components/carousel.css');
@import url('./components/reviews-carousel.css');
@import url('./components/animations.css');
@import url('./components/content-info.css');

/* Any remaining specific styles that don't fit into components */

/* Transformation styles */
.transformation-visual {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(5, 150, 105, 0.1);
}

.step-number {
    flex-shrink: 0;
}

.benefit-item-transform {
    padding: 1rem;
    border-radius: 8px;
}

.transformation-icon-large {
    border: 2px solid rgba(5, 150, 105, 0.2);
}

/* Special card styles */
.benefit-item-card, .problem-item-card {
    background: white !important;
    background-color: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    height: 100%;
    position: relative;
    z-index: 1;
}

.how-it-works-item-card {
    background: white !important;
    background-color: white !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(122, 72, 176, 0.15);
    height: 100%;
    position: relative;
    z-index: 1;
}