.about-wrapper { border: 5px solid blue !important; }

.about-wrapper {
    max-width: 900px;
    margin: 32px auto 0 auto;
    padding: 32px 20px 40px 20px;
    border-radius: 20px;
    background: var(--about-bg, #f8f9fa);
    box-shadow: 0 8px 48px #0002;
    color: var(--about-text, #21282f);
    transition: background 0.3s, color 0.3s;
}
.about-wrapper.dark-mode {
    --about-bg: #17222d;
    --about-text: #e2ecfa;
}
.about-title {
    text-align: center;
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--about-title, #4bbd60);
}
.about-wrapper.dark-mode .about-title { --about-title: #82f29e; }
.about-section {
    margin: 32px 0 28px 0;
}
.about-section h2 {
    color: #208b53;
    font-size: 1.3rem;
    margin-bottom: 10px;
}
.about-wrapper.dark-mode .about-section h2 {
    color: #50f292;
}
.about-section ul {
    font-size: 1.09rem;
    color: inherit;
    margin-left: 24px;
    margin-bottom: 0;
}
.about-desc {
    font-size: 1.19rem;
    color: inherit;
    margin-bottom: 0.8em;
    line-height: 1.5;
}
.contact-table-container {
    margin: 0;
    background: var(--about-contact-bg, #f4f8fa);
    border-radius: 15px;
    padding: 12px;
    box-shadow: 0 2px 14px #2221;
}
.about-wrapper.dark-mode .contact-table-container { --about-contact-bg: #1a252d; }
.contact-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.contact-table th,
.contact-table td {
    padding: 13px 10px;
    text-align: left;
    font-size: 1.07rem;
}
.contact-table th {
    background: #b2e2c7;
    color: #1b4434;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
}
.about-wrapper.dark-mode .contact-table th {
    background: #294842;
    color: #84f6c4;
}
.contact-table tr:nth-child(even) {
    background: #eef7f2;
}
.about-wrapper.dark-mode .contact-table tr:nth-child(even) {
    background: #223139;
}
.contact-table tr:hover {
    background: #daf7e0;
}
.about-wrapper.dark-mode .contact-table tr:hover {
    background: #30424b;
}
.contact-table td a { color: #18759b; text-decoration: underline; }
.about-wrapper.dark-mode .contact-table td a { color: #82e5f9; }
@media (max-width: 600px) {
    .about-wrapper { padding: 18px 2vw; }
    .contact-table th, .contact-table td { font-size: 0.99rem; padding: 10px 5px; }
}