html {scroll-behavior: smooth;}
.text-banner h3 {max-width: 780px;}
.text-banner .legal-info {
    margin-top: 20px;
    display: inline-flex;
    gap: 20px;
    font-size: 15px;
    font-style: italic;
    & p span {font-weight: 500;}
    & div {display: flex;align-items: center;gap: 10px;}
    & svg {height: 18px;width: 18px;display: flex;fill: #353535;}
}
.container {
    max-width: 1240px;
    margin: 50px auto 100px auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
}
/* Sidebar */
.sidebar {position: sticky;top: 100px;height: fit-content;}
.sidebar-card {background: #fff;border-radius: 17px;}
/* .sidebar-card:hover {box-shadow: 0 1px 3px rgba(0,0,0,0.1);background-color: #fff;} */
.sidebar-title {font-size: 18px;font-weight: 500;color: #111827;margin-bottom: 20px;}
.sidebar-menu {list-style: none;}
.sidebar-menu li {margin-bottom: 7px;}
.sidebar-menu a {
    font-size: 15px;display: block;padding: 12px;color: #575757;
    text-decoration: none;border-radius: 7px;transition: all 0.2s;font-weight: 500;
}
.sidebar-menu a:hover {background: #f3f4f6;color: #00BDF2;}
.sidebar-menu a.active {background: #eff6ff;color: #00BDF2;font-weight: 500;}

/* Table of Contents */
.toc {
    background: #f9fafb;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    & .toc-title {
        font-size: 22px;
        font-weight: 500;
        color: #111827;
        margin-bottom: 20px;
    }
    & .toc-list {list-style: none;margin: 0;}
    & .toc-list li {margin-bottom: 12px;padding-left: 0;}
    & .toc-list li:last-child {margin-bottom: 0}
    & .toc-list a {color: #575757;text-decoration: none;transition: color 0.2s;}
    & .toc-list a:hover {color: #00BDF2;}
}

section.content-section {
    margin-top: 50px;
    scroll-margin-top: 100px; 
    display: block;
    & h2 {font-weight: 600;font-size: 26px;}
    & h3 {font-weight: 500;margin-top: 20px;margin-left: 10px;margin-bottom: -6px;}
    & a {
        color: var(--blue-color);
        text-decoration: none;
        font-weight: 500;
        &:hover {text-decoration: underline;}
    }
    & strong {font-weight: 500;}
    & p {margin-top: 20px;font-size: 16px;line-height: 1.5;
        color: #4b5563;
    }
    & ul, & ol {margin: 20px 0 20px 30px;color: #4b5563;line-height: 1.5;font-size: 16px;}
    & li {margin-bottom: 7px;padding-left: 5px;color: #4b5563;}
}
.company-info {
    background-color: #f3f4f6;
    max-width: 580px;
    padding: 20px;
    margin-top: 20px;
    border-radius: 17px;
    & h4 {font-weight: 500;font-size: 18px;margin-bottom: 14px;}
    & p {font-size: 15px !important;margin-top: 10px !important;}
}
/* Info Boxes */
.info-box {
    padding: 20px;
    margin: 20px 0;
    border-left: 2px solid;
    max-width: 580px;
    border-radius: 0 17px 17px 0;
}

.info-box.note {background: #eff6ff;border-color: #00BDF2;}
.info-box.warning {
    background: #fef3c7;border-color: #f59e0b;
    & img {height: 24px;}
}
.info-box.success {background: #dcfce7;border-color: #10b981;}
.info-box.important {background-color: #f7f7f7;}
.info-box-title {
    font-weight: 500;
    color: #111827;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    & img {height: 20px;width: auto;display: flex;}
}
.info-box p {margin-top: 0 !important;}
.timeline {
    margin-top: 15px;
    & .timeline-item {padding: 7px 0;}
    & .timeline-title {font-weight: 500;}
    & .timeline-text {font-size: 15px;margin-top: 5px;color: #303030;}
}

@media screen and (max-width: 1040px) {
    .container {gap: 30px;grid-template-columns: 220px 1fr};
}

@media screen and (max-width: 790px) {
    .container {
        gap: 30px;
        grid-template-columns: auto;
        margin-top: 30px;
    }
    .sidebar {
        top: 0;
        position: relative;
    }
}