* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container-center {
    display: flex;
    justify-content: center; 
    align-items: center;
    width: 100%;
}

.top-header {
    background: #e0d0ff;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}
.top-header a {
    text-decoration: none;
    color: #333;
    margin: 0 15px; 
    font-size: 14px;
}

.navigation {
    background: #76c75a;
}
.navigation ul {
    list-style: none;
}
.navigation li a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: white;
    font-weight: bold;
}
.navigation li a:hover {
    background: #5eb043;
}

.main-wrapper {
    display: flex;
    align-items: stretch; 
}

.sidebar {
    width: 25%; 
    background: #b4d4ff;
    padding: 20px;
    border-right: 1px solid #ddd;
}
.sidebar h3 { margin-bottom: 15px; }
.sidebar ul { list-style: none; }
.sidebar li { margin-bottom: 10px; }
.sidebar li a { text-decoration: none; color: #0056b3; }

.right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}


.header {
    display: flex;
    padding: 15px;
    background: #ff8e8e;
    gap: 15px;
}
.logo { flex: 1; }
.banner { flex: 3; }
.header img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}


.content-area {
    flex: 1;
    background: #7ec0ff;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.item {
    background: white;
    border: 1px solid #999;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.footer {
    background: #9d6cd3;
    color: white;
    text-align: center;
    padding: 15px;
}