/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiGyp8kv8JHgFVrJJLufntAKPY.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiGyp8kv8JHgFVrJJLucHtA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiDyp8kv8JHgFVrJJLmg1hVGdeOcEg.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiDyp8kv8JHgFVrJJLmg1hVF9eO.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiDyp8kv8JHgFVrJJLmr19VGdeOcEg.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiDyp8kv8JHgFVrJJLmr19VF9eO.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiDyp8kv8JHgFVrJJLmy15VGdeOcEg.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiDyp8kv8JHgFVrJJLmy15VF9eO.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }  


  /* latin-ext */
  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosans/v36/o-0ZIpQlx3QUlC5A4PNr4C5OaxRsfNNlKbCePevtt3OmDyw.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosans/v36/o-0ZIpQlx3QUlC5A4PNr4C5OaxRsfNNlKbCePevtuXOm.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosans/v36/o-0bIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjc5aDdu2ui.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosans/v36/o-0bIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjc5a7duw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* ==== */
/* BASE */
/* ==== */

:root {
    --hadirr-orange: #d79c74;
    --hadirr-orange-light: #FFEFC2;
    --hadirr-orange-dark: #FFC000;
    --dark-black: #131313;
    --black: #393939;
    --black-light: #4A4A4A;
    --black-lighter: #525252;
}

.m-0 { margin: 0px }
.m-5 { margin: 5px }
.m-10 { margin: 10px }
.m-20 { margin: 20px }
.m-30 { margin: 30px }
.m-40 { margin: 40px }
.m-50 { margin: 50px }

.mt-0 { margin-top: 0px }
.mt-5 { margin-top: 5px }
.mt-10 { margin-top: 10px }
.mt-20 { margin-top: 20px }
.mt-30 { margin-top: 30px }
.mt-40 { margin-top: 40px }
.mt-50 { margin-top: 50px }

.mb-0 { margin-bottom: 0px }
.mb-5 { margin-bottom: 5px }
.mb-10 { margin-bottom: 10px }
.mb-20 { margin-bottom: 20px }
.mb-30 { margin-bottom: 30px }
.mb-40 { margin-bottom: 40px }
.mb-50 { margin-bottom: 50px }

.mr-0 { margin-right: 0px }
.mr-5 { margin-right: 5px }
.mr-10 { margin-right: 10px }
.mr-20 { margin-right: 20px }
.mr-30 { margin-right: 30px }
.mr-40 { margin-right: 40px }
.mr-50 { margin-right: 50px }

.ml-0 { margin-left: 0px }
.ml-5 { margin-left: 5px }
.ml-10 { margin-left: 10px }
.ml-20 { margin-left: 20px }
.ml-30 { margin-left: 30px }
.ml-40 { margin-left: 40px }
.ml-50 { margin-left: 50px }

.my-0 { margin-top: 0px; margin-bottom: 0px;}
.my-5 { margin-top: 5px; margin-bottom: 5px;}
.my-10 { margin-top: 10px; margin-bottom: 10px;}
.my-20 { margin-top: 20px; margin-bottom: 20px;}
.my-30 { margin-top: 30px; margin-bottom: 30px;}
.my-40 { margin-top: 40px; margin-bottom: 40px;}
.my-50 { margin-top: 50px; margin-bottom: 50px;}

.mx-0 { margin-left: 0px; margin-right: 0px; }
.mx-5 { margin-left: 5px; margin-right: 5px; }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mx-30 { margin-left: 30px; margin-right: 30px; }
.mx-40 { margin-left: 40px; margin-right: 40px; }
.mx-50 { margin-left: 50px; margin-right: 50px; }

.p-0 { padding: 0px }
.p-5 { padding: 5px }
.p-10 { padding: 10px }
.p-20 { padding: 20px }
.p-30 { padding: 30px }
.p-40 { padding: 40px }
.p-50 { padding: 50px }

.pt-0 { padding-top: 0px }
.pt-5 { padding-top: 5px }
.pt-10 { padding-top: 10px }
.pt-20 { padding-top: 20px }
.pt-30 { padding-top: 30px }
.pt-40 { padding-top: 40px }
.pt-50 { padding-top: 50px }

.pb-0 { padding-bottom: 0px }
.pb-5 { padding-bottom: 5px }
.pb-10 { padding-bottom: 10px }
.pb-20 { padding-bottom: 20px }
.pb-30 { padding-bottom: 30px }
.pb-40 { padding-bottom: 40px }
.pb-50 { padding-bottom: 50px }

.pr-0 { padding-right: 0px }
.pr-5 { padding-right: 5px }
.pr-10 { padding-right: 10px }
.pr-20 { padding-right: 20px }
.pr-30 { padding-right: 30px }
.pr-40 { padding-right: 40px }
.pr-50 { padding-right: 50px }

.pl-0 { padding-left: 0px }
.pl-5 { padding-left: 5px }
.pl-10 { padding-left: 10px }
.pl-20 { padding-left: 20px }
.pl-30 { padding-left: 30px }
.pl-40 { padding-left: 40px }
.pl-50 { padding-left: 50px }

.py-0 { padding-top: 0px; padding-bottom: 0px;}
.py-5 { padding-top: 5px; padding-bottom: 5px;}
.py-10 { padding-top: 10px; padding-bottom: 10px;}
.py-20 { padding-top: 20px; padding-bottom: 20px;}
.py-30 { padding-top: 30px; padding-bottom: 30px;}
.py-40 { padding-top: 40px; padding-bottom: 40px;}
.py-50 { padding-top: 50px; padding-bottom: 50px;}

.px-0 { padding-left: 0px; padding-right: 0px; }
.px-5 { padding-left: 5px; padding-right: 5px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.px-30 { padding-left: 30px; padding-right: 30px; }
.px-40 { padding-left: 40px; padding-right: 40px; }
.px-50 { padding-left: 50px; padding-right: 50px; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', verdana;
    /* font-weight: 600; */
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--tosca-dark);
    text-decoration: underline;
}

.separator {
    position: relative;
    text-align: center;
    font-size: 14px;
}
  
.separator > span {
    background: #fff;
    padding: 0px 12px;
    z-index: 2;
    position: relative;
    text-transform: uppercase;
    color: var(--black-lighter);
}
  
.separator:before{
    content: '';
    width: 100%;
    height: 0px;
    border-top: 1px solid var(--tosca);
    position: absolute;
    left: 0px;
    top: 10px;
    z-index: 1;
}

.separator-single {
    position: relative;
    text-align: center;
    font-size: 17px;
    width: 70%;
    margin: 0 auto;
}
  
.separator-single > span {
    background: #fff;
    padding: 0px 12px;
    z-index: 2;
    position: relative;
    text-transform: uppercase;
    color: var(--black-lighter);
}
  
.separator-single:before{
    content: '';
    width: 100%;
    height: 0px;
    border-top: 1px solid #999;
    position: absolute;
    left: 0px;
    top: 10px;
    z-index: 1;
}




/* ==== */
/* MAIN */
/* ==== */

html { 
    scroll-padding-top: 120px;
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box; 
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', verdana;
    font-size: 14px;
    color: var(--black);
    background-color: #F9F9F9;

}

p {
    line-height: 1.8;
}

.container {
    max-width: 1240px;
    margin: 0 auto;
}

.bg-hadirr {
    background-color: var(--hadirr-orange-dark);
}
.bg-jingga-10 {
    background-color: rgba(248, 122, 4, 0.10);
}
.bg-white {
    background-color: #fff;
}
.bg-abu-10 {
    background-color: rgba(0, 0, 0, 0.10);
}
.bg-abu-25 {
    background-color: rgba(0, 0, 0, 0.25);
}
.d-none {
    display: none;
}
.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}
.offset-header {
    top: 132px;
}
.offset-header-single {
    top: 130px;
}

.relative {
    position: relative;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.flex-just {
    justify-content: space-between;
}
.justify-center{
    justify-content: center;
}

.btn {
    padding: 7px 14px;
    border: solid 1px rgba(0, 0, 0, 0.10);
    border-radius: 3px;
    font-weight: 600;
}

.text-center {
    text-align: center;
}


header {
    width: 100%;
    z-index: 1000;
    border-bottom: solid 1px #eee;

    .logo {
        flex: 1 1 1;
        padding: 20px 0px 20px 0px;
    }

    .logo img {
        height: 48px;
        width: auto;
    }

    .menu *{
        font-family: 'Poppins', verdana;
        font-size: 14px;
        font-weight: 500;
    }

    .menu {
        flex: 9;
        margin: 0;
        padding: 0;
        ul.nav {
            float: right;
            margin: 0px 0px 0px 0px;
        }
        ul.nav > li {
            list-style: none;
            display: inline-block;
            margin: 0px 10px 0px 0px;
            padding: 0;
        }
        ul.nav > li > a {
            display: block;
            text-decoration: none;
            padding: 30px 5px 20px 5px;
            margin: 0;
            transition: all 0.3s ease 0s;
        }
        ul.nav > li:last-child {
            padding-right: 0;
            margin-right: 0;
        }
        ul.nav > li > a:hover {
            color: var(--hadirr-orange);
        }
        ul.nav > li > a.btn {
            padding: 14px 20px;
            border: solid 1px #FFC000;
            border-radius: 5px;
        }
        ul.nav > li > a.btn.coba {
            background-color: #FFC000;
        }
        ul.nav li {
            .submenu {

                visibility: hidden;
                opacity: 0;
                position: absolute;
                margin: 0;
                padding: 10px 0px 10px 0px;
                background-color: #fff;
                min-width: 235px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                border: solid 1px #ddd;
                border-radius: 10px;
                transition: all 300ms;
                z-index: 1000000;
                li {
                    list-style: none;
                    display: block;
                    a {
                        display: block;
                        text-decoration: none;
                        padding: 3px 20px 3px 20px;
                        color: var(--tosca-dark);
                        transition: 0.3s;
                    }
                    a:hover {
                        background-color: #CDDFE8;
                        opacity: 0.9;
                    }
                    
                    a:hover::after {
                        opacity: 1;
                        width: 100%;
                    }
                }
            }
        }
        ul.nav li > ul.mega-menu {
            height: fit-content;
            li {
                display: inline-block;
                margin: 0px 10px 0px 0px;
                padding: 0;
                height: fit-content;
                .sub-title {
                    font-size: 18px;
                    font-weight: bold;
                }
                ul {
                    display: inherit;
                    margin: 0;
                    padding: 10px 0px 10px 0px;
                    box-shadow: none;
                    border: none;
                    border-radius: 10px;
                    li {
                        display: block;
                    }
                }
            }

        }
        ul.nav > li:hover {
            ul {
                visibility: visible;
                opacity: 1;
            }
        }

    }

}

#cat {
    .scrollmenu {
        font-family: 'Poppins', verdana;
        max-width: 830px;
        width: auto;
        .wrapper {
            overflow-x: scroll;
            overflow-y: hidden;
            ul {
                margin: 0;
                padding: 0;
                white-space: nowrap;
                li {
                    list-style: none;
                    display: inline-block;
                    margin: 0px 10px 0px 0px;
                    a {
                        display: block;
                        padding: 20px 14px;
                        color: var(--tosca)
                    }
                }
                li:first-child{
                    a {
                        padding-left: 0px;
                    }
                }
            }
        }

        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
          

        ::-webkit-scrollbar-track {
            background: none;
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background: #ccc;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #bbb;
        }
    }

}



.block-title {
    font-family: 'Poppins', verdana;
    font-size: 25px;
    font-weight: 600;
    color: var(--black);
    border-bottom: solid 2px #f0f0f0;
    line-height: 1.7;
    margin-top: 20px;
    margin-bottom: 20px;
    span {
        border-bottom: solid 2px var(--black);
        padding-bottom: 5px;
    }
}

span.block-title {
    display: block;
}


.input {
    border: 1px solid #ededed;
    padding: 17px 30px;
    display: block;
    width: 100%;
    border-radius: 100px;
    font-size: 16px;
    font-family: 'Poppins', verdana;
    outline: 0;
}
.transparan {
    border: none;
    background: #fff;
}

.input-search {
    i {
        font-size: 17px;
    }
    button {
        position: absolute;
        top: 20px;
        right: 16px;
        padding: 14x;
    }
}

.input-newsletter {
    button {
        position: absolute;
        top: 7px;
        right: 7px;
        padding: 17px 20px;
        background-color: #FFC000;
        color: #fff;
        border-radius: 50px;
        font-size: 12px;
        font-weight: bold;
    }
}

.col-main {
    flex: 2.3;
}
.col-sidebar {
    flex: 1;
    margin-left: 40px;
}


.post-category-label {
    a {
        color: #FFF;
        font-size: 11px;
        background-color: var(--black);
        padding: 7px 11px;
        border-radius: 15px;
        font-family: 'Poppins', verdana;
    }
}

.front-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-family: 'Poppins', verdana;
    .row {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 40px;
    }

    .item {
        width: calc(33.33% - 25px);
        padding-bottom: 10px;
        position: relative;

        .post-category-label {
            position: absolute;
            top: 185px;
            left: 30px;
        }

        & > a {
            display: block;
            margin-bottom: 20px;
            background-color: #fff;
            background-size: cover;
            background-size: 100%;

            background-position: center;
            border-radius: 10px;
            aspect-ratio: 16/10;
            transition: all 500ms ease-out;
        }

        &:hover {
            a {
                background-size: 120%;
            }
        }

        h2 {
            font-size: 16px;
            margin-bottom: 10px;
            & a:hover {
                color: var(--hadirr-orange-dark)
            }
        }

        .date {
            font-size: 11px;
            color: var(--black-lighter)
        }
    }
    .item-2 {
        width: calc(50% - 25px);
        & > a {
            aspect-ratio: 16/9;
        }
        h2 {
            font-size: 18px;
        }

        .post-category-label {
            top: 170px;
        }
    }

}


#load-more {
    border: solid 1px #eee;
    border-radius: 5px;
    text-align: center;
    display: block;
    padding: 27px 27px;
    color: inherit;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.5s ease;
    font-family: 'Poppins', verdana;
    &:hover{
        color: var(--hadirr-orange);
        background: rgba(248, 122, 4, 0.10);
        border: solid 1px rgba(248, 122, 4, 0.10);
    }
}

#form-demo-sidebar {
    width: 100%;
    border-radius: 13px;
    height: 725px;
    border: none;
    overflow-x: hidden;
    overflow-y: auto;
}

#form-demo-sidebar, #form-demo-after-article {
    background-color: #f5f5dc;
}

.breadcrumb {
    font-size: 13px;
    color: #666;
    font-family: 'Poppins', verdana;
}

blockquote {
    margin: 0px;
    background-color: #f3f3f3;
    padding: 10px 20px;
    border-left: solid 5px #e9e9e9;
    font-size: 16px;
}

.has-text-align-center, .aligncenter {
    text-align: center;
}

div.single-post {

    font-family: Poppins, sans-serif;

    h1, h2, h3, h4, h5 {
        margin: 30px 0px 20px 0px;
    }

    .post-image {
        width: 100%;
        height: auto;
        a {
            display: block;
            img {
                border-radius: 13px;
                border: solid 1px #eee;
                width: 100%;
                height: auto;
            }
            .caption {
                font-family: 'Poppins', verdana;
                font-size: 11px;
                font-weight: normal;
                display: block;
            }
        }
    }

    .post-share {

        width: 50px;

        div{

            a {
                display: block;
                border: solid 1px #ddd;
                border-radius: 9px;
                margin-bottom: 5px;
                text-align: center;
                padding: 11px 0px;
                color: #ccc;
                text-align: center;

                i {
                    font-size: 23px;
                }

                svg {
                    fill: #ccc;
                }

                &:hover {
                    border: solid 1px var(--black);
                    color: var(--black);
                    transition: all ease .5s;

                    svg {
                        fill: var(--black);
                    }
                }

            }

        }

    }

    article.post-content {
        width: calc(100% - 90px);
        font-family: 'noto sans', sans-serif;

        .single-header {

            .post-category {
                font-size: 12px;
                font-style: italic;
                font-weight: bold;
                color: var(--black);
                margin-bottom: -20px
            }

            h1 {
                font-size: 36px;
            }

            .post-meta {

                font-size: 12px;
                color: #333;
                line-height: 150%;
                font-style: italic;

                span {
                    display: block;
                    padding: 0px 0px;
                }
                a {
                    color: #5e4432;
                }

                span:first-child {
                    padding-left: 0px;
                }

                span:last-child {
                    padding-right: 0px;
                    border-right: solid 0px #999;
                }

            }

        }

        .post-entry {
            font-size: 16px;
            img {
                max-width: 100%;
                height: auto;

            }
            .aligncenter {
                text-align: center;
            }
            a {
                /* color: #FF6900; */
                /* color: #9F2828; */
                color: #ED4D6E;
            }
            .has-vivid-red-color {
                color: #cf2e2e;
            }
            .wp-caption {
                max-width: calc(100% - 40px) !important;
                img {
                    max-width: 100% !important;
                    /* display: none; */
                }
            }
            .size-full {
                max-width: calc(100% - 40px) !important;
            }

            .author {
                margin-top: 30px;
                h3, span.h3 {
                    margin: 0px 0px 0px 0px;
                    font-weight: 600;
                    font-size: 20px;
                    display: block;
                }
                .wrapper {

                    padding: 20px;
                    border: solid 1px #eee;
                    background-color: #FFF;
                    display: flex;
                    border-radius: 10px;
                    .avatar {
                        flex-basis: 170px;
                        .photo {
                            background-color: #13000011;
                            width: 100%;
                            aspect-ratio: 1/1;
                            background-size: cover;
                            background-position: bottom;
                            border-radius: 10px;
                        }
                    }
                    .right {
                        h4, span.h4 {
                            margin: 0px 0px 0px 20px;
                            font-weight: 700;
                            font-size: 16px;
                            display: block;
                        }
                        .author-description {
                            margin: 0px 0px 10px 20px;
                            font-size: 12px;
                            font-style: italic;
                        }
                        h5, span.h5 {
                            margin: 20px 0px 10px 20px;
                            font-weight: normal;
                            display: block;
                            font-size: 0.83em;
                        }
                        .author-latest-posts {
                            margin-top: 0;
                        }
                    }

                }
            }
        }

        .post-tags {
            line-height: 200%;
            font-size: 12px;
            span {
                color: #fff;
                background-color: var(--black);
                display: inline-block;
                margin: 10px 10px 0px 0px;
                padding: 0px 14px;
                border-radius: 20px;
                text-decoration: none;
            }
            a {
                display: inline-block;
                border: solid 1px #ccc;
                margin: 10px 10px 0px 0px;
                padding: 0px 14px;
                border-radius: 20px;
                text-decoration: none;
                &:hover {
                    color: #fff;
                    border: solid 1px #000;
                    background-color: var(--black);
                }
            }
        }

    }

    .post-pagination {
        border-top: solid 1px #eee;
        width: 100%;
        padding: 20px 0px 0px 0px;
        & > div {
            width: calc(50% - 50px);
        }
        .next-post {
            text-align: right;
        }
        a {
            font-weight: 500;
            font-size: 18px;
            h5, span.h5 {
                margin-top: 10px;
                display: block;
                font-weight: bold;
                font-size: 0.83em;
            }
        }
    }

    .post-related {
        width: 100%;
        .item-3 {
            a {
                margin: 10px 0px 10px 0px;
            }
            h2 {
                font: 500 16px Poppins, sans-serif;
                margin-top: 0;
                margin-bottom: 0;
                line-height: 150%;
            }
            .post-category-label {
                left: 10px;
                top: 120px;
            }
        }
    }

    #comments {
        width: 100%;
        padding: 40px;
        margin-top: 40px;
        background: #eee;
        border-radius: 13px;
        input, textarea {
            border: solid 1px #ccc;
            border-radius: 9px;
        }
        h3 {
            margin-top: 0;
        }
        .comment-form-comment {
            label {
                display: block;
            }
            textarea {
                width: 100% !important;
            }
        }
        .comment-form-author, .comment-form-email {
            margin-right: 22px;
        }
        .comment-form-author, .comment-form-email, .comment-form-url {
            width: calc(33.33% - 15px);
            float: left;
            input {
                padding: 14px 21px;
                outline: none;
                width: calc(100% - 2px);
            }
            label {
                display: block;
            }
        }

        .form-submit {
            input {
                padding: 17px 27px;
                margin-top: 20px;
                border: solid 1px rgba(0, 0, 0, 0.10);
                border-radius: 33px;
                font-weight: 600;
                color: #fff;;
                background-color: var(--black);
                cursor: pointer;
            }
        }
    }


}

#toc-container {
    border-radius: 10px;
    border: solid 1px #666;
    width: fit-content;
    padding: 20px;
    h2 {
        margin: 0px;
        cursor: pointer;
        &::after {
            content: '▼';
            display: inline;
            border: solid 1px #CCC;
            float: right;
            padding: 3px;
            margin: -3px 0px 0px 40px;
        }
    }
    #toc {
        margin: 20px 0px 0px 0px;
        padding: 0;
        list-style: none;
        line-height: 150%;
        li {
            a {
                display: block;
                color: var(--black);
                &:visited {
                    color: #9f9f9f;
                }
            }
        }
    }
    #toc.hide {
        display: none;
    }
}

.page-numbers {
    display: inline-block;
    border: solid 1px #eee;
    padding: 11px 14px;
    font-size: 16px;
    text-decoration: none !important;
    transition: all ease .3s;
    &:hover {
        color: #fff;;
        background-color: var(--black);
        transition: all ease .3s;
    }
}
.page-numbers.current, .page-numbers.dots {
    border: none;
    &:hover {
        color: #000;
        background-color: transparent;
    }
}

#main404 {

    font-size: 16px;;
    #not-found {
        display: inline-block;
        margin-top: 0px;
        font-weight: bold;
        font-size: 9rem;
        /* background: var(--hadirr-orange-dark); */
        color: var(--hadirr-orange-dark);
        /* border-radius: 300px; */
        /* padding: 70px 50px 70px 50px; */
    }
    p {
        font-size: 2rem;
        line-height: 1.25;
        font-weight: 600;
        text-align: left;
        margin: 4rem 3rem 3rem 3rem;
    }
}

#scrollTop {
    color: #fff;
    background-color: var(--black-light);
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    position: fixed;
    bottom: 40px;
    right: 40px;
    transition: all 500ms ease;
    opacity: 0;
    span {
        display: block;
        padding: 7px 10px;
        text-decoration: none;
        cursor: pointer;
    }
}
#scrollTop.show {
    opacity: 1;
}

footer {
    background-color: #fff;
    border-top: solid 3px var(--tosca);
    color: var(--black);
    font-family: 'Poppins', verdana;

    * {
        font-size: 0.8rem;
        line-height: 1.5;
    }


    .hdr-footer-img {
        margin-left: -6px;
    }

    .flex-20 {
        width: calc(20% - 30px);
    }
    .flex-40 {
        width: calc(40% - 30px);
    }
    .flex-60 {
        width: calc(60% - 30px);
    }

    .group-link-title {
        display: block;
        font-size: 1rem;
        font-weight: 600;
        font-family: 'Poppins', verdana;
    }
    ul {

        margin: 0;
        padding: 0;
        li {
            list-style: none;
            a {
                display: block;
            }
        }
    }
    ul.social-media {
        i {
            font-size: 19px;
        }
    }
    ul.social-media li {
        background-color: var(--hadirr-orange-dark);
        list-style: none;
        display: inline-block;
        min-width: 40px;
        text-align: center;
        padding: 10px 0px 7px 0px;
        border-radius: 50%;
    }
    .fa-ul li {
        line-height: 150%;
        display: block;
        .fa-li {
            float: left;
            margin: 5px 10px 0 0px;
            /* line-height: 200%; */
            width: 1em;
            height: 1em;
        }
        a {
            display: inline-block;
        }
        .alamat {
            display: inline-block;
        }
    }

}



#searchform404 {
    text-align: center;
    display: block;
    input.s {
        padding: 1rem 3rem 1rem 1rem;
        font-size: 16px;
        font-family: Poppins;
        border-radius: 3rem;
        border: solid 1px #ccc;
        width: 30rem;
        margin-left: 2rem;
    }
    .suryakanta {
        background-color: transparent;
        border: none;
        transform: translateX(-47px) translateY(5px);
    }
}

.notfound_bottom {
    .btn-beranda {
        background-color: var(--black);
        color: #FFF;
    }
    .btn-demo {
        background-color: var(--hadirr-orange-dark);
    }
}





.animate_fade_in {
    opacity: 0;
    transition: all 0.5s ease;
}
.animate_fade_in.in_view {
    opacity: 1;
}
.animate_fade_in_now {
    animation: fade_in 1s ease;
}
@keyframes fade_in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}





.notfound_top {
    font-family: Poppins;
    margin-bottom: 80px;
    .left {
        img {
            width: 100%;
        }
    }
    .right {
        padding-top: 80px;
        .the404 {
            color: #FFC000;
            font-size: 80px;
            font-weight: bold;
            font-family: Poppins;
            margin-bottom: 50px;
        }
        h1 {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        p {
            margin-bottom: 30px;
        }
        .links {
            margin-bottom: 40px;
            .btn {
                padding: 9px 16px;
                border-radius: 7px;
                display: inline-block;
                margin-right: 14px; 
            }
            .btn-demo {
                background-color: #f0ad4e;
                color: #FFF;
            }
            .btn-demos {
                border: solid 1px rgba(0, 0, 0, 0.08);
                color: #f0ad4e;
            }
        }
    }
}





/* News cards */
.news-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    margin-bottom: 80px;
}

.news-card {
    font-family: Poppins;
    flex: 0 0 calc(25% - 15px);
    padding: 13px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    & > a.gambar {
        display: block;
        background-image: var(--background);
        background-size: cover;
        background-position: center;
        background-color: #f9f9f9;
        aspect-ratio: 16/9;
    }
    & > a.more {
        display: block;
        border: 1px solid #eee;
        border-radius: 4px;
        color: #f0ad4e;
        text-align: center;
        margin-top: 14px;
        padding: 4px 0px;
    }

    h3 {
        font-size: 14px !important;
        margin-top: 10px;
        margin-bottom: 0px;
    }
}


#searchform404 {
    text-align: center;
    display: block;
    input {
        padding: 1rem
    }
}



@media all and (min-width: 1280px ) {
    .notfound_top {
        .right {
            padding-left: 80px;
        }
    }
}

@media all and (max-width: 576px ) {
    .notfound_top {
        margin: 0;
        padding: 0;
        .left {
            flex: 0 0 calc(100% - 80px);
            padding: 0;
            margin: 0 auto;
            text-align: center;
            img {
                width: 80%;
                margin-top: 40px;
                margin-bottom: 20px;
            }
        }
        .right {
            flex: 0 0 calc(100% - 40px);
            padding: 0;
            margin: 0 auto;
            text-align: center;
        }
    }
    .news-card {
        flex: 0 0 calc(100% - 40px);
        margin: 0 auto;
    }
}
@media all and (max-width: 768px ) {
    #body404 {
        .right {
            text-align: center;
        }
    }
}
@media all and (max-width: 992px ) {
    #body404 {
        .right {
            text-align: center;
        }
    }

}
@media all and (max-width: 1200px ) {
    #body404 {
        .right {
            text-align: center;
        }
    }
}




/* ====== */
/* SLIDER */
/* ====== */

#karo {

    font-family: 'Poppins', verdana;


    h2 {
        color: #fff;
    }

    .date {
        display: block;
        margin-top: 10px;
        font-size: 11px;
        color: #ccc;
    }

    .carousel{
        height: 505px;
        overflow-x: hidden;
        position: relative;
        display: flex;
        justify-content: flex-start;

        .carousel-inner{

            height: 100%;
            display: flex;
            transition: all ease .5s;
    
            .carousel-item{

                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .flex {

                    width: 100%;
                    height: 100%;
    
                    .kiri {
                        border-radius: 13px;
                        width: calc(50% - 7px);
                        background-size: cover;
                        background-position: center;
                        background-blend-mode: multiply;

                        h2 {
                            font-size: 20px;
                        }

                        div {
                            height: auto;
                        }

                    }
    
                    .kanan {

                        width: calc(50% - 7px);
    
                        .kanan-atas {

                            border-radius: 13px;
                            width: 100%;
                            height: calc(50% - 7px);
                            background-blend-mode: multiply;
                            background-size: cover;
                            background-position: center;

                            h2 {
                                font-size: 18px;
                            }

                        }
    
                        .kanan-bawah {

                            width: 100%;
                            height: calc(50% - 10px);
    
                            .kanan-bawah-1, .kanan-bawah-2 {

                                border-radius: 13px;
                                width: calc(50% - 7px);
                                background-blend-mode: multiply;
                                background-size: cover;
                                background-position: center;

                                h2 {
                                    font-size: 16px;
                                }

                            }

                        }

                    }

                }

                &.karo2{

                    border-radius: 13px;
                    background-size: cover;
                    background-position: center;
                    background-blend-mode: multiply;

                }

            }

        }
    
        .carousel-controls .prev{
            display: inline-block;
            height: 32px;
            width: 32px;
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            background-image: url('../images/prev.svg');
            background-position: center;
            background-size: auto 100%;
            background-repeat: no-repeat;
            cursor: pointer;
            opacity: .5;
        }
        
        .carousel-controls .next{
            display: inline-block;
            height: 32px;
            width: 32px;
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background-image: url('../images/next.svg');
            background-position: center;
            background-size: auto 100%;
            background-repeat: no-repeat;
            cursor: pointer;
            opacity: .5;
        }
        
        .prev:hover, .next:hover{
            opacity: 1;
        }
    }

    
}



/* ===== */
/* MEDIA */
/* ===== */

@media screen and (max-width: 1600px) {
    #form-demo-sidebar {
        height: 570px;
    }
}

@media screen and (max-width: 1366px) {
    #form-demo-sidebar {
        height: 450px;
    }
}

@media screen and (max-width: 1280px) {
    #form-demo-sidebar {
        height: 400px;
    }
}

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

}


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

@media screen and (max-width: 500px) {
    .logo {
        width: 100%;
        text-align: center;
    }
    .col-main {
        width: 100%;
        margin: 0px 20px;
    }
    .col-sidebar {
        width: 100%;
        margin: 40px 20px 0px 20px;
    }

    .block-title {
        margin: 0px 20px;
    }

    #load-more {
        margin: 0px 20px;
    }

    header {
        .menu {
            display: none;
        }
    }

    .front-card {
        margin: 0px 20px;
        .item {
            width: 100%;
        }
    }

    .breadcrumb {
        margin: 0px 20px 40px 20px;
    }

    .post-content {
        width: 100% !important;
        .post-entry {
            .wp-caption {
                width: 100%;
                img {
                    width: 100%;
                }
            }
        }
    }
    .post-image {
        width: 100%;
        img {
            width: 100%;
            height: auto;
        }
    }

    .post-share {
        width: 100% !important;
        & > div {
            a {
                width: 50px;
                display: inline-block !important;

            }
        }
    }

    .post-related {
        .front-card {
            margin: 0px;
        }
    }

    #comments {
        padding: 20px !important;
    }

    footer {
        font-size: 16px !important;
        .container {
            padding: 0px;
            li {
                a {
                    display: block !important;
                }
            }
        }
        .flex {
            & > div {
                width: 100%;
                margin: 40px 40px 0px 40px;
                padding: 0px;
                .flex {
                    & > div {
                        margin: 0px 0px 0px 0px;
                        padding: 0px;
                    }
                }
            }
        }
    }
}