Home Buttons Cards Navbars

Premium Cards

Beautiful card components with glassmorphism effects, 3D transforms, and stunning animations. Perfect for showcasing content in modern web applications.

Glass Card

Premium Feature

Beautiful glassmorphism design with backdrop blur effects and subtle animations.

<div class="card card-glass">
    <div class="card-header">
        <div class="card-icon">
            <i class="fas fa-star"></i>
        </div>
        <h4>Premium Feature</h4>
    </div>
    <div class="card-body">
        <p>Beautiful glassmorphism design with backdrop blur effects and subtle animations.</p>
    </div>
    <div class="card-footer">
        <button class="card-btn">Learn More</button>
    </div>
</div>
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-large);
    padding: 30px;
    transition: all var(--transition-normal);
}

.card-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

Profile Card

Profile

John Doe

UI/UX Designer

124 Projects
2.5k Followers 
<div class="card card-profile">
    <div class="profile-bg"></div>
    <div class="profile-avatar">
        <img src="profile.jpg" alt="Profile">
        <div class="status-indicator"></div>
    </div>
    <div class="card-body">
        <h4>John Doe</h4>
        <p>UI/UX Designer</p>
        <div class="profile-stats">
            <div class="stat">
                <span class="stat-value">124</span>
                <span class="stat-label">Projects</span>
            </div>
            <div class="stat">
                <span class="stat-value">2.5k</span>
                <span class="stat-label">Followers</span>
            </div>
        </div>
    </div>
    <div class="profile-actions">
        <button class="btn-follow">Follow</button>
        <button class="btn-message">Message</button>
    </div>
</div>
.card-profile {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 0;
}

.profile-bg {
    height: 120px;
    background: var(--gradient-primary);
    position: relative;
}

.profile-avatar {
    position: relative;
    margin-top: -50px;
    margin-bottom: 20px;
}

.profile-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid white;
    object-fit: cover;
}

.status-indicator {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: #27ca3f;
    border: 3px solid white;
    border-radius: 50%;
}

.profile-info h4 {
    font-size: 24px;
    margin-bottom: 5px;
}

.profile-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 20px 0;
}

.profile-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 20px;
}

Product Card

Product
New

Premium Sneakers

Comfortable and stylish sneakers for everyday wear.

(128)
$129.99 $159.99 
<div class="card card-product">
    <div class="product-image">
        <img src="product.jpg" alt="Product">
        <div class="product-badge">New</div>
        <div class="product-overlay">
            <button class="quick-view">
                <i class="fas fa-eye"></i>
            </button>
            <button class="add-wishlist">
                <i class="fas fa-heart"></i>
            </button>
        </div>
    </div>
    <div class="product-info">
        <h4>Premium Sneakers</h4>
        <p class="product-description">Comfortable and stylish sneakers for everyday wear.</p>
        <div class="product-rating">
            <div class="stars">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
            </div>
            <span class="rating-count">(128)</span>
        </div>
        <div class="product-price">
            <span class="current-price">$129.99</span>
            <span class="original-price">$159.99</span>
        </div>
    </div>
    <div class="product-actions">
        <button class="btn-cart">
            <i class="fas fa-shopping-cart"></i>
            Add to Cart
        </button>
    </div>
</div>
.card-product {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-large);
    transition: all var(--transition-normal);
}

.product-image {
    position: relative;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.card-product:hover .product-image img {
    transform: scale(1.1);
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--gradient-secondary);
    color: white;
    padding: 5px 12px;
    border-radius: var(--radius-small);
    font-size: 12px;
    font-weight: 600;
}

.product-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateX(20px);
    transition: all var(--transition-normal);
}

.card-product:hover .product-overlay {
    opacity: 1;
    transform: translateX(0);
}

.product-overlay button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.product-overlay button:hover {
    background: white;
    transform: scale(1.1);
}

.product-info {
    padding: 20px;
}

.product-info h4 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.product-description {
    color: var(--text-secondary);
    margin-bottom: 15px;
    line-height: 1.5;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.stars {
    color: #ffd700;
}

.rating-count {
    color: var(--text-secondary);
    font-size: 14px;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.current-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.original-price {
    font-size: 16px;
    color: var(--text-secondary);
    text-decoration: line-through;
}

.product-actions {
    padding: 0 20px 20px;
}

.btn-cart {
    width: 100%;
    padding: 12px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-small);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-cart:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

Pricing Card

Most Popular

Premium Plan

$29 /month
  • Unlimited Projects
  • Priority Support
  • Advanced Analytics
  • Custom Integrations
  • 99.9% Uptime SLA
<div class="card card-pricing popular">
    <div class="pricing-badge">Most Popular</div>
    <div class="pricing-header">
        <div class="pricing-icon">
            <i class="fas fa-crown"></i>
        </div>
        <h4>Premium Plan</h4>
        <div class="pricing-price">
            <span class="price">$29</span>
            <span class="period">/month</span>
        </div>
    </div>
    <div class="pricing-features">
        <ul>
            <li><i class="fas fa-check"></i> Unlimited Projects</li>
            <li><i class="fas fa-check"></i> Priority Support</li>
            <li><i class="fas fa-check"></i> Advanced Analytics</li>
            <li><i class="fas fa-check"></i> Custom Integrations</li>
            <li><i class="fas fa-check"></i> 99.9% Uptime SLA</li>
        </ul>
    </div>
    <div class="pricing-action">
        <button class="btn-pricing">Get Started</button>
    </div>
</div>
.card-pricing {
    position: relative;
    text-align: center;
    padding: 0;
    overflow: hidden;
}

.card-pricing.popular {
    border: 2px solid var(--gradient-primary);
    transform: scale(1.05);
}

.pricing-badge {
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--gradient-primary);
    color: white;
    padding: 8px 40px;
    font-size: 12px;
    font-weight: 600;
    transform: rotate(45deg);
}

.pricing-header {
    padding: 40px 30px 30px;
    background: var(--gradient-primary);
    color: white;
}

.pricing-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
}

.pricing-header h4 {
    font-size: 24px;
    margin-bottom: 15px;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.price {
    font-size: 48px;
    font-weight: 900;
}

.period {
    font-size: 16px;
    opacity: 0.8;
}

.pricing-features {
    padding: 30px;
}

.pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features i {
    color: #27ca3f;
    font-size: 14px;
}

.pricing-action {
    padding: 0 30px 30px;
}

.btn-pricing {
    width: 100%;
    padding: 15px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-small);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-pricing:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

Blog Card

Blog
Design
March 15, 2024 Author John Doe

The Future of Web Design

Exploring the latest trends and technologies that are reshaping the digital landscape...

1.2k views
89 likes
23 comments 
<div class="card card-blog">
    <div class="blog-image">
        <img src="blog.jpg" alt="Blog">
        <div class="blog-category">Design</div>
    </div>
    <div class="blog-content">
        <div class="blog-meta">
            <span class="blog-date">March 15, 2024</span>
            <span class="blog-author">
                <img src="author.jpg" alt="Author">
                John Doe
            </span>
        </div>
        <h4>The Future of Web Design</h4>
        <p>Exploring the latest trends and technologies that are reshaping the digital landscape...</p>
        <div class="blog-stats">
            <div class="stat">
                <i class="fas fa-eye"></i>
                <span>1.2k views</span>
            </div>
            <div class="stat">
                <i class="fas fa-heart"></i>
                <span>89 likes</span>
            </div>
            <div class="stat">
                <i class="fas fa-comment"></i>
                <span>23 comments</span>
            </div>
        </div>
    </div>
    <div class="blog-footer">
        <button class="btn-read-more">Read More</button>
    </div>
</div>
.card-blog {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-large);
    transition: all var(--transition-normal);
}

.blog-image {
    position: relative;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.card-blog:hover .blog-image img {
    transform: scale(1.1);
}

.blog-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--gradient-secondary);
    color: white;
    padding: 5px 12px;
    border-radius: var(--radius-small);
    font-size: 12px;
    font-weight: 600;
}

.blog-content {
    padding: 25px;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--text-secondary);
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-author img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-content h4 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--text-primary);
    line-height: 1.3;
}

.blog-content p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

.blog-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.blog-stats .stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--text-secondary);
}

.blog-stats i {
    color: var(--gradient-primary);
}

.blog-footer {
    padding: 0 25px 25px;
}

.btn-read-more {
    width: 100%;
    padding: 12px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-small);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-read-more:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

Statistics Card

+12.5%

Total Revenue

0 $

Compared to last month

<div class="card card-stats">
    <div class="stats-header">
        <div class="stats-icon">
            <i class="fas fa-chart-line"></i>
        </div>
        <div class="stats-trend positive">
            <i class="fas fa-arrow-up"></i>
            +12.5%
        </div>
    </div>
    <div class="stats-body">...</div>
    <div class="stats-chart">...</div>
</div>

Team Card

Team Member

Alex Johnson

Lead Developer

Passionate about creating beautiful and functional web experiences.

React Node.js TypeScript 
<div class="card card-team">
    <div class="team-background"></div>
    <div class="team-avatar">
        <img src="member.jpg" alt="Team Member">
    </div>
    <div class="team-info">
        <h4>Alex Johnson</h4>
        <p class="team-role">Lead Developer</p>
        <p class="team-bio">Passionate about creating beautiful and functional web experiences.</p>
        <div class="team-skills">
            <span class="skill">React</span>
            <span class="skill">Node.js</span>
            <span class="skill">TypeScript</span>
        </div>
    </div>
    <div class="team-social">
        <a href="#" class="social-link">
            <i class="fab fa-linkedin"></i>
        </a>
        <a href="#" class="social-link">
            <i class="fab fa-github"></i>
        </a>
        <a href="#" class="social-link">
            <i class="fab fa-twitter"></i>
        </a>
    </div>
</div>
.card-team {
    position: relative;
    text-align: center;
    padding: 0;
    overflow: hidden;
}

.team-background {
    height: 120px;
    background: var(--gradient-secondary);
    position: relative;
}

.team-avatar {
    position: relative;
    margin-top: -50px;
    margin-bottom: 20px;
}

.team-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid white;
    object-fit: cover;
    box-shadow: var(--shadow-medium);
}

.team-info {
    padding: 0 25px 25px;
}

.team-info h4 {
    font-size: 22px;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.team-role {
    color: var(--gradient-primary);
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 16px;
}

.team-bio {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

.team-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.skill {
    background: var(--glass-bg);
    color: var(--text-primary);
    padding: 5px 12px;
    border-radius: var(--radius-small);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--glass-border);
}

.team-social {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    border-top: 1px solid var(--glass-border);
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--glass-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-normal);
    border: 1px solid var(--glass-border);
}

.social-link:hover {
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

Feature Card

Lightning Fast

Optimized for maximum performance with cutting-edge technologies and best practices.

  • 60fps smooth animations
  • Optimized bundle size
  • CDN-ready assets
<div class="card card-feature">
    <div class="feature-icon">
        <i class="fas fa-rocket"></i>
    </div>
    <div class="feature-content">
        <h4>Lightning Fast</h4>
        <p>Optimized for maximum performance with cutting-edge technologies and best practices.</p>
        <ul class="feature-list">
            <li>60fps smooth animations</li>
            <li>Optimized bundle size</li>
            <li>CDN-ready assets</li>
        </ul>
    </div>
    <div class="feature-action">
        <button class="btn-feature">
            Learn More
            <i class="fas fa-arrow-right"></i>
        </button>
    </div>
</div>
.card-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 30px;
}

.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 32px;
    color: white;
    box-shadow: var(--shadow-glow);
}

.feature-content {
    margin-bottom: 30px;
}

.feature-content h4 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.feature-content p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
    max-width: 300px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.feature-list li {
    padding: 8px 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: 25px;
}

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #27ca3f;
    font-weight: bold;
}

.feature-action {
    margin-top: auto;
}

.btn-feature {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-small);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-feature:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

Testimonial Card

"This component library has transformed our development process. The quality and attention to detail is outstanding!"

Author
Sarah Chen

Senior UI Designer at TechCorp

<div class="card card-testimonial">
    <div class="testimonial-content">
        <div class="quote-icon">
            <i class="fas fa-quote-left"></i>
        </div>
        <p class="testimonial-text">
            "This component library has transformed our development process. The quality and attention to detail is outstanding!"
        </p>
        <div class="testimonial-rating">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
        </div>
    </div>
    <div class="testimonial-author">
        <div class="author-avatar">
            <img src="author.jpg" alt="Author">
        </div>
        <div class="author-info">
            <h5>Sarah Chen</h5>
            <p>Senior UI Designer at TechCorp</p>
        </div>
    </div>
</div>
.card-testimonial {
    text-align: center;
    padding: 40px 30px;
}

.testimonial-content {
    margin-bottom: 30px;
}

.quote-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
    color: white;
}

.testimonial-text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-rating {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 25px;
}

.testimonial-rating i {
    color: #ffd700;
    font-size: 18px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.author-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gradient-primary);
}

.author-info h5 {
    font-size: 18px;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.author-info p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

Newsletter Card

<div class="card card-newsletter">
    <div class="newsletter-header">
        <div class="newsletter-icon">
            <i class="fas fa-envelope"></i>
        </div>
        <h4>Stay Updated</h4>
        <p>Get the latest updates and exclusive content delivered to your inbox.</p>
    </div>
    <div class="newsletter-form">
        <div class="input-group">
            <input type="email" placeholder="Enter your email" class="newsletter-input">
            <button class="newsletter-btn">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
        <p class="newsletter-note">
            We respect your privacy. Unsubscribe at any time.
        </p>
    </div>
    <div class="newsletter-stats">
        <div class="stat">
            <span class="stat-number">10k+</span>
            <span class="stat-label">Subscribers</span>
        </div>
        <div class="stat">
            <span class="stat-number">Weekly</span>
            <span class="stat-label">Updates</span>
        </div>
    </div>
</div>
.card-newsletter {
    text-align: center;
    padding: 40px 30px;
}

.newsletter-header {
    margin-bottom: 30px;
}

.newsletter-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--gradient-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: white;
}

.newsletter-header h4 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.newsletter-header p {
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
}

.newsletter-form {
    margin-bottom: 30px;
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-small);
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 14px;
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--gradient-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.newsletter-btn {
    padding: 12px 16px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.newsletter-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.newsletter-note {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.newsletter-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.newsletter-stats .stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

Interactive Card

Click to Flip

Hover over me and click to see the magic happen!

Surprise!

This is the back side of the card with hidden content and beautiful animations.

<div class="card card-interactive">
    <div class="card-front">
        <div class="interactive-icon">
            <i class="fas fa-mouse-pointer"></i>
        </div>
        <h4>Click to Flip</h4>
        <p>Hover over me and click to see the magic happen!</p>
        <div class="flip-indicator">
            <i class="fas fa-sync-alt"></i>
        </div>
    </div>
    <div class="card-back">
        <div class="back-content">
            <h4>Surprise!</h4>
            <p>This is the back side of the card with hidden content and beautiful animations.</p>
            <button class="btn-back">Discover More</button>
        </div>
    </div>
</div>
.card-interactive {
    position: relative;
    perspective: 1000px;
    cursor: pointer;
    height: 300px;
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}

.card-back {
    transform: rotateY(180deg);
    background: var(--gradient-secondary);
    color: white;
}

.card-interactive.flipped .card-front {
    transform: rotateY(180deg);
}

.card-interactive.flipped .card-back {
    transform: rotateY(0deg);
}

.interactive-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 32px;
    color: white;
}

.card-front h4 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.card-front p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.flip-indicator {
    color: var(--gradient-primary);
    font-size: 20px;
    animation: spin 2s linear infinite;
}

.back-content h4 {
    font-size: 28px;
    margin-bottom: 15px;
    color: white;
}

.back-content p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 25px;
}

.btn-back {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 12px 24px;
    border-radius: var(--radius-small);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}