/* 

	Theme Name: MEJAVI SKIN PLUS

	Version: 1.0 / 2025

*/



body { font-family: Arial, Helvetica, sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 17px; }

a { text-decoration: none; }

.topnav { position: fixed; padding: 0 3em; z-index: 999; width: 100%; display: flex; justify-content: space-between; align-items: center; transition: ease all .5s; }
.topnav .logo { position: relative; z-index: 2; width: 150px; max-width: 50%; overflow: hidden; padding: 1em 0; text-align: center; transition: ease all .5s; }
.topnav .logo img { width: 100%; height: auto; filter: brightness(100%); }
.topnav .logo-light img { filter: brightness(0); }
.topnav .logo-mobile { visibility: hidden; display: none; }
.topnav .topmenu { position: relative; z-index: 2; overflow: hidden; text-align: center; color: #FFF; transition: ease all .5s; }
.topnav .topmenu ul { list-style: none; margin: 0; padding: 0; }
.topnav .topmenu ul li { display: inline-block; padding: 1em; margin: 0; }
.topnav .topmenu ul li a { color: #FFF; }
.topnav .topmenu-light ul li a { color: #000; }
.topnav .burger { visibility: hidden; position: absolute; height: 3px; width: 20px; background: #FFF; right: 1em; top: 1.8em; transition: ease all .5s; }
.topnav .burger:before { position: absolute; content: ""; height: 3px; width: 20px; top: -8px; left: 0; background: #FFF; transition: ease all .5s; }
.topnav .burger:after { position: absolute; content: ""; height: 3px; width: 20px; top: 8px; left: 0; background: #FFF; transition: ease all .5s; }

.sticky-nav { background: rgba(92,0,153,.8); backdrop-filter: blur(5px); box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; }
.sticky-nav .logo { width: 120px; padding: .5em 0; }
.sticky-nav .logo img { filter: brightness(100%); }
.sticky-nav ul li a { color: #FFF !important; }

.display,
.display-slider { position: relative; height: 80vh; }
.display-slider-img { position: relative; overflow: hidden; height: 80vh; width: 100%; }
.display-slider-img img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.display-slider-img .text { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 50%; font-size: 3em; color: #eee5e1; padding: 0 3em; line-height: 1em; font-weight: bold; }
.display .slick-dots { bottom: 45px; display: none !important; }
.display .slick-dots li button:before { font-size: 50px; line-height: 50px; width: 50px; height: 50px; }
.display .slick-slide { margin: 0; padding: 0 !important; }
.display .slick-list { margin: 0; }

.welcome { padding: 10em 0; background: #766b68 url(https://www.mejaviskinplus.com/wp-content/uploads/2025/08/bg-welcome-new2-scaled.jpg) no-repeat center bottom; background-size: cover; }
.welcome .box { background: rgba(255,255,255,.8); backdrop-filter: blur(5px); padding: 3em; box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; }
.welcome h2 { font-size: 2em; font-weight: 800; margin: 0 0 1em 0; text-align: center; color: #5c0099; text-transform: uppercase; }

.home-product { position: relative; padding: 5em 0; overflow: hidden; }
.home-product h2 { font-size: 2em; font-weight: 800; margin: 0 0 2.5em 0; text-align: center; color: #5c0099; }
.home-product .box { text-align: center; }
.home-product .image { margin: 0 0 1em 0; width: 100%; text-align: center; display: flex; justify-content: center; align-items: flex-end; }
.home-product .image img { width: 100%; max-width: 100px; height: auto; }
.home-product .title { font-weight: bold; margin: 0; }
.home-product .misc { font-size: .8em; color: #666; margin: 0 0 1em 0; }
.home-product a.btn-action { border: 1px solid #C45BDD; background: #C45BDD; color: #FFF; width: 50%; }
.home-product a.btn-action:hover { border: 1px solid #C45BDD; background: none; color: #C45BDD; width: 50%; }

.home-product2 { position: relative; padding: 5em 0; overflow: hidden; background: #eee5e1; }
.home-product2 h2 { font-size: 2em; font-weight: 800; margin: 0 0 1em 0; text-align: center; color: #5c0099; text-transform: uppercase; }
.home-product2 .paragraph { margin: 0 0 5em 0; text-align: center; }
.home-product2 .box { margin: 0 0 5em 0; }
.home-product2 .image { margin: 0 0 1em 0; width: 100%; text-align: center; }
.home-product2 .image img { width: 100%; max-width: 150px; height: auto; }
.home-product2 .title { font-size: 1.75em; font-weight: 600; margin: 0 0 .5em 0; color: #5c0099; }
.home-product2 .misc { color: #000; font-size: 1.25em; font-weight: bold; margin: 0 0 1em 0; }
.home-product2 .text { color: #666; margin: 0 0 1em 0; }
.home-product2 a.btn-action { border: 1px solid #5c0099; background: #5c0099; color: #FFF; }
.home-product2 a.btn-action:hover { border: 1px solid #5c0099; background: none; color: #5c0099; }

.shopnow { padding: 0; background: #EEEFF1 url(images/bg-shopnow.jpg) no-repeat center bottom; background-size: cover; color: #FFF; }
.shopnow h2 { font-size: 2em; font-weight: 800; margin: 0 0 1em 0; text-transform: uppercase; }
.shopnow .box { padding: 10em 0; }
.shopnow img { width: 100%; height: auto; margin-top: 1em; }

.home-news { padding: 5em 0; background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(230, 239, 250, 1) 100%); }
.home-news h2 { font-size: 2em; font-weight: 800; margin: 0 0 2em 0; text-align: center; color: #5c0099; text-transform: uppercase; }
.home-news a { color: #5c0099; }
.home-news .image { position: relative; height: 0; padding-bottom: 70%; overflow: hidden; margin: 0 0 1em 0; }
.home-news .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.home-news .text .title { font-size: 1.1em; font-weight: 600; margin: 0 0 .5em 0; color: #5c0099; }
.home-news .text .excerpt { margin: 0 0 1em 0; }
.home-news a.btn-action { border: 1px solid #5c0099; background: #5c0099; color: #FFF; width: 50%; }
.home-news a.btn-action:hover { border: 1px solid #5c0099; background: none; color: #5c0099; width: 50%; }

.sustainability { padding: 5em 0; background: #EEE5E1; }
.sustainability h2 { font-size: 1.5em; font-weight: 800; margin: 0 0 .5em 0; text-transform: uppercase; color: #5c0099; }
.sustainability .box { margin: 2em 0 0 0; }
.sustainability img { width: 100%; height: auto; }

.inner-display { height: 80vh; }
.inner-display .image-area { position: relative; height: 80vh; background: #CFCCCD; color: #000; }
.inner-display .image-area img { position: absolute; width: 100%; height: 100%; object-fit: cover; }

.inner { padding: 5em 0; background: #FFF; }
.inner-news { padding: 10em 0 5em 0;}
.inner a { color: #5c0099; }
.inner h1 { font-size: 2em; font-weight: 800; margin: 0 0 1em 0; color: #5c0099; }
.inner h2 { font-size: 1.25em; font-weight: 800; margin: 0 0 1em 0; color: #000; }
.inner .image-news { margin: 0 0 2em 0; }
.inner .image-page { margin: 0 0 4em 0; }
.inner img { position: relative; width: 100%; height: auto; }
.inner .price { margin: 0 0 1em 0; font-size: 2em; color: #000; }
.inner .text { margin: 0 0 3em 0; color: #666; }
.inner .tab-content { padding: .5em 0 0 0; }
.inner .nav-tabs { border-color: #5c0099; }
.inner .nav-tabs .nav-link { color: #5c0099; font-weight: 600; }
.inner .nav-tabs .nav-link:hover { border-color: #5c0099; }
.inner .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { background: #5c0099; color: #FFF; border-color: #5c0099; }
.inner .accordion-button:not(.collapsed) { color: #FFF; background: #5c0099; }
.inner h2.accordion-header { margin: 0; padding: 0; }
.inner .accordion-button { color: #666; }
.inner .accordion-button:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666666'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important; }
.inner .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important; }
.inner .accordion-body { color: #666; }
.inner a.btn-buy { color: #FFF; }
.inner a.btn-shopee { border: 1px solid #F2572B; background: #F2572B; }
.inner a.btn-tokped { border: 1px solid #4A9D46; background: #4A9D46; }
.inner a.btn-tiktok { border: 1px solid #221F20; background: #221F20; }
.inner a.btn-shopee:hover { background: none; color: #F2572B; }
.inner a.btn-tokped:hover { background: none; color: #4A9D46; }
.inner a.btn-tiktok:hover { background: none; color: #221F20; }
.inner a.btn-action,
.inner .btn-action { border: 1px solid #5c0099; background: #5c0099; color: #FFF; }
.inner a.btn-action:hover,
.inner .btn-action:hover { border: 1px solid #5c0099; background: none; color: #5c0099; }


.archive-news { padding: 10em 0 5em 0;}
.archive-news a { color: #5c0099; }
.archive-news h1 { font-size: 2em; font-weight: 800; margin: 0 0 1em 0; color: #5c0099; }
.archive-news .box { margin: 0 0 2em 0; padding: 0 0 2em 0; border-bottom: 1px solid #EEE; }
.archive-news .box h1 { font-size: 1.25em; font-weight: 600; margin: 0 0 1em 0; color: #5c0099; text-transform: none; }
.archive-news .box .image { position: relative; height: 0; padding-bottom: 50%; overflow: hidden; margin: 0; }
.archive-news .box .image-product { position: relative; height: auto; padding-bottom: auto; overflow: visible; margin: 0; }
.archive-news .box .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.archive-news .box .excerpt { margin: 0 0 1em 0; }
.archive-news .box-product { background: #EEE; margin: 0 0 1.5em 0; }
.archive-news .box-product h1 { font-size: 1em; font-weight: 600; margin: 0; padding: 0; color: #5c0099; text-transform: none; }
.archive-news .box-product .image-product {}
.archive-news .box-product .text-product { padding: 2em 1em; text-align: center; }

.footer { position: relative; overflow: hidden; color: #DDAAFF; background: #5c0099; padding: 3em 0 2em 0; }
.footer img.logo-bottom { width: 100%; max-width: 200px; height: auto; margin: 0 0 3em; }
.footer h3 { font-size: 1em; margin:  0 0 1em 0; font-weight: 800; text-transform: uppercase; color: #FFF; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin: 0 0 .5em 0; }
.footer ul.sosmed li { display: inline; margin: 0 1em 0 0; padding: 0; }
.footer a { color: #DDAAFF; }
.footer .content { margin: 0 0 3em 0; }

.copyright { color: #DDAAFF; border-top: 1px solid #FFF; padding: 2em 0 0 0; margin: 0; font-size: .8em; }

.tombol { background: none; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; padding: 10px 0; color: #FFF; font-size: 1em; margin:  0 0 1em 0; text-transform: uppercase; letter-spacing: .25em; transition: all ease .25s; }
.tombol:hover { padding: 10px 25px; border-color: #FFF; }

.errorpage { padding: 10em 0 0 0; text-align: center; }
.errorpage img { width: 90%; max-width: 300px; }
.errorpage h1 { font-size: 2em; font-weight: 800; margin: 0 0 1em 0; color: #5c0099; text-transform: uppercase; }
.errorpage a.btn-action { border: 1px solid #5c0099; background: #5c0099; color: #FFF; }
.errorpage a.btn-action:hover { border: 1px solid #5c0099; background: none; color: #5c0099; }

@media (min-aspect-ratio: 16/9) {

}

@media (max-aspect-ratio: 16/9) {

}

@media (max-width: 1024px) {

.topnav { padding: 0 1em; }
.topnav .logo { width: 100px; }
.topnav .logo-mobile { visibility: visible; display: inherit; margin: 0 0 3em 0; }
.topnav .logo-mobile img { width: 250px; max-width: 50%; }
.topnav .topmenu { position: absolute; z-index: 2; width: 100%; height: 100vh; top: 0; left: -100%; background: rgba(92,0,153,.9); overflow: hidden; text-align: center; padding: 5em 2em; }
.topnav .topmenu a { color:  #FFF !important; }
.topnav .topmenu ul li { display: block; }
.topnav .menu-active { left: 0; }
.topnav .burger { visibility: visible; z-index: 9999; }
.topnav .burger-light,
.topnav .burger-light:before,
.topnav .burger-light:after { background: #5c0099 !important;}
.topnav .burger-white,
.topnav .burger-white:before,
.topnav .burger-white:after { background: #FFF !important; }
.topnav .burger-active { height: 0; background: #FFF !important; }
.topnav .burger-active:before { rotate: 45deg; top: 0; width: 22px; left: -1px; background: #FFF !important; }
.topnav .burger-active:after { rotate: -45deg; top: 0; width: 22px; left: -1px; background: #FFF !important; }

.display,
.display-slider { height: 30vh; }
.display-slider-img { height: 30vh; }
.display-slider-img img { height: 30vh; }
.display .slick-dots li button:before { font-size: 30px; line-height: 30px; width: 30px; height: 30px; }

.welcome { padding: 3em 0 15em 0; background-color: #766b68; background-size: contain; }
.welcome h2 { font-size: 1.5em; font-weight: 800; }

.home-product2 { padding: 3em 0; }

.shopnow { padding: 0; background: #FFF; color: inherit; text-align: center; }
.shopnow h2 { color: #5c0099; }
.shopnow .box { padding: 5em 0 3em 0; }
.shopnow img { width: 50%; height: auto; margin: 1em auto 0 auto;}

.home-news { padding: 3em 0; background: #FFF; }
.home-news h2 { margin: 0 0 1.5em 0; }
.home-news a { color: #5c0099; }
.home-news .box { margin: 0 0 5em 0;}

.inner-display { height: 30vh; }
.inner-display .image-area { height: 30vh; }

.inner { padding: 3em 0; }
.inner-news { padding: 7em 0 5em 0;}
.inner h1 { font-size: 1.5em; }
.inner h2 { font-size: 1.25em; }
.inner .image-area,
.inner .image-news,
.inner .image-page { margin: 0 0 2em 0; }
.inner .text { margin: 0; }
.inner .text-product { margin: 0 0 3em 0; }
.inner a.btn-buy { display: block; margin: 0 0 1em 0; }
.inner .nav-tabs .nav-link { font-size: .8em; }

.archive-news { padding: 7em 0 5em 0; }
.archive-news .box { padding: 0 0 1em 0; }
.archive-news .box .image { margin: 0 0 1em 0; }

}