/* general */
:root {
    --color1: #333333;
    --color2: #292f36;
    --color3: #4d5053;
    --color4: #2b4248;
    --color5: #767676;
    --color6: #F4F4F4;
    --color7: #FFFFFF;
    --color8: #FFC107;
    --color9: #C38530;
    --color10: #eff0f2;
    --color11: #07484A;
    --color12: #f4f0ec;
    --color13: #E0E2E6;
    --color14: #DBDBDB;
    --color15: #9A9A9A;
    --min_val1: 0.1875rem;
    --min_val2: 0.375rem;
    --pad_val0: 0rem;
    --pad_val1: 0.75rem;
    --pad_val2: 1.5rem;
    --pad_val3: 3rem;
    --pad_val4: 4.5rem;
    --pad_val5: 6rem;
    --pad_val6: 12rem;
    --pad_val7: 24rem;
    --pad_6: 10.5rem;
    --pad_7: 18rem;
    --pad_8: 36.75rem;
}

.title{
    color: var(--color2);
    font-family: 'DM Serif Display';
}
.t1{
    font-size: 85px; 
}
.btn{
    padding: 22px 36px; 
    background-color: var(--color2); 
    height: unset; 
    line-height: 20px; 
    border-radius: 18px;
}

/* asset */
.nav{
    background-color: var(--color1);
}
.page-footer{
    background-color: var(--color6);
    color: var(--color3);
}
.page-footer a{
    color: var(--color3);
}
.page-footer .footer-copyright{
    background-color: var(--color1);
    color: var(--color7);
    font-size: 12px;
}

nav ul:not(.dropdown-content)>li>a:hover:not(.active){
    background-color: var(--color9);
}
.btn:hover, .btn-small:hover, .btn-large:hover, .btn:focus{
    background-color: var(--color9);
}


/* @index */
.btn-floating.btn-large.btn_home_pro{
    height: 50px; 
    width: 50px; 
    background-color: var(--color12);
    box-shadow: unset;
    -webkit-box-shadow: unset;
}
.btn-floating.btn-large.btn_home_pro i{
    line-height: 52px;
    color: var(--color2);
}

/* Material Symbols https://fonts.googleapis.com/icon?family=Material+Icons */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

/* Material Symbols */
/* fallback */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v156/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* DM Serif Display */
/* latin-ext */
@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/dmserifdisplay/v15/-nFnOHM81r4j6k0gjAW3mujVU2B2G_5x0ujy.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-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/dmserifdisplay/v15/-nFnOHM81r4j6k0gjAW3mujVU2B2G_Bx0g.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;
}

/* Jost */
/* cyrillic */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/jost/v15/92zPtBhPNqw79Ij1E865zBUv7myjJTVFNIg8mg.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/jost/v15/92zPtBhPNqw79Ij1E865zBUv7myjJTVPNIg8mg.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-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/jost/v15/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNIg.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;
}

/* Josefin Sans */
/* vietnamese */
@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/josefinsans/v32/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMlhLzTs.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/josefinsans/v32/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMhhLzTs.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-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/josefinsans/v32/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMZhLw.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;
}

/* Junge */
/* latin */
@font-face {
    font-family: 'Junge';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/junge/v24/gokgH670Gl1lUpAatBE.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;
}


.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
.center{
    padding: 0rem;
}
.carousel{
    min-height: 820px;
}
.carousel .indicators .arrow{
    display: none;
}
body{
    width: 100%;
    font-family: 'Montserrat';
}
.mntsrt{
    font-family: 'Montserrat';
}
.dm_serif{
    font-family: 'DM Serif Display';
}
#dropdown_produk{
    min-width: 200px;
    border-radius: 0px 0px 10px 10px;
}
.dropdown-content li>a{
    color: var(--color1);
}
.page-footer{
    margin-top: unset;
    padding-top: unset;
}

/* index */
.btn {
    color: white;
}

.com1 {
    line-height: 125%;
    letter-spacing: 0;
}

.com2 {
    font-size: 22px;
    font-family: Montserrat;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 1%;
}

.com0 {
    font-size: 18px;
    font-family: Montserrat;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 1%;
}

.com3 {
    font-size: 48px;
    font-family: DM Serif Display;
    font-weight: 400;
    line-height: 129.70000505447388%;
    letter-spacing: 1%;
}

.com4 {
    font-size: 30px;
    font-family: DM Serif Display;
    font-weight: 400;
    line-height: 129.70000505447388%;
    letter-spacing: 0;
    text-transform: capitalize;
}

.com5 {
    font-size: 22px;
    font-family: Montserrat;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0;
}

.com6 {
    font-size: 30px;
    font-family: Montserrat;
    font-weight: 400;
    line-height: 156.9000005722046%;
    letter-spacing: 0;
}

.com7 {
    font-size: 50px;
    font-family: DM Serif Display;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 2%;
    text-align: center;
}

.com8 {
    font-size: 36px;
    font-family: Montserrat;
    font-weight: 700;
    line-height: 125%;
    letter-spacing: 0;
}

.com10 {
    font-size: 25px;
    font-family: DM Serif Display;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 2%;
}

.com11 {
    font-size: 40px;
    font-family: DM Serif Display;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0%;
}

.btn span {
    color: var(--color8);
}

.btn:hover span {
    color: var(--color2);
}
.btn_accent{
    color: var(--color2);
    background-color: var(--color8);
}
.btn_accent:hover{
    color: var(--color2) !important;
    background-color: white !important;
}
.valign_wrapper_right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.valign_wrapper_center{
    display: flex;
    align-items: center;
    justify-content: center;
}
#dropdown_1:focus-visible{
    outline: none;
}
#dropdown_produk{
    outline: none;
}
.no_margin_bot{
    margin-bottom: 0rem;
}

/* kontak */
.bg_head{
    padding: 0rem;
    min-height: 356px; 
    background-repeat: no-repeat; 
    background-position: bottom;
    background-size: cover;
    display: flex;
    padding: 0rem;
}
.bg_head_content{
    background-color: white; 
    border-radius: 20px 20px 0px 0px; 
    padding: var(--pad_val3) var(--pad_val4);
    width: fit-content; 
    margin: 0 auto; 
    align-self: flex-end;
    text-align: center;
    min-width: 20vw;
}

.nav {
    background-color: var(--color1);
}

.cta_banner{
    background-color: var(--color2); 
    border-radius: 70px; 
    min-height: 24rem; 
    text-align: center;
}

.round1{
    border-radius: 10px;
}
.round1:hover{
    border-radius: 10px;
}

.only_icon{
    line-height: 57px;
    padding: 0rem 0.75rem;
}

select.browser-default{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color7);
    padding: 0rem var(--pad_val1);
    width: auto;
    border: 1px solid var(--color1);
}
.bg_img{
    width: 100%;
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover;
}
.hoverable{
    cursor: pointer;
}
.materialboxed{
    cursor: pointer;
}

@media only screen and (max-width : 600.99px) {
    .bg_head_content{
        padding: var(--pad_val2) var(--pad_val2); 
        min-width: 70vw;
    }
    .cta_banner{
        border-radius: 30px; 
        min-height: 30rem; 
        padding: var(--pad_val0) var(--pad_val2) var(--pad_val2) var(--pad_val2);
    }
}