@font-face {
    font-family: 'Helvetica Neue Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Neue Regular'), url('../fonts/helvetica-neue-5/HelveticaNeueRegular.otf');
}

@font-face {
    font-family: 'Helvetica Neue Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Neue Medium'), url('../fonts/helvetica-neue-5/HelveticaNeueMedium.otf');
}


@font-face {
    font-family: 'Helvetica Neue Book';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Neue Book'), url('../fonts/helvetica-neue-5/HelveticaNeueBook.otf');
}


@font-face {
    font-family: 'Helvetica Neue Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Neue Thin'), url('../fonts/helvetica-neue-5/HelveticaNeueThin.otf');
}


@font-face {
    font-family: 'Helvetica Neue Light';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Neue Light'), url('../fonts/helvetica-neue-5/HelveticaNeueLight.otf');
}


@font-face {
    font-family: 'Helvetica Neue Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Neue Bold'), url('../fonts/helvetica-neue-5/HelveticaNeueBold.otf');
}

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

@font-face {
    font-family: 'Bebas Neue Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Bebas Neue Regular'), url('../fonts/bebas-neue/BebasNeue Regular.woff') format('woff');
}

@font-face {
    font-family: 'Bebas Neue Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Bebas Neue Regular'), url('../fonts/bebas-neue/BebasNeue.woff') format('woff');
}


@font-face {
    font-family: 'Bebas Neue Book';
    font-style: normal;
    font-weight: normal;
    src: local('Bebas Neue Book'), url('../fonts/bebas-neue/BebasNeue Book.woff') format('woff');
}


@font-face {
    font-family: 'Bebas Neue Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Bebas Neue Thin'), url('../fonts/bebas-neue/BebasNeue Thin.woff') format('woff');
}


@font-face {
    font-family: 'Bebas Neue Light';
    font-style: normal;
    font-weight: normal;
    src: local('Bebas Neue Light'), url('../fonts/bebas-neue/BebasNeue Light.woff') format('woff');
}


@font-face {
    font-family: 'Bebas Neue Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Bebas Neue Bold'), url('../fonts/bebas-neue/BebasNeue Bold.woff') format('woff');
}

/* #### Generated By: http://font.download #### */

@font-face {
font-family: 'Roboto Regular';
font-style: normal;
font-weight: normal;
src: local('Roboto Regular'), url('../fonts/roboto-webfont/Roboto-Regular.woff') format('woff');
}


@font-face {
font-family: 'Roboto Italic';
font-style: normal;
font-weight: normal;
src: local('Roboto Italic'), url('../fonts/roboto-webfont/Roboto-Italic.woff') format('woff');
}


@font-face {
font-family: 'Roboto Bold';
font-style: normal;
font-weight: normal;
src: local('Roboto Bold'), url('../fonts/roboto-webfont/Roboto-Bold.woff') format('woff');
}


@font-face {
font-family: 'Roboto Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Roboto Bold Italic'), url('../fonts/roboto-webfont/Roboto-BoldItalic.woff') format('woff');
}


@font-face {
font-family: 'Roboto Thin';
font-style: normal;
font-weight: normal;
src: local('Roboto Thin'), url('../fonts/roboto-webfont/Roboto-Thin.woff') format('woff');
}


@font-face {
font-family: 'Roboto Thin Italic';
font-style: normal;
font-weight: normal;
src: local('Roboto Thin Italic'), url('../fonts/roboto-webfont/Roboto-ThinItalic.woff') format('woff');
}


@font-face {
font-family: 'Roboto Light';
font-style: normal;
font-weight: normal;
src: local('Roboto Light'), url('../fonts/roboto-webfont/Roboto-Light.woff') format('woff');
}


@font-face {
font-family: 'Roboto Light Italic';
font-style: normal;
font-weight: normal;
src: local('Roboto Light Italic'), url('../fonts/roboto-webfont/Roboto-LightItalic.woff') format('woff');
}


@font-face {
font-family: 'Roboto Medium';
font-style: normal;
font-weight: normal;
src: local('Roboto Medium'), url('../fonts/roboto-webfont/Roboto-Medium.woff') format('woff');
}


@font-face {
font-family: 'Roboto Medium Italic';
font-style: normal;
font-weight: normal;
src: local('Roboto Medium Italic'), url('../fonts/roboto-webfont/Roboto-MediumItalic.woff') format('woff');
}


@font-face {
font-family: 'Roboto Black';
font-style: normal;
font-weight: normal;
src: local('Roboto Black'), url('../fonts/roboto-webfont/Roboto-Black.woff') format('woff');
}


@font-face {
font-family: 'Roboto Black Italic';
font-style: normal;
font-weight: normal;
src: local('Roboto Black Italic'), url('../fonts/roboto-webfont/Roboto-BlackItalic.woff') format('woff');
}

@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('MyriadPro-Regular'), url('../fonts/MyriadPro-Regular.otf');
}

body .select2-container--classic .select2-selection--single,body .select2-container--classic .select2-selection--single .select2-selection__arrow,body .select2-container--classic .select2-selection--single .select2-selection__rendered,body .select2-container--default .select2-selection--multiple,body .select2-container--default .select2-selection--single,body .select2-container--default .select2-selection--single .select2-selection__arrow,body .select2-container--default .select2-selection--single .select2-selection__rendered{border-color:var(--bs-border-color);color:var(--bs-body-color);height:40px;line-height:40px;color:#67757c;}
.select2-results__option{
    color:#67757c;
}
/* html { scroll-behavior: smooth; }
:root {scroll-behavior: smooth;} */

#container-landing{
    background-image: url('../../assets/images/bg-landing.png');
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0%;
}

.text-landing{
    font-family: "Bebas Neue Regular";
    font-size: 50px;
}

.text-landing-1{
    color: #ffffff;
}

.text-landing-2{
    color: #422312;
    /* display: inline-block; */
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px; 
    padding-right: 20px; 
    margin-left:10px;
    margin-right:10px;
    background-color: #ffffff;
}
.wrapper-header-menu{
    background-color: #f9f1dd;
    /* position: fixed; */
    /* top: 0px; */
    width: 100vw;
}

.header-menu ul{
    margin-bottom: 0px !important;
}
.header-menu ul li a{
    font-family: "Roboto Regular";
    color: #39151c;
}

.header-menu ul li a:hover{
    font-weight: bold;
    color: #39151c;
    text-decoration
}

form label b{
    color: #000000;
}

.section#Beranda{
    /* height: calc(100vh - 79.69px); */
    /* background-image: url('../../assets/images/bg-landing.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 9.69px; */
    
}
.page-beranda{
    background-image: url('../../assets/images/bg-landing.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    min-height: calc(100vh - 63.69px);
}

#product-halal{
    /* margin-top: -30px; */
}

.text-periode{
    border: solid 2px white;
    font-family: "Bebas Neue Regular";
    color: #ffffff;
}

.container-fluid{
    height: 100vh;
}

.wrapper-page{
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}

.section{
    background-color: #f9f1dd;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100%;
    overflow:hidden;
    position: relative;    
}

.section#Mekanisme{
    background-image: url('../../assets/images/bg-mekanisme.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    
}
.step-mekanisme{
    position: relative;
    top: 0px;
}
.step-arrow{
    position: absolute;
    right: -11%;
    top: 50%;
    width: 22%;
    z-index: 100;
}
.arrow-1{
    top: calc(50% + 3rem);
}
#snk{
    background-image: url('../../assets/images/bg-snk.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0%;
}
.container-title-snk{
    text-align: center;
    /* padding-top: 20px; */
}
.wrapper-snk > div.col-12{
    height: 100%;
}
.title-snk{
    
    font-size: 45px;
    color: #39151c;
    font-family: "Bebas Neue Regular";
}
.wrapper-text-snk{
    background-image: url('../../assets/images/bg-text-snk.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    overflow: hidden;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2.7rem;
    padding-right: 2.7rem;
}
.content-snk{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    text-align: justify;
}

#FormInput{
    background-image: url('../../assets/images/bg-form.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 100%;
}
.title-form-input{
    font-size: 42px;
    color: #ffffff;
    font-family: "Bebas Neue Regular";
}

.row-form{
    background-image: url(../../assets/images/bg-form-repeat.jpg);
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: 100% 0%;
}
.row-form-left{
    background-color: #ffffff;
}
.row-form-right{
    /* background: linear-gradient(180deg,rgba(124, 1, 20, 1) 0%, rgba(219, 40, 61, 1) 100%); */
    /* background-image: url('../../assets/images/bg-row-form-right.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%; */
    /* background-color: #7c0114; */
}

form label {
    font-size: 16px;
}

.nav-pills .nav-link.active{
    background-color: transparent;
    color: #39151c;
    /* text-decoration: underline; */
}

.nav-link:focus{
    color: #39151c;
}

.section#contact{
    height: auto;
}
.section#contact .left-contact img{
    height: 30px;
    margin-right: 5px;
}
.section#contact .left-contact span{
    margin-left: 3px;
}

#back-to-top{
    position: fixed;
    bottom: 50px;
    right: 50px;
}

#close-back-to-top{
    color: #ffffff;
    position: absolute;
    top: -10px;
    right: -11px;
    width: 15px;
    height: 15px;
    font-size: 18px;
}

.side-menu{
    position: absolute;
    width: auto;
    bottom: 334px;
    left: 37px;
    color: #ffffff;
    font-size: 15px;

    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);

    transform-origin: left center;
}

.side-menu li i{
    /* display: block; */
    font-size: 22px;
}
/* .side-menu li: i{
   
} */
.side-menu li.active span{
    display: inline;
}
.side-menu li.active i{
    font-size: 32px;
    margin-bottom: -5px;
    color: #ffffff;
}

#snk .side-menu li span, #snk .side-menu li i{
    color: #3e0c16;
}

.side-menu li span{
    display: none;
}
.side-menu li{
    display: block;
    float: left;
    margin-left: 10px;
    /* font-family: "Bebas Neue Regular"; */
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
}

#bs-example-modal-md .modal-content{
    background-image: url('../../assets/images/bg-popup.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    min-height: 50vh;
    background-color: transparent;
    padding: 13px;
}
#bs-example-modal-md .modal-content .modal-footer{
    justify-content: center;
    
}
#bs-example-modal-md .modal-content .btn{
    width: 70%;
    background-image: url('../../assets/images/bg-button-popup.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-color: transparent !important;
    color: #3f0d16 !important;
    font-family: 'Helvetica Neue Medium';
}

.content-modal{
    display: none;
    font-family: 'Roboto Medium';
}

.container-claim{
    background-image: url('../../assets/images/bg-claim.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 100%;
}

.modal-body .content-modal.content-message p{
    margin-top: 1.5rem;
}

/* ========================================================================================================= */
/* ========================================================================================================= */
/* ========================================================================================================= */
/* WIDE SCREEN STYLES */
/* ========================================================================================================= */
/* ========================================================================================================= */
/* ========================================================================================================= */
@media (min-aspect-ratio: 2/1) {
    /* .page-beranda{
        display: none;
    } */
    .page-beranda > div:first-child > div.row:first-child > div {
        padding-top: 15px !important;
    }

    .page-beranda > div:first-child > div.row:first-child > div img{
        width: 80%;
    }
    #product-halal{
        width: 115%;
    }

    #FormInput > div:first-child > div:first-child > div:first-child {
        padding-bottom: 1rem !important;
    }
    
    .container-claim > div:first-child > div:first-child > div:first-child > div:first-child {
        padding-bottom: 1rem !important;
    }
}


/* ========================================================================================================= */
/* ========================================================================================================= */
/* ========================================================================================================= */
/* MOBILE STYLES */
/* ========================================================================================================= */
/* ========================================================================================================= */
/* ========================================================================================================= */
@media (max-width: 768px) {
    #back-to-top{
        display: none;
    }
    .side-menu span{
        font-size: 10px;
    }
    .side-menu{
        bottom: auto;
        left: 7px;
        font-size: 6px;
        top: 161px;
    }
    
    .side-menu li i{
        position: relative;
        top: 1px;
        font-size: 16px;
    }
    .side-menu li.active i{
        font-size: 19px;
        top: -2px;
    }
    .side-menu li.active{
        align-items: center !important;
        padding-bottom: 0px;
        padding-top: 0px;
    }
    .wrapper-header-menu{
        /* display: none; */
        height: 77px;
        position: relative;
    }
    /* .wrapper-header-menu .header-menu:nth-child(2){ */
    .wrapper-header-menu #navbarSupportedContent{
        background-color: #f9f1dd;
        /* position: absolute;
        top: 100%; */
        z-index: 100;
        /* display: none; */
    }
    #header-menu-1 .nav-item{
        align-self: end;
        margin-right: 15px;;
    }
    .page-beranda{
        min-height: auto;
        align-items: center;
        height: calc(100% - 77px);
        background-image: none;
        position: relative;
    }
    #Beranda{
        background-image: url('../../assets/images/bg-beranda-mobile.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #5c010b;
    }
    #product-halal{
        display: none;
    }
    #product-halal-mobile{
        display: inline !important;
    }
    .promosi-text{
        position:  relative !important;
        bottom: 0px !important;
        font-size: 11px !important;
        padding-top: 25px;
    }
    .wrapper-prize-img-mobile{
        display: block !important;
    }
    .wrapper-prize-img-mobile > div.row{
        display: block !important;
    }
    .wrapper-prize-img-mobile div img{
        margin-top: 0px !important;
        margin-left: 0px !important;
    }

    .section#Mekanisme{
        background-image: url(../../assets/images/bg-mekanisme-mobile.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 0%;
    }

    .wrapper-step-mekanisme{
        display: none;
    }
    .wrapper-step-mekanisme-mobile > div.row{
        padding-left: 13px;
        padding-right: 13px;
    }
    .wrapper-step-mekanisme-mobile{
        display: block !important;
    }
    .step-mekanisme{
        padding-left: 4px;
        padding-right: 4px;
    }
    .step-mekanisme:last-child a img:first-child{
        margin-top: 3px;
    }
    .arrow-1 {
        top: calc(50% - 8px);
    }
    .arrow-2{
        width: 15%;
        right: calc(50% - 11px);
        top: auto;
        bottom: -19px;
    }
    .arrow-3{
        top: auto;
        bottom: calc(50% - 13px);
        right: auto;
        left: -20px;
    }

    .wrapper-snk > div.col-12{
        padding-left: 15px !important;
        padding-right: 15px !important;
        height: auto;
    }
    .title-snk {
        font-size: 34px;
    }
    .content-snk{
        font-size: 12px;
    }
    .content-snk h3{
        font-size: 14px;
    }
    .content-snk ol, ul{
        padding-left: 15px;
    }

    .wrapper-text-snk{
        background-image: url(../../assets/images/bg-text-snk-mobile.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: 50% 0%;

        height: 75vh !important;
        padding-top: 19px;
        padding-bottom: 20px;
        padding-left: 17px;
        padding-right: 16px;
    }

    #snk{
        background-image: url(../../assets/images/bg-snk-mobile.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 0%;
    }

    #FormInput{
        height: auto;
        padding-bottom: 40px;;
    }
    .wrapper-form-input{
        border-radius: 7px !important;
        
    }
    .wrapper-form-input div:first-child{
        border-top-left-radius: 7px !important;
        border-top-right-radius: 7px !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
    .wrapper-form-input div:last-child{
        border-bottom-left-radius: 7px !important;
        border-bottom-right-radius: 7px !important;
    }

    .row-form-right{
        padding-right: 0px;
        padding-left: 0px;
    }

    .row-form-right img{
        width: 100%;
        height: auto;
    }

    .row-url > *{
        text-align: center !important;
    }

    #contact > div:first-child{
        order: 2;
    }
    #contact > div:last-child{
        order: 1;
    }

    #contact > div:first-child > div > div.col{
        text-align: center !important;
    }

    #bs-example-modal-md .modal-content{
        background-image: url('../../assets/images/bg-popup-mobile.png')
    }
    #bs-example-modal-md h5, #bs-example-modal-md .h5{
        font-size: 15px;
    }
    #bs-example-modal-md p{
        font-size: 12px;
    }

    .wrapper-form-claim{
        border-radius: 5px !important;
    }
    .row-form{
        background-image: none;
    }
    .wrapper-bg-right-form{
        padding-left: 0px;
        padding-right: 0px;
    }
    .wrapper-bg-right-form img{
        width: 100%;
        margin-right: 0px !important;
        border-radius: 5px !important;
    }
}