html,
body {
margin: 0;
font-size: 100%;
background: #fff;
scroll-behavior: smooth;
overflow-x:hidden;
font-family: 'Maven Pro' !important;
padding:0 !important;
}
.navbar-toggler{
background:white;
}
::-webkit-scrollbar {
width: 10px;
cursor: pointer;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
cursor: pointer;
}
::-webkit-scrollbar-thumb {
background: var(--bs-bg-red);
opacity: 90%;
border-radius: 40px;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background: var(--bs-bg-red);
transition:.5s;
}
.btn-rounded-pill{
border-radius:100px;
}
body a {
text-decoration: none;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
[data-bs-theme=dark]{
--bs-bg-red:#0A3C4E;
--bs-bg-white:#17708F;
--bs-bg-footer :#FFD400;
--bs-bg-footer2 :#FFD400;
--bgwave : url(//www.miburungdara.com/mbdw3b/wp-content/themes/mbd2/css/[theme_dir]/images/wave2.webp);
--bs-text-main1 : #FFF;
--bs-text-main2 : #FFF;
--bs-text-main3 : #0A3C4E;
--bs-nav-link: #fff;
--bs-nav-pills-link-active: #fff;
--bs-bg-search: unset;
--bg:#ffffff;
}
[data-bs-theme=light]{
--bs-bg-red:#C70000;
--bs-bg-white:#f2f2f2;
--bs-bg-footer:#C70000;
--bs-bg-footer2 :#FFD400;
--bg:#ffffff;
--bgwave : url(//www.miburungdara.com/mbdw3b/wp-content/themes/mbd2/css/[theme_dir]/images/wave.webp);
--bs-text-main1 : #B71A1A;
--bs-text-main2 :#0A3C4E;
--bs-text-main3 :#fff;
--bs-nav-link: #0A3C4E;
--bs-nav-pills-link-active: #C70000;
--bs-bg-search: #d2d2d2;
}
.bg-nav{
background: var(--bs-bg-white);
}
.card-galery{
height:250px;
display:flex;
}
.text-menu{
color:#0A3C4E;
}
.bg-red{
background: var(--bs-bg-red);
}
.bg-footer{
background : var(--bs-bg-footer);
}
.bg-footer2{
background : var(--bs-bg-footer2);
}
.btn-bullet{
height:50px;
width:50px;
}
.logo-img{
width:65%;
}
.dara1{
top:45%;
right:15%;
width:5%;
animation: jump 3s infinite;
}
@keyframes jump {
0% { transform: translateX(0); }
50% { transform: translateX(20px); }
100% { transform: translateX(0); }
}
.dara2{
top:44%;
right:10%;
width:7%;
animation: moveUpDown 2s ease-in-out infinite;
}
.navbar-cst{
border-radius:9px;
background : #fff;
}
.navbar-cst a{
color: #18849C !important;
}
.bg-banner {
background-color: var(--bs-bg-red);
background-image: url(//www.miburungdara.com/mbdw3b/wp-content/themes/mbd2/css/[theme_dir]/images/banner.webp);
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
.bg-about {
background-color: var(--bs-bg-red);
background-image: url(//www.miburungdara.com/mbdw3b/wp-content/themes/mbd2/css/[theme_dir]/images/about.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bg-resep {
background-color: var(--bs-bg-red);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bg-olshop {
background-color: var(--bs-bg-red);
background-image: url(//www.miburungdara.com/mbdw3b/wp-content/themes/mbd2/css/[theme_dir]/images/olshop.webp);
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
.bg-produk {
background-color: var(--bs-bg-red);
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
.navbar-fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 1000; animation: slideDown 0.5s ease forwards; }
@keyframes slideDown {
from {
top: -100px; }
to {
top: 0;
}
}
@keyframes animate{
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
}
.navbar-blue {
background: rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
color: black !important;
}
.navbar-blue a{
color: black !important;
}
.btnsc-light{
color: white;
}
.bg-whitecs{
background: var(--bs-bg-white);
background-image: url(//www.miburungdara.com/mbdw3b/wp-content/themes/mbd2/css/[theme_dir]/images/patern.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.waveareas {
height: 80px;
width: 100%;
position: absolute;
display: flex;
bottom: 0;
}
.waves#waves1 {
--i: 1;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: var(--bgwave);
background-size: 90% 80px;
animation: animate 1s ease-in-out infinite;
position: absolute;
animation-delay: calc(var(--i)* 0.25s);
background-position-x: 400px;
}
.main-title{
font-size: 4.5em;
font-family: 'Maven Pro';
}
.main-title2{
font-size: 64px;
font-family: 'Maven Pro';
}
.text-main1{
color: var(--bs-text-main1);
transition:.5s;
}
.text-main2{
color: var(--bs-text-main2);
}
.text-main3{
color: var(--bs-text-main3);
}
.text-main4{
color: #0A3C4E;
}
.nav-link {
color: var(--bs-nav-link) !important;
}
.nav-link:hover, .dropdown-item:hover{
font-weight: bold;
transition:.5s;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: var(--bs-nav-pills-link-active) !important;
background-color: transparent !important;
font-weight: bold;
border: 1px solid var(--bs-nav-pills-link-active) !important;
transition:.5s;
}
.input-group:hover .input-group-text, .input-group:hover .form-control {
border-color: #c7cdd4;
}
.input-group-merge .input-group-text:first-child {
border-right: 0 !important;
}
.input-group-text {
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.input-group-text {
background-clip: padding-box;
}
.input-group-text {
display: flex;
align-items: center;
padding: .4375rem .875rem;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.53;
color: #697a8d;
text-align: center;
white-space: nowrap;
background-color: #fff;
border: var(--bs-border-width) solid #d9dee3;
border-radius: var(--bs-border-radius);
}
.input-group-merge .form-control:not(:first-child) {
padding-left: 0;
border-left: 0 !important;
}
.input-group>.form-control, .input-group>.form-select, .input-group>.form-floating {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.form-control {
display: block;
width: 100%;
padding: .4375rem .875rem;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.53;
color: #697a8d;
appearance: none;
background-color: #fff;
background-clip: padding-box;
border: var(--bs-border-width) solid #d9dee3;
border-radius: var(--bs-border-radius);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.bg-search{
background:  var(--bs-bg-search);
}
.list-card{
height: 400px;
width:100%;
border-radius: 14px;
}
.card-fit{
width:100%;
height:100%;
object-fit: cover;
border-radius: 14px;
}
.card-menu{
border-radius:8px; background: rgba(255, 255, 255, 0.7);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #1A3071;
}
.card-mini{
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
height:100%;
width:180px;
border-radius:14px;
background:white;
cursor:pointer;
transition: .5s;
border: 1px solid white;
}
.card-mini:hover{
background: rgba(68, 68, 68, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.card-mini:hover img{
filter: grayscale(.8);
transition: .5s;
} .item-img{
height:120px;
width:100%;
border-radius:14px;
}
.text-card{
color:#0A3C4E;
font-weight: unset;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1; line-clamp: 1;
}
.spgt {
position: relative; }
.spgt .mie {
transition: transform 0.5s ease-in-out;
display: block;
margin: 0 auto;
}
.spgt:hover .mie {
cursor: pointer;
animation: moveRight 0.5s forwards, animasiGelombang 1s 0.5s infinite;
}
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(10%);
}
}
@keyframes animasiGelombang {
0%, 100% {
transform: translateY(0px) translateX(10%);
}
50% {
transform: translateY(10px) translateX(10%);
}
}
.spgt:not(:hover) .mie {
animation: moveBack 0.5s forwards;
}
@keyframes moveBack {
from {
transform: translateX(10%);
}
to {
transform: translateX(0);
}
}
.areaprimg {
top: -10%;
left: 0; width: 100%; height: auto; }
.areaprimg2{
width: 100%;
height:auto;
top:50%;
left:50%;
transform:translate(-50%, -60%)
}
.bkspr{
background-color: var(--bs-bkspr);
border-radius:19px;
width:165px;
}
.fotobkspr {
height: 86px;
width:145px;
display: flex;
flex-flow: column nowrap;
overflow: hidden;
border-radius: 12px;
}
.primg1, .primg2, .primg3, .primg4, .primg5, .primg6, .primg1-detail, .primg2-detail, .primg5-detail, .primg6-detail, .primg3-detail, .primg4-detail {
width: 19%;
height: auto; position: absolute;
z-index: 1; transition: transform 0.5s ease-in-out; }
.primg1 {
transform: rotate(1deg);
left: 7%;
z-index: 2;
width:18%;
}
.primg1-detail {
transform: rotate(1deg);
left: 30%;
z-index: 2;
width:22%;
}
.primg2 {
transform: rotate(350deg); top: 14%;
left: 22%;
z-index: 3;
width:16.5%;
transition: .5s;
}
.primg2-detail {
transform: rotate(350deg); top: 14%;
left: 48%;
z-index: 3;
width:20.5%;
}
.primg3 {
transform: rotate(10deg); top: 5%;
left: 38%;
z-index:5;
width:18.5%;
transition:.5s;
}
.primg3-detail {
transform: rotate(10deg); top: 5%;
left: 30%;
z-index:5;
width:22%;
}
.primg4 {
left: 54%;
transform: rotate(340deg); 
z-index: 3;
width:18.5%;
transition:.5s;
}
.primg4-detail {
left: 50%;
transform: rotate(340deg); 
z-index: 3;
width:22%;
}
.primg5 {
right: 10%;
transform: rotate(280deg);
margin-top:97px;
z-index:4;
width:18%;
transition:.5s;
}
.primg5-detail {
right: 23%;
transform: rotate(280deg);
margin-top: -7px;
z-index: 2;
width: 25%;
}
.primg6 {
margin-top: -30px;
right: 10%;
transform: rotate(260deg);
width:18%;
z-index:3;
transition:.5s;
}
.primg6-detail {
margin-top: 10px;
right: 50%;
transform: rotate(260deg);
width: 25%;
} .produk1:hover img{
transform: scale(1.2) rotate(0deg);
z-index:6;
cursor:pointer;
}
.produk1:hover .primg1, .produk1:hover .primg1-detail {
transform: scale(1.2) rotate(350deg);
z-index:6;
cursor:pointer;
}
.produk1:hover .primg2{
left:23%;
transition:.5s;
}
.produk2:hover img{
transform: scale(1.2) rotate(0deg);
z-index: 6;
cursor: pointer;
}
.produk2:hover .primg3{
left: 36%;
transition:.5s;
}
.produk2:hover .primg4{
left: 55%;
transition:.5s;
}
.produk3:hover img{
transform: scale(1.2) rotate(270deg);
cursor:pointer;
}
.produk3:hover .primg5{
margin-top: 120px;
transition:.5s;
}
.produk3:hover .primg6 {
margin-top: -90px;
transition:.5s;
}
.primg5:hover, .primg5-detail:hover{
z-index:6 !important;
}
.bg-yellowcs{
background: #FFD400;
}
.text-preneur{
font-family:"Poppins";
color:black !important;
}
.mie2{
height:300px;
}
.mie3 {
width:22%;
right: 0;
top: -30%;
animation: moveUpDown 4s ease-in-out infinite;
}
@keyframes moveUpDown {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10%);
}
}
.areacardpre{
position: absolute;
bottom: -13%;
}
.card-pre{
width:80%;
height:300px;
border-radius:20px;
background:white;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
transition: transform 0.5s;
-webkit-transition: transform 0.5s;
-moz-transition: transform 0.5s;
-o-transition: transform 0.5s;
cursor: pointer;
overflow: hidden;
}
.card-inner-pre{
width:100%;
height:300px;
border-radius:20px;
position: absolute;
top: 100%;
left: -100%;
transition: .5s ease-in-out;
} .btn-inner-pre{
color:white !important;
background:#B71A1A;
}
.btn-inner-pre:hover{
transition: .5s ease-in-out;
background: #0A3C4E;
}
.bg-inner-pre{
background:#B71A1A !important;
}
.card-pre:hover .card-inner-pre{
top: 30%;
left: -15%;
transition: .5s ease-in-out;
}
.card-pre:hover img{ scale:1.1;
transition: .5s;
}
.card-pre img{
transition: .5s;
}
.bg-inner-pre:hover{
transition: .5s ease-in-out;
background: #0A3C4E !important;
}
.btn-ln:hover i{
transform: translateX(40%);
rotate: 0deg;
transition:.5s ease-in-out;
}
.btn-ln:hover p{
font-weight:bold;
transition:.5s ease-in-out;
}
.btn-ln i{
rotate: 320deg;
transition:.5s ease-in-out;
}
.mieareas {
height: 260px;
width: 60%;
}
.mieareas .text-main1:hover{
color: black;
scale: 1.2;
transition:.5s;
}
.mies#mies1 {
--i: 1;
left: 0;
width: 100%;
height: 260px;
background: url(//www.miburungdara.com/mbdw3b/wp-content/themes/mbd2/css/[theme_dir]/images/mie4.webp);
background-size: 90% 260px;
animation-delay: calc(var(--i)* 0.25s);
background-position-x: 400px;
animation: moveLeftRight 1s ease-in-out infinite;
}
@keyframes moveLeftRight {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(3%);
}
}
.mie4{
width: 30%;
top: -40% !important;
left: 23%;
}
.iconcs{
width:30px;
height:30px;
border-radius:100%;
background:white;
color:#0A3C4E !important;
cursor:pointer;
}
.text-contactcs{
color: #0A3C4E !important;
}
.contactcs:hover .iconcs{
background:#1482aa !important;
transition: .5s;
color: white !important;
}
.iconcs2{
width:50px;
height:50px;
border-radius:100%;
background:#0A3C4E !important;
color:#fff !important;
cursor:pointer;
}
.iconcs2:hover{
background:#fff !important;
color: #0A3C4E !important;
transition:.5s;
}
.iconcs3{
width:100px;
height:100px;
border-radius:100%;
background:white;
color:#0A3C4E !important;
} .galery-container * {
position: relative;
}
.galery-container *:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
}
.galery-container {  
height: 400px !important;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 10px 10px;
grid-auto-flow: row;
grid-template-areas:
"Area-1 Area-1 Area-2 Area-2 Area-6 Area-8"
"Area-1 Area-1 Area-2 Area-2 Area-7 Area-8"
"Area-1 Area-1 Area-3 Area-4 Area-7 Area-8"
"Area-1 Area-1 Area-3 Area-5 Area-7 Area-8";
}
.Area-1 { 
height:400px;
grid-area: Area-1; }
.Area-2 { 
height:210px;
grid-area: Area-2; }
.Area-3 { 
height:180px;
grid-area: Area-3; }
.Area-4 { 
height:100px;
grid-area: Area-4; }
.Area-5 { 
height:70px;
grid-area: Area-5; }
.Area-6 { 
height:100px;
grid-area: Area-6; }
.Area-7 { 
height:290px;
grid-area: Area-7; }
.Area-8 { 
height:400px;
grid-area: Area-8; }
.overlaygl{
background: rgba(0, 0, 0, 0);
border-radius: 14px;
cursor: pointer;
}
.overlaygl a{
color: rgba(255, 255, 255, 0) !important;
}
.overlaygl:hover{
background: rgba(0, 0, 0, 0.403);
transition: .5s;
color: white;
}
.overlaygl:hover a{
transition: .5s;
color: white !important;
}
#scrollIcon {
transition: transform 0.5s;
}
#scrollIcon.rotate {
transform: rotate(180deg);
}
.card-ol{
display: flex;
}
.card-shop{
width:200px;
height:200px;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
transition: .5s;
}
.shoppee{
background-color: #ffc885;
}
.tokped{
background-color: #a7ff77;
}
.tiktok{
background-color: #898989;
}
.card-shop:hover .area2{
bottom:0;
transition: .5s;;
}
.card-shop:hover .area1{
top:0;
left:0;
height:50%;
transform: unset;
transition: .5s;;
}
.area1{
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: .5s
}
.area2{
bottom:-50%;
transition: .5s;
}
.card-shop h6 {
color: white;
font-size: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.title-produk{
top:8%;
left:50%;
transform: translate(-50%, 8%);
z-index:2;
}
.title-produk2{
top:8%;
left:50%;
transform: translate(-50%, 8%);
z-index:2;
}
#produkContent {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.vh-75{
height:75vh !important;
}
.cards-resep {
margin: 0 auto;
display: grid;
gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.foto-menu {
height: 50vh;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.collapse.show{
position: absolute;
width: 90%;
top: 50%;
z-index: 3;
left: 50%;
transform: translate(-50%, 20%);
}
.tagline{
width:20%;
left: 4%;
} @media (max-width: 1780px){
} @media (max-width:1366px){
} @media(max-width:1280px) {
.dara2 {
top: 30%;
right: 2%;
width: 8%;
}
.card-shop {
width: 150px;
height: 150px;
}
.card-shop h6 {
font-size: 15px;
max-height: 2.6em;
}
} @media(max-width:1151px) {
.navbar-expand-lg{
padding-right:10px !important;
}
.logo-img {
width: 57%;
}
.navbar-cst{
padding: 8px 5px !important;
}
.navbar-cst a{
font-size:15px;
}
.main-title {
font-size: 66px;
}
.text-preneur {
font-size: 100%;
}
.main-title2 {
font-size: 50px;
}
} @media(max-width:1080px) {
.dara2 {
top: 20%;
right: -0%;
width: 9%;
}
.navbar-cst a {
font-size: 13px;
}
.card-pre {
height: 250px;
}
.mie2 {
height: 250px;
}
.list-card {
height: 350px;
width: 100%;
padding-left:0 !important;
}
.item-img {
height: 100px;
width: 100%;
}
.mie4 {
width: 35%;
top: -20% !important;
left: 10%;
}
.mies#mies1 {
height: 230px;
background-size: 90% 230px;
}
.mieareas {
height: 260px;
width: 65%;
}
}
@media(max-width:991px) {
.dara1 {
right: 8%;
}
.main-title {
font-size: 46px;
}
.main-title2 {
font-size: 40px;
}
.container, .container-md, .container-sm {
max-width: 90% !important;
}
.card-menu{
width:120%;
}
.btn-go{
left:20%;
}
.navbar-cst {
padding: inherit !important;
z-index: 2;
}
.border-end {
border-right: none !important;
}
.card-pre:hover .card-inner-pre {
left: -35%;
}
.iconcs2 {
width: 40px;
height: 40px;
}
.iconcs3 {
width: 80px;
height: 80px;
}
.mie4 {
left: 14%;
}
.card-shop {
width: 100px;
height: 100px;
}
.card-shop h6 {
font-size: 10px;
max-height: 3.6em;
}
}
@media(max-width:920px){
.tagline {
width: 45%;
left: 4%;
}
.dara2 {
top: 10%;
right: -0%;
width: 20%;
}
}
@media(max-width:860px){
.tagline {
width: 45%;
left: 4%;
}
.dara2 {
top: 10%;
right: -0%;
width: 20%;
}
} @media(max-width:780px) {
.primg5 {
margin-top: 57px;
}
.waveareas{
height:50px;
}
.waves#waves1 {
height: 50px;
background-size: 90% 50px;
}
#scrollButton, .btn-contact{
bottom: 1% !important;
}
.btn-bullet{
height: 40px;
width: 40px;
}
.navbar-expand-lg {
padding-bottom: 0 !important;
}
.list-card{
margin-left: 0 !important;
}
.card-pre {
width:100%;
height: 170px;
}
.mie2 {
height: 170px;
}
.card-pre:hover .card-inner-pre {
left: -100%;
}
.card-inner-pre h2{
font-size:18px;
}
.mieareas {
height: 180px;
width: 67%;
}
.mies#mies1 {
height: 180px;
background-size: 90% 180px;
}
.galery-container {  
grid-template-areas:
"Area-1 Area-1 Area-2 Area-2 Area-6 Area-8"
"Area-1 Area-1 Area-2 Area-2 Area-7 Area-8"
"Area-1 Area-1 Area-4 Area-4 Area-7 Area-8"
"Area-1 Area-1 Area-3 Area-5 Area-7 Area-8";
}
.Area-3 {
height: 70px;
grid-area: Area-3;
}
#themeToggle, .btn-contact{
margin-left:10px !important;
}
#scrollButton, .btn-search {
margin-right: 10px !important;
}
.bg-olshop{
background-position: right;
}
.card-ol {
display: grid;
}
.card-shop{
margin-top:2rem;
margin-bottom: 2rem;
width: 200px;
height: 200px;
}
.card-shop h6 {
font-size: 20px;
max-height: unset;
-webkit-line-clamp: 3;
}
}
@media(max-width:768px) {
.navbar-brand{
text-align:start !important;
}
.logo-img {
width: 37%;
}
.list-category button{
font-size: 1rem !important;
}
.mieareas .text-main1{
font-size:130% !important;
}
.mieareas .col-md-6{
align-items: start !important;
justify-content: start !important;
margin-left: 14% !important;
}
.mieareas .col-md-6 .d-flex{
align-items: start !important;
justify-content: start !important;
}
}
@media(max-width:667px) {
}
@media(max-width:640px) {
.navbar-brand{
text-align:start !important;
}
}
@media(max-width:450px) {
.tagline {
width: 45%;
left: 4%;
top: 11%;
}
.foto-menu{
width:100% !important;
}
.card-galery {
width: 50%;
height: 120px;
margin: 2rem 0 0rem 0;
}
.semua{
padding-left: 0.75rem !important;
}
.primg6 {
margin-top: -10px;
}
.primg5 {
margin-top: 17px;
}
.bg-banner {
background-image: url(//www.miburungdara.com/mbdw3b/wp-content/themes/mbd2/css/[theme_dir]/images/minibanner.webp);
background-position: bottom;
background-size: contain;
}
.dara2{
width:25%;
top: 22%;
right: 2%;
}
#themeToggle{
margin-right: 20.75px !important;
}
.logo-img {
width: 45%;
}
#themeToggle, .btn-search{
top: 12% !important;
}
.btn-bullet{
width:50px;
height:50px;
}
.waveareas {
height: 80px;
}
.waves#waves1 {
height: 80px;
background-size: 210% 80px;
}
#scrollButton, .btn-contact {
bottom: 5% !important;
}
.list-category{
display:grid !important;
}
.list-category button{
text-align: start;
}
.mie3{
top:-5%;
}
.areacardpre{
display:grid !important;
bottom: -10%;
}
.bg-yellowcs{
height:380px;
}
.btn-inner-pre{
font-size:1rem !important;
}
.mie2{
position: absolute;
bottom:0;
}
.mie4 {
left: -1%;
bottom: 0;
top: 1% !important;
width: 50%;
}
.mies#mies1 {
height: 140px;
background-size: 90% 140px;
left: 10%;
position: relative;
}
.mieareas {
height: 180px;
width: 80%;
padding-top: 20px;
}
.galery-container {  
height: 800px !important;
display: grid;
grid-template-columns: 1.3fr 1fr 0.8fr 0.9fr 0.9fr 1.1fr; 
grid-template-rows: 1fr 1.3fr 0.7fr 1fr 1fr 1fr 1fr 1fr; 
gap: 10px 10px; 
grid-template-areas: 
"Area-1 Area-1 Area-1 Area-2 Area-2 Area-2"
"Area-1 Area-1 Area-1 Area-2 Area-2 Area-2"
"Area-1 Area-1 Area-1 Area-4 Area-4 Area-4"
"Area-1 Area-1 Area-1 Area-4 Area-4 Area-4"
"Area-3 Area-3 Area-3 Area-6 Area-6 Area-8"
"Area-3 Area-3 Area-3 Area-6 Area-6 Area-8"
"Area-5 Area-5 Area-5 Area-7 Area-7 Area-8"
"Area-5 Area-5 Area-5 Area-7 Area-7 Area-8"; 
height: 800px; 
}
.Area-2 {
height: 220px;
grid-area: Area-2;
}
.Area-4 {
height: 167px;
grid-area: Area-4;
}
.Area-3 {
height: 200px;
grid-area: Area-3;
}
.Area-5 {
height: 200px;
grid-area: Area-5;
}
.Area-6 {
height: 200px;
grid-area: Area-6;
}
.Area-7 {
height: 200px;
grid-area: Area-7;
}
.Area-8 {
height: 410px;
grid-area: Area-8;
}
.dara1 {
right: 8%;
width: 25%;
}
.mieareas .col-md-6 {
margin-left: 34% !important;
}
.title-produk {
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
}
.konten-produk img{
width: 100%;
margin-top: 26vh;
}
.bg-resep{
height: 45vh !important;
}
.slider-produk{
width:90%;
}
.slick-prev.slick-arrow{
scale:2 !important;
}
}
@media(max-width:420px) {
.dara2 {
width: 20%;
}
}
@media(max-width:384px) {
}
@media(max-width:375px) {
}
@media(max-width:320px) {
}