:root { 
    --primary-color: #2c7be5; 
    --accent-color: #00c9a7; 
    --bg-light: #f9fbfd; 
    --text-dark: #12263f; 
    --card-hover: rgba(44, 123, 229, 0.05); 
} 
 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
body { 
    font-family: 'Segoe UI', sans-serif; 
    line-height: 1.6; 
    background: var(--bg-light); 
    color: var(--text-dark); 
} 
 
 
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
} 

   .card-container { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
            gap: 40px; 
            margin: 50px 0; 
        } 
 
        .card { 
            background: white; 
            border-radius: 15px; 
            padding: 40px; 
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); 
            transition: transform 0.3s ease, box-shadow 0.3s ease; 
            animation: fadeInUp 1s ease; 
        } 
 
header { 
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); 
    color: white; 
    padding: 20px 0; 
    position: relative; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
} 
 
.nav-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
} 
 
.logo { 
    font-size: 1.8rem; 
    font-weight: bold; 
    letter-spacing: 1px; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
} 
 
.nav-links { 
    display: flex; 
    gap: 25px; 
    align-items: center; 
} 
 
.nav-links a { 
    color: white; 
    text-decoration: none; 
    transition: opacity 0.3s; 
    position: relative; 
} 
 
.nav-links a:hover::after { 
    content: ''; 
    position: absolute; 
    bottom: -5px; 
    left: 0; 
    width: 100%; 
    height: 2px; 
    background: white; 
    animation: underline 0.3s ease; 
} 
 
@keyframes underline { 
    from { 
        width: 0; 
    } 
    to { 
        width: 100%; 
    } 
} 
 
.cart-icon { 
    position: relative; 
    cursor: pointer; 
} 
 
.cart-count { 
    position: absolute; 
    top: -10px; 
    right: -10px; 
    background: white; 
    color: var(--primary-color); 
    border-radius: 50%; 
    padding: 2px 6px; 
    font-size: 0.8rem; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
} 
 
.company-hero { 
    background: url('health-banner.jpg')  no-repeat center/cover; 
    height: 300px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    text-align: center; 
    padding: 40px 20px; 
    margin-bottom: 40px; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 
} 
 
.company-hero h1 { 
    font-size: 2.5rem; 
    margin-bottom: 10px; 
} 
 
.company-hero p { 
    font-size: 1.2rem; 
} 
 
.company-info, .development-history { 
    background: white; 
    border-radius: 10px; 
    padding: 30px; 
    margin-bottom: 40px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease; 
} 
 
.company-info:hover, .development-history:hover { 
    transform: translateY(-5px); 
} 
 
h2 { 
    color: var(--primary-color); 
    margin-bottom: 20px; 
    font-size: 1.8rem; 
} 
 
.development-history ul { 
    list-style: none; 
} 
 
.development-history li { 
    margin-bottom: 15px; 
    font-size: 1.1rem; 
} 
 
.development-history li i { 
    color: var(--accent-color); 
    margin-right: 10px; 
} 
 
footer { 
    background: var(--text-dark); 
    color: white; 
    padding: 30px 0; 
    margin-top: 40px; 
    text-align: center; 
}