/* ===========================================================
    TEMA 1
===========================================================*/ 
/* ===========================================================
teknis penamaan class dan tema menggunakan attr [tema=id]
    [tema="1"] .footer
required: bootstrap
===========================================================
    TEMA 1
===========================================================*/ 
/*.n-content{min-height: 735px;}*/
/*#contact li a, a{color:#ccc !important;}*/
/*.form-control, .btn{*/
/*    padding:10px 25px;*/
/*    font-weight:20px;*/
/*    font-weight: 500;*/
/*}*/

/*a.nav-link, .fs-7{*/
/*    font-size: 18px;*/
/*}*/
/*.dropdown-item:hover, .bg-primary{*/
/*    background-color:#5368df!important;*/
/*}*/
/*[p-type="0"]{*/
/*    padding: 70px 0;*/
/*}*/
/*.npost-tag{*/
/*    border: 1px solid #ccc;*/
/*    padding: 10px;*/
/*    margin: 5px 0px;*/
/*    background: #d0cfcf52;*/
/*    max-height: 55px;*/
/*    overflow-y: auto;*/
/*}*/
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,500;1,400&display=swap');
.ff-03{
    font-family: sans-serif;
}
a{color: #f27474;}
a:hover{color: #e28c92;}
.navbar{z-index: 9;}
[tema="1"] footer{
    background-color:#333;
    color:#fff
}
[tema="1"] .n-icon a{
    color: #fff;
}
[tema="1"] .nfooter{
    display:flex;
}

/*  bagian responfif  */
/*@media (max-width: 480px){*/
/*    .nfooter{display:block;text-align: center;}*/
/*    .n-content{padding: 100px 5px !important;}*/
/*    .setting .preview{order: 1 !important;}*/
/*}*/

/*
    TEMA ="skincare"
*/
[part]{
    font-family: 'Rubik';
}
h3{
    color: #fff;
}
a{
        transition: all 0.5s;
    }
.btn-primary{
        border-radius: 0;
        background: #f27474;
        border-color: #f27474;
    }
.btn-primary:hover{
        background: #e3c38b;
        border-color: #e3c38b;
    }
.head-line{
        text-align: center;
        margin-bottom: 30px;
        padding: 20px;
        font-weight: bolder;
        font-size: 30px;
    }
    .bg-line{
        background-image: url(//cdn.shopify.com/s/files/1/0260/8014/9613/files/heading_img.png?v=1568983932);
        background-repeat: no-repeat;
        background-size: auto;
        background-position: center;
        
        text-shadow: 2px -1px 5px #fbfbfb;
    }    
    /*NAVBAR*/
.nlist-menu{
    padding: 0px 35px;
}
.nlist-menu a{
    display: block;
    margin: 5px;
}
.nav-item{
        color: inherit!important;
        text-transform: uppercase;
        margin: auto 20px;
    }
.nav-item.active, .nav-item:hover{
        border-bottom: 1px solid;
        /*color: #fff!important;*/
    }

.nav-item a{
        color: inherit!important;
        padding: 0;
        font-weight: bold;
    }
    /*SLIDER*/
    [npart="slider"]{
        background-image: url(https://cdn.shopify.com/s/files/1/0260/8014/9613/files/slider-bg_1728x.jpg?v=1569388487);
        background-size: cover;
        background-repeat: no-repeat;
        color: #fff;
    }
    [npart="slider"] .carousel-item img{
        margin-left: auto;
        max-height: 750px;
    }
    [npart="slider"] .carousel-caption{
        width: 350px;
        top: 25%;
        left: 100px;
        font-size: 90px;
    }
    [npart="slider"] .carousel-caption h5{
        font-size: 50px;
        background: #f27474;
        color: #ffffff;
        padding: 20px;
    }
    [npart="slider"] .carousel-indicators .active {
        background-color: #f27474;
    }
    
    [npart="testimoni"]{
        background-image: url(https://cdn.shopify.com/s/files/1/0260/8014/9613/files/client-bg_1.png?v=1630472996);
        background-size: cover;
        background-repeat: no-repeat;
    }
    [npart="service"] img{
        width: 100%;
    }
    
    /*MENU ATAS*/
    .skincare-menuatas {
        padding: 50px 0;
        text-align: center;
    }
    .skincare-menuatas img{
        margin: auto;
        margin-bottom: 10px;
    }
    
    /*about blog*/
    [npart="about"] img{
        object-fit: cover;
        height: 100%;
    }
    .blog-title{
        margin: 20px auto;
        font-size: 25px;
        color: #333;
    }
    .blog-desc{
        margin: 20px auto;
    }
    
    /*SLIDER*/
    .card-0 {
        color: #fff;
        background-color: #f27474;
        position: relative;
        margin-left: 70px;
        border-radius: 10px;
        min-height: 312px;
    }
    .carousel-indicators li {
        cursor: pointer;
        border-radius: 50% !important;
        width: 10px;
        height: 10px;
    }
    .profile {
        color: #fff;
        background-color: #000000;
        position: absolute;
        left: -70px;
        top: 17%;
        border-radius: 8px;
        border-top-left-radius: 0px; 
        border-bottom-right-radius: 0px; 
    }
    .profile-pic {
        width: 120px;
        height: 120px;
        border-bottom-left-radius: 10px;
        border-top-right-radius: 10px;
        max-width: 90px;
        object-fit: cover;
    }
    .open-quotes {
        margin-left: 130px;
        margin-top: 100px;
        max-width: 20px;
    }
    .content {
        margin-left: 150px;
        margin-right: 80px;
    }
    .close-quotes {
        margin-bottom: 100px;
        margin-right: 60px;
        max-width: 20px;
    }
    
    /*FOOTER*/
    [npart="footer"]{
        margin-top: 0px;
        background-image: url(//cdn.shopify.com/s/files/1/0260/8014/9613/files/footer-bg.jpg?v=1569406091);
        background-size: cover;
        background-repeat: no-repeat;
        color: #fff;
    }
    [npart="footer"] a{
        color: #fff;
        transition: all 1s;
        text-decoration: none;
    }
    [npart="footer"] a:hover{
        color: #f27474;
    }
    .f-icon a{
        margin: 15px;
        font-size: 25px;
        color: #fff;
    }
    [npart="footer"] h3{
        padding-left: 38px;
        margin-bottom: 30px;
        font-weight: bold;
        font-size: 20px;
    }
    [npart="footer"] li{
        list-style: none;
        margin: 10px 0;
    }
    
    .bg-line{
        background-image: url(../img/madu_head_trans.webp);
    }
    [npart="slider"] {
        /*background-image: url(/ndata/img/madu_oren_1.webp);*/
        background-image: url(https://cdn.shopify.com/s/files/1/0260/8014/9613/files/slider-bg_1728x.jpg?v=1569388487);
    }
    
    /*footer-light*/
    /*[npart="footer"] {*/
    /*    background: #fff;*/
    /*    color: #333;*/
    /*    box-shadow: 0px -3px 8px #00000085;*/
    /*    background-image: url(../img/footer-light.webp);*/
    /*}*/
    /*[npart="footer"] a{*/
    /*   color: #333;*/
    /*}*/
    /*[npart="footer"] a:hover{*/
    /*   color: #f27474;*/
    /*}*/
    /*[npart="footer"] h3{*/
    /*   color: #f27474;*/
    /*}*/
    
    /*
    =======================================================
    RESPONSIF
    */
  
    @media screen and (max-width: 768px) {
        .card-main {
            padding: 50px 10px;
        }
        .card-0 {
            min-height: 432px;
        }
        .profile {
            top: 24%;
        }
        .profile-pic {
            width: 90px;
            height: 90px;
        }
        .open-quotes {
            margin-left: 100px;
        }
        .content {
            margin-left: 120px;
            margin-right: 50px;
        }
        .close-quotes {
            margin-right: 30px
        }
        [npart="testimoni"]{
            margin: 0;
            padding: 0!important;
        }
        .row .row .col-md-6{min-width:100%}
        
        .nfooter{
        text-align: center;
        display: block!important;
    }
     .nfooter .d-inline-flex{
        justify-content: center;
        width: 100%;
        padding: 0;
    }
    }
    [plugin="form"]{
        width: 500px;
        margin: auto;
    }
    @media screen and (max-width: 425px) {
        .px-5, .p-5, .pl-5, .pr-5{
            padding-left: 5px!important;
            padding-right: 5px!important;
        } 
    }
    
   