.custom-main {
    padding: 2rem;
    background: #F5F5F5;
    flex: 3
}

.sidebar {
    background: #E0E0E0;
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column
}

    .sidebar h3 {
        color: #002b5e;
        margin-top: 0;
        font-family: 'Poppins',sans-serif;
        font-weight: 600
    }

    .sidebar hr {
        border-bottom: 1px solid #ebebea;
        width: 100%;
        margin-bottom: 20px
    }

a.btn.btn-sm.btn-primary {
    background-color: #ff4829 !important;
    border-color: #ff4829 !important;
    padding: 10px 20px;
    border-radius: 4px;
    margin: 0 auto;
    text-align: center;
    display: block;
    font-family: 'Poppins',sans-serif;
    cursor: pointer;
    width: auto;
    color: #fff;
    text-decoration: none
}

.Titleheader {
    background: #002b5e;
    color: #fff;
    padding: 1rem 0;
    text-align: center
}

    .Titleheader h1 {
        margin: 0;
        font-family: 'Poppins',sans-serif;
        font-weight: 600;
        font-size: 1.8rem;
    }

.slogan {
    background: #ff4829;
    color: #fff;
    text-align: center;
    padding: 1rem;
    font-family: 'Poppins',sans-serif;
    font-size: 1.5rem;
    font-weight: 700
}

.jump-to-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
    gap: 1rem
}

    .jump-to-menu label {
        font-weight: 700;
        color: #1E88E5
    }

    .jump-to-menu select {
        padding: .5rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #F5F5F5;
        cursor: pointer;
        max-width: 320px;
        width: 100%
    }

.seal {
    text-align: center
}

section.seprateCall {
    background-color: #ff4829;
    margin: 20px 0;
    color: #fff;
    text-align: center
}

    section.seprateCall h1 {
        font-size: 1.8rem;
        font-weight: 600;
        margin: 12px 0 0
    }

    section.seprateCall a {
        text-decoration: none;
        margin-bottom: 10px;
        display: inline-block;
        color: #FDD835 !important;
        font-size: 26px;
        font-weight: 600
    }

.content {
    padding: 2rem;
    flex: 1;
    background: #F5F5F5
}

section {
    margin-bottom: 2rem
}

h2 {
    color: #002b5e;
    font-family: 'Poppins',sans-serif;
    font-weight: 600;
    margin-top: 0
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgb(0 0 0 / .1);
    margin-bottom: 1rem
}

.next-topic {
    text-align: right
}

    .next-topic a {
        background-color: #244891 !important;
        border-color: #244891 !important;
        border-radius: 4px;
        margin: 0 auto;
        text-align: center;
        font-family: 'Poppins',sans-serif;
        cursor: pointer;
        width: auto;
        color: #ffffff !important;
        text-decoration: none
    }

.img-fluid {
    max-width: 100%
}

.next-topic a {
    display: inline-flex
}

    .next-topic a .nextbtn {
        background-color: #4CAF50 !important;
        border-color: #4CAF50 !important;
        padding: 10px 12px;
        border-radius: 0 5px 5px 0;
        margin: 0 auto;
        text-align: center;
        font-family: 'Poppins',sans-serif;
        cursor: pointer;
        width: auto;
        color: #ffffff !important;
        text-decoration: none
    }

    .next-topic a .nexttopic {
        background-color: #244891 !important;
        border-color: #244891 !important;
        padding: 10px 10px;
        border-radius: 5px 0 0 5px;
        margin: 0 auto;
        text-align: center;
        font-family: 'Poppins',sans-serif;
        cursor: pointer;
        width: auto;
        color: #ffffff !important;
        text-decoration: none
    }

.custom-main #about img {
    max-width: 100%
}

#about table th, #about table td {
    white-space: normal
}

.seprateCall h2 {
    color: #fff;
    border: none;
    margin: 0
}

#about h2 {
    padding: 10px 0 !important;
    margin-bottom: 20px
}

@media (max-width:768px) {
    .content {
        padding: 1rem
    }

    nav ul {
        flex-direction: column
    }

    .container {
        flex-direction: column
    }

    .jump-to-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem 0;
        gap: 1rem;
        flex-direction: column
    }

    .sidebar {
        border-left: none;
        border-top: 2px solid #BDBDBD;
        margin-top: 1rem
    }

    .slogan {
        font-size: 1.3rem
    }

    section.seprateCall h1 {
        font-size: 1.3rem
    }

    section.seprateCall a {
        font-size: 20px
    }

    header h1 {
        font-size: 1.5rem
    }
}

@media (max-width:640px) {
    .custom-main img {
        width: 100%;
        margin-bottom: 10px;
        margin-left: 0px !important
    }
}