/*general*/

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Black.woff2') format('woff2'),
        url('../fonts/Raleway-Black.woff') format('woff'),
        url('../fonts/Raleway-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/Raleway-ExtraLightItalic.woff') format('woff'),
        url('../fonts/Raleway-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Bold.woff2') format('woff2'),
        url('../fonts/Raleway-Bold.woff') format('woff'),
        url('../fonts/Raleway-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-BoldItalic.woff2') format('woff2'),
        url('../fonts/Raleway-BoldItalic.woff') format('woff'),
        url('../fonts/Raleway-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-ExtraLight.woff2') format('woff2'),
        url('../fonts/Raleway-ExtraLight.woff') format('woff'),
        url('../fonts/Raleway-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-BlackItalic.woff2') format('woff2'),
        url('../fonts/Raleway-BlackItalic.woff') format('woff'),
        url('../fonts/Raleway-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Italic.woff2') format('woff2'),
        url('../fonts/Raleway-Italic.woff') format('woff'),
        url('../fonts/Raleway-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-ExtraBold.woff2') format('woff2'),
        url('../fonts/Raleway-ExtraBold.woff') format('woff'),
        url('../fonts/Raleway-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Raleway-ExtraBoldItalic.woff') format('woff'),
        url('../fonts/Raleway-ExtraBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-SemiBold.woff2') format('woff2'),
        url('../fonts/Raleway-SemiBold.woff') format('woff'),
        url('../fonts/Raleway-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Light.woff2') format('woff2'),
        url('../fonts/Raleway-Light.woff') format('woff'),
        url('../fonts/Raleway-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Thin.woff2') format('woff2'),
        url('../fonts/Raleway-Thin.woff') format('woff'),
        url('../fonts/Raleway-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-ThinItalic.woff2') format('woff2'),
        url('../fonts/Raleway-ThinItalic.woff') format('woff'),
        url('../fonts/Raleway-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Regular.woff2') format('woff2'),
        url('../fonts/Raleway-Regular.woff') format('woff'),
        url('../fonts/Raleway-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Raleway-SemiBoldItalic.woff') format('woff'),
        url('../fonts/Raleway-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-MediumItalic.woff2') format('woff2'),
        url('../fonts/Raleway-MediumItalic.woff') format('woff'),
        url('../fonts/Raleway-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-LightItalic.woff2') format('woff2'),
        url('../fonts/Raleway-LightItalic.woff') format('woff'),
        url('../fonts/Raleway-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Medium.woff2') format('woff2'),
        url('../fonts/Raleway-Medium.woff') format('woff'),
        url('../fonts/Raleway-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-Regular.woff2') format('woff2'),
        url('../fonts/Lora-Regular.woff') format('woff'),
        url('../fonts/Lora-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-Italic.woff2') format('woff2'),
        url('../fonts/Lora-Italic.woff') format('woff'),
        url('../fonts/Lora-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-Medium.woff2') format('woff2'),
        url('../fonts/Lora-Medium.woff') format('woff'),
        url('../fonts/Lora-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-Bold.woff2') format('woff2'),
        url('../fonts/Lora-Bold.woff') format('woff'),
        url('../fonts/Lora-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-BoldItalic.woff2') format('woff2'),
        url('../fonts/Lora-BoldItalic.woff') format('woff'),
        url('../fonts/Lora-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-MediumItalic.woff2') format('woff2'),
        url('../fonts/Lora-MediumItalic.woff') format('woff'),
        url('../fonts/Lora-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-SemiBold.woff2') format('woff2'),
        url('../fonts/Lora-SemiBold.woff') format('woff'),
        url('../fonts/Lora-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Lora-SemiBoldItalic.woff') format('woff'),
        url('../fonts/Lora-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}


/*#FAF6EA*/

:root {
    --h1: 52px; /*35*/
    --h2: 38px; /*28*/
    --h3: 32px;
    --h4: 28px;
    --h5: 24px;
    --h6: 18px;
    --text:16px;
    --raleway: 'Raleway', sans-serif;
    --lora: 'Lora', serif;
    --white: 255, 255, 255;
    --black: 0, 0, 0;
    --FAF6EA: 250,246,234; /*#FAF6EA - Cream*/
    --6F623B: 111,98,59; /*#6F623B - Brown*/
    --496887: 73,104,135; /*#496887 - Blue*/
    --3A3831: 58,56,49; /*#3A3831 - Black*/
    --ADADAD: 173,173,173; /*#ADADAD - Grey*/
    --h1-responsive: 48px; /*35*/
    --h2-responsive: 36px; /*28*/
    --h3-responsive: 32px;
    --h4-responsive: 28px;
    --h5-responsive: 24px;
    --h6-responsive: 16px;
    --text-responsive:16px;
}
html,body{
    font-family: var(--raleway);
    font-weight: normal;
    font-style: normal;
    font-size: var(--text);
    color: rgba(var(--3A3831), 1);
    line-height: 1.3;
    overflow-x: hidden;
    width: 100%;
    display:block;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*Color*/
.bg-white{
    background: rgb(var(--white)) !important;
}
.bg-black{
    background: rgb(var(--black)) !important;
}
.bg-FAF6EA{
    background: rgb(var(--FAF6EA)) !important;
}
.bg-6F623B{
    background: rgb(var(--6F623B)) !important;
}
.bg-496887{
    background: rgb(var(--496887)) !important;
}
.bg-3A3831{
    background: rgb(var(--3A3831)) !important;
}
.bg-ADADAD{
    background: rgb(var(--ADADAD)) !important;
}
.text-white{
    color: rgb(var(--white)) !important;
}
.text-black{
    color: rgb(var(--black)) !important;
}
.text-FAF6EA{
    color: rgb(var(--FAF6EA)) !important;
}
.text-6F623B{
    color: rgb(var(--6F623B)) !important;
}
.text-496887{
    color: rgb(var(--496887)) !important;
}
.text-3A3831{
    color: rgb(var(--3A3831)) !important;
}
.text-ADADAD{
    color: rgb(var(--ADADAD)) !important;
}
/*End color*/

/*typography*/
#content .lora h1,
#content .lora h2,
#content .lora h3,
#content .lora h4,
#content .lora h5,
#content .lora h6,
#content .lora{
    font-family: var(--lora) !important;
}

h1, h2, h3, h4, h5, h6{
    color: rgba(var(--496887), 1);
}

.raleway h1,
.raleway h2,
.raleway h3,
.raleway h4,
.raleway h5,
.raleway h6,
#content .raleway h1,
#content .raleway h2,
#content .raleway h3,
#content .raleway h4,
#content .raleway h5,
#content .raleway h6,
.raleway,
#content .raleway{
    font-family: var(--raleway) !important;
}

.testimonial-carousel {
    overflow: hidden;
    align-items: stretch;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
h1, h2, h3, h4, h5, h6{
    font-family:var(--lora);
}
#content h1, 
#content .header-1 h1,
#content .header-1 h2,
#content .header-1 h3,
#content .header-1 h4,
#content .header-1 h5,
#content .header-1 h6,
h1{
    font-size: var(--h1);
    line-height: 1.3;
}
#content .header-2,
#content .header-2 h1,
#content .header-2 h2,
#content .header-2 h3,
#content .header-2 h4,
#content .header-2 h5,
#content .header-2 h6,
#content h2,
h2{
    font-size: var(--h2);
}
#content .header-3,
#content .header-3 h1,
#content .header-3 h2,
#content .header-3 h3,
#content .header-3 h4,
#content .header-3 h5,
#content .header-3 h6,
#content h3,
h3{
    font-size: var(--h3);
}
#content .header-4,
#content .header-4 h1,
#content .header-4 h2,
#content .header-4 h3,
#content .header-4 h4,
#content .header-4 h5,
#content .header-4 h6,
#content h4,
h4{
    font-size: var(--h4);
}
#content .header-5,
#content .header-5 h1,
#content .header-5 h2,
#content .header-5 h3,
#content .header-5 h4,
#content .header-5 h5,
#content .header-5 h6,
#content h5,
h5{
    font-size: var(--h5);
}
#content .header-6,
#content .header-6 h1,
#content .header-6 h2,
#content .header-6 h3,
#content .header-6 h4,
#content .header-6 h5,
#content .header-6 h6,
#content h6,
h6{
    font-size: var(--h6);
}
p,
#content .header-p,
#content .header-p h1,
#content .header-p h2,
#content .header-p h3,
#content .header-p h4,
#content .header-p h5,
#content .header-p h6,
#content .header-p h6{
    font-size: var(--text);
}

p{
    font-family:var(--raleway);
}

#content .regular h1,
#content .regular h2,
#content .regular h3,
#content .regular h4,
#content .regular h5,
#content .regular h6,
#content .regular h6,
#content .regular{
    font-weight:400 !important;
}
#content .semi h1,
#content .semi h2,
#content .semi h3,
#content .semi h4,
#content .semi h5,
#content .semi h6,
#content .semi h6,
#content .semi{
    font-weight:500 !important;
}
#content .bold h1,
#content .bold h2,
#content .bold h3,
#content .bold h4,
#content .bold h5,
#content .bold h6,
#content .bold h6,
#content .bold{
    font-weight:600 !important;
}
#content .black h1,
#content .black h2,
#content .black h3,
#content .black h4,
#content .black h5,
#content .black h6,
#content .black h6,
#content .black{
    font-weight:700 !important;
}
#content .margin-0 h1,
#content .margin-0 h2,
#content .margin-0 h3,
#content .margin-0 h4,
#content .margin-0 h5,
#content .margin-0 h6,
#content .margin-0 p,
.margin-0{
    margin:0;
}

a{
    transition: all 0.3s;
}

.elementor-post__title a:hover{
    color: rgba(var(--FAF6EA), 0.5) !important;
}

.kembali-section{
    padding-left: 15px;
    padding-right: 15px;
    margin: auto;
    width: 100%;
}
.kembali-container{
    margin: auto;
    width: 100%;
    max-width: 1280px;
}
/*buttons*/
.post-section a.wp-block-button__link,
.kembali-button {
    border-radius: 8px;
    width: fit-content;
    display: block;
    background: rgb(var(--6F623B));
    color: rgb(var(--white));
    padding: 14px 24px;
    text-transform: uppercase;
    font-weight: 700;
    transition: 0.3s;
    border: 1px solid rgb(var(--6F623B));
}
.post-section a.wp-block-button__link:hover,
.kembali-button a:hover,
.kembali-button:hover,
.kembali-button button:hover {
    color: rgb(var(--6F623B)) !important;
    background: rgb(var(--white)) !important;
    
}
.kembali-button-inverted,
.kembali-button-inverted a,
.kembali-button-inverted button {
    border-radius: 8px;
    width: fit-content;
    display: block;
    color: rgb(var(--6F623B));
    background: rgb(var(--white));
    padding: 14px 24px;
    text-transform: uppercase;
    font-weight: 700;
    transition: 0.3s;
    border: 1px solid rgb(var(--6F623B));
}
.kembali-button-inverted a:hover,
.kembali-button-inverted:hover,
.kembali-button-inverted button:hover {
    color: rgb(var(--white));
    background: rgb(var(--6F623B));
}

/*End buttons*/

/*Hero*/
.hero-banner{
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    min-height: 470px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--FAF6EA));
}
.hero-text-container {
    max-width: 1280px;
    margin: auto;
    width: 100%;
}
.hero-text-container h1{
    color:rgba(var(--3A3831), 1);
}
section#list {
    padding-bottom: 60px;
}
.term-accordeom-body {
    transition: .5s;
    height: 0;
    overflow: hidden;
    width: 100%;
}
h3.term-accordeom-title {
    font-size: var(--h5) !important;
    padding-top: 11px;
    padding-bottom: 10px;
    font-family: var(--raleway) !important;
}
.term-list-item.active,
.term-list-item:hover {
    background: rgba(var(--3A3831),1);
    color: rgba(var(--FAF6EA)) !important;
}
.term-list-items {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.term-list {
    padding-bottom: 30px;
}
article.getpost-card a img {
    object-fit: cover;
    aspect-ratio: 1;
    width: 100%;
    object-position: bottom;
}
.post-list.grid-design.grid-col-3 {
    display: grid;
    gap: 20px;
}
.term-list-item {
    background: rgb(var(--FAF6EA));
    padding: 5px 25px;
    border-radius: 30px;
    color: rgba(var(--3A3831),1);
    transition: 0.3s;
}
.breadcumb-content {
    padding-top: 24px;
    padding-bottom: 10px;
}
h2.term-list-title {
    padding-bottom: 16px;
}
.breadcumb-content a{
    color: rgba(var(--ADADAD), 1);
    transition: all 0.3s;
}
.breadcumb-content a:hover{
    color: rgba(var(--3A3831), 1);
}
/*End hero*/
/*Post cards*/
article.getpost-card {
    padding: 16px;
    border: 1px solid rgb(var(--6F623B));
    background: rgb(var(--white));
    display: flex !important;
    flex-direction: column;
    gap: 25px;
    align-items: stretch;
    justify-content: space-between;
}

ul.slick-dots {
    position: relative;
    bottom: -16px;
}
.getpost-date {
    color: rgb(var(--3A3831));
}
.slick-dots li button:before{
    display: none;

}
.getpost-metadata {
    display: flex;
    gap: 15px;
    flex-direction: column;
}
.slick-dots li button{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    opacity: 1;
    border: 1px solid rgb(var(--3A3831));
    transition: 0.3s;
}
.slick-dots li.slick-active button{
    background: rgb(var(--3A3831));
}
.getpost-date{
    margin-top: 20px;
}
.getpost-metadata{
    padding-bottom: 20px;
}
@media (min-width:768px){
    .related-article-item.slick-slide {
        margin-left: 15px;
    }
}

/*End post cards*/
/*responsive*/
@media (max-width: 767px){
    #content h1, 
    #content .header-1 h1,
    #content .header-1 h2,
    #content .header-1 h3,
    #content .header-1 h4,
    #content .header-1 h5,
    #content .header-1 h6,
    h1{
        font-size: var(--h1-responsive);
        line-height: 1.3;
    }
    #content .header-2,
    #content .header-2 h1,
    #content .header-2 h2,
    #content .header-2 h3,
    #content .header-2 h4,
    #content .header-2 h5,
    #content .header-2 h6,
    #content h2,
    h2{
        font-size: var(--h2-responsive);
    }
    #content .header-3,
    #content .header-3 h1,
    #content .header-3 h2,
    #content .header-3 h3,
    #content .header-3 h4,
    #content .header-3 h5,
    #content .header-3 h6,
    #content h3,
    h3{
        font-size: var(--h3-responsive);
    }
    #content .header-4,
    #content .header-4 h1,
    #content .header-4 h2,
    #content .header-4 h3,
    #content .header-4 h4,
    #content .header-4 h5,
    #content .header-4 h6,
    #content h4,
    h4{
        font-size: var(--h4-responsive);
    }
    #content .header-5,
    #content .header-5 h1,
    #content .header-5 h2,
    #content .header-5 h3,
    #content .header-5 h4,
    #content .header-5 h5,
    #content .header-5 h6,
    #content h5,
    h5{
        font-size: var(--h5-responsive);
    }
    #content .header-6,
    #content .header-6 h1,
    #content .header-6 h2,
    #content .header-6 h3,
    #content .header-6 h4,
    #content .header-6 h5,
    #content .header-6 h6,
    #content h6,
    h6{
        font-size: var(--h6-responsive);
    }
    p,
    #content .header-p,
    #content .header-p h1,
    #content .header-p h2,
    #content .header-p h3,
    #content .header-p h4,
    #content .header-p h5,
    #content .header-p h6,
    #content .header-p h6{
        font-size: var(--text-responsive);
    }
    html,body{
        font-size: var(--text-responsive);
    }
}
@media (min-width:768px){
    .post-list.grid-design.grid-col-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width:992px){
    .post-list.grid-design.grid-col-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}