/* =================================================================================== */
/*
SEO AK47
TEMPLATE: BUKTIJP MBAKGROUP
*/
/* =================================================================================== */

:root {

    /* =================================================================================== */
    /* Base Coloring */
    /* =================================================================================== */

    /* Base */

    --myvlgmvcia: #000038;
    --b25gp7thkg: #f5f5f5;

    /* Misc */

    --eivl2n7wm3: #2e6b83;
    --y7kkri8kyi: #5bd0ff;
    --jjpx126xmk: #feffd6;
    --m7a4ydvcp9: #ffa500;

    --iuik9p4l0a: #0e6d96;
    --tlpoocotoj: #0d5574;

    /* =================================================================================== */

    /* =================================================================================== */
    /* Button Root Color */
    /* =================================================================================== */

    /* Main Button */

    --m0q99jbpam: linear-gradient(225deg,#479690 0%, #3b807b 50%, #479690 100%);
    --dl15honwaj: linear-gradient(225deg,#5dcfc5 0%, #64ede2 50%, #5dcfc5 100%);
    

    /* Gradient Buttpn Menu 1 */

    --b6amtzjnzq: linear-gradient(0deg,#191970 0%, #2424bf 100%);

    /* Gradient Buttpn Menu 2 */

    --s86q9ziqtg: linear-gradient(0deg,#800000 0%, #f26161 100%);

    /* Gradient Buttpn Menu 3 */

    --tcwbdcio07: linear-gradient(0deg,#875b2e 0%, #e8af76 100%);

    /* Gradient Buttpn Menu 4 */

    --uhsmdoxcpn: linear-gradient(0deg,#923513 0%, #f25922 100%);

    /* Gradient Buttpn Menu 5 */

    --iqg9jtuzj5: linear-gradient(0deg,#4682b4 0%, #52a6eb 100%);

    /* Gradient Buttpn Menu 6 */

    --u508odocwq: linear-gradient(0deg,#8a2be2 0%, #a872db 100%);

    /* Gradient Buttpn Menu 7 */

    --qyftvsfb5y: linear-gradient(0deg,#72550c 0%, #cf9f27 100%);

    /* Gradient Buttpn Menu 8 */

    --p4fh1iikve: linear-gradient(0deg,#800080 0%, #d124d1 100%);

    /* Gradient Buttpn Menu 9 */

    --mb4p5ax4ch: linear-gradient(0deg,#426d99 0%, #5492d1 100%);

    /* =================================================================================== */

    /* Misc Gradient */

    --uz4pvmxubw: linear-gradient(141deg,#3f38a8 0%, #373594 57%, #33337a 100%);

    /* Shadow */

    --tl7wqvv3h5: 1px 2.5px #16161d;
}

/* =================================================================================== */
/* Base Section */
/* =================================================================================== */

body {
    background: var(--myvlgmvcia);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    background-position: center;
    background-attachment: fixed;
}

/* =================================================================================== */
/* End of Section */
/* =================================================================================== */

/* =================================================================================== */
/* Header Section */
/* =================================================================================== */

/* Top */

.navbar-container {
    width: 100%;
    background: var(--uz4pvmxubw);
}

.top-navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: .75rem 0;
}

.logo-container, .button-container {
    flex: 50%;
}

.logo-container {
    max-width: 120px;
}

.logo-container img {
    max-width: 120px;
    width: 100%;
    height: auto;
}

.button-container {
    text-align: right;
}

.button-container a {
    color: var(--b25gp7thkg);
    font-size: .875rem;
    padding: .5rem 2.5rem;
    font-weight: bold;
    background: var(--m0q99jbpam);
    border-radius: .325rem;
    box-shadow: var(--tl7wqvv3h5);
}

.button-container a:hover {
    background: var(--dl15honwaj);
    color: var(--myvlgmvcia);
}

/* Bottom */

.bottom-navbar-container {
    width: 100%;
    background: var(--eivl2n7wm3);
}

.sub-bottom-navbar {
    width: 100%;
    margin: 0 auto;
    padding: .525rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .325rem;
    flex-wrap:wrap;
}

.sub-bottom-navbar a {
    font-weight: bold;
    font-size: .875rem;
    color: var(--b25gp7thkg);
    padding: .25rem 1.5rem;
    box-shadow: var(--tl7wqvv3h5);
    border-radius: .325rem;
    display: block;
    text-align: center;
}

.bottom-menu-toggle{
    display: none;
    background: transparent;
    border: 0;
    padding: .5rem .75rem;
    margin: .25rem auto 0;
    cursor: pointer;
    line-height: 1;
    color: var(--b25gp7thkg);
    border-radius: .5rem;
    outline-offset: 2px;
}

.bottom-menu-toggle:focus-visible {
    outline: 2px solid var(--ring);
}

.bottom-menu-toggle i {
    font-size: 1.125rem;
}

.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Custom Menu Colour */

.custom-menu-a {background: var(--b6amtzjnzq);}
.custom-menu-b {background: var(--s86q9ziqtg);}
.custom-menu-c {background: var(--tcwbdcio07);}
.custom-menu-d {background: var(--uhsmdoxcpn);}
.custom-menu-e {background: var(--iqg9jtuzj5);}
.custom-menu-f {background: var(--u508odocwq);}
.custom-menu-g {background: var(--qyftvsfb5y);}
.custom-menu-h {background: var(--p4fh1iikve);}
.custom-menu-i {background: var(--mb4p5ax4ch);}

/* =================================================================================== */
/* End of Header Section */
/* =================================================================================== */

/* =================================================================================== */
/* Main Section */
/* =================================================================================== */

.main-container {
    max-width: 1200px;
    width: 100%;
    background: var(--eivl2n7wm3);
    padding: 1rem;
    margin: 1rem auto;
    border-radius: .325rem;
    border: 2px outset var(--y7kkri8kyi);
    box-shadow: var(--tl7wqvv3h5);
}

.sub-title-main {
    width: 100%;
    text-align: center;
    color: var(--jjpx126xmk);
}

.main-section-one, .main-section-two, .main-section-three, .main-section-three {
    width: 100%;
}

.marquee-container {
    margin: 1rem 0;
    color: var(--b25gp7thkg);
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
    border-bottom: 2px dotted var(--y7kkri8kyi);
    font-weight: bold;
}

.main-section-two {
    padding: 1rem 0;
    border-bottom: 2px dotted var(--y7kkri8kyi);
}

.grid-main-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.post-block-main {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 700px;
    border: 2px solid var(--y7kkri8kyi);
    border-radius: .325rem;
    background: linear-gradient(to bottom, var(--iuik9p4l0a), var(--tlpoocotoj));
    overflow: hidden;
}

.post-block-main img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-top-left-radius: .325rem;
    border-top-right-radius: .325rem;
}

.post-details {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

.sub-post-details {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.title-post {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--m7a4ydvcp9);
    margin: .5rem 0;
}

.time-post {
    display: block;
    color: var(--jjpx126xmk);
    font-size: .875rem;
    margin: .5rem 0;
}

.description-post {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: .5rem 0;
    color: var(--b25gp7thkg);
    font-size: .875rem;
}

.read-more-post {
    width: 100%;
    text-align: center;
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
    padding: .5rem .9rem;
    border-radius: .325rem;
    text-decoration: none;
    font-weight: 600;
    background: var(--m0q99jbpam);
    color: #fff;
    transition: transform .15s ease, opacity .15s ease;
}

.read-more-post:hover {
    transform: translateY(-1px);
    opacity: .9;
}

.pagination-main-post{
    margin: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px dashed var(--y7kkri8kyi);
    user-select: none;
}

.pagination-main-post .page-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .75rem;
    border: 1px solid var(--y7kkri8kyi);
    border-radius: .375rem;
    background: var(--jjpx126xmk);
    color: var(--iuik9p4l0a);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, opacity .12s ease;
}

.pagination-main-post .page-btn:hover { transform:translateY(-1px); }
.pagination-main-post .page-btn:focus{ outline:2px solid var(--m7a4ydvcp9); outline-offset:2px; }

.pagination-main-post .page-btn[disabled],
.pagination-main-post .page-btn.is-disabled{
    opacity: .45;
    cursor: not-allowed;
}

.pagination-main-post .page-indicator{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9.5rem;
    height: 2.25rem;
    padding: 0 .9rem;
    border: 1px solid var(--y7kkri8kyi);
    border-radius: .375rem;
    background: linear-gradient(to bottom, var(--iuik9p4l0a), var(--tlpoocotoj));
    color: var(--b25gp7thkg);
    font-weight: 700;
    letter-spacing: .02em;
}

.main-section-three {
    padding: 1rem 0;
    margin: 1rem 0;
    border-top: 2px dotted var(--y7kkri8kyi);
}

.main-section-three p, .main-section-three h2, .main-section-three h1, .main-section-three h3 {
    color: var(--b25gp7thkg);
}

.main-section-three h1, .main-section-three h2, .main-section-three h3 {
    text-align: center;
}

.main-section-three strong {
    color: var(--jjpx126xmk);
}

.post-title-container {
    padding: 0 1rem;
    color: var(--jjpx126xmk);
}

.post-title-container a {
    max-width: 220px;
    width: 100%;
    font-weight: bold;
    font-size: .875rem;
    color: var(--b25gp7thkg);
    padding: .25rem 1.5rem;
    box-shadow: var(--tl7wqvv3h5);
    border-radius: .325rem;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center !important;
    gap: .5rem;
}

.post-title-container h1 {
    margin: 1rem 0;
    text-align: center;
}

.main-section-four {
    padding: 1rem;
    color: var(--b25gp7thkg);
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 1rem;
}

.single-post-article {
    border-bottom: 2px dotted var(--y7kkri8kyi);
    text-align: center;
}

.single-post-article strong {
    color: var(--jjpx126xmk);
}

.single-post-article-image {
    border-radius: .325rem;
    border: 2px solid var(--y7kkri8kyi);
    box-shadow: var(--tl7wqvv3h5);
}

.paragraph-post-container {
    padding: 1.5rem 0;
}

.livechat-image-single {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
}











/* =================================================================================== */
/* Footer Section */
/* =================================================================================== */

.footer-container {
    width: 100%;
    background: var(--uz4pvmxubw);
}

.footer-container-sub {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: .75rem 0;
    text-align: center;
    color: var(--b25gp7thkg);
    font-weight: bold;
}

/* =================================================================================== */
/* End of Footer Section */
/* =================================================================================== */