@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'odudabold';
    src: url('fonts/oduda-bold-demo-webfont.woff2') format('woff2'),
         url('fonts/oduda-bold-demo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
	--c-black: #010101;
	--c-white: #ffffff;
    --c-blue: #0368CA;
    --c-blued: #0C426E;   
    --c-bluel: #243F8A;
    --f-medium: "Roboto", sans-serif;
    --f-rounded: "Quicksand", sans-serif;
    --f-hartwell: "Roboto", sans-serif;
    --f-black: "Roboto", sans-serif;
    --f-oduda: 'odudabold';
    --f-18: 18px;
    --f-20: 20px;
    --f-22: 22px;
    --f-25: 25px;
    --f-35: 35px;
    --f-40: 40px;
    --f-48: 48px;
    --f-55: 55px;
    --f-65: 65px;
    --f-100: 100px;
    --lh-18: 28px;
    --lh-20: 30px;
    --lh-22: 32px;
    --lh-25: 35px;
    --lh-35: 45px;
    --lh-40: 50px;
    --lh-48: 58px;
    --lh-55: 65px;
    --border-1: 1px solid transparent;
    --border-2: 2px solid transparent;
    --rad-1: 12px;
    --rad-2: 18px;
    --rad-3: 24px;
    --s-1 : 10px;
	--s-0 : calc(var(--s-1)/2);
	--s-2 : calc(var(--s-1)*2);
	--s-3 : calc(var(--s-1)*3);
	--s-4 : calc(var(--s-1)*4);
	--s-5 : calc(var(--s-1)*5);
	--s-6 : calc(var(--s-1)*6);
	--s-7 : calc(var(--s-1)*7);
	--s-8 : calc(var(--s-1)*8);
	--s-9 : calc(var(--s-1)*9);
	--s-10 : calc(var(--s-1)*10);
}


body {
    font-family: var(--f-medium); font-weight: 500;
    color: var(--c-black);
    font-size: var(--f-25);
    background-color: var(--c-white);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}
img{max-width: 100%;}
h1, h2, h3, h4, h5, h6{font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; line-height: inherit;}
a{color: inherit; border: none; text-decoration: none;}
p, .text{margin-bottom: var(--s-2); font-size: var(--f-22); line-height: var(--lh-22);}
ol, ul{list-style: none; margin: 0; padding: 0;}
strong{font-family: var(--f-black); font-weight: 900;}
._desktop, .carouselSingle._desktop{display: block;}
._mobile, .carouselSingle._mobile{display: none;}

.btn-border-blue{display: inline-block; font-family: var(--f-hartwell); font-weight: 500; font-size: var(--f-40); line-height: var(--f-40); border: var(--border-1); background: none; border-radius: var(--rad-1); padding: var(--s-0) var(--s-2) 0 var(--s-2); transition: all .3s; cursor: pointer;}
    .btn-border-blue{color: var(--c-blued); border-color: var(--c-blued);}
    .btn-border-blue:hover{background: var(--c-blued); color: var(--c-white);}
.btn-solid-blue, .btn-solid-white{display: inline-block; font-family: var(--f-hartwell); font-weight: 500; font-size: var(--f-40); line-height: var(--f-40); border: var(--border-1); color: var(--c-white); background: var(--c-bluel); border-radius: var(--rad-1); padding: var(--s-0) var(--s-2) 0 var(--s-2); transition: all .3s; cursor: pointer;}
    .btn-solid-blue:hover, .btn-solid-white:hover{border-color: var(--c-bluel); background: transparent; color: var(--c-bluel);}
    .btn-solid-white{background: var(--c-white); color: var(--c-blued); border-color: var(--c-white);}
    .btn-solid-white:hover{background: transparent; color: var(--c-white);}

.title{font-family: var(--f-oduda); font-weight: bold; font-size: var(--f-65); line-height: var(--f-65); color: var(--c-blued);}
.title-bg, .title-bg-lg, .title-bg-sm{display: inline-block; font-family: var(--f-oduda); font-weight: bold; font-size: var(--f-65); line-height: var(--f-65); background: var(--c-bluel); color: var(--c-white); border-radius: var(--rad-1); padding: var(--s-1) var(--s-2) 0 var(--s-2); transition: all .4s;}
.title-bg-lg{font-size: var(--f-100); line-height: var(--f-100); border-radius: var(--rad-2);}
.title-bg-sm{font-size: var(--f-48); line-height: var(--f-48);}
.subtitle{font-family: var(--f-hartwell); font-weight: 500; font-size: var(--f-48); line-height: var(--lh-48); color: var(--c-blued);}
a:hover .title-bg{transform: scale(1.02);}

._white{color: var(--c-white);}
._blue{color: var(--c-blue);}
._blued{color: var(--c-blued);}
._bluel{color: var(--c-bluel);}

._medium{font-family: var(--f-medium); font-weight: 500;}
._rounded{font-family: var(--f-rounded); font-weight: 700;}
._hartwell{font-family: var(--f-hartwell); font-weight: 500;}
._black{font-family: var(--f-black); font-weight: 600;}
._oduda{font-family: var(--f-oduda);}

._f-18{font-size: var(--f-18);}
._f-20{font-size: var(--f-20);}
._f-25{font-size: var(--f-25);}
._f-35{font-size: var(--f-35);}
._f-40{font-size: var(--f-40);}
._f-48{font-size: var(--f-48);}
._f-55{font-size: var(--f-55);}

/*space*/
.s-0{padding-top: var(--s-0);}
.s-1{padding-top: var(--s-1);}
.s-2{padding-top: var(--s-2);}
.s-3{padding-top: var(--s-3);}
.s-4{padding-top: var(--s-4);}
.s-5{padding-top: var(--s-5);}
.s-6{padding-top: var(--s-6);}
.s-7{padding-top: var(--s-7);}
.s-8{padding-top: var(--s-8);}
.s-9{padding-top: var(--s-9);}
.s-10{padding-top: var(--s-10);}

.container-fluid{padding: 0 3%;}


/*preloader*/
#preloader {position: fixed; top:0; left:0; right:0; bottom:0; background: var(--c-white); z-index: 9999;}
.preloader-content{position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translate(0, -50%); width: 272px;}
.preloader-content img{max-width: 100%;}
.loading-bar{width: 100%; height: 4px; margin: auto; background: #0c4c91; margin-top: 22px; position: relative; overflow: hidden;}
.loading-bar::before{content: ''; width: 135px; height: 4px; background: var(--c-white); position: absolute; left: -34px; animation: bluebar 1.5s infinite ease;}
@keyframes bluebar{
	50%{left: 140px;}
}

/*HEADER*/
.header {background: var(--c-white);}
.header-socket{position: relative; width: 100%; background: var(--c-blued); border-bottom: var(--s-1) solid var(--c-blue); padding: var(--s-1) 0; font-family: var(--f-medium); font-weight: 500; font-size: var(--f-25); color: var(--c-white);}
.header-socket *{transition: all .1s;}
    .header-socket .d-flex{justify-content: flex-end; align-items: center;}
    .social{margin-right: var(--s-3);}
    .social i{font-size: var(--f-35); padding: 0 var(--s-1); margin: 0 var(--s-1);}
    .lang{font-size: var(--f-22); display: flex; padding-left: var(--s-4); border-left: var(--border-2); border-color: var(--c-white); margin-left: var(--s-4);}
    .lang a{border: var(--border-2); border-color: var(--c-white); padding: 0 var(--s-1); border-radius: var(--rad-1); margin: 0; transition: all .3s;}
    .lang a:nth-child(1){border-radius: var(--rad-1) 0  0 var(--rad-1);}
    .lang a:nth-child(2){border-radius: 0 var(--rad-1) var(--rad-1) 0;}
    .lang a:hover, .lang .active{background: var(--c-white); color: var(--c-blued);}
    .header-socket ._desktop{display: block;}
    .header-socket ._mobile{display: none;}
/*menu*/
.navbar{padding: var(--s-2) 0;}
.navbar-brand{width: 272px;}
.nav-item{margin: 0 var(--s-1); padding: 0 var(--s-2); border-left: var(--border-2); border-color: var(--c-blued);}
.nav-item:nth-child(1){border: none; margin-left: 0; padding-left: 0;}
.nav-item:nth-last-child(1){margin-right: 0; padding-right: 0;}
.navbar-light .navbar-nav .nav-link{color: var(--c-blued);}
.navbar-light .navbar-nav .nav-link:hover{color: var(--c-bluel);}
.nav-link{font-family: var(--f-rounded); font-weight: 700; font-size: var(--f-35); padding: var(--s-0) var(--s-1); color: var(--c-blued); transition: all .3s;}
.nav-link:hover{border-color: var(--c-blue); color: var(--c-blue);}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link{color: var(--c-blued); font-weight: bold;}
.nav-item._level{margin: 0;}
.nav-item._level .dropdown-menu{display: none;}
.nav-item._level:hover .dropdown-menu{display: block; left: 150%; top: 0; margin-top: -20px;}
.nav-item._level .dropdown-menu li:nth-child(1){border-radius: 0 var(--rad-1) 0 0;}
.nav-item._level .dropdown-menu li:nth-last-child(1){border-radius: 0 0 var(--rad-1) var(--rad-1);}
.nav-item._level .dropdown-menu:before{display: none;}

/*dropdown*/
.dropdown .dropdown-menu {width: 280px; left: 50%; transform: translate(-50%,-10px); transition: all .4s; text-align: center; border-radius: var(--rad-1); border: none; background: none; padding-top: var(--s-3);}
.dropdown .dropdown-menu.dropdown-menu-end{left: auto; right: 0; transform: translate(0,-10px);}
.dropdown .dropdown-menu:before{font-family: FontAwesome; content: "\f0d8"; position: absolute; z-index: -1; top: 0; left: 0; right: 0; margin: auto; color: var(--c-blued); font-size: var(--f-65); margin-top: -20px; pointer-events: none; transform: scaleX(.7);}
.dropdown .dropdown-menu.dropdown-menu-end:before{font-family: FontAwesome; content: "\f0d8"; position: absolute; z-index: -1; top: 0; left: auto; right: 10%; color: var(--c-blued); font-size: var(--f-65); margin-top: -20px; pointer-events: none; transform: scaleX(.7);}
.dropdown-menu li{position: relative; background: var(--c-blued); padding: var(--s-1); transition: all .4s;}
.dropdown-menu li ._space{display: block;}
.dropdown-menu li:hover{background: var(--c-blue);}
.dropdown-menu li:after{content: " "; position: absolute; background: url(../img/line-menu.png) repeat-x bottom center; background-size: 100% auto; width: 80%; height: 100%; bottom: 0; left: 0; right: 0; margin: auto; pointer-events: none;}
.dropdown-menu li:nth-last-child(1):after{display: none;}
.dropdown-menu li:nth-child(1){border-radius: var(--rad-1) var(--rad-1) 0 0;}
.dropdown-menu li:nth-last-child(1){border-radius: 0 0 var(--rad-1) var(--rad-1); border: none;}
a.dropdown-item, a.dropdown-item:hover{font-family: var(--f-rounded); font-weight: 700; font-size: var(--f-25); line-height: normal; padding: var(--s-0) var(--s-1); color: var(--c-white); background: transparent; word-wrap: break-word; white-space: normal;}
.header-socket a.dropdown-item{font-size: var(--f-20);}
.dropdown-toggle::after{display: none;}

/*carousel*/
.owl-nav {-webkit-tap-highlight-color: transparent; height: 0px;}
.owlNext, .owlPrev{position: absolute; top: 50%; transform: scale(.9) translate(0,-60%); z-index: 88; cursor: pointer; opacity: 1; transition: all .4s; color: var(--c-white); font-size: var(--f-40); display: flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--c-blued); width: var(--s-6); height: var(--s-6);}
.owlNext:hover, .owlPrev:hover{transform: scale(1) translate(0,-60%);}
.owlNext{right: 1%; transform-origin: right;}
.owlPrev{left: 1%; transform-origin: left;}
.owlPrev.up, .owlNext.down{right: 0; left: 0; margin: auto;}
.owlPrev.up{top: 0%;}
.owlNext.down{top: 100%;}
.disabled .owlPrev, .disabled .owlNext{opacity: .4;}

.owl-carousel .owl-dots{position: absolute; bottom: 10%; width: 100%; z-index: 80;}
.owl-carousel button.owl-dot{color: var(--c-white);}
.owl-nav.disabled + .owl-dots {
   position: absolute; bottom: 5%; left: 0; right: 0; margin: auto; z-index: 88;
}
.owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    -webkit-tap-highlight-color: transparent; 
}
.owl-dots *{
    transition: all .4s;
}
.owl-dots .owl-dot span {
    width: var(--s-2);
    height: var(--s-2);
    margin: 0 var(--s-1);
    background: var(--c-white);
    display: block;
    border-radius: 50%; 
    -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);  
}
.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span {
    background: var(--c-blued); width: var(--s-3); height: var(--s-3);
}

/*FOOTER*/
footer {position: relative; width: 100%; background: var(--c-blued); color: var(--c-white); border-top: var(--s-1) solid #B3E0FF; padding: var(--s-1) 0; font-family: var(--f-medium); font-weight: 500; font-size: var(--f-18);}
footer ._space{display: none;}
footer *{transition: all .3s;}
footer .d-flex{align-items: center; justify-content: space-between;}
footer .d-flex .col-md-6{flex-basis: 49%;}
footer .d-flex .col-md-6.position-relative{border-right: var(--border-1); border-color: var(--c-white); padding-right: var(--s-1);}
footer.hidden{display: none;}


/*MAINTENANCE*/
.maintenance{padding: var(--s-10) 0;}
.maintenance .d-flex{align-items: center;}
.maintenance .d-flex .col-md-6{flex-basis: 48%;}
.maintenance ._absolute{position: absolute; z-index: 2; bottom: -80px; left: -80px; transform-origin: center;}

/*cover*/
.cover{position: relative;}
.cover img{display: inline-block; width: 100%;}
.cover ._overlay{position: absolute; z-index: 2; bottom: 10%; left: 0; right: 0; margin: auto; text-align: center; transition: all .4s;}
.cover ._overlay a{color: var(--c-white);}
.cover ._overlay .title-bg-lg{transition: all .4s;}
.cover ._overlay a:hover .title-bg-lg{transform: translateX(5px);}
._gradient1{position: absolute; width: 100%; height: 100%; z-index: 1; pointer-events: none; top: 0; left: 0; right: 0; margin: auto; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(234,234,234,1) 90%);}
._gradient2{position: absolute; width: 100%; height: 100%; z-index: 1; pointer-events: none; top: 0; left: 0; right: 0; margin: auto; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(234,234,234,1) 90%);}


/*video*/
.video iframe{width: 100%; height: 366px;}
.video-md iframe{width: 800px; height: 450px;}
.video-lg iframe{width: 100%; height: 800px;}
/* .video::after{content: ''; position: absolute; z-index: 2; top: 50%; left: 0; right: 0; margin: auto; transform: scale(.95) translate(0,-50%); pointer-events: none; width: 100px; height: 70px; background: url(../img/icon-youtube.png) no-repeat center; transition: all .4s; transform-origin: center;} */
/* .video:hover::after{transform: scale(1) translate(0,-50%);} */

/*buynow*/
.buynow img{transition: all .4s; transform: scale(.95); cursor: pointer;}
    .buynow img:hover{transform: scale(1);}
.buynow-content{display: none; position: relative; border: 9px solid var(--c-blued); border-radius: 150px; padding: var(--s-2); margin-top: 4vw;}
    .buynow-content::before{content: ''; position: absolute; z-index: 2; top: 0; left: 0; pointer-events: none; background: url(../img/arrow-1.png) no-repeat top left; width: 169px; height: 120px; margin-top: -119px; margin-left: 20%;}
    .buynow-list{display: flex; flex-wrap: wrap; justify-content: center;}
    .buynow-list li{margin: var(--s-0) var(--s-3) 0 var(--s-3); transition: all .3s;}
    .buynow-list li:hover{transform: translateY(-5px);}

/*distributor*/
.distributor img{transition: all .4s; transform: scale(.95); cursor: pointer;}
.distributor img:hover{transform: scale(1);}
.distributor-content{display: none; position: relative; padding: var(--s-2); margin-top: -1vw;}
.distributor-content img.drop{display: block; margin: auto; width: 60px; margin-bottom: -3px;}
.distributor-content .form-select{border: 3px solid var(--c-blued); width: 100%; max-width: 342px; margin: auto;  background-size: 60px auto;}


/*share*/
.addthis_toolbox i{display: flex; justify-content: center; align-items: center; background: var(--c-bluel); color: var(--c-white); width: var(--s-8); height: var(--s-8); margin: 0 var(--s-1); font-size: var(--f-48); border-radius: 50%; transition: all .4s;}
.addthis_toolbox i:hover{transform: scale(1.05);}

/*paging*/
.paging{display: flex; justify-content: center; align-items: center; transition: all .4s;}
	.paging li a{display: flex; justify-content: center; align-items: center; width: var(--s-5); height: var(--s-5); color: var(--c-bluel); border-radius: 50%; border: var(--border-2); border-color: var(--c-bluel); font-size: var(--f-25); margin: 0 var(--s-1);}
	.paging li.active a, .paging li:hover a{background: var(--c-bluel); color: var(--c-white);}

/*table*/
table {border-collapse: collapse; width: 100%;}
td, th {border: 1px solid #dddddd; text-align: center; padding: var(--s-0) var(--s-1);}
tr:nth-child(even) {background-color: #f1f1f1;}

/*home*/
.home ._content{position: absolute; z-index: 2; top: 0; width: 53%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.home .subtitle{padding: var(--s-6) 0 var(--s-4) 0;}
.home-brand, .home-resep, .home-artikel{position: relative; background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; background-size: cover;}
.home-brand ._overlay, .home-artikel ._overlay{position: absolute; z-index: 1; width: 80%; height: 100%; top: 0; left: 0; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
.home-resep ._overlay{position: absolute; z-index: 1; width: 80%; height: 100%; top: 0; right: 0; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}
.home-brand ._content, .home-artikel ._content{left: 0; text-align: left; padding-left: 3%;}
.home-resep ._content{right: 0; text-align: right; padding-right: 3%;}


/*tentamg-kami*/
.tentang-kami{margin: var(--s-4) auto; color: var(--c-bluel); text-align: center;}


/*brand*/
.brand{margin: var(--s-4) auto;}
.brand ._list{display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;}
.brand ._list li{display: flex; justify-content: center; align-items: center; border-radius: var(--rad-2); border: var(--border-2); border-color: var(--c-blued); padding: var(--s-1); margin-right: var(--s-3); margin-bottom: var(--s-3); transition: all .4s; width: 23%; transform: scale(1);}
.brand ._list li:hover{transform: scale(1.05);}
.brand ._list li:nth-child(4n){margin-right: 0;}


/*artikel*/
.artikel{margin: var(--s-4) auto;}
.artikel .item{position: relative; overflow: hidden;}
.artikel .item *{transition: all .4s;}
.artikel .item:hover img{transform: scale(1.02);}
.artikel .item:hover ._overlay{transform: translateY(-5px);}
.artikel ._overlay{position: absolute; z-index: 2; bottom: var(--s-2); left: 0; right: 0; margin: auto; color: var(--c-blued); font-size: var(--f-25); line-height: var(--f-25); width: 94%; text-align: center;}
.artikel a{transition: all .4s;}
.artikel ._news img{border-radius: var(--rad-3) var(--rad-3) 0 0;}
.artikel ._title{display: flex; justify-content: center; align-items: center; z-index: 1; background: var(--c-bluel); color: var(--c-white); font-size: var(--f-25); line-height: var(--f-25); padding: var(--s-2); border-radius: 0 0 var(--rad-3) var(--rad-3); height: 130px;}
.artikel .col-md-6{width: 48%;}
/* .artikel ul li{list-style: disc; font-size: var(--f-22); line-height: var(--lh-22); padding-bottom: var(--s-2); margin-left: var(--s-3);} */
.artikel._news ul li{list-style: decimal; font-size: var(--f-22); line-height: var(--lh-22); padding-bottom: var(--s-2);}
.artikel._news ul li > ul li{list-style: lower-alpha; margin-left: var(--s-3); padding-bottom: var(--s-0);}
.artikel._news ul li > ul li > ul li{list-style: disc; margin-left: var(--s-3); padding-bottom: 0;}
.artikel._news ol li{list-style: upper-roman; font-size: var(--f-22); line-height: var(--lh-22); padding-bottom: var(--s-2); font-weight: bold;}
.artikel._news ol li > ol li{list-style: decimal; margin-left: var(--s-3); padding-bottom: var(--s-0); font-weight: normal;}
.artikel._news ol li > ol li > ol li{list-style: lower-alpha; margin-left: var(--s-3); padding-bottom: 0; font-weight: normal;}

.artikel-list{display: flex; flex-wrap: wrap; justify-content: flex-start;}
.artikel-list li{width: 23%; margin-bottom: var(--s-4); margin-right: 2.6%;}
.artikel-list li:nth-child(4n){margin-right: 0;}

/*resep*/
.resep{margin: var(--s-4) auto var(--s-4) auto;}
.resep li{margin-bottom: var(--s-1);}
.resep .col-md-6{padding-top: var(--s-6); flex-basis: 46%;}


/*solusi-bisnis*/
.solusi-bisnis{margin: auto;}
.dis{display: none;}
.output ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.output ul li{width: 30%; font-size: var(--f-20); line-height: var(--lh-20); color: var(--c-bluel); padding-top: var(--s-4); text-align: left;}
.output ul.flex-column li{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
.solusi-bisnis a, .solusi-bisnis img{transition: all .3s;}
.solusi-bisnis a:hover{color: inherit;}
.solusi-bisnis a:hover u{text-decoration: none;}
.solusi-bisnis a:hover img{transform: scale(1.02);}
.solusi-bisnis .gap-3, .distributor-content .gap-3{flex-wrap: nowrap;}
.solusi-bisnis .gap-3 .col-12, .distributor-content .gap-3 .col-12{border-radius: var(--s-2); padding: var(--s-1); min-height: var(--s-8); text-align: center; color: var(--c-white); display: flex; justify-content: center; align-items: center;}
.solusi-bisnis .gap-3 .col-9, .distributor-content .gap-3 .col-9{font-size: 14px;}
.solusi-bisnis .form-select{font-size: var(--f-18); height: var(--s-5); border: 3px solid #4780b3;}
.solusi-bisnis .form-select{background: var(--c-white) url("../img/select.png") no-repeat right; background-size: 42px auto;}
.solusi-bisnis .btn-goto{position: absolute; z-index: 2; top: 50%; right: var(--s-5); transform: translate(0,-50%); margin-top: calc(-1 * var(--s-6)); width: var(--s-3);}
.solusi-bisnis .title-kreasi, .solusi-bisnis .title-img{text-align: center;}
.bisnis-1{background: url(../img/solusi-bisnis/2024-section-2-1.jpg) no-repeat center;}
.bisnis-2{background: url(../img/solusi-bisnis/2024-section-3-0.jpg) no-repeat center; background-size: 100% 100%; padding: var(--s-10) 0;}
.bisnis-3{background: #4e8ac9 url(../img/solusi-bisnis/2024-section-4-1.jpg) no-repeat top center; padding: 40px 0;}
.bisnis-4{background: url(../img/solusi-bisnis/2024-section-5-1.jpg) no-repeat top center; background-size: 100% 100%; padding: var(--s-10) 0;}
.bisnis-5{background: url(../img/solusi-bisnis/2024-section-5-1.jpg) no-repeat top center; background-size: 100% 100%; padding: var(--s-10) 0;}
.bisnis-6{background: #14499f;}
    .bisnis-6-1{background: #fff; border-radius: 0 0 var(--s-10) var(--s-10); color: #3d6fb2;}
    .bisnis-6-2 img{height: var(--s-7);}
    .bisnis-6-2 ._f-18{color: #f1ba58;}
.bg-red{background: #b4417b;}
.bg-green{background: #5e8f58;}
.bg-blue{background: #4780b3;}
.space-left-1{padding-left: var(--s-1);}

.flip-card {background: transparent; width: 380px; height: 668px; padding: 0 var(--s-2);}
.flip-card-inner {position: relative;width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; backface-visibility: hidden; -moz-backface-visibility: hidden;}  
.flip-card:focus {outline: 0;}  
.flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner{transform: rotateY(180deg);}  
.flip-card-front, .flip-card-back {position: absolute; width: 100%; height: 100%;}  
.flip-card-front {z-index: 2; display: flex; justify-content: center; align-items: center;}  
.flip-card-back {transform: rotateY(180deg); z-index: 1; display: flex; justify-content: center; align-items: center;}
.solusi-bisnis .owl-carousel {display: flex !important; flex-direction: row; justify-content: center;}

/*testimoni*/
.testimoni{margin: var(--s-4) auto;}
.testimoni li{position: relative; margin-bottom: var(--s-6); padding: var(--s-3) 0;}
.testimoni ._photo{position: absolute; top: 0; left: 0; padding-left: var(--s-9); z-index: 2;}
.testimoni ._photo::before{content: ' '; position: absolute; background: url(../img/testimoni/quote.png); background-size: 100px auto; width: 100px; height: 69px; top: var(--s-4); left: var(--s-4);}
    .testimoni ._photo img{object-fit: cover; width: 480px; height: auto; border-radius: var(--s-3);}
.testimoni ._content{display: flex; flex-direction: column; justify-content: space-between; background: var(--c-blued); border-radius: var(--s-2); padding: var(--s-4); color: var(--c-white); padding-left: 600px; font-family: var(--f-hartwell); font-weight: 500; min-height: 420px; }
.testimoni ._content p{font-size: 16px; line-height: normal;}
.testimoni ._user{text-align: left; line-height: normal;}
.testimoni ._user ._f-18{font-size: 16px; padding-left: 20px;}


/*hubungi*/
.hubungi{margin: var(--s-4) auto;}
.hubungi ._bg{background: var(--c-bluel); color: var(--c-white); font-size: var(--f-35); padding: 3%; border-radius: 50px;}
.hubungi .col-md-6{flex-basis: 48%; }
.map{width: 100%; height: 500px; border: none;}
.form-control::placeholder, .form-select::placeholder{color: var(--c-bluel);}
.form-control, .form-select{font-size: var(--f-25); color: var(--c-bluel); height: var(--s-7); margin-bottom: var(--s-2); border-radius: var(--rad-3); padding: 0 var(--s-3); border: var(--border-2); outline: none;}
.form-select{background: var(--c-white) url("../img/select.png") no-repeat right; background-size: 78px auto; border-color: var(--c-bluel);}
textarea.form-control{height: 220px; padding: var(--s-1) var(--s-3);}
.hubungi button{border: var(--border-2); border-color: transparent; border-radius: var(--rad-3); background: #B3E0FF; font-size: var(--f-35); height: var(--s-7); padding: var(--s-1) var(--s-3); color: var(--c-bluel); transition: all .4s;}
.hubungi button:hover{border-color: var(--c-bluel);}


/*MOBILE*/
@media only screen and (min-width: 10px) and (max-width: 767px) {
    :root {
        --f-18: calc(18px * .5);
        --f-20: calc(20px * .5);
        --f-22: calc(22px * .5);
        --f-25: calc(25px * .5);
        --f-35: calc(35px * .4);
        --f-40: calc(40px * .4);
        --f-48: calc(48px * .4);
        --f-55: calc(55px * .4);
        --f-65: calc(65px * .3);
        --f-100: calc(100px * .3);
        --lh-18: calc(28px * .5);
        --lh-20: calc(30px * .5);
        --lh-22: calc(32px * .5);
        --lh-25: calc(35px * .5);
        --lh-35: calc(45px * .4);
        --lh-40: calc(50px * .4);
        --lh-48: calc(58px * .4);
        --lh-55: calc(65px * .4);
        --rad-1: calc(12px * .5);
        --rad-2: calc(18px * .5);
        --rad-3: calc(24px * .5);
        --s-1 : calc(10px * .5);
    }

    ._desktop, .carouselSingle._desktop{display: none;}
    ._mobile, .carouselSingle._mobile{display: block;}

    /*preloader*/
    .preloader-content{transform: scale(.6) translate(0, -50%);}

    /*HEADER*/
    .header-socket ._desktop{display: none;}
    .header-socket ._mobile{display: block;}

    /*menu*/
    .navbar-light .navbar-toggler{border: var(--border-2); border-color: var(--c-blued); color: var(--c-blued);}
    .navbar-brand {width: calc(272px * .5);}
    .navbar-nav{padding-top: 20px;}
    .nav-item{margin: 0; padding: 0; border: none;}
    .navbar-toggler{padding: var(--s-0) var(--s-1);}
    .navbar-toggler:focus{box-shadow: 0 0 0 0.15rem;}

    /*dropdown*/
    .dropdown .dropdown-menu {width: 100%; left: 0; transform: none; padding-top: 0px; margin-top: 13px;}
    .dropdown .dropdown-menu.dropdown-menu-end{left: 0; right: auto; transform: none;}
    .dropdown .dropdown-menu:before{display: none;}
    .dropdown .dropdown-menu.dropdown-menu-end:before{display: none;}
    .dropdown-menu li:nth-last-child(1):after{display: none;}
    .dropdown:hover .dropdown-menu {transform: none;}
    .dropdown:hover .dropdown-menu.dropdown-menu-end {transform: none;}
    .dropdown-menu li ._space{display: none;}

    /*FOOTER*/
    footer {text-align: center;}
    footer ._logo img{width: calc(196px * .5); margin: auto;}
    footer ._space{display: block;}
    footer .d-flex .col-md-6{flex-basis: 100%;}
    footer .d-flex .col-md-6.position-relative{border: none;}

    /*MAINTENANCE*/
    .maintenance ._absolute{bottom: calc(-80px * .5); left: calc(-80px * .5);}

    /*cover*/
    .cover ._overlay{position: relative; top: 0; transform: none;}
    .cover ._overlay .title-bg-lg{margin-top: var(--s-4);}
    ._gradient1{display: none;}

    /*video*/
    .video iframe{height: calc(366px * .55);}
    .video-md iframe{width: calc(800px * .4); height: calc(450px * .4);}
    .video-lg iframe{height: calc(800px * .4);}

    .buynow img{width: calc(300px * .4); padding: var(--s-4) 0;}
    .buynow-content{border: calc(9px * .4) solid var(--c-blued); border-radius: calc(150px * .4); margin-top: 8vw;}
        .buynow-content::before{background-size: calc(169px * .4) calc(120px * .4); width: calc(169px * .4); height: calc(120px * .4); left: 0; right: 0; margin: auto; margin-top: -48px;}
        .buynow-list img{height: calc(80px * .5);}

    /*home*/
    .home ._content{position: relative; width: 100%; padding: 20px; text-align: center;}

    /*tentang*/
    .tentang-kami .col-md-3 img{max-width: 120px;}

    /*brand*/
    .brand ._list{justify-content: space-around;}
    .brand ._list li{width: 46%; margin-right: 0;}
    .brand ._list li:nth-child(4n){margin-right: 0;}
    .brand ._list li img{max-width: 80%;}
    .brand .col-md-5{margin-top: var(--s-8);}
    .brand ._reverse{flex-direction: column-reverse;}
    .brand img{max-width: 300px; margin: auto;}
    .brand ._f-25 img{max-width: 100%; margin: auto;}
    .brand .text-end{text-align: center !important;}

    /*artikel*/
    .artikel ._title{height: calc(130px * .5);}
    .artikel .col-md-6{width: 100%;}
    .artikel-list{justify-content: space-between;}
    .artikel-list li{width: 47%; margin-right: 0;}
    .artikel._news ul li, .artikel._news ol li{margin-left: var(--s-3);}

    /*solusi-bisnis*/
    .output ul li img{width: calc(50px * .45);}
    .solusi-bisnis .output ul li{width: 100%;}
    .solusi-bisnis .gap-3{flex-wrap: wrap;}
    .solusi-bisnis .gap-3 .col-9{font-size: 12px;}
    .solusi-bisnis .px-lg-2{padding: var(--s-3) var(--s-1);}
    .solusi-bisnis .title-kreasi img{width: calc(611px * .5);}
    .solusi-bisnis .img-kreasi img{width: calc(814px * .5);}
    .solusi-bisnis .form-select{background-size: calc(42px * .5) auto;}
    .solusi-bisnis .title-img img{height: calc(75px * .5);}
    .flip-card {width: calc(380px * .5); height: calc(668px * .5);}

    /*resep*/
    .resep .col-md-6{flex-basis: 100%;}

    /*testimoni*/
    .testimoni li{background: var(--c-blued); border-radius: var(--s-2);}
    .testimoni ._photo{position: relative; padding-top: var(--s-3);}
    .testimoni ._photo::before{background-size: calc(100px * .5) auto; width: calc(100px * .5); height: calc(69px * .5);}
        .testimoni ._photo img{max-width: 86%;}
    .testimoni ._content{background: transparent; padding-left: var(--s-4); min-height: auto; }
        .testimoni ._content p{font-size: 14px; line-height: normal;}
    .testimoni ._user{text-align: left; line-height: normal;}
        .testimoni ._user ._f-18{font-size: 14px; padding-left: calc(20px * .5);}

    /*hubungi*/
    .hubungi .col-md-6{flex-basis: 100%;}
    .hubungi .col-md-6._bg{margin-bottom: var(--s-8);}
    .hubungi ._bg{border-radius: calc(50px * .5);}
    .map{height: calc(500px * .4);}
    .form-select{background-size: calc(78px * .4) auto;}
    textarea.form-control{height: calc(220px * .5);}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    :root {
        --f-18: calc(18px * .6);
        --f-20: calc(20px * .6);
        --f-22: calc(22px * .6);
        --f-25: calc(25px * .6);
        --f-35: calc(35px * .5);
        --f-40: calc(40px * .5);
        --f-48: calc(48px * .5);
        --f-55: calc(55px * .5);
        --f-65: calc(65px * .5);
        --f-100: calc(100px * .5);
        --lh-18: calc(28px * .6);
        --lh-20: calc(30px * .6);
        --lh-22: calc(32px * .6);
        --lh-25: calc(35px * .6);
        --lh-35: calc(45px * .5);
        --lh-40: calc(50px * .5);
        --lh-48: calc(58px * .5);
        --lh-55: calc(65px * .5);
        --rad-1: calc(12px * .6);
        --rad-2: calc(18px * .6);
        --rad-3: calc(24px * .6);
        --s-1 : calc(10px * .6);
    }
    
    ._desktop, .carouselSingle._desktop{display: none;}
    ._mobile, .carouselSingle._mobile{display: block;}

    /*preloader*/
    .preloader-content{transform: scale(.7) translate(0, -50%);}

    /*header*/
    .navbar-light .navbar-toggler{border: var(--border-2); border-color: var(--c-blued); color: var(--c-blued);}
    .navbar-brand {width: calc(272px * .6);}
    .navbar-nav{padding-top: 20px;}
    .nav-item{margin: 0; padding: 0; border: none;}

    /*dropdown*/
    .dropdown .dropdown-menu {width: 500px; left: 0; transform: none; padding-top: 0px; margin-top: 13px;}
    .dropdown .dropdown-menu.dropdown-menu-end{left: 0; right: auto; transform: none;}
    .dropdown .dropdown-menu:before{display: none;}
    .dropdown .dropdown-menu.dropdown-menu-end:before{display: none;}
    .dropdown-menu li:nth-last-child(1):after{display: none;}
    .dropdown:hover .dropdown-menu {transform: none;}
    .dropdown:hover .dropdown-menu.dropdown-menu-end {transform: none;}
    .dropdown-menu li ._space{display: none;}

    /*FOOTER*/
    footer ._space{display: block;}
    footer ._logo img{width: calc(196px * .6);}

    /*MAINTENANCE*/
    .maintenance ._absolute{bottom: calc(-80px * .6); left: calc(-80px * .6);}

    /*video*/
    .video iframe{height: calc(366px * .5);}
    .video-md iframe{width: calc(800px * .5); height: calc(450px * .5);}
    .video-lg iframe{height: calc(800px * .5);}

    .buynow img{width: calc(300px * .6);}
    .buynow-content{border: calc(9px * .6) solid var(--c-blued); border-radius: calc(150px * .6); margin-top: 7vw;}
        .buynow-content::before{background-size: calc(169px * .6) calc(120px * .6); width: calc(169px * .6); height: calc(120px * .6); margin-top: calc(-119px * .6); margin-left: 20%;}
        .buynow-list img{height: calc(80px * .6);}

    /*home*/
    .home img{width: 100%;}
    .home ._content{position: relative; width: 100%; padding: 20px; text-align: center;}
    .home .subtitle{padding: var(--s-4) 0 var(--s-4) 0;}

    /*artikel*/
    .artikel ._mobile{display: none;}
    .artikel ._title{height: calc(130px * .6);}

    /*solusi-bisnis*/
    .solusi-bisnis .output ul li{width: 45%;}
        .output ul.flex-column li{width: 100%;}
    .solusi-bisnis .gap-3{flex-wrap: nowrap;}
    .solusi-bisnis .gap-3 .col-9{font-size: 12px;}
    .solusi-bisnis .title-kreasi img{width: calc(611px * .5);}
    .solusi-bisnis .img-kreasi img{width: calc(814px * .5);}
    .solusi-bisnis .form-select{background-size: calc(42px * .5) auto;}
    .solusi-bisnis .title-img img{height: calc(75px * .5);}
    .flip-card {width: calc(380px * .5); height: calc(668px * .5);}

    /*resep*/
    .resep ._mobile{display: none;}

    /*testimoni*/
    .testimoni li{background: var(--c-blued); border-radius: var(--s-2);}
    .testimoni ._photo{position: relative; padding-top: var(--s-3);}
    .testimoni ._photo::before{background-size: calc(100px * .5) auto; width: calc(100px * .5); height: calc(69px * .5);}
        .testimoni ._photo img{max-width: 100%;}
    .testimoni ._content{background: transparent; padding-left: var(--s-4); min-height: auto; }
        .testimoni ._content p{font-size: 14px; line-height: normal;}
    .testimoni ._user{text-align: left; line-height: normal;}
        .testimoni ._user ._f-18{font-size: 14px; padding-left: calc(20px * .5);}

    /*hubungi*/
    .hubungi ._bg{border-radius: calc(50px * .6);}
    .map{height: calc(500px * .5);}
    .form-select{background-size: calc(78px * .5) auto;}
    textarea.form-control{height: calc(220px * .6);}
}

@media only screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link{padding: 0;}
    .dropdown .dropdown-menu {display: block; width: 280px; left: 50%; transform: translate(-50%,-10px); transition: all .4s; opacity: 0; height: 0; text-align: center; border-radius: var(--rad-1); border: none; background: none; padding-top: var(--s-3); pointer-events: none;}
    .dropdown .dropdown-menu.dropdown-menu-end{left: auto; right: 0; transform: translate(0,-10px);}
    .dropdown:hover .dropdown-menu {opacity: 1; height: auto; transform: translate(-50%,-10px); pointer-events: all;}
    .dropdown:hover .dropdown-menu.dropdown-menu-end {opacity: 1; height: auto; transform: translate(0,-10px); pointer-events: all;}
}

@media only screen and (min-width: 992px) and (max-width: 1299px) {
    :root {
        --f-18: calc(18px * .7);
        --f-20: calc(20px * .7);
        --f-22: calc(22px * .7);
        --f-25: calc(25px * .7);
        --f-35: calc(35px * .6);
        --f-40: calc(40px * .6);
        --f-48: calc(48px * .6);
        --f-55: calc(55px * .6);
        --f-65: calc(65px * .6);
        --f-100: calc(100px * .6);
        --lh-18: calc(28px * .7);
        --lh-20: calc(30px * .7);
        --lh-22: calc(32px * .7);
        --lh-25: calc(35px * .7);
        --lh-35: calc(45px * .6);
        --lh-40: calc(50px * .6);
        --lh-48: calc(58px * .6);
        --lh-55: calc(65px * .6);
        --rad-1: calc(12px * .7);
        --rad-2: calc(18px * .7);
        --rad-3: calc(24px * .7);
        --s-1 : calc(10px * .7);
    }
    /*preloader*/
    .preloader-content{transform: scale(.7) translate(0, -50%);}

    .container-fluid{padding: 0 3.5%;}

    /*header*/
    .navbar-brand{width: calc(272px * .7);}

    /*dropdown*/
    .dropdown .dropdown-menu {width: calc(280px * .7);}
    .dropdown .dropdown-menu:before{margin-top: -10px;}
    .dropdown .dropdown-menu.dropdown-menu-end:before{margin-top: -10px;}

    /*FOOTER*/
    footer ._space{display: block;}
    footer ._logo img{width: calc(196px * .7);}

    /*MAINTENANCE*/
    .maintenance ._absolute{bottom: calc(-80px * .7); left: calc(-80px * .7);}

    /*video*/
    .video iframe{height: calc(366px * .8);}
    .video-md iframe{width: calc(800px * .6); height: calc(450px * .6);}
    .video-lg iframe{height: calc(800px * .6);}

    .buynow img{width: calc(300px * .7);}
    .buynow-content{border: calc(9px * .7) solid var(--c-blued); border-radius: calc(150px * .7); margin-top: 5vw;}
        .buynow-content::before{background-size: calc(169px * .7) calc(120px * .7); width: calc(169px * .7); height: calc(120px * .7); margin-top: calc(-119px * .7); margin-left: 20%;}
        .buynow-list img{height: calc(80px * .7);}

    /*home*/
    .home-brand ._content, .home-artikel ._content{padding-left: 3.5%;}
    .home-resep ._content{padding-right: 3.5%;}

    /*artikel*/
    .artikel ._title{height: calc(130px * .7);}

    /*solusi-bisnis*/
    .output ul li img{width: calc(50px * .7);}
    .solusi-bisnis .output ul li{width: 45%;}
        .output ul.flex-column li{width: 100%;}
    .solusi-bisnis .title-kreasi img{width: calc(611px * .6);}
    .solusi-bisnis .img-kreasi img{width: calc(814px * .6);}
    .solusi-bisnis .form-select{background-size: calc(42px * .6) auto;}
    .solusi-bisnis .title-img img{height: calc(75px * .6);}
    .flip-card {width: calc(380px * .6); height: calc(668px * .6);}

    /*testimoni*/
    .testimoni ._photo::before{background-size: calc(100px * .7) auto; width: calc(100px * .7); height: calc(69px * .7);}
        .testimoni ._photo img{width: calc(480px * .7);}
    .testimoni ._content{padding-left: calc(600px * .7); min-height: calc(420px * .7); }
    .testimoni ._content p{font-size: calc(16px * .7);}
    .testimoni ._user ._f-18{font-size: calc(16px * .7); padding-left: calc(20px * .7);}

    /*hubungi*/
    .hubungi ._bg{border-radius: calc(50px * .7);}
    .map{height: calc(500px * .6);}
    .form-select{background-size: calc(78px * .6) auto;}
    textarea.form-control{height: calc(220px * .7);}

}

@media only screen and (min-width: 1300px) and (max-width: 1800px) {
    :root {
        --f-18: calc(18px * .8);
        --f-20: calc(20px * .8);
        --f-22: calc(22px * .8);
        --f-25: calc(25px * .8);
        --f-35: calc(35px * .7);
        --f-40: calc(40px * .7);
        --f-48: calc(48px * .7);
        --f-55: calc(55px * .7);
        --f-65: calc(65px * .7);
        --f-100: calc(100px * .7);
        --lh-18: calc(28px * .8);
        --lh-20: calc(30px * .8);
        --lh-22: calc(32px * .8);
        --lh-25: calc(35px * .8);
        --lh-35: calc(45px * .7);
        --lh-40: calc(50px * .7);
        --lh-48: calc(58px * .7);
        --lh-55: calc(65px * .7);
        --rad-1: calc(12px * .8);
        --rad-2: calc(18px * .8);
        --rad-3: calc(24px * .8);
        --s-1 : calc(10px * .8);
    }
    .container-fluid{padding: 0 3.5%;}

    /*header*/
    .navbar-brand{width: calc(272px * .8);}

    /*dropdown*/
    .dropdown .dropdown-menu {width: calc(280px * .8);}
    .dropdown .dropdown-menu:before{margin-top: -12px;}
    .dropdown .dropdown-menu.dropdown-menu-end:before{margin-top: -12px;}

    /*FOOTER*/
    footer ._logo img{width: calc(196px * .8);}

    /*MAINTENANCE*/
    .maintenance ._absolute{bottom: calc(-80px * .8); left: calc(-80px * .8);}

    /*video*/
    .video-md iframe{width: calc(800px * .7); height: calc(450px * .7);}
    .video-lg iframe{height: calc(800px * .7);}

    .buynow img{width: calc(300px * .8);}
    .buynow-content{border: calc(9px * .8) solid var(--c-blued); border-radius: calc(150px * .8);}
        .buynow-content::before{background-size: calc(169px * .8) calc(120px * .8); width: calc(169px * .8); height: calc(120px * .8); margin-top: calc(-119px * .8); margin-left: 20%;}
        .buynow-list img{height: calc(80px * .8);}

    /*home*/
    .home-brand ._content, .home-artikel ._content{padding-left: 3.5%;}
    .home-resep ._content{padding-right: 3.5%;}

    /*artikel*/
    .artikel ._title{height: calc(130px * .8);}

    /*solusi-bisnis*/
    .output ul li img{width: calc(50px * .8);}
    .solusi-bisnis .title-kreasi img{width: calc(611px * .8);}
    .solusi-bisnis .img-kreasi img{width: calc(814px * .8);}
    .solusi-bisnis .form-select{background-size: calc(42px * .8) auto;}
    .solusi-bisnis .title-img img{height: calc(75px * .8);}
    .flip-card {width: calc(380px * .8); height: calc(668px * .8);}

    /*testimoni*/
    .testimoni ._photo::before{background-size: calc(100px * .8) auto; width: calc(100px * .8); height: calc(69px * .8);}
        .testimoni ._photo img{width: calc(480px * .8);}
    .testimoni ._content{padding-left: calc(600px * .8); min-height: calc(420px * .8); }

    /*hubungi*/
    .hubungi ._bg{border-radius: calc(50px * .8);}
    .map{height: calc(500px * .7);}
    .form-select{background-size: calc(78px * .7) auto;}
    textarea.form-control{height: calc(220px * .8);}
}

@media only screen and (min-width: 1024px) and (max-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 920px;
    }
}
@media only screen and (min-width: 1401px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1160px;
    }
}