section {
    max-width:1300px;
    margin:auto;
    margin-bottom:30px;
}
section p, section ul, section ol {
    margin-bottom:15px;
}
section ul, section ol {
    margin-left:20px;
}
section ul>li, section ol>li {
    margin-bottom:10px;
}
section h2 {
    font-weight:300;
    margin-bottom:15px;
}
section a {
    text-decoration: dashed;
    text-decoration-line: underline;
}

section.first {
    padding:100px;
    text-align:center;
    border-radius:20px;
    color:white;
    background: linear-gradient(135deg, #003366, #005f99, #66a3cc);
    border:0;
    box-shadow: none;
    display: flex;
    gap: 200px;
}
section.first img {
    border-radius:20px;
    margin: -100px;
    object-fit: cover;
    width: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    max-height:450px;
}
section.first h1 {
    font-size: 40px;
    font-weight: 300;
    margin-bottom: 30px;
}
section.first p {
    text-transform: uppercase;
    font-size:12px;
    color:white;
}
section.first a {
    text-decoration: dashed;
    text-decoration-line: underline;
    color:white;
}

.shareon {
    margin-bottom:20px;
    text-align:center;
}
.main-mobile-img {
    display:none;
}
section p:last-child, section ul:last-child, section ol:last-child {
    margin-bottom:0;
}

main {
    margin:0 20px;
}
.container {
    gap:50px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.container>div {
    max-width:calc(70% - 25px);
    border: 1px solid rgba(7, 36, 86, 0.075);
    border-radius: 10px;
    box-shadow: 0 2px 4px 0 rgba(7, 36, 86, 0.075);
    background-color: #fff;
    padding: 30px;
}
.container>aside {
    max-width:calc(30% - 25px);
}

.other_post {
    margin-bottom:30px;
    border: 1px solid rgba(7, 36, 86, 0.075);
    border-radius: 10px;
    box-shadow: 0 2px 4px 0 rgba(7, 36, 86, 0.075);
    background-color: #fff;
}
.other_post img {
    width:100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.other_post h3 {
    margin:15px 20px;
}
.other_post a {
    text-decoration:none;
}
.other_post>div {
    margin:0 20px;
    margin-bottom:20px;
}

.accordion { cursor: pointer; padding: 10px 20px; border: 1px solid #ddd; margin-top: 10px; border-radius: 10px; background: #f7f7f7; }
.panel { display: none; padding:20px; overflow: hidden; border-top: none; }
.accordion.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    font-weight:600;
}
.panel.active {
    border-radius: 10px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-top:0;
    display:block;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top:0;
}

section img {
    border-radius:20px;
}

.mobile_toc {
    display:none;
}

.side_toc, .mobile_toc {
    border: 1px solid rgba(7, 36, 86, 0.075);
    border-radius: 10px;
    box-shadow: 0 2px 4px 0 rgba(7, 36, 86, 0.075);
    background-color: #fff;
    padding: 30px;
    margin-bottom:20px;
}
.side_toc ol, .mobile_toc ol {
    margin-left:20px;
}
.side_toc a, .mobile_toc a {
    text-decoration: dashed;
    text-decoration-line: underline;
}
.side_toc h4, .mobile_toc h2 {
    font-size: 17px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.join-hwc {
    background:#2f2f2f;
    border-radius:20px;
    padding:40px;
    color:white;
    font-size:25px;
    margin-bottom:15px;
    transition:all 0.3s ease-in-out;
}
.join-hwc p {
    margin:auto;
    font-weight:300;
}
.join-hwc .button {
    border-radius: 100px;
    background: #29c165;
    color: #2f2f2f;
    padding: 13px 20px;
    margin: auto;
    display: block;
    margin-top: 20px;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}
.join-hwc:hover {
    scale:1.1;
}
.join-hwc p.smaller {
    font-size:11px;
    text-transform:uppercase;
    font-weight:600;
    margin-top:10px;
}

.caption, .wp-caption {
    margin-bottom: 15px;
    font-size: 12px;
    display:none;
}

.wp-caption {
    width:100%!important;
    display:block;
}
.wp-caption>img {
    margin-bottom:8px;
}

@media screen and (max-width:768px) {

    .caption {
        display:block;
    }
    .join-hwc {
        font-size:20px;
    }
    .join-hwc p.smaller {
        margin-top:6px;
    }
    .mobile_toc {
        display:block;
        padding: 0;
        border: 0;
        box-shadow: none;
        border-bottom: 2px solid #f7f7f7;
        border-radius: 0;
        padding-bottom: 23px;
    }
    .side_toc {
        display:none;
    }
    .contaier {
        gap:0;
    }
    .container>div {
        min-width:100%;
    }
    .container>aside {
        min-width:100%;
    }

    section {
        margin-bottom:20px;
    }
    section.first {
        padding:30px;
        display:flex;
    }
    section.first h1 {
        font-size:20px;
    }
    section.first img {
        display:none;
    }

    .main-mobile-img {
        display: block;
        border-radius: 10px;
        width:100%;
        margin-bottom: 20px;
    }

}