/* font area */
@font-face {
   font-family: 'Sofia';
   src:
      url('../fonts/sofia-regular.woff') format('woff'),
      url('../fonts/sofia-regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'Sofia SemiBold';
   src:
      url('../fonts/sofia-semibold.woff') format('woff'),
      url('../fonts/sofia-semibold.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'Sofia Bold';
   src:
      url('../fonts/sofia-bold.woff') format('woff'),
      url('../fonts/sofia-bold.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'sofia-pro-bolds';
   src:
      url('../fonts/sofia-pro-bold.woff') format('woff'),
      url('../fonts/sofia-pro-bold.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}
.ff-pro-bold{
   font-family: 'sofia-pro-bolds';
}
* {
   box-sizing: border-box;
}

*:before,
*:after {
   box-sizing: border-box;
}

*:focus {
   outline: none;
}

html,
body {
   height: 100%;
   width: 100%;
   position: relative;
   font-family: 'Sofia';
   font-size: 14px;
}

html {}

body {
   overflow-x: hidden;
}

a {
   cursor: pointer;
}

.main-container {
   min-height: 100vh;
   /* will cover the 100% of viewport */
   overflow: hidden;
   display: block;
   position: relative;
   background: #fff;
   color: #707070;
   /* padding-bottom: 100px; */
}

.container-us {
   margin: 0 0px;
   position: relative;
}

.mobile {
   display: block !important;
}

.desktop {
   display: none !important;
}

.btn {
   font-size: 14px;
}

.owl-dots {
   transform: translateX(-50%);
   text-align: center;
   position: absolute;
   bottom: 0px;
   left: 50%;
}

.owl-dot span {
   display: block;
   height: 10px;
   width: 10px;
   background: #fff;
   border-radius: 50%;
   margin: 5px;
   opacity: 0.5;
}

.owl-dot.active span {
   opacity: 1;
}

#page-content {
   margin-top: 54px;
}

#landing #page-content {
   margin-top: 24px;
}

@media screen and (min-width: 768px) {

   .owl-dots {
      bottom: 10px;
   }

   html,
   body {
      font-size: 16px;
   }

   .btn {
      font-size: 16px;
   }

   .container-us {
      margin: 0 50px;
   }

   .mobile {
      display: none !important;
   }

   .desktop {
      display: block !important;
   }

   #page-content {
      margin-top: 56px;
   }

   #landing #page-content {
      margin-top: 0;
   }
}

@media screen and (min-width: 1200px) {
   .container-us {
      margin: 0 70px;
   }
}

/* Header Landing ---------- */
.navbar-anessa {
   display: grid;
   grid-template-columns: 85% 15%;
   padding: 15px 20px;
   align-items: center;
   position: fixed;
   width: 100%;
   background: #fff;
   color: #707070;
   z-index: 999;
   /* position: relative; */
   position: fixed;
   box-shadow: 0px 3px 6px #0000001F;
}

.navbar-anessa .profil {
   text-align: left;
}

.navbar-anessa .brand {
   text-align: center;
   padding-left: 15%;
}

.navbar-anessa .brand img {
   width: 150px;
}

.navbar-anessa .menu {
   text-align: right;
   cursor: pointer;
}

.navbar-anessa .menu .brg-menu {
   display: initial;
   position: relative;
   z-index: 9999;
}

.navbar-anessa .menu.open .brg-menu {
   display: initial;
   position: absolute;
   top: 18px;
   right: 20px;
   z-index: 9999;
}

.navbar-anessa .menu .list-menu {
   padding-left: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.navbar-anessa .list-menu {
   display: none;
   transition: all 1s ease-in-out;
}

.navbar-anessa .menu.open .list-menu {
   display: block;
}

.navbar-anessa .menu .close-btn {
   position: absolute;
   top: 20px;
   right: 20px;
   display: none;
}

.navbar-anessa .menu .close-btn.active {
   display: block;
}

.navbar-anessa .menu.open {
   position: absolute;
   width: 100%;
   height: 100vh;
   top: 0;
   background: linear-gradient(168deg, rgba(0, 155, 185, 1) 37%, rgba(124, 205, 219, 1) 100%);
   z-index: 9998;
   text-align: center;
}

.navbar-anessa .menu.open .list-menu ul li {
   color: #fff;
}

.navbar-anessa .menu.open .list-menu ul li.medsos-wrap {
   margin-top: 60px;
}

.navbar-anessa .menu.open .list-menu ul li.medsos-wrap p {
   font-size: 12px;
   margin-bottom: 24px;
}

.navbar-anessa .menu.open .list-menu ul li .medsos-area {
   display: flex;
   align-items: center;
}

.navbar-anessa .menu.open .list-menu ul li .medsos-area img.yt {
   margin-left: 8px;
}

.navbar-anessa .menu.open .list-menu ul li .medsos-area img {
   height: 35px;
}

.navbar-anessa .menu .list-menu ul {
   padding-left: 0;
   margin-bottom: 0;
}

.navbar-anessa .menu .list-menu ul li {
   list-style-type: none;
   display: block;
   position: relative;
   font-size: 18px;
   margin: 30px 0;
   font-family: 'Sofia';
}

.navbar-anessa .menu .list-menu ul li img {
   width: 100px;
   margin-top: -5px;
}

.navbar-anessa .menu .list-menu ul li.medsos {
   display: none;
}

@media (min-width: 768px) {
   .navbar-anessa {
      grid-template-columns: 30% 70%;
   }

   .navbar-anessa .menu .list-menu {
      padding-left: 0;
      position: relative;
      top: unset;
      left: unset;
      transform: unset;
   }

   .navbar-anessa .brand {
      text-align: left;
      padding-left: 0;
   }

   .navbar-anessa .menu {
      text-align: right;
   }

   .navbar-anessa .menu .brg-menu {
      display: none;
   }

   .navbar-anessa .list-menu {
      display: block;
   }

   .navbar-anessa .menu .list-menu ul li {
      list-style-type: none;
      display: inline-block;
      position: relative;
      font-size: 14px;
      margin: 0 13px;
      transition: all 0.4s ease-in-out;
   }

   .navbar-anessa .menu .list-menu ul li:hover {
      color: #D5AF73;
   }

   .navbar-anessa .menu .list-menu ul li.active {
      color: #D5AF73;
   }

   .navbar-anessa .menu .list-menu ul li.medsos {
      margin: 0 8px;
      display: inline-block;
   }

   .navbar-anessa .menu .list-menu ul li img.yt {
      width: 28px;
   }

   .navbar-anessa .menu .list-menu ul li img {
      width: 20px;
      margin-top: -5px;
   }
}

/* end: Header Landing ---------- */
/* Footer Landing ---------- */
footer {
   background: transparent linear-gradient(101deg, #009BB9 0%, #7CCDDB 100%) 0% 0% no-repeat padding-box;
   padding: 4em 30px;
   color: #fff;
   position: relative;
}

footer .brand-footer {
   text-align: center;
   margin-bottom: 60px;
}

footer .brand-footer img {
   width: 150px;
}

footer .menu {
   text-align: center;
   margin-bottom: 60px;
}


footer .menu a {
   display: block;
   margin-bottom: 24px;
   font-size: 14px;
}

footer .sosmed {
   display: flex;
   justify-content: space-around;
   margin-bottom: 32px;
   margin-top: 24px;
}

footer p {
   font-size: 12px;
   text-align: center;
   margin-bottom: 8px;
   font-family: 'Sofia SemiBold';
}

footer .copyright {
   text-align: center;
   font-size: 12px;
}

@media (min-width: 768px) {
   footer {
      background: transparent linear-gradient(101deg, #009BB9 0%, #7CCDDB 100%) 0% 0% no-repeat padding-box;
      padding: 4em 0px;
   }

   footer .brand-footer {
      text-align: left;
      margin-bottom: 0px;
   }

   footer .brand-footer img {
      width: 150px;
   }

   footer .menu {
      text-align: left;
      margin-bottom: 0px;
   }

   footer .menu a {
      display: block;
      margin-bottom: 24px;
      font-size: 14px;
   }

   footer .menu a:hover {
      text-decoration: underline;
   }

   footer .sosmed {
      display: flex;
      justify-content: left;
      margin-bottom: 16px;
   }

   footer .sosmed a {
      margin-right: 16px;
   }

   footer .sosmed a:last-child {
      margin-right: 0;
   }

   footer p {
      font-size: 14px;
      text-align: left;
      margin-bottom: 16px;
      font-family: 'Sofia SemiBold';
   }

   footer .copyright {
      text-align: left;
      font-size: 12px;
   }

}

/* end: Footer Landing ---------- */
/* Landing Page ---------- */

.btn-anessa {
   background: linear-gradient(137deg, rgba(213, 175, 115, 1) 43%, rgba(248, 227, 193, 1) 100%);
   color: #fff;
   min-width: 140px;
   padding: 10px 20px;
   border-radius: 0;
   border: none;
}

.btn-anessa:hover {
   background: #fff;
   color: #009BB9;
}

#landing #section3 .btn-anessa {
   border: 1px solid #fff;
}

#products-detail #section1 .btn-anessa:hover,
#landing #section3 .btn-anessa:hover {
   background: transparent;
   color: #D5AF73;
   border: 1px solid #D5AF73;
}

.btn-anessa-outline {
   background: transparent;
   color: #fff;
   min-width: 140px;
   padding: 10px 20px;
   border-radius: 0;
   border: 1px solid #fff;
}

.btn-anessa-outline:hover {
   background: #fff;
   color: #D5AF73;
   border: 1px solid #fff;
}

#landing {}

#landing #section1 {}

#landing #section1 .banner {
   height: calc(100vh - 24px);
   position: relative;
}

#landing #section1 .banner .bg {
   height: 100vh;
   width: 100%;
   position: absolute;
   object-fit: cover;
}

#landing #section1 .banner .content {
   position: absolute;
   background: linear-gradient(137deg, rgba(0, 155, 185, 0.8) 0%, rgba(124, 205, 219, 0.8) 100%);
   right: 0;
   bottom: 0;
   width: 100%;
   height: 45%;
   color: #fff;
}

#landing #section1 .banner .content .info {
   top: 50%;
   transform: translateY(-50%);
   position: absolute;
   padding: 20px;
}

#landing #section1 .banner .content .info h1 {
   font-size: 30px;
   font-family: 'Sofia SemiBold';
   margin-bottom: 16px;
}

#landing #section1 .banner .content .info p {
   font-size: 14px;
   margin-bottom: 16px;
}

#landing #section1 .banner .content .info p span {
   font-family: 'Sofia SemiBold';
}

#landing #section1 .banner .content .info .product {
   position: absolute;
   width: 110px;
   z-index: 1;
   top: -40%;
   right: 10px;
}

#landing #section2 .video-area {
   position: relative;
}

#landing #section2 .video-area .video img {
   width: 100%;
}

#landing #section2 .video-area .play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#landing #section2 .video-area .play img {
   width: 50px;
}

#landing #section3 {
   padding: 6em 0;
}

#landing #section3 .product img {
   width: 90%;
}

#landing #section3 .content {
   margin: 0 auto;
   margin-top: 40px;
   text-align: center;
   width: 60%;
}

#landing #section3 .content h1 {
   font-size: 30px;
   font-family: 'Sofia SemiBold';
   color: #009BB9;
}

#landing #section3 .content p {
   font-size: 14px;
   margin: 24px 0 32px;
}

#landing #section4 .img-bg img {
   width: 100%;
}

#landing #section4 .content {
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

#landing #section4 .content .info {
   text-align: center;
   color: #fff;
   padding: 40px 30px;
}

#landing #section4 .content .info .head {
   position: relative;
}

#landing #section4 .content .info .head .icn {
   margin-left: -140px;
   height: 23px;
}

#landing #section4 .content .info .head p {
   font-size: 30px;
   font-family: 'Sofia SemiBold';
   margin-bottom: 16px;
}

#landing #section4 .content .info p {
   margin-bottom: 24px;
}

.daun-anessa {
   position: absolute;
   -webkit-animation: swing 7s ease-out infinite normal;
   animation: swing 7s ease-out infinite normal;
}

.daun-anessa.kiri {
   left: -280px;
}

.daun-anessa.kanan {
   right: -380px;
}

#landing #section5 {
   background: linear-gradient(93deg, rgba(245, 223, 189, 1) 0%, rgba(213, 175, 115, 1) 100%);
}

#landing #section5 .daun-anessa {
   top: 30px;
}

#landing #section5 .content {
   text-align: center;
}

#landing #section5 .content .info {
   padding: 50px 30px;
   color: #fff;
   position: relative;
}

#landing #section5 .content .info .product {
   width: 130px;
}

#landing #section5 .content .info .foam {
   position: absolute;
   width: 100px;
   top: 20px;
}

#landing #section5 .content .info h1 {
   font-size: 30px;
   font-family: 'Sofia Bold';
   margin-top: 32px;
}

#landing #section5 .content .info p {
   padding: 16px 0 24px;
}

@media (min-width: 768px) {
   #landing #section1 .banner {
      height: 100vh;
      position: relative;
   }

   #landing #section1 .banner .bg {
      height: 100vh;
      width: 100%;
      position: absolute;
      object-fit: cover;
   }

   #landing #section1 .banner .content {
      position: absolute;
      background: linear-gradient(137deg, rgba(0, 155, 185, 0.9) 0%, rgba(124, 205, 219, 0.9) 100%);
      right: 0;
      bottom: 0;
      top: 0%;
      width: 45%;
      height: 100%;
      color: #fff;
   }

   #landing #section1 .banner .content .info {
      top: 50%;
      transform: translateY(-50%);
      position: absolute;
      padding: 30px;
      padding-left: 80px;
   }

   #landing #section1 .banner .content .info h1 {
      font-size: 60px;
      font-family: 'Sofia SemiBold';
      margin-bottom: 24px;
   }

   #landing #section1 .banner .content .info p {
      font-size: 16px;
      margin-bottom: 24px;
   }

   #landing #section1 .banner .content .info .product {
      position: absolute;
      width: 240px;
      z-index: 1;
      top: -25px;
      right: unset;
      left: -27%;
   }

   #landing #section2 .video-area .play img {
      width: 100px;
   }

   #landing #section3 {
      padding: 8em 0;
   }

   #landing #section3 .product img {
      width: 90%;
   }

   #landing #section3 .content {
      margin: unset;
      margin-top: 0;
      text-align: left;
      width: 70%;
   }

   #landing #section3 .content h1 {
      font-size: 48px;
   }

   #landing #section3 .content p {
      font-size: 16px;
      margin: 24px 0;
   }

   #landing #section3 .flx-end {
      align-self: flex-end;
   }

   #landing #section4 .content {
      position: relative;
   }

   #landing #section4 .content .info {
      text-align: left;
      color: #fff;
      padding: 0 40px;
      top: 50%;
      left: 0;
      position: absolute;
      transform: translateY(-50%);
   }

   #landing #section4 .content .info .head {
      position: relative;
   }

   #landing #section4 .content .info .head .icn {
      margin-left: 0px;
      height: 30px;
   }

   #landing #section4 .content .info .head p {
      font-size: 48px;
      font-family: 'Sofia SemiBold';
      margin-bottom: 16px;
   }

   #landing #section4 .content .info p {
      margin-bottom: 24px;
   }

   #landing #section5 {
      position: relative;
      height: 100vh;
   }

   #landing #section5 .content {
      text-align: left;
      position: absolute;
      right: 0;
      bottom: 0;
      top: 0%;
      width: 60%;
      height: 100%;
   }

   #landing #section5 .content .info {
      top: 50%;
      transform: translateY(-50%);
      position: absolute;
      padding: 30px;
      padding-left: 80px;
      width: 90%;
   }

   #landing #section5 .content .info .product {
      position: absolute;
      width: 180px;
      z-index: 1;
      top: 0px;
      right: unset;
      left: -30%;
      transition: all 0.5s ease-in-out;
   }

   #landing #section5 .content .info .product:hover {
      transform: rotate(5deg);
   }

   #landing #section5 .content .info .foam {
      position: absolute;
      width: 130px;
      top: -100px;
      left: -8%;
   }

   #landing #section5 .content .info h1 {
      margin-top: 0;
      font-size: 48px;
   }

   #landing #section5 .content .info p {
      padding: 16px 0 16px;
   }
}

/* end: Landing Pages ---------- */
/* About Pages ---------- */
#about {}

#about #section1 {
   color: #fff;
}

#about #section1 .banner {
   position: relative;
}

#about #section1 .banner .bg {
   width: 100%;
}

#about #section1 .content {
   right: 0;
   bottom: 0;
   width: 100%;
   height: 45%;
   color: #fff;
   position: absolute;
}

#about #section1 .content .grad {
   bottom: 0;
   position: absolute;
}

#about #section1 .content .info {
   bottom: 20px;
   position: absolute;
   padding: 20px;
   width: 100%;
}

#about #section1 .content .info h1 {
   font-size: 36px;
   font-family: 'Sofia SemiBold';
   margin-bottom: 16px;
   text-shadow: 2px 2px 5px #00000047;
}

#about #section1 .content .info p {
   font-size: 16px;
   font-family: 'Sofia';
   text-shadow: 2px 2px 5px #00000042;
}

section {
   position: relative;
}

#about #section2 {
   padding-bottom: 2em;
}

#about #section3 .daun-anessa {
   top: -400px;
}

#about #section4 .daun-anessa.kiri {
   top: 100px;
}

#about #section4 .daun-anessa.kanan {
   bottom: 200px;
}

#about #section2 .product {
   margin-top: -60px;
   width: 100%;
}

#about #section2 .info {
   text-align: center;
   margin-top: 24px;
   padding: 0 20px;
}

#about #section2 .info h1 {
   font-size: 30px;
   font-family: 'Sofia SemiBold';
   color: #009BB9;
   margin-bottom: 16px;
}

#about #section2 .info p {
   font-size: 14px;
}

#about #section2 .info p span {
   color: #009BB9;
}

#about #section3 {
   margin-top: 180px;
}

#about #section3 .bg-brown {
   background: linear-gradient(93deg, rgba(245, 223, 189, 1) 0%, rgba(213, 175, 115, 1) 64%);
}

#about #section3 .img-area {
   text-align: center;
   position: relative;
}

#about #section3 .img-area img {
   width: 80%;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   margin-top: -150px;
}

#about #section3 .info {
   color: #fff;
   text-align: center;
   padding: 200px 20px 40px;
}

#about #section3 .info h1 {
   font-size: 30px;
   font-family: 'Sofia SemiBold';
   margin-bottom: 16px;
}

#about #section3 .info p {
   font-size: 14px;
}

#about #section4 {
   padding: 4em 0
}

#about #section4 h1 {
   font-size: 30px;
   font-family: 'Sofia SemiBold';
   color: #009BB9;
   margin-bottom: 24px;
   text-align: center;
}

#about #section4 .history-area {
   margin-bottom: 32px;
}

#about #section4 .year {
   font-size: 24px;
   font-family: 'Sofia SemiBold';
   color: #D5AF73;
   margin-bottom: 24px;
   text-align: center;
}

#about #section4 .thumb {
   width: 100%;
}

#about #section4 .history-wrap {
   border-left: 3px solid #009BB9;
   margin: 0 20px;
   margin-top: 32px;
}

#about #section4 .history-wrap .history-list {
   margin-bottom: 24px;
   position: relative;
   margin-left: 16px;
}

#about #section4 .history-wrap .history-list .bullet {
   background: #009BB9;
   height: 11px;
   width: 11px;
   border-radius: 50%;
   position: absolute;
   left: -23px;
   top: 0px;
}

#about #section4 .history-wrap .history-list .history {
   position: relative;
   margin-bottom: 32px;
}

#about #section4 .history-wrap .history-list .history h2 {
   font-size: 24px;
   font-family: 'Sofia SemiBold';
   color: #009BB9;
   position: absolute;
   height: 30px;
   top: -10px;
}

#about #section4 .history-wrap .history-list .history p {
   font-size: 12px;
   margin-bottom: 0;
   padding-top: 26px;
   width: 90%;
}

#about #section4 .history-wrap .history-list .history p a {
   color: #009BB9;
}

#about #section4 .history-wrap .history-list .history p a:hover {
   text-decoration: underline;
}

@media (min-width: 768px) {
   #about #section1 .content {
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      color: #fff;
      position: absolute;
   }

   #about #section1 .content .grad {
      height: 100%;
   }

   #about #section1 .content .info {
      bottom: unset;
      position: absolute;
      padding: 0;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
      left: 8%;
   }

   #about #section1 .content .info h1 {
      font-size: 72px;
      line-height: 72px;
      margin-bottom: 24px;
   }

   #about #section1 .content .info p {
      font-size: 24px;
   }

   #about #section2 .product {
      margin-top: -150px;
      width: 100%;
   }

   #about #section2 .info {
      /* text-align: left; */
      margin-top: 0px;
      padding: 0 20px;
      /* margin-left: 10%; */
   }

   #about #section2 .info h1 {
      font-size: 60px;
      margin-bottom: 24px;
   }

   #about #section2 .info p {
      font-size: 18px;
      padding: 0 120px;
      /* width: 90%; */
   }

   #about #section3 {
      margin-top: 180px;
   }

   #about #section3 .img-area {
      text-align: left;
      position: relative;
   }

   #about #section3 .img-area img {
      width: 85%;
      position: absolute;
      left: 15%;
      transform: unset;
      margin-top: -150px;

   }

   #about #section3 .info {
      color: #fff;
      text-align: left;
      padding: 80px 40px 50px 15%;
   }

   #about #section3 .info h1 {
      font-size: 60px;
      font-family: 'Sofia SemiBold';
      margin-bottom: 16px;
   }

   #about #section3 .info p {
      font-size: 18px;
      width: 60%;
   }

   #about #section4 {
      padding: 6em 0;
   }

   #about #section4 h1 {
      font-size: 60px;
      margin-bottom: 50px;
   }

   #about #section4 .year {
      font-size: 28px;
      margin-bottom: 32px;
   }

   #about #section4 .history-wrap .history-list .history p {
      font-size: 16px;
      width: 75%;
   }

   #about #section4 .history-wrap {
      border-left: 3px solid #009BB9;
      margin: 0 0px;
      margin-top: 0px;
   }

   #about #section4 .history-wrap .history-list {
      margin-left: 24px;
   }

   #about #section4 .history-wrap .history-list .bullet {
      left: -31px;
   }

   #about #section4 .even .history-wrap {
      border-left: none;
      border-right: 3px solid #009BB9;
   }

   #about #section4 .even .history-wrap .history-list .history h2 {
      right: 0;
   }

   #about #section4 .even .history-wrap .history-list .history p {
      text-align: right;
      width: 100%;
   }

   #about #section4 .even .history-wrap .history-list {
      margin-left: 0px;
      margin-right: 24px;
   }

   #about #section4 .even .history-wrap .history-list .bullet {
      left: unset;
      right: -31px;
   }
}

@media (min-width: 1200px) {
   #about #section4 .even .history-wrap .history-list .history p {
      text-align: right;
      width: 100%;
      padding-left: 150px;
   }
}

/* end: About Pages ---------- */
/* For You Pages ---------- */
#foryou {}

#foryou #section1 {}

#foryou #section1 .banner img {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

#foryou #section1 .banner .content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
}

#foryou #section1 .banner .content .info {
   text-align: center;
   color: #fff;
}

#foryou #section1 .banner .content .info h1 {
   font-size: 36px;
   margin-bottom: 8px;
   text-shadow: 2px 2px 5px #00000047;
   font-family: 'Sofia SemiBold';
}

#foryou #section1 .banner .content .info p {
   font-size: 16px;
   text-shadow: 2px 2px 5px #00000042;
   width: 50%;
   margin: 0 auto;
}

#foryou #section2 {
   padding: 3em 0;
}

#foryou .pagination {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: 100%;
   text-align: center;
}

#foryou .page {
   font-size: 16px;
}

#foryou .page.active {
   color: #009BB9;
}

#foryou .btn-nav {
   background: #009BB9;
   color: #fff;
   border: 1px solid #009BB9;
   width: 100%;
   padding: 10px 20px;
   border-radius: 0;
   display: block;
   text-align: center;
}

#foryou .btn-nav:hover {
   background: #009BB9;
   color: #fff;
}

#foryou #section2 .desc {
   font-size: 16px;
   line-height: 24px;
   text-align: center;
   color: #707070;
   margin: 0 8px;
}

.article-wrap {
   margin: 50px 30px 0;
}

.article-card {
   margin-bottom: 40px;
   position: relative;
}

.article-card .img-area img {
   width: 100%;
   transition: all 1s ease-in-out;
}

.article-card .info {
   padding: 20px 0
}

.article-card .info .title {
   font-size: 18px;
   line-height: 25px;
   font-family: 'Sofia SemiBold';
   color: #009BB9;
   margin-bottom: 16px;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   /* number of lines to show */
   -webkit-box-orient: vertical;
   height: 80px;
   overflow: hidden;
   word-break: break-word;
   transition: all 0.3s ease-in-out;
}

.article-card:hover .info h1.title {
   color: #D5AF73;
}

.article-card .info .meta {
   font-size: 15px;
   color: #707070;
}

.article-card .info .arrow {
   position: absolute;
   bottom: 0;
   right: 0px;
   transition: all 0.5s ease-in-out;
}

.article-card:hover .info .arrow {
   right: -10px;
}

#foryou #section2 .daun-anessa {
   right: -500px;
   bottom: 20%;
}

@media (min-width: 768px) {
   #foryou #section1 .banner img {
      width: 100%;
      height: unset;
      object-fit: unset;
   }

   #foryou #section1 .banner .content .info h1 {
      font-size: 72px;
      margin-bottom: 8px;
      text-shadow: 2px 2px 5px #00000047;
   }

   #foryou #section1 .banner .content .info p {
      font-size: 24px;
      text-shadow: 2px 2px 5px #00000042;
      width: 100%;
      margin: 0 auto;
   }

   #foryou #section2 {
      padding: 4em 0;
   }

   #foryou #section2 .desc {
      font-size: 18px;
      line-height: 26px;
      text-align: center;
      color: #707070;
      margin: 0 auto;
      max-width: 800px;
   }

   .article-wrap {
      margin: 80px 0px 0;
   }

   .article-card {
      margin: 0 15px 40px;
   }

   .article-card .img-area {
      overflow: hidden;
   }

   .article-card:hover .img-area img {
      transform: scale(1.05);
   }

   .article-card .info {
      padding: 20px 0
   }

   .article-card .info .title {
      font-size: 20px;
      line-height: 27px;
      height: 75px;
   }

   .article-card .info .meta {
      font-size: 16px;
   }

   #foryou .article2 {
      max-width: 650px;
      margin-left: auto;
      margin-right: auto;
   }

   #foryou .pagination {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
   }

   #foryou .page {
      font-size: 18px;
   }

   #foryou .btn-nav:hover {
      background: white;
      color: #009BB9;
   }
}

/* end: For You Pages ---------- */
/* For You Detail Pages ---------- */
#foryou-detail {}

#foryou-detail #section1 {
   padding-bottom: 0;
}

#foryou-detail #section1 .container {
   border-bottom: 1px solid #009BB9;
}

#foryou-detail #section1 .daun-anessa.kiri {
   top: 30%;
   left: -380px;
}

#foryou-detail #section1 .daun-anessa.kanan {
   top: 60%;
}

#foryou-detail #section1 .thumbnail {
   margin: 0 -20px;
}

#foryou-detail #section1 .thumbnail img {
   width: 100%;
}

#foryou-detail #section1 .date {
   font-size: 14px;
   color: #707070;
   padding: 24px 0 16px;
}

#foryou-detail #section1 h1 {
   font-size: 24px;
   color: #009BB9;
   font-family: 'Sofia SemiBold';
   margin-bottom: 24px;
}

/* #foryou-detail #section1 .content {
   text-align: center;
} */

#foryou-detail #section1 .content h1,
#foryou-detail #section1 .content h2,
#foryou-detail #section1 .content h3,
#foryou-detail #section1 .content h4,
#foryou-detail #section1 .content h5,
#foryou-detail #section1 .content h6 {
   font-size: 18px;
   font-family: 'Sofia SemiBold';
   color: #009BB9;
   margin-bottom: 24px;
   margin-top: 32px;
   text-align: left;
}

#foryou-detail #section1 iframe {
   width: 100%;
   height: 200px;
}

#foryou-detail #section1 .content p {
   font-size: 16px;
   text-align: left;
}

#foryou-detail #section1 .content a {
    color: #009BB9;
}

#foryou-detail #section1 .content a:hover {
   text-decoration: underline;
}

#foryou-detail #section2 {
   padding: 0 0 3em;
   position: relative;
}


#foryou-detail #section2 .head {
   
   align-items: center;
   padding: 15px 0;
   color: #D5AF73;
   font-size: 28px;
}

#foryou-detail #section2 .head.aright {
   justify-content: flex-end;
}

#foryou-detail #section2 .head span {
   padding: 0 10px;
}

#foryou-detail #section2 .article-wrap {
   margin-top: 0;
}

/* #foryou-detail #section1 .content img {
   margin: 0 auto;
} */

@media (min-width: 768px) {
   #foryou-detail #section1 {
      padding-bottom: 0;
   }

   #foryou-detail #section1 iframe {
      width: 100%;
      height: 400px;
   }

   #foryou-detail #section1 .date {
      font-size: 18px;
   }

   #foryou-detail #section1 .bg-banner {
      width: 100%;
      position: absolute;
      top: -56px;
   }

   #foryou-detail #section1 h1 {
      font-size: 48px;
      margin-bottom: 60px;
   }

   #foryou-detail #section1 .thumbnail {
      margin: 0;
      position: relative;
      padding-top: 0px;
   }

   #foryou-detail #section1 .content {
      max-width: 700px;
      margin: 0 auto;
   }

   #foryou-detail #section1 .content h1,
   #foryou-detail #section1 .content h2,
   #foryou-detail #section1 .content h3,
   #foryou-detail #section1 .content h4,
   #foryou-detail #section1 .content h5,
   #foryou-detail #section1 .content h6 {
      font-size: 28px;
   }

   #foryou-detail #section2 .container {
      
      margin: 0 auto;
   }

   #foryou-detail #section2 .head {
      padding: 1.5em 0px;
   }
}

/* end: For You Detail Pages ---------- */
/* Store Locator Pages ---------- */
#storelocator #section1 .banner img {
   width: 100%;
}

#storelocator #section2 .daun-anessa {
   top: -150px;
   left: -380px;
}

#storelocator #section1 .banner .content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 70%;
}

#storelocator #section1 .banner .content .info {
   text-align: center;
   color: #fff;
}

#storelocator #section1 .banner .content .info h1 {
   font-size: 36px;
   margin-bottom: 8px;
   text-shadow: 2px 2px 5px #00000047;
   font-family: 'Sofia SemiBold';
}

#storelocator #section2 {
   padding: 2em 10px;
}

#storelocator #section2 .heading {
   font-size: 24px;
   font-family: 'Sofia SemiBold';
   color: #009BB9;
   margin-bottom: 24px;
   text-align: center;
}

#storelocator #section2 .online-store {
   display: grid;
   grid-template-columns: 1fr 1fr;
   text-align: center;
   margin-bottom: 32px;
}

#storelocator #section2 .online-store a {
   align-self: center;
   margin-bottom: 40px;
   transition: all 0.4s ease-in-out;
}

#storelocator #section2 .online-store a:hover {
   opacity: 0.6;
}

#storelocator #section2 .search-area {
   position: relative;
   text-align: center;
}

#storelocator #section2 .search-area input {
   width: 100%;
   font-size: 14px;
   font-family: 'Sofia SemiBold';
   color: #a3a3a3;
   border-color: #009BB9;
}

#storelocator #section2 .search-area input::placeholder {
   color: #a3a3a3;
}

#storelocator #section2 .search-area .submit {
   position: absolute;
   right: 0;
   top: 0;
}

#storelocator #section2 .search-area .submit i {
   background: #D5AF73;
   padding: 6.5px 10px;
   font-size: 20px;
   color: #fff;
   border-radius: 0 0.25rem 0.25rem 0;
}

#storelocator #section2 .list-location {
   margin-top: 40px;
}

#storelocator #section2 .location-wrap {
   background: #F2FAFB;
   padding: 20px;
   margin-bottom: 24px;
}

#storelocator #section2 .location-wrap .brand {
   display: flex;
   align-items: center;
}

#storelocator #section2 .location-wrap .brand img {
   height: 30px;
}

#storelocator #section2 .location-wrap .brand i {
   font-size: 28px;
   padding-right: 10px;
}

#storelocator #section2 .location-wrap .brand.green {
   color: #02A198;
}

#storelocator #section2 .location-wrap .brand.pink {
   color: #F05E7C;
}

#storelocator #section2 .location-wrap .brand.purple {
   color: #b53280;
}

#storelocator #section2 .location-wrap .brand.red {
   color: #A71E26;
}

#storelocator #section2 .location-wrap .brand.navy {
   color: #31289b;
}

#storelocator #section2 .location-wrap .brand.black {
   color: #000000;
}

#storelocator #section2 .location-wrap .info {
   margin-left: 26px;
}

#storelocator #section2 .location-wrap h1 {
   font-size: 14px;
   font-family: 'Sofia SemiBold';
   margin: 10px 0 10px;
   color: #65675F;
}

#storelocator #section2 .location-wrap p {
   font-size: 12px;
   color: #65675F;
   margin-bottom: 0;
}

#storelocator #section2 .not-found {
   padding: 4em 30px;
   text-align: center;
}

#storelocator #section2 .not-found h1 {
   font-size: 24px;
   font-family: 'Sofia SemiBold';
   margin-bottom: 24px;
   color: #009BB9;
}

#storelocator #section2 .not-found p {
   font-size: 14px;
}

#storelocator #section2 .not-found .cta {
   margin-top: 32px;
}

#storelocator #section2 .btn-anessa {
   border: 1px solid #fff;
}

#storelocator #section2 .btn-anessa:hover {
   background: transparent;
   color: #D5AF73;
   border: 1px solid #D5AF73;
}



@media (min-width: 768px) {
   #storelocator #section1 .banner .content .info h1 {
      font-size: 48px;
   }

   #storelocator #section2 .online-store {
      grid-template-columns: 1fr 1fr 1fr;
      max-width: 600px;
      margin: 0 auto;
      margin-bottom: 32px;
   }

   #storelocator #section2 .online-store a {
      margin-bottom: 32px;
   }

   #storelocator #section2 .search-area {
      position: relative;
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
   }

   #storelocator #section2 .search-area .submit i {
      padding: 7.5px 10px;
   }

   #storelocator #section2 .list-location {
      margin: 0 30px;
      margin-top: 50px;
   }

   #storelocator #section2 .location-wrap h1 {
      font-size: 16px;
      margin-top: 16px;
   }

   #storelocator #section2 .location-wrap {
      padding: 30px;
      margin-bottom: 32px;
   }

   #storelocator #section2 .not-found h1 {
      font-size: 28px;
      font-family: 'Sofia SemiBold';
      margin-bottom: 24px;
      color: #009BB9;
   }

   #storelocator #section2 .not-found p {
      font-size: 18px;
   }
}

/* end: Store Locator Pages ---------- */
/* Anessa Secret Pages ---------- */
#anessa-secret {}

#anessa-secret #section1 {
   background: linear-gradient(0deg, rgba(245, 223, 189, 1) 0%, rgba(213, 175, 115, 1) 84%);
   padding-bottom: 12em;
   color: #fff;
}

#anessa-secret #section1 .container-us,
#anessa-secret #section2 .container-us {
   margin: 0 25px;
}

#anessa-secret #section1 .banner {
   position: relative;

}

#anessa-secret #section1 .banner .bg {
   width: 100%;
}

#anessa-secret #section1 .banner .content {
   position: absolute;
   top: 0;
   width: 100%;
}

#anessa-secret #section1 .banner .content .info {
   padding: 20px;
   text-align: center;
}

#anessa-secret #section1 .banner .content .info h1 {
   font-size: 36px;
   font-family: 'Sofia SemiBold';
   margin-bottom: 24px;
}

#anessa-secret #section1 .banner .content .info p {
   font-size: 16px;
   margin-bottom: 32px;
}

#anessa-secret #section1 .banner .content .info .products {}

#anessa-secret #section2 {
   margin-top: -20px;
   margin-bottom: 0px;
}

#anessa-secret #section2 .category {
   position: relative;
   margin-bottom: 24px;
}

#anessa-secret #section2 .category img {
   width: 100%;
}

#anessa-secret #section2 .category .info {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   color: #fff;
   font-size: 12px;
   font-family: 'Sofia SemiBold';
   text-align: center;
   padding: 10px;
}

#anessa-secret #section2 .row {
   margin-right: -10px;
   margin-left: -10px;
}

#anessa-secret #section2 .col-6.col-md-2 {
   padding-right: 10px;
   padding-left: 10px;
}

#anessa-secret #section3 {
   padding: 0em 0 0;
}

#anessa-secret #section3 .daun-anessa.one {
   top: 100px;
   z-index: 1;
}

#anessa-secret #section3 .daun-anessa.two {
   top: 43%;
   z-index: 1;
}

#anessa-secret #section3 .daun-anessa.three {
   bottom: 70px;
   z-index: 1;
}

#anessa-secret #section3 .bg-right {
   position: absolute;
   background: linear-gradient(136deg, rgba(213, 175, 115, 1) 39%, rgba(245, 223, 189, 1) 100%);
   width: 34%;
   height: 100%;
   right: 0px;
}

#anessa-secret #section3 .bg-left {
   position: absolute;
   background: linear-gradient(136deg, rgba(245, 223, 189, 1) 0%, rgba(213, 175, 115, 1) 39%);
   width: 34%;
   height: 100%;
   left: 0px;
}

#anessa-secret #section3 .bg-right-m {
   position: absolute;
   background: linear-gradient(136deg, rgba(213, 175, 115, 1) 39%, rgba(245, 223, 189, 1) 100%);
   width: 60%;
   height: 100%;
   right: -20px;
}

#anessa-secret #section3 .bg-left-m {
   position: absolute;
   background: linear-gradient(136deg, rgba(245, 223, 189, 1) 0%, rgba(213, 175, 115, 1) 39%);
   width: 60%;
   height: 100%;
   left: -20px;
}

#anessa-secret #section3 .video-wrap {
   position: relative;
   margin-bottom: 10px;
   padding-top: 70px;
}

#anessa-secret #section3 .video-wrap:last-child {
   margin-bottom: 0;
}

#anessa-secret #section3 .video-wrap .info {
   margin-bottom: 40px;
}

#anessa-secret #section3 .bd {
   font-size: 14px;
   padding: 2px 10px;
   background-color: #D5AF73;
   margin-bottom: 8px;
   min-width: 60%;
   display: inline-block;
   color: #fff;
   text-align: left;
}

#anessa-secret #section3 h1 {
   font-size: 24px;
   color: #009BB9;
   font-family: 'Sofia SemiBold';
   margin: 16px 0 24px;
}

#anessa-secret #section3 p {
   font-size: 12px;
   color: #707070;
}

#anessa-secret #section3 .vid-area {
   position: relative;
   margin: 24px 0;
   cursor: pointer;
   z-index: 2;
}

#anessa-secret #section3 .vid-area .thumb {
   width: 100%;
}

#anessa-secret #section3 .vid-area .play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#anessa-secret #section3 .vid-area .play img {
   width: 80px;
}

.modal-content .close {
   position: absolute;
   right: 0;
   top: -50px;
   opacity: 1;
}

.modal-backdrop.show {
   opacity: 0.8;
}

@media (min-width: 768px) {

   #anessa-secret #section2 {
      margin-top: -20px;
      margin-bottom: 30px;
   }

   #anessa-secret #section3 {
      padding: 1em 0 0;
   }

   #anessa-secret #section3 .video-wrap {
      position: relative;
      margin-bottom: 60px;
      padding-top: 50px;
   }

   #anessa-secret #section3 .vid-area {
      margin: 50px 0 0;
   }

   #anessa-secret #section1 {
      padding-bottom: 8em;
   }

   #anessa-secret #section1 .container-us,
   #anessa-secret #section2 .container-us {
      margin: 0 70px;
   }

   #anessa-secret #section1 .banner .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
   }

   #anessa-secret #section1 .banner .content .info {
      padding: 40px;
      text-align: left;
   }

   #anessa-secret #section1 .banner .content .info h1 {
      font-size: 72px;
      font-family: 'Sofia SemiBold';
      margin-bottom: 24px;
   }

   #anessa-secret #section1 .banner .content .info p {
      font-size: 24px;
      margin-bottom: 0px;
   }

   #anessa-secret #section1 .banner .content .info .img-area {
      text-align: right;
   }

   #anessa-secret #section2 {
      margin-top: -55px;
   }


   #anessa-secret #section2 .category .info {
      font-size: 14px;
   }

   #anessa-secret #section3 .bd {
      font-size: 14px;
      padding: 5px;
      background-color: #D5AF73;
      margin-bottom: 8px;
      min-width: 50%;
      display: inline-block;
      color: #fff;
      text-align: center;
   }

   #anessa-secret #section3 .video-wrap .info {
      margin-bottom: 0px;
   }

   #anessa-secret #section3 h1 {
      font-size: 30px;
      color: #009BB9;
      font-family: 'Sofia SemiBold';
      margin: 12px 0 24px;
   }

   #anessa-secret #section3 p {
      font-size: 14px;
      color: #707070;
      line-height: 16px;
   }

   #anessa-secret #section3 .row {
      padding: 20px 0;
   }

   #anessa-secret #section3 .bd {
      text-align: left;
      padding-left: 10px;
   }

}

/* end: Anessa Secret Pages ---------- */
/* Products Pages ---------- */
#products {}

#products #section1 {}

#products #section1 .banner {
   position: relative;
}

#products #section1 .banner .bg {
   width: 100%;
}

#products #section1 .banner .content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
}

#products #section1 .banner .content .info {
   text-align: left;
   padding: 0 20px;
}

#products #section1 .banner .content .info h1 {
   font-size: 24px;
   font-family: 'Sofia SemiBold';
   text-shadow: 2px 2px 5px #00000047;
   color: #fff;
   width: 83%;
}

#products #section1 .banner .bdge {
   position: absolute;
   right: 10px;
   top: 30px;
   z-index: 1;
   width: 70px;
}

#products #section2 .daun-anessa {
   bottom: -100px;
   z-index: 1;
}

#products #section2 .menu-tab a {
   opacity: 0.5;
   display: inline-block;
    margin: 5px 15px;
}

#products #section2 .menu-tab a.active {
   opacity: 1;
}

#products #section3 .banner {
   position: relative;
}

#products #section3 .banner .bg {
   width: 100%;
}

#products #section3 .banner .content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
}

#products #section3 .banner .content .info {
   text-align: center;
   padding: 0 30px;
}

#products #section3 .banner .content .info h1 {
   font-size: 20px;
   color: #009BB9;
   font-family: 'Sofia SemiBold';
   margin-bottom: 16px;
}

#products #section3 .banner .content .info .img-area {}

#products #section3 .banner .content .info .img-area img {
   width: 70%;
}

#products #section2 {
   padding: 3em 0 6em;
}

#products #section2 .title-area {
   background: linear-gradient(285deg, rgba(213, 175, 115, 1) 48%, rgba(245, 223, 189, 1) 100%);
   width: 85%;
   padding: 15px 40px;
   text-align: right;
   color: #fff;
}

#products #section2 .title-area h1 {
   font-size: 24px;
   font-family: 'Sofia SemiBold';
   margin-bottom: 8px;
}

#products #section2 .title-area p {
   font-size: 14px;
   margin-bottom: 0;
}

.product-wrap {
   margin: 0 70px;
   text-align: center;
   margin-top: 24px;
   align-items: flex-end;
}

.product-card {
   position: relative;
   margin-bottom: 16px;
}

.product-card .box {
   position: relative;
}

.product-card .box .overlay {
   height: 114px;
   width: 100%;
   background: linear-gradient(299deg, rgba(0, 155, 185, 1) 25%, rgba(124, 205, 219, 1) 100%);
   position: absolute;
   bottom: 0;
}

.product-card .box .img-area {
   padding: 20px;
   position: relative;
}

.product-card .box .img-area img {
   width: unset;
   max-width: 140px;
   max-height: 350px;
   transition: all 0.8s ease-in-out;
}

.product-card h1 {
   font-size: 16px;
   padding: 20px 40px;
   line-height: 22px;
}

.menu-tab {
   text-align: center;
   margin-bottom: 24px;
}

.menu-tab a {
   padding: 0 8px;
   font-size: 16px;
   font-family: 'Sofia SemiBold';
   color: #707070;
   transition: all 0.5s ease-in-out;
   position: relative;
}

.menu-tab a.active {
   color: #009BB9;
}

#products .menu-tab a {
   border-bottom: 0px solid #fdeacc;
}

#products .menu-tab a.active {
   color: #009BB9;
   border-bottom: 2px solid #fdeacc;
}

.menu-tab a.active::after {
   position: absolute;
   height: 10px;
   width: 100%;
   bottom: 0;
   background: #F5EDE2;
}

.tab-content {
   display: none;
}

.tab-content.active {
   display: block;
}

.tab-contents {
   display: none;
}

.tab-contents.active {
   display: block;
}

@media (min-width: 768px) {
   #products #section1 .banner .content .info {
      text-align: center;
      padding: 0 20px;
   }

   #products #section1 .banner .content .info h1 {
      font-size: 40px;
      width: 100%;
   }

   #products #section1 .banner .bdge {
      position: absolute;
      right: 15px;
      top: 100px;
      z-index: 1;
      width: 150px;
   }

   #products #section3 .banner .content .info {
      text-align: center;
      padding: 0 30px;
   }

   #products #section3 .banner .content .info h1 {
      font-size: 40px;
      color: #009BB9;
      font-family: 'Sofia SemiBold';
      margin-bottom: 0px;
      text-align: right;
   }

   #products #section3 .banner .content .info .img-area img {
      width: 80%;
      margin-top: 20px;
   }

   .product-wrap {
      margin: 0 20px;
      text-align: center;
      margin-top: 24px;
      align-items: flex-end;
   }

   .product-card {
      position: relative;
      margin-bottom: 0px;
   }

   .product-card h1 {
      font-size: 18px;
      padding-bottom: 0;
      line-height: 24px;
      position: absolute;
      width: 100%;
   }

   #products .menu-tab {
      display: none;
   }

   #products #section2 .title-area {
      width: 100%;
      padding: 40px 30px;
   }

   #products .tab-content {
      display: block;
   }

   #products .blok {
      align-items: flex-end;
      margin-bottom: 100px;
   }

   .product-card:hover .box .img-area img {
      transform: rotate(-15deg);
   }

   #products #section2 {
      padding: 0em 0 6em;
   }

   .product-card .box .overlay {
      background: linear-gradient(299deg, rgba(0, 155, 185, 1) 0%, rgba(124, 205, 219, 1) 61%);
   }

   .product-card .box .img-area img {
      width: unset;
      max-width: 140px;
      transition: all 0.8s ease-in-out;
   }

   #products #section2 .title-area p {
      font-size: 16px;
      margin-bottom: 0;
   }

   #products #section2 .title-area h1 {
      font-size: 30px;
      font-family: 'Sofia SemiBold';
      margin-bottom: 8px;
   }

}

/* end: Products Pages ---------- */
/* Products Detail Pages ---------- */
#products-detail {}

#products-detail .tab-content-1,
#products-detail .tab-content-2,
#products-detail .tab-content-3,
#products-detail .tab-content-4 {
   display: none;
}

#products-detail .tab-content-1.active,
#products-detail .tab-content-2.active,
#products-detail .tab-content-3.active,
#products-detail .tab-content-4.active {
   display: block;
}

#products-detail #section1 .howto {
   list-style-type: initial;
   padding-left: 20px;
}

#products-detail #section1 .howto li {
   margin-bottom: 8px;
}

#products-detail #section1 .bold {
   margin-top: 24px;
}

.bold {
   font-family: 'Sofia SemiBold';
}

#products-detail #section1 .banner {
   background: transparent linear-gradient(179deg, #D5AF7300 30%, #fdeacc 100%) 0% 0% no-repeat padding-box;
   padding: 30px;
   position: relative;
}

#products-detail #section1 .banner .spf {
   position: absolute;
   right: 30px;
   top: 30px;
   height: 30px;
}

#products-detail #section1 .banner .brcrumb {
   font-size: 12px;
   margin-bottom: 16px;
}

#products-detail #section1 .banner h1 {
   font-size: 30px;
   color: #009BB9;
   font-family: 'Sofia SemiBold';
   margin-bottom: 8px;
   width: 70%;
   text-align: center;
   margin: auto;
}

#products-detail #section1 .banner .desc {
   font-size: 14px;
}

#products-detail #section1 .banner .desc span {
   font-family: 'Sofia SemiBold';
}

#products-detail #section1 .banner .img-area {
   text-align: center;
   margin: 60px 0 24px;
   position: relative;
}

#products-detail #section1 .banner .img-area .foam {
   position: absolute;
   left: 0px;
   top: -40px;
   width: 100px;
}
#products-detail #section1 .banner .img-area .foam.right {
   right: 0px;
   left:auto;
}

#products-detail #section1 .banner .img-area .product {
   width: 140px;
}

#products-detail #section1 .info {
   padding: 20px
}

#products-detail #section1 .info .menu-tab {
   display: flex;
   justify-content: space-between;
}

#products-detail #section1 .info .ing {
   display: flex;
   align-items: baseline;
}

#products-detail #section1 .info .ing img {
   margin-right: 5px;
}

#products-detail #section1 .info .cta {
   text-align: center;
   margin: 32px 0 60px;
}

#products-detail #section2 {
   background-image: url('/assets/img/water-bg.png');
   background-repeat: no-repeat;
   background-size: cover;
   padding: 4em 0;
   color: #fff;
   text-align: center;
}

#products-detail #section2 .desc {
   font-size: 18px;
   margin-bottom: 16px;
}

#products-detail #section2 div.title>h2 {
   font-size: 24px;
   font-family: 'Sofia SemiBold';
   margin-bottom: 40px;
}

#products-detail #section2 img {
   margin-bottom: 16px;
   width: 60px;
}

#products-detail #section2 h2 {
   font-size: 16px;
   font-family: 'Sofia SemiBold';
   margin-bottom: 8px;
}

#products-detail #section2 p {
   font-size: 14px;
   width: 70%;
   margin: 0 auto;
}

#products-detail #section2 .component {
   margin-bottom: 32px;
}

#products-detail #section2 .cta {
   margin-top: 16px;
   margin-bottom: 16px;
}

#products-detail #section3 {
   padding: 4em 0 2em;
}

#products-detail #section3 .daun-anessa {
   top: -150px;
   left: -380px;
}

#products-detail #section3 .mobile .product-wrap::-webkit-scrollbar {
   display: none;
}

#products-detail #section3 .mobile .product-wrap {
   flex-wrap: unset;
   overflow-x: scroll;
   margin: 0;
   padding-left: 20px;
   -ms-overflow-style: none;
   /* IE and Edge */
   scrollbar-width: none;
   /* Firefox */
}

#products-detail #section3 .mobile .product-wrap .product-card {
   width: 200px;
   margin-right: 0px;
   margin:auto;
}

#products-detail #section3 h3 {
   font-size: 24px;
   font-family: 'Sofia SemiBold';
   text-align: center;
   color: #D5AF73;
}

#products-detail #section3 .product-card .box .img-area img {
   display: unset;
}

#products-detail .owl-nav .owl-next {
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
}

#products-detail .owl-nav .owl-prev {
   position: absolute;
   top: 50%;
   left: 10px;
   transform: translateY(-50%);
}

#products-detail .owl-nav .icn {}


@media (min-width: 768px) {

   #products-detail #section1 .desktop .banner .menu-tab.desk {
      text-align: right;
      margin-bottom: 24px;
      margin-right: 40px;
   }

   #products-detail #section1 .banner .img-area .head {
      position: absolute;
      right: 200px;
      font-size: 100px;
      font-family: 'Sofia SemiBold';
      color: #009BB9;
      opacity: 0.2;
      line-height: 100px;
      top: 50%;
      transform: translateY(-50%);
   }

   #products-detail #section1 .banner .img-area .foam {
      position: absolute;
      right: 200px;
      top: -40px;
      width: 120px;
      left: unset;
   }
   #products-detail #section1 .banner .img-area .foam.right{
      right:320px;
   }

   #products-detail #section1 .banner {
      padding: 50px 30px 30px;
   }

   #products-detail #section1 .banner .spf {
      right: 50px;
   }

   #products-detail #section1 .banner .img-area {
      text-align: right;
   }

   #products-detail #section1 .banner .img-area .product {
      width: 200px;
      position: relative;
   }

   #products-detail #section1 .banner .brcrumb {
      font-size: 14px;
      margin-bottom: 12px;
   }

   #products-detail #section1 .banner h1 {
      font-size: 36px;
      color: #009BB9;
      font-family: 'Sofia SemiBold';
      margin-bottom: 5px;
      width: 100%;
      text-align: left;
   }

   .color-black {
      color: #707070 !important;
   }

   #products-detail #section1 .banner .desc {
      font-size: 18px;
      margin-bottom: 24px;
   }

   #products-detail #section1 .info .menu-tab {
      display: flex;
      justify-content: start;
      margin-bottom: 16px;
   }

   #products-detail #section1 .info .menu-tab a {
      padding: 0;
      padding-right: 16px;
   }

   #products-detail #section1 .info .cta {
      text-align: left;
      margin: 32px 0 60px;
   }

   #products-detail #section2 .desc {
      font-size: 24px;
      margin-bottom: 16px;
   }

   #products-detail #section2 div.title>h2 {
      font-size: 40px;
      font-family: 'Sofia SemiBold';
      margin-bottom: 60px;
   }

   #products-detail #section2 img {
      margin-bottom: 16px;
      width: 60px;
   }

   #products-detail #section2 h2 {
      font-size: 20px;
      font-family: 'Sofia SemiBold';
      width: 60%;
      margin: 0 auto;
      margin-bottom: 8px;
   }

   #products-detail #section2 p {
      font-size: 14px;
      width: 100%;
      margin: 0 auto;
   }

   #products-detail #section2 .cta {
      margin-top: 24px;
      margin-bottom: 16px;
   }

   #products-detail #section3 {
      padding: 4em 0 10em;
   }

   #products-detail #section3 h3 {
      font-size: 36px;
      margin-bottom: 60px;
   }

   #products-detail #section3 .desktop {
      max-width: 800px;
      margin: 0 auto;
   }
}
#products-detail .blue-icon-card{
   margin-bottom: 10px;
}
#products-detail .blue-icon-card .img{
   background-color: rgb(66,153,182);
    padding: 0px 0px;
    border-radius: 19px;
    display: block;
    margin: auto;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    vertical-align: middle;
}
#products-detail .blue-icon-card.clear .img{
   background-color: transparent;

}
#products-detail .blue-icon-card .img img{
   margin: auto;
   display: block;
}
#products-detail .blue-icon-card .text{
   text-align: center;
}
#products-detail .yellow-icon-card {
   margin:10px 0px;
}
#products-detail .yellow-icon-card .img{
   background-color: rgb(208,176,123);
   padding: 0px 0px;
   display: inline-block;
   max-width: 20px;
   border-radius: 10px;
   vertical-align: top;
}
#products-detail .yellow-icon-card .img img{
   margin: auto;
   display: block;
}
#products-detail .yellow-icon-card .text{
   text-align: left;
   display: inline-block;
   margin-left: 10px;
   vertical-align: top;
   max-width: calc(100% - 60px);
}
#products-detail .yellow-icon-card .text .title::after{
   content: " ";
   width: 10px;
   height: 1px;
   background-color: black;
   display: inline-block;
   vertical-align: middle;
}
#products-detail .yellow-icon-card .text > div{
   display: inline;
}

@media(min-width:768px){
   #products-detail .blue-icon-card .img{
       display: inline-block;
       margin:none;
       vertical-align: top;
   }
   #products-detail .blue-icon-card .text{
       text-align: left;
       display: inline-block;
       margin-left: 10px;
       vertical-align: top;
       max-width: calc(100% - 60px);
   }
   #products-detail .blue-icon-card .text .title::after{
      content: " ";
      width: 10px;
      height: 1px;
      background-color: black;
      display: inline-block;
      vertical-align: middle;
      margin-left: 7px;
   }
   #products-detail .blue-icon-card.clear .text .title::after{
      display: none;
   }
   #products-detail .blue-icon-card .text > div{
       display: inline;
   }
   #products-detail .blue-icon-card.side{
      display: inline-block;
      max-width: 180px;
      text-align:center;
      vertical-align: top;
   }
   #products-detail .blue-icon-card.side .img{
      display: block;
   }
   #products-detail .blue-icon-card.side .text{
      display: block;
      vertical-align: middle;
      text-align: center;
      max-width: none;
   }
}

/* end: Products Detail Pages ---------- */
/* 404 Pages ---------- */
#notfound {}

#notfound #section1 {
   background: linear-gradient(180deg, rgba(255, 255, 255, 1) 19%, rgba(255, 241, 219, 1) 52%, rgba(213, 175, 115, 0.4) 100%);
   min-height: calc(100vh - 56px);
   position: relative;
}

#notfound #section1 .daun-anessa.kiri {
   left: -500px;
   top: -100px;
}

#notfound #section1 .daun-anessa.kanan {
   right: -500px;
   bottom: -400px;
   z-index: 1;
}

#notfound #section1 .content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
}

#notfound #section1 .row {
   align-items: center;
}

#notfound #section1 .center-content {
   text-align: center;
   padding: 0 20px;
}

#notfound #section1 .center-content h1 {
   font-size: 120px;
   font-family: 'Sofia Bold';
   color: #009BB9;
   margin-bottom: 8px;
}

#notfound #section1 .center-content p {
   font-size: 18px;
   font-family: 'Sofia SemiBold';
   color: #009BB9;
}

#notfound #section1 .center-content .desc {
   font-size: 16px;
}

#notfound #section1 .center-content .cta {
   margin: 24px 0;
}

#notfound #section1 .prod-pos {
   text-align: right;
}

#notfound #section1 .product {
   width: 80%;
}

@media (min-width: 768px) {
   #notfound #section1 .center-content h1 {
      font-size: 250px;
      font-family: 'Sofia Bold';
      color: #009BB9;
      margin-bottom: 8px;
   }

   #notfound #section1 .center-content p {
      font-size: 36px;
      font-family: 'Sofia SemiBold';
      color: #009BB9;
   }

   #notfound #section1 .center-content .desc {
      font-size: 18px;
   }

   #notfound #section1 .center-content .cta {
      margin: 24px 0;
   }

   #notfound #section1 .product {
      width: 95%;
   }
}

/* end: 404 Pages ---------- */
/* PRIVACY POLICY Pages ---------- */
#privacy-policy #section1 {
   padding: 3em 0;
}

#privacy-policy #section1 .bahasa {}

#privacy-policy #section1 .bahasa {
   color: #707070;
}

#privacy-policy #section1 .bahasa .tab.active {
   color: #009BB9;
   font-family: 'Sofia Bold';
}

#privacy-policy #section1 .bahasa .tab:first-child {
   border-right: 1px solid #707070;
   padding-right: 12px;
}

#privacy-policy #section1 .bahasa .tab:last-child {
   padding-left: 10px;
}

#privacy-policy #section1 .tab-content {
   padding-top: 16px;
}

#privacy-policy #section1 h1 {
   font-size: 24px;
   margin-bottom: 16px;
   font-family: 'Sofia SemiBold';
   color: #009BB9;
}

#privacy-policy #section1 .lines {
   border-top: 1px solid #009BB9;
}

#privacy-policy #section1 ol.listing {
   padding-left: 20px;
}

#privacy-policy #section1 ol.listing li {
   font-size: 12px;
   font-family: 'Sofia Bold';
   color: #707070;
   text-decoration: underline;
}

#privacy-policy #section1 p {
   font-size: 12px;
   margin-bottom: 24px;
}

#privacy-policy #section1 p b {
   font-family: 'Sofia Bold';
}

#privacy-policy #section1 .poin {
   padding-top: 24px;
}

#privacy-policy #section1 .poin h6 {
   font-family: 'Sofia Bold';
   color: #009BB9;
   font-size: 16px;
   margin-bottom: 24px;
   text-transform: uppercase;
}

#privacy-policy #section1 .poin a {
   color: #009BB9;
   text-decoration: underline;
}

#privacy-policy #section1 .daun-anessa.kiri {
   top: 20%;
   left: -480px;
}

#privacy-policy #section1 .daun-anessa.kanan {
   top: 50%;
   right: -430px;
}

#products-detail #section3 .product-card h3 {
   font-size: 16px;
   padding: 20px 40px;
   line-height: 22px;
   width: 100%;
   color: #707070;
   margin-bottom: 0.5rem;
   margin-top: 0px;
   font-weight: 500;
   font-family: Sofia;
}

@media (min-width: 768px) {
   #privacy-policy #section1 .bahasa .tab {
      font-size: 18px;
   }

   #privacy-policy #section1 ol.listing li {
      font-size: 16px;
      font-family: 'Sofia Bold';
      color: #707070;
      text-decoration: underline;
   }

   #privacy-policy #section1 h1 {
      font-size: 40px;
      margin-bottom: 24px;
      font-family: 'Sofia SemiBold';
      color: #009BB9;
   }

   #privacy-policy #section1 p {
      font-size: 16px;
      margin-bottom: 24px;
   }

   #privacy-policy #section1 .poin h6 {
      font-size: 20px;
      margin-bottom: 24px;
   }

   #privacy-policy #section1 ol.listing {
      padding-left: 20px;
      padding-top: 24px;
   }

   #privacy-policy #section1 ol.listing li:hover {
      color: #009BB9;
   }

   #products-detail #section3 .product-card h3 {
      font-size: 18px;
      padding: 20px 40px;
      line-height: 24px;
      position: absolute;
      width: 100%;
      color: #707070;
      margin-bottom: 0.5rem;
      margin-top: 0px;
      font-weight: 500;
      font-family: Sofia;
   }
}

/* end: PRIVACY POLICY Pages ---------- */
/* start: ANESSA x VIU Pages ---------- */
.anessa-viu-bg {
   background: transparent linear-gradient(101deg, #009BB9 0%, #7CCDDB 100%) 0% 0% no-repeat padding-box;
   color: #fff;
   position: relative;
}

#anessa-viu #section1 {
   color: #fff;
}

#anessa-viu #section1 .banner {
   position: relative;
}

#anessa-viu #section1 .banner .bg {
   width: 100%;
}

#anessa-viu #section2 {
   padding-bottom: 2em;
}

#anessa-viu #section2 .info {
   text-align: center;
   margin-top: 24px;
   padding: 0 20px;
   width: 100%;
}

#anessa-viu #section2 .info h2 {
   font-size: 30px;
   font-family: 'Sofia';
   color: #009BB9;
   margin-bottom: 48px;
}

#anessa-viu #section3 {
   margin-top: 80px;
}

#anessa-viu #section3 .daun-anessa {
   top: -400px;
   z-index: 1;
}

#anessa-viu #section3 .img-area {
   text-align: center;
   position: relative;
   padding: 100px;
}

#anessa-viu #section3 .img-area img {
   width: 80%;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   margin-top: -150px;
   object-fit: cover;
}

#anessa-viu #section3 .info {
   color: #fff;
   padding: 36% 20px 40px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

#anessa-viu #section3 .info h3 {
   font-size: 16px;
   font-family: 'Sofia';
   margin-bottom: 24px;
   line-height: 1.4;
}

#anessa-viu #section3 ol {
   margin-bottom: 24px;
}

#anessa-viu #section3 .info li {
   font-size: 14px;
   line-height: 2.5;
   margin-bottom: 0.2rem;
}

#anessa-viu #section3 .info div a {
   font-size: 14px;
}

@media(min-width: 375px) {
   #anessa-viu #section3 .info {
      padding: 42% 40px 40px;
   }
}

@media(min-width: 425px) {
   #anessa-viu #section3 .info {
      padding: 46% 40px 40px;
   }
}

@media(min-width: 480px) {
   #anessa-viu #section3 .info {
      padding: 50% 40px 40px;
   }
}

@media(min-width: 520px) {
   #anessa-viu #section3 .info {
      padding: 54% 40px 40px;
   }
}

@media(min-width: 580px) {
   #anessa-viu #section3 .info {
      padding: 60% 60px 40px;
   }
}

@media(min-width: 640px) {
   #anessa-viu #section3 .info {
      padding: 65% 70px 40px;
   }
}

@media(min-width: 740px) {
   #anessa-viu #section3 .info {
      padding: 70% 70px 40px;
   }
}

@media(min-width:768px) {
   #anessa-viu #section2 {
      padding-bottom: 6em;
   }
   
   #anessa-viu #section2 .info h2 {
      font-size: 48px;
   }
   
   #anessa-viu #section3 .img-area img {
      width: 100%;
      left: 60%;
   }
   
   #anessa-viu #section3 .info {
      padding: 40px;
      align-items: start;
   }
   
   #anessa-viu #section3 .info h3 {
      font-size: 16px;
      font-family: 'Sofia';
      margin-bottom: 24px;
      line-height: 1.4;
   }
   
   #anessa-viu #section3 ol {
      margin-bottom: 24px;
   }

   #anessa-viu #section3 .info li {
      font-size: 14px;
   }

   #anessa-viu #section3 .info div a {
      font-size: 14px;
   }
}

@media(min-width:1025px) {
   #anessa-viu #section3 .daun-anessa {
      top: -300px;
   }

   #anessa-viu #section3 .info {
      padding: 60px 120px 120px;
   }

   #anessa-viu #section3 .img-area img {
      /* width: 80%; */
      margin-top: -200px;
      /* position: absolute; */
      /* left: 50%; */
      /* transform: translateX(-50%); */
      /* margin-top: -150px; */
      /* object-fit: cover; */
   }
}

@media(min-width:1441px) {
   #anessa-viu #section2 .info h2 {
      font-size: 52px;
   }

   #anessa-viu #section3 .img-area {
      /* padding: 200px; */
      height: 80vh;
      margin-top: -80px;
   }

   #anessa-viu #section3 .info h3 {
      font-size: 24px;
   }

   #anessa-viu #section3 .info li {
      font-size: 18px;
   }

   #anessa-viu #section3 .info div a {
      font-size: 18px;
   }
}
/* end: ANESSA x VIU Pages ---------- */