/* KAL Style - April 2026 */
/* Option 2: Lighter & Brighter Header */

:root {
    --kal-green: #004d3a;     /* Rich, clear forest green - lighter than before */
    --accent: #00d49a;        /* Brighter, fresher green-teal accent */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #222;
    background: #f8f9fa;
}

/* Header - Now lighter and more vibrant */
.topBkBrd {
    background: linear-gradient(to right, var(--kal-green), #007a5f);
    color: white;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.tdLogo img { 
    width: 120px; 
    height: 120px; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
}
.tdHdr { flex: 1; min-width: 300px; }
.CompanyName { 
    font-size: 2.2rem; 
    font-weight: 700; 
    margin-bottom: 4px; 
}
.CompanyLocation { font-size: 1.1rem; opacity: 0.95; }
.CompanyMotto { 
    font-style: italic; 
    font-size: 1.15rem; 
    margin-top: 8px; 
    opacity: 0.9; 
}

/* Horizontal Menu */
.horizontalMenu ul {
    display: flex; 
    list-style: none; 
    gap: 20px; 
    margin-top: 15px; 
    flex-wrap: wrap;
}
.horizontalMenu a {
    color: white; 
    text-decoration: none; 
    font-weight: 600;
    padding: 8px 16px; 
    border-radius: 4px; 
    transition: all 0.3s;
}
.horizontalMenu a:hover, 
.horizontalMenu .selected p {
    background: rgba(255,255,255,0.25);
}
.selected p {
    background: rgba(255,255,255,0.3); 
    padding: 8px 16px; 
    border-radius: 4px; 
    display: inline-block;
}

/* Rest of the layout (unchanged except accent colour) */
.main-container {
    display: flex;
    min-height: calc(100vh - 200px);
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    gap: 25px;
}
.verticalNav {
    width: 220px; 
    flex-shrink: 0;
    background: #fff; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 20px; 
    height: fit-content;
    position: sticky; 
    top: 20px;
}
.verticalNav a {
    display: block; 
    padding: 12px 15px; 
    color: #222;
    text-decoration: none; 
    border-radius: 4px; 
    margin-bottom: 4px;
    transition: all 0.3s;
}
.verticalNav a:hover { 
    background: #f0f7f9; 
    color: var(--accent); 
}
.verticalNav .selected p {
    background: #e0f0f5; 
    color: var(--accent); 
    font-weight: 600;
}

.tdContent {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    padding: 40px 45px;
    max-width: 100%;
}

.textTitle {
    font-size: 2.1rem;
    color: var(--kal-green);
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 3px solid var(--accent);
    padding-bottom: 15px;
}

.textGpHdr {
    font-size: 1.55rem;
    color: var(--kal-green);
    margin: 35px 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #ddd;
}

p { 
    margin-bottom: 18px; 
    font-size: 1.1rem; 
}

.comparison-table {
    width: 100%; 
    border-collapse: collapse; 
    margin: 25px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.comparison-table th, 
.comparison-table td {
    padding: 14px 18px; 
    text-align: left; 
    border: 1px solid #ddd;
}
.comparison-table th { 
    background: var(--kal-green); 
    color: white; 
    font-weight: 600; 
}
.comparison-table tr:nth-child(even) { 
    background: #f8f9fa; 
}

.cta-box {
    background: linear-gradient(to right, var(--accent), var(--kal-green));
    color: white; 
    padding: 30px; 
    border-radius: 12px;
    text-align: center; 
    margin: 40px 0;
}

.tdFooter {
    background: #111; 
    color: #aaa;
    text-align: center; 
    padding: 25px; 
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .topBkBrd { flex-direction: column; text-align: center; }
    .main-container { flex-direction: column; padding: 15px; }
    .verticalNav { width: 100%; position: static; }
    .tdContent { padding: 25px 20px; }
    .textTitle { font-size: 1.8rem; }
}