/*

Website Portofolio Gardea Putri

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font
02. global styles
03. header
04. banner
05. discount price cta
06. contact us
07. heading page
08. about us
09. services
10. responsive
11. section portofolio
12. section shop
13. pengaturan jarak per section
14. section faq
15. whatsapp button
16. service/skill section
17. loading screen style
18. web pricing
--------------------------------------------- */


/* 
---------------------------------------------
1. font
--------------------------------------------- 
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");

/* 
---------------------------------------------
2. reset css
--------------------------------------------- 
*/

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.main-button-gradient.buttonabout {
  margin-top: 20px; /* Atur margin atas sesuai kebutuhan */
}

.clearfix {
  display: block; /* Menghilangkan inline-block */
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  background-color: #fff;
  font-size: 12px;
  margin: 0;
  padding: 0;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Menghindari overflow horizontal */
  scroll-behavior: smooth;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 12px;
  line-height: 25px;
  color: #4a4a4a;
}

img {
  max-width: 100%; /* Membatasi ukuran gambar */
  height: auto; /* Proporsi gambar */
  
}

/* --------------------------------------------- */
/* 2. global styles */
/* --------------------------------------------- */
html, body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
}

::selection {
  background: #86469C;
  color: #fff;
}

.container {
  max-width: 1200px; /* Sesuaikan dengan gaya global */
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; /* Hindari overflow yang mengganggu */
}

::-moz-selection {
  background: #86469C;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-button-gradient a {
  font-size: 13px;
  color: #fff;
  background: rgb(219,138,222);
  background: linear-gradient(-145deg, rgba(219,138,222,1) 0%, rgba(251,154,209,1) 100%);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  margin-top: 15px;
}

.main-button-gradient a:hover {
  background: rgb(219,138,222);
  background: linear-gradient(-145deg, rgba(219,138,222,1) 0%, rgba(251,154,209,1) 100%);
  opacity: 0.9;
}

.white-button a {
  font-size: 13px;
  color: #86469C;
  background-color: #fff;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.white-button a:hover {
  opacity: 0.9;
}

.text-button a {
  font-size: 12px;
  font-weight: 500;
  color: #86469C;
  text-decoration: underline !important;
  transition: all .3s;
}

.text-button a:hover {
  opacity: 0.75;
}

section {
  margin-top: 140px;
}

#contact-section {
  padding-top: 20px;
}

.section-heading {
  position: relative;
  z-index: 2;
  padding-top: 20px;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 40px;
}

.section-heading h6 {
  font-size: 14px;
  text-transform: uppercase;
  color: #7a7a7a;
  font-weight: 600;
  margin-top: 30px;
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 40px;
  font-size: 24px;
  font-weight: 900;
  text-transform: capitalize;
  color: #111;
}

.section-heading h4 em {
  font-style: normal;
  color: #86469C;
}

.section-heading p {
  margin-top: 30px;
}

/* For mobile devices */
@media only screen and (max-width: 600px) {
  body {
    width: 100%; /* Full width on small screens */
  }
}

/* For tablets */
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  body {
    width: 100%;
    padding: 0 20px; /* Add padding if needed */
  }
}

/* For small desktops and laptops */
@media only screen and (min-width: 1024px) {
  body {
    width: 100%;
    margin: 0 auto; /* Center content */
  }
}

/* For large desktops */
@media only screen and (min-width: 1440px) {
  body {
    max-width: 1440px; /* Limit max width on large screens */
    margin: 0 auto;
  }
}

/* 
---------------------------------------------
3. header
--------------------------------------------- 
*/
.background-header {
 background-color: #86469C !important;
  background: linear-gradient(-145deg, rgba(134, 70, 156, 1) 0%, rgba(251,154,209,1) 100%) !important;
  border-radius: 0px 0px 25px 25px;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.90)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}


.background-header .logo img {
  max-width: 110px;
}

.header-area {
  position: absolute;
  background-color: transparent;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex;
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  font-size: 36px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-right: 30px;
  padding-right: 30px;
  border-right: 1px solid rgba(250, 250, 250, 0.3);
}

.background-header .main-nav .logo{
  margin-top: 25px;
}

.header-area .main-nav ul.nav {
  border-radius: 0px 0px 25px 25px;
  flex-basis: 100%;
  margin-top: 10px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

/* .header-area .main-nav .nav li:last-child {
  padding-right: 0px;
} */

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
  height: 40px;
  line-height: 40px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  font-weight: 300;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #000000;
  font-weight: bold;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}


/* Warna font navbar saat di-scroll */
.background-header .main-nav .nav li a {
  color: #ffffff; /* Warna saat di-scroll (misalnya hitam) */
}

/* Jika navbar aktif, tetap gunakan warna putih saat di-scroll */
.background-header .main-nav .nav li a.active {
  color: #ffffff!important; /* Warna aktif saat di-scroll */
}

/* .header-area .main-nav .nav li:last-child a {
  background-color: #DB8ADE;
  text-transform: uppercase;
  font-weight: 500;
}

.header-area .main-nav .nav li:last-child:hover a {
  background-color: #DB8ADE;
} */

.header-area .main-nav .nav li:hover a {
  background-color: rgba(255, 255, 255, 0.10);
}

.header-area .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
}

.background-header .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 22px;
}

.background-header .main-nav ul.nav {
  margin-top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

/* .visible{
  display:inline !important;
} */

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 5px;
    padding-right: 5px;
  }

}


@media (max-width: 767px) {
  .header-area {
    transition: opacity 0.5s ease-in-out; /* Smooth transition for appearance/disappearance */
  }
  
  .background-header {
    opacity: 1; /* Show the navbar when scrolled */
  }
  
  .header-area:not(.background-header) {
    opacity: 0; /* Hide the navbar initially */
  }

  .background-header .main-nav {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 25px 25px;
    width: 100%;
  }
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background: #ffffff;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 500;
    color: #1e1e1e;
    background: #ffffff;
     border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #f1f0fe;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }
  /* .background-header .main-nav .nav li:last-child,
  .header-area .main-nav .nav li:last-child {
    border-radius: 0px 0px 25px 25px;
  } */
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #DB8ADE!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  /* .header-area .nav li:last-child a {
    background-color: transparent !important;
    font-weight: 300 !important;
    text-transform: capitalize !important;
  } */
  .header-area {
    background-color: transparent;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
    margin-top: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  
}

/* 
---------------------------------------------
4. banner
--------------------------------------------- 
*/

section.main-banner {
  margin-top: 0px;
}

.main-banner {
  padding-top: 145px;
}

.main-banner .right-image {
  margin-left: 120px;
  position: relative;
  z-index: auto;
}

.main-banner .right-image img {
  position: relative;
  z-index: 1;
}

.main-banner .right-image::after {
  position: absolute;
  background-image: url(../images/banner-right-dec.png);
  width: 378px;
  height: 378px;
  content: '';
  right: -25%;
 
}


.main-banner .header-text::after {
  position: absolute;
  background-image: url(../images/banner-left-dec.png);
  width: 214px;
  height: 429px;
  content: '';
  left: 0;
  bottom: -240px;
z-index: 1;
}

.main-banner .header-text h6 {
  position: relative;
  z-index: 2;
  font-size: 17px;
  font-weight: 500;
  text-transform: capitalize;
  color: #777777;
}

.main-banner .header-text h2 {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  font-size: 54px;
  color: #111111;
  font-weight: 900;
  line-height: 74px;
  margin-bottom: 40px;
}

.main-banner .header-text h2 em {
  font-style: normal;
  color: #86469C;
}

.main-banner .main-button-gradient {
  position: relative;
  z-index: 2;
}

.main-banner .right-image::after,
.main-banner .header-text::after {
  pointer-events: none;
}


/* Mobile Styles */
@media (max-width: 767px) {
  section.main-banner {
    padding-top: 50px; /* Reduced padding for mobile */
  }

  .main-banner .header-text h6 {
    font-size: 14px !important; /* Ensure smaller size for h6 on mobile */
    margin-bottom: 8px; /* Adjust space below h6 on mobile */
  }

  .main-banner .header-text h2 {
    font-size: 48px !important; /* Ensure smaller size for h2 on mobile */
    line-height: 80px; /* Adjust line-height for mobile */
    margin-top: 6px; /* Space above h2 on mobile */
    margin-bottom: 30px; /* Space below h2 on mobile */
  }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-banner .header-text h6 {
    font-size: 16px !important; /* Slightly larger size for h6 on tablet */
    margin-bottom: 10px; /* Space below h6 on tablet */
  }

  .main-banner .header-text h2 {
    font-size: 44px !important; /* Slightly smaller size for h2 on tablet */
    line-height: 60px; /* Adjust line-height for tablet */
    margin-top: 8px; /* Space above h2 on tablet */
    margin-bottom: 35px; /* Space below h2 on tablet */
  }
}

/* Desktop Styles */
@media (min-width: 1025px) {
  .main-banner .header-text h6 {
    font-size: 17px; /* Default size for h6 on desktop */
    margin-bottom: 10px; /* Space below h6 on desktop */
  }

  .main-banner .header-text h2 {
    font-size: 54px; /* Default size for h2 on desktop */
    line-height: 74px; /* Default line-height for desktop */
    margin-top: 10px; /* Space above h2 on desktop */
    margin-bottom: 40px; /* Space below h2 on desktop */
  }
}


/* Animation for the moving text */
@keyframes moveText {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(20px); /* Move text up */
  }
  100% {
    transform: translateX(-50%) translateY(0); /* Move text back to original position */
  }
}
/*
---------------------------------------------
5. discount price cta
---------------------------------------------
*/

section.simple-cta {
  background-image: url(../images/cta-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding: 180px 0px 180px 0px;
}

section.simple-cta .left-image {
  margin-right: 45px;
}

section.simple-cta h6 {
  font-size: 17px;
  color: #fff;
}

section.simple-cta h4 {
  font-size: 52px;
  font-weight: 900;
  color: #fff;
  line-height: 74px;
  margin-top: 20px;
}

section.simple-cta p {
  color: #fff;
  margin-top: 30px;
  margin-bottom: 40px;
}


/* 
---------------------------------------------
6. contact us
--------------------------------------------- 
*/

section.contact-us {
  background-image: url(../images/footer-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0px;
  position: relative;
}

section.contact-us:after {
  position: absolute;
  content: '';
  background-image: url(../images/footer-left-dec.png);
  left: 0px;
  top: 60px;
  width: 267px;
  height: 396px;
  z-index: 1;
}

section.contact-us .contact-info {
  background-color: #fff;
  margin-top: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  z-index: 5;
  position: relative;
  padding: 20px;
}

section.contact-us .contact-info .icon i {
  float: left;
  margin-right: 15px;
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  background: rgb(219,138,222);
  background: linear-gradient(-145deg, rgba(219,138,222,1) 0%, rgba(251,154,209,1) 100%);
  color: #fff;
}

section.contact-us .contact-info h4 {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

section.contact-us .contact-info span {
  font-size: 15px;
  color: #86469C;
  font-weight: 700;
}

section.contact-us .section-heading {
  text-align: left;
  margin-bottom: 40px;
}

section.contact-us #contact {
  margin-left: -100px;
  position: relative;
  z-index: 5;
  background-color: #fff;
  margin-top: 40px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  padding: 40px;
}

section.contact-us #contact input {
  width: 100%;
  height: 40px;
  border-radius: 5px;
  background-color: #f4f7fb;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 0px 15px;
  margin-bottom: 30px;
}

section.contact-us #contact textarea {
  width: 100%;
  min-height: 140px;
  max-height: 180px;
  border-radius: 5px;
  background-color: #f4f7fb;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 15px;
  margin-bottom: 30px;
}

section.contact-us #contact button {
  float: right;
  font-size: 13px;
  color: #fff;
  background: rgb(219,138,222);
  background: linear-gradient(-145deg, rgba(219,138,222,1) 0%, rgba(251,154,209,1) 100%);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  transition: all .3s;
  border: none;
  outline: none;
}

section.contact-us #contact button:hover {
  opacity: 0.9;
}

section.contact-us ul.social-icons li {
  display: inline-block;
  margin: 0px 5px;
}

section.contact-us ul.social-icons {
  text-align: center;
  margin-top: 70px;
}

section.contact-us ul.social-icons li a {
  width: 44px;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  background-color: #fff;
  color: #86469C;
  border-radius: 50%;
  transition: all .5s;
}

section.contact-us ul.social-icons li a:hover {
  background-color: #86469C;
  color: #fff;
}

p.copyright {
  text-align: center;
  color: #fff;
  margin: 40px 0px;
}

p.copyright a {
  font-weight: 700;
  color: #fff;
}



/*
---------------------------------------------
7. heading page
---------------------------------------------
*/

section.page-heading {
  margin-top: 10px;
  text-align: center;
}

section.page-heading .header-text {
  border-bottom: 3px solid #eee;
  padding-bottom: 30px;
  touch-action: none;
}

section.page-heading .header-text h4 {
  font-size: 17px;
  text-transform: capitalize;
  color: #7a7a7a;
  touch-action: none;
}

section.page-heading .header-text h1 {
  font-size: 62px;
  font-weight: 900;
  color: #111;
  margin-top: 10px;
  touch-action: none;
}



/*
---------------------------------------------
8. about us page
---------------------------------------------
*/

section.get-info .left-image {
  margin-right: 30px;
}

section.get-info .section-heading {
  text-align: left;
}

section.get-info .info-item {
  border-radius: 15px;
  text-align: left;
  padding: 15px 30px 30px 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
  position: relative;
  margin-top: 30px;
}

section.get-info .info-item .icon {
  position: absolute;
  left: 30px;
  top: -20px;
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 15px;
  text-align: center;
  line-height: 40px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

section.get-info .info-item .icon img {
  max-width: 60%;
}

section.get-info .info-item h4 {
  margin-top: 20px;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 800;
}

section.our-team {
  position: relative;
}

section.our-team .section-heading p {
  padding: 0px 60px;
}

section.our-team:before {
  position: absolute;
  content: '';
  background-image: url(../images/our-courses-left-dec.png);
  left: 45px;
  top: -10px;
  width: 50px;
  height: 50px;
  z-index: 1;
}

section.our-team:after {
  position: absolute;
  content: '';
  background-image: url(../images/our-courses-right-dec.png);
  right: 45px;
  top: -10px;
  width: 50px;
  height: 50px;
  z-index: 1;
}

section.our-team .naccs {
  position: relative;
  text-align: center;
}

section.our-team .naccs .menu {
  position: relative;
  display: inline-block;
}

section.our-team .naccs .menu div {
  margin: 0px 15px;
  text-align: center;
  display: inline-block;
  width: 15%;
  text-align: center;
  font-size: 20px;
  color: #111;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 900;
}

section.our-team .naccs .menu div img {
  border-radius: 50%;
  max-width: 120px;
}

section.our-team .naccs .menu div h4 {
  font-size: 15px;
  font-weight: 900;
  margin-top: 5px;
  margin-bottom: 5px;
}

section.our-team .naccs .menu div span {
  font-size: 12px;
  text-transform: uppercase;
  color: #86469C;
  font-weight: 700;
  display: block;
}

section.our-team .naccs .menu div.active h4 {
  color: #86469C;
}

section.our-team ul.nacc {
  margin-top: 40px !important;
  position: relative;
  min-height: 100%;
  height: 100% !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

section.our-team ul.nacc li {
  z-index: -1;
  opacity: 0;
  transform: translateX(50px);
  background-color: #fff;
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  border-radius: 15px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  padding: 40px;
}

section.our-team ul.nacc li.active {
  position: relative !important;
  overflow: visible;
}

section.our-team ul.nacc li .right-image {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

section.our-team ul.nacc li .right-image img {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

section.our-team ul.nacc li .left-content {
  text-align: left;
  margin-right: 380px;
}

section.our-team ul.nacc li .left-content h4 {
  font-size: 20px;
  color: #111;
  margin-bottom: 25px;
  font-weight: 800;
}

section.our-team ul.nacc li .left-content span a {
  font-size: 14px;
  font-weight: 600;
  margin-right: 30px;
  padding-right: 30px;
  color: #111;
  border-right: 2px solid #111;
  transition: all .3s;
}

section.our-team ul.nacc li .left-content span a:hover {
  color: #86469C;
}

section.our-team ul.nacc li .left-content .last-span a {
  margin-right: 0px;
  padding-right: 0px;
  border-right: none;
}

section.our-team ul.nacc li .left-content p {
  margin-bottom: 30px;
}

section.our-team ul.nacc li .left-content .text-button {
  margin-top: 30px;
}

section.our-team ul.nacc li.active {
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

section.our-team ul.nacc li p {
  margin: 0;
}

section.our-office .left-info {
  margin-right: 0px;
  position: relative;
  z-index: 5;
  background-color: #fff;
  margin-top: 40px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  padding: 40px;
}

section.our-office .left-info p {
  margin-bottom: 40px;
}

section.our-office .left-info h6 {
  text-align: left;
}

section.our-office .left-info h4 {
  text-align: left;
}

section.our-office .left-info ul li {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #4a4a4a;
  font-style: italic;
  margin-bottom: 20px;
}

section.our-office .left-info ul li:last-child {
  margin-bottom: 0px;
}

section.our-office .left-info .main-button-gradient {
  margin-top: 40px;
}

section.our-office #video {
  margin-left: -70px;
}

section.our-office #video .thumb {
  position: relative;
}

section.our-office #video .thumb .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
}

section.our-office #video .thumb .play-button a {
  width: 80px;
  height: 80px;
  display: inline-block;
  text-align: center;
  line-height: 80px;
  border-radius: 50%;
  transform: translate(-40px, -40px);
  color: #fff;
  font-size: 22px;
  background: rgb(219,138,222);
  background: linear-gradient(-145deg, rgba(219,138,222,1) 0%, rgba(251,154,209,1) 100%);
}

section.our-office #video img {
  border-radius: 20px;
}



/*
---------------------------------------------
9. our services page
---------------------------------------------
*/

section.featured-product {
  position: relative;
}

section.featured-product:before {
  position: absolute;
  content: '';
  background-image: url(../images/testimonials-left-dec.png);
  left: 0px;
  top: -200px;
  width: 593px;
  height: 352px;
  z-index: -1;
}

section.featured-product:after {
  position: absolute;
  content: '';
  background-image: url(../images/testimonials-right-dec.png);
  right: 0px;
  bottom: -140px;
  width: 632px;
  height: 352px;
  z-index: -1;
}

section.featured-product .info-item {
  border-radius: 15px;
  text-align: left;
  padding: 60px 30px 30px 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
  position: relative;
  margin-bottom: 90px;
  z-index: 1;
}

section.featured-product .last-info {
  margin-bottom: 0px;
}

section.featured-product .left-info .info-item .icon {
  right: 30px;
  top: -30px;
}

section.featured-product .left-info .info-item {
  text-align: right;
}

section.featured-product .right-info .info-item .icon {
  left: 30px;
  top: -30px;
}

section.featured-product .info-item .icon {
  position: absolute;
  width: 80px;
  height: 80px;
  display: inline-block;
  border-radius: 15px;
  text-align: center;
  line-height: 80px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

section.featured-product .info-item .icon img {
  max-width: 60%;
}

section.featured-product .info-item h4 {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 800;
}

section.featured-product .product-image {
  margin: 0px 60px;
}


/* 
---------------------------------------------
11. responsive
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 1330px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1200px) {
  .main-banner .right-image {
    margin-left: 60px;
  }
  .main-banner .header-text h2 {
    font-size: 62px;
  }
  .header-area {
    background: rgb(219,138,222) !important;
    background: linear-gradient(-145deg, rgba(219,138,222,1) 0%, rgba(251,154,209,1) 100%) !important;
  }
  .services .owl-nav .owl-next{
    right: -70px;
  }
  .services .owl-nav .owl-prev{
    left: -65px;
  }
  .our-courses .owl-nav .owl-next{
    right: -70px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -65px;
  }
}

@media (max-width: 1085px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1005px) {
  .services .owl-nav .owl-next{
    display: none;
  }
  .services .owl-nav .owl-prev{
    display: none;
  }
  .our-courses .owl-nav .owl-next{
    display: none;
  }
  .our-courses .owl-nav .owl-prev{
    display: none;
  }
}

@media (max-width: 992px) {

  .main-banner .header-text {
    text-align: center;
    margin-bottom: 60px;
  }
  .main-banner .right-image {
    margin-left: 0px;
  }
  section.our-courses ul.nacc {
    margin-left: 0px !important;
  }
  section.simple-cta {
    margin-top: -110px;
  }
  section.simple-cta .left-image {
    margin-right: 0px;
    margin-bottom: 45px;
  }
  section.contact-us .contact-info {
    margin-top: 15px;
  }
  section.contact-us #contact {
    margin-left: 0px;
  }
  section.contact-us #contact button {
    float: none;
  }
  section.get-info .left-image {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  section.get-info .info-item {
    margin-top: 30px;
  }
  section.our-office #video {
    margin-left: 0px;
    margin-top: 30px;
  }
  section.featured-product .left-info .info-item,
  section.featured-product .right-info .info-item {
    text-align: center;
    background-color: #fff;
    position: relative;
    z-index: 2;
  }
  section.featured-product .left-info .info-item .icon {
    right: 50%;
    transform: translateX(40px);
  }
  section.featured-product .right-info .info-item .icon {
    left: 50%;
    transform: translateX(-40px);
  }
  section.featured-product .product-image {
    margin: 1px
  }
  section.our-team ul.nacc li .left-content span a,
  section.our-courses ul.nacc li .right-content span {
    margin-right: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
  }
  section.our-courses ul.nacc li .left-image,
  section.our-team ul.nacc li .right-image {
    position: relative;
    margin-right: 0px;
    margin-left: 0px;
    transform: translateY(-0%);
  }
  section.our-courses ul.nacc li .left-image img,
  section.our-team ul.nacc li .right-image img {
    border-radius: 15px;
  }
  section.our-courses ul.nacc li,
  section.our-team ul.nacc li {
    padding: 0px;
  }
  section.our-courses ul.nacc li .right-content {
    margin-left: 0px;
    padding: 30px;
  }
  section.our-team ul.nacc li .left-content {
    margin-right: 0px;
    padding: 30px;
  }
  section.our-team .naccs .menu div {
    width: 14%;
    margin: 0px 5px;
  }
  section.our-team .naccs .menu div.active img {
    border: 3px solid #86469C;
  }
  section.our-team .naccs .menu div h4,
  section.our-team .naccs .menu div span {
    display: none;
  }
  section.more-info .count-area-content .count-title {
    font-size: 22px;
  }
}

.grayscale {
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.grayscale:hover {
  filter: grayscale(0%);
}


/* Hapus pagination dan tombol navigasi */
.swiper-pagination,
.swiper-button-next,
.swiper-button-prev {
  display: none;
}

/* Optional: Efek zoom pada hover */
.swiper-slide img:hover {
  transform: scale(1.1); /* Efek zoom pada hover */
}

/* 
---------------------------------------------
11. section portofolio
--------------------------------------------- 
*/
.portofolio .container {
  width: 100%;
  max-width: 1200px;  /* Atur batas maksimal */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.custom-gallery .main-content > div {
  width: 50%;
}

.custom-gallery .main-content {
  display: flex;
  flex-wrap: wrap; /* Pastikan elemen beradaptasi dengan lebar layar */
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%; /* Sesuaikan agar mengikuti lebar container */
  box-sizing: border-box;
}

.custom-gallery .uk-navbar-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px; 
}

.custom-gallery .uk-navbar-nav > li {
  padding: 0;
  min-width: 50px;
}

.custom-gallery .uk-navbar-nav>li>a {
  padding: 15px 35px;
  display: block;
  background-color: #fff;
  color: #222;
  font-size: 15px;
  min-height: auto;
  font-weight: 600;
  box-shadow: 0 0 25px #cccccc42;
  border-radius: 15px;
  transition: 0.5s all ease-in-out;
  align-items: center; /* Menyelaraskan konten secara vertikal di tengah */
  text-align: center; /* Memastikan teks di dalamnya berada di tengah */
  list-style: none;
  justify-content: center;
}

.custom-gallery .uk-navbar-nav>li>a:hover, .custom-gallery .uk-navbar-nav>li.uk-active>a {
  background-color: #86469C;
  color: #fff;
}

.custom-gallery .img-gallery-container > li:hover > img {
  filter: brightness(0.4) blur(3px);
}

.custom-gallery .float-gallery-content {
  position: absolute;
  width: 100%;
  z-index: -1;
  background: #fff;
  padding: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s all ease-in-out;
  overflow: visible;
}

.custom-gallery .img-gallery-container > li:hover .float-gallery-content {
  bottom: 20px;
  opacity: 1;
  visibility: visible;
  z-index: 9;
}

.custom-gallery .uk-block {
  display: block;
}

.custom-gallery .float-gallery-content .content {
  padding: 8px 15px;
}

.custom-gallery .float-gallery-content .content > a {
  color: #212121;
  position: relative;
  bottom: -50px;
  opacity: 0;
  transition: all 0.5s;
}

.custom-gallery .float-gallery-content .content > a:hover {
  color: #86469C;
}

@media (max-width: 768px) {
  .custom-gallery .uk-navbar-nav > li > a {
    padding: 10px 10px; /* Mengurangi padding agar tombol lebih kecil di mobile */
    font-size: 14px; /* Mengurangi ukuran font untuk layar kecil */
  }
}

.custom-gallery button {
  border: 0;
  height: 100%;
  padding: 5px 15px;
  background: #86469C;
  font-size: 30px;
  color: #fff;
  position: relative;
  right: -100px;
  opacity: 0;
  transition: all 0.5s;
}

.custom-gallery .highlight {
  color:#86469C;
  font-weight: 600;
  position: relative;
  left: -100px;
  opacity: 0;
  transition: all 0.5s;
}

.custom-gallery .img-gallery-container > li:hover .highlight {
  left: 0;
  opacity: 1;
  transition-delay: 0.1s;
}

.custom-gallery .img-gallery-container > li:hover button {
  right: 0;
  opacity: 1;
  transition-delay: 0.1s;
}

.custom-gallery .img-gallery-container > li:hover .content > a {
  bottom: 0;
  opacity: 1;
  transition-delay: 0.1s;
}

@media screen and (max-width: 1100px) {
  .custom-gallery .img-gal {
      height: 300px;
  }
}

@media screen and (max-width: 650px) {
  .custom-gallery .img-gal {
      height: 300px;
  }
}

@media screen and (max-width: 480px) {
  .custom-gallery .img-gal {
      height: 300px;
  }
}

@media screen and (max-width: 1100px) {
  .custom-gallery .img-gallery-container > li {
    width: 50%; /* Two items per row on smaller screens */
  }
}

@media screen and (max-width: 650px) {
  .custom-gallery .img-gallery-container > li {
    width: 100%; /* One item per row on even smaller screens */
  }
}

/* title */
.page-header {
  text-align: center;
  padding: 20px;
}

.title-image {
  width: 100px; /* Sesuaikan ukuran gambar di header */
  height: auto; /* Jaga proporsi gambar */
  margin-top: 10px;
}

/* Responsif */
@media (max-width: 768px) {
  .title-image {
      width: 80px; /* Sesuaikan ukuran gambar pada perangkat kecil */
  }
}

/* Margin portofolio */
.custom-gallery {
  margin: 0 auto; /* Center the container */
  padding: 0 15px; /* Add horizontal padding */
  box-sizing: border-box; /* Include padding in element's total width */
}

.custom-gallery .main-content {
  max-width: 1200px; /* Set a maximum width for the container */
  margin: 0 auto; /* Center the container */
  padding: 0 15px; /* Add horizontal padding */
}

/* Responsif untuk ukuran layar kecil */
@media (max-width: 768px) {
  .custom-gallery .main-content {
      padding: 0 10px; /* Kurangi padding pada layar kecil */
  }
}

@media (max-width: 480px) {
  .custom-gallery .main-content {
      padding: 0 5px; /* Kurangi padding pada layar sangat kecil */
  }
}

/* li portofolio */
.img-gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Fleksibel mengikuti lebar */
  gap: 20px; /* Sesuaikan jarak antar elemen */
  padding: 0 15px; /* Tambahkan padding agar tidak terlalu mepet */
}


.img-gallery-container > li {
  position: relative;
  box-sizing: border-box; /* Termasuk padding dan border dalam ukuran elemen */
  overflow: visible; /* Menyembunyikan konten yang meluber */
}

.img-gal {
  width: 100%;
  height: 300px; /* Sesuaikan ukuran gambar */
  object-fit: cover; /* Memastikan gambar memenuhi area */
  border-radius: 15px;
  transition: 0.5s all ease-in-out;
}

.float-gallery-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8); /* Warna latar belakang semi-transparan */
  padding: 10px;
  box-sizing: border-box;
  border-radius: 15px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s all ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.float-gallery-content .content {
  flex: 1;
}

.float-gallery-content .content > a {
  color: #212121;
  text-decoration: none;
}

.float-gallery-content .content > a:hover {
  color: #86469C;
}

.float-gallery-content .content-btn {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.float-gallery-content button {
  border: 0;
  background: #86469C;
  color: #fff;
  font-size: 20px;
  padding: 5px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
  margin-right: 10px;
}

.float-gallery-content button:hover {
  background: #86469C;
}

.img-gallery-container > li:hover .float-gallery-content {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1200px) {
  .img-gallery-container {
      grid-template-columns: repeat(3, 1fr); /* 3 kolom pada layar lebih kecil */
  }
}

@media (max-width: 900px) {
  .img-gallery-container {
      grid-template-columns: repeat(2, 1fr); /* 2 kolom pada layar lebih kecil */
  }
}

@media (max-width: 600px) {
  .img-gallery-container {
      grid-template-columns: 1fr; /* 1 kolom pada layar sangat kecil */
  }
}

/* CSS untuk galeri gambar */
.img-gallery-container {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 kolom default */
  gap: 10px; /* Jarak antar item */
}

/* Menyembunyikan gambar dengan kelas hidden */
.img-gallery-container > li.hidden {
  display: none; /* Sembunyikan elemen dengan display none */
}

/* Transisi halus */
.img-gallery-container > li {
  transition: opacity 0.5s ease-in-out;
}

/* Responsif */
@media (max-width: 1200px) {
  .img-gallery-container {
      grid-template-columns: repeat(3, 1fr); /* 3 kolom pada layar lebih kecil */
  }
}

@media (max-width: 900px) {
  .img-gallery-container {
      grid-template-columns: repeat(2, 1fr); /* 2 kolom pada layar lebih kecil */
  }
}

@media (max-width: 600px) {
  .img-gallery-container {
      grid-template-columns: 1fr; /* 1 kolom pada layar sangat kecil */
  }
}

/* 
---------------------------------------------
12. section shop
--------------------------------------------- 
*/

/* Shop section styling */
.shop {
 
  background-color: #ffffff; /* Background color for the section */
  border-radius: 10px;
  padding: 50px 0; /* Tambahkan padding agar lebih nyaman */
}

.shop-container {
  position: relative;
  max-width: 1200px; /* Batasi lebar maksimal untuk alignment yang lebih baik */
  margin: 0 auto; /* Pusatkan konten */
}

.swiper-container {
  overflow: visible;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  flex: 0 0 auto;
  width: 100%;
  max-width: 25%; /* 4 products per row */
  padding: 10px; /* Berikan ruang di sekitar item */

}

.product {
  background: #ffffff;
  border-radius: 8px;
  position: relative;
  overflow: visible;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

.product-img-wrapper {
  height: 300px; /* Set a specific height to create a rectangular shape */
}

.product-img {
  width: 100%;
  object-fit: cover; /* Ensure the image covers the entire area */
  transition: transform 0.3s ease;
  border-radius: 10px;
  height: 300px;
}

.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  /* background: rgba(255, 255, 255, 0.5); */
  transition: opacity 0.3s ease;
}

.product-img-wrapper:hover .product-overlay {
  opacity: 1;
}

.product-img-wrapper:hover .product-img {
  transform: scale(1.1); /* Zoom effect */
  filter: blur(2px); /* Menambahkan efek buram */
}

.product-body {
  padding-top: 1px;
  text-align: center;
}

.product-description {
  color: #000000; /* Warna ungu */
  font-weight: bold; /* Menghilangkan garis bawah pada link */
  margin-top: 20px; /* Atur jarak antara gambar dan deskripsi */
  font-size: 16px;
 
}

.product-price {
  font-size: 18px;
  font-weight: bold;
}

.product-price del {
  color: #888;
}

/* Responsive styling */
@media (max-width: 1200px) {
  .swiper-slide {
    max-width: 33.33%; /* 3 products per row */
  }
}

@media (max-width: 900px) {
  .swiper-slide {
    max-width: 50%; /* 2 products per row */
  }
}

@media (max-width: 600px) {

   /* Script yang sudah ada */
   .swiper-slide {
    max-width: 100%; /* 1 product per row */
  }

  /* Ukuran tombol dan teks di mode mobile */
  .overview-btn {
    padding: 8px 16px; /* Kurangi padding untuk tombol di mode mobile */
    font-size: 14px; /* Kurangi ukuran font untuk tombol di mode mobile */
  }

  /* Posisi dan ukuran overlay di mode mobile */
  .product-overlay {
    justify-content: center;
    align-items: center;
  }

  /* Pastikan gambar tetap berada di tengah dan ukurannya responsif */
  .product-img {
    width: 100%; /* Set image width to 400px for mobile */
    height: 400px; /* Adjust height to maintain aspect ratio */
    display: block; /* Ensure the image is treated as a block-level element */
    margin: 0 auto; /* Center the image horizontally */
  }

  /* Jarak antara gambar dan deskripsi produk */
  .product-img-wrapper {
    margin-bottom: 10px; /* Kurangi margin bawah untuk memberikan jarak lebih kecil */
  }

  .product-description {
    margin-top: 120px; /* Atur jarak antara gambar dan deskripsi */
  
  }

  .shop {
    /* Atur jarak ke section yang di atas dan di bawah untuk mode mobile */
    margin-top: 0px; /* Jarak ke section di atas, gunakan nilai negatif untuk mengurangi jarak */
    margin-bottom: 50px; /* Jarak ke section di bawah, gunakan nilai negatif untuk mengurangi jarak */
  }
}

/* Store link styling */
.store-link-wrapper {
  text-align: center;
  margin-top: 40px;
}

.store-link {
  color: #86469C; /* Sesuaikan warna teks */
  font-size: 18px; /* Ukuran font */
  text-decoration: underline; /* Berikan underline untuk menandakan link */
  cursor: pointer;
  transition: color 0.3s ease;
}

.store-link:hover {
  color: #6e3583; /* Warna teks saat dihover */
  text-decoration: underline; /* Pastikan underline tetap saat hover */
}

@keyframes moveText {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

.store-link {
  display: inline-block;
  text-decoration: underline;
  font-weight: bold;
  color: #86469C; /* Sesuaikan dengan warna yang diinginkan */
  cursor: pointer;
  animation: moveText 1s ease-in-out infinite;
}

/* fav button shop */
/* Styling untuk tombol Overview */
.overview-btn {
  background-color: #86469C; /* Warna latar belakang untuk tombol Overview */
  color: white; /* Warna teks tombol */
  border: none; /* Hilangkan border */
  padding: 10px 60px; /* Padding untuk tombol */
  border-radius: 5px; /* Radius sudut tombol */
  font-size: 16px; /* Ukuran font */
  cursor: pointer; /* Pointer ketika dihover */
  transition: background-color 0.3s ease; /* Animasi transisi */
  margin-top: 180px;
}

/* Hover effect untuk tombol Overview */
.overview-btn:hover {
  background-color: #6e3583; /* Warna latar belakang saat hover */
}

/* Mengatur posisi tombol di tengah overlay */
.product-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Menampilkan overlay saat gambar di-hover */
.product-img-wrapper:hover .product-overlay {
  opacity: 1;
}

/* Modal container */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* Stay on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5); /* Black with opacity */
}

/* Modal content */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  width: 90%;
  max-width: 1200px;
  display: flex;
  align-items: flex-start; /* Align items to the top */
  position: relative; /* Relative positioning for close button */
}

/* Close button */
.close-btn {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute; /* Absolute positioning */
  top: 10px; /* Distance from top */
  right: 20px; /* Distance from right */
  cursor: pointer;
  z-index: 1100; /* Ensure it is above other modal content */
}

.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Modal body layout */
.modal-body {
  display: flex;
  flex-direction: row;
  width: 100%;
}

/* Left section for small images */
.modal-left {
  flex: 0 0 120px; /* Fixed width for the left section */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

/* Small images */
.small-img {
  width: 125px;
  height: 125px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 0 5px;
}

/* Center section for large image */
.modal-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Large image */
.large-img {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  border-radius: 8px;
}

/* Right section for product info */
.modal-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 20px;
}

.modal-right h2 {
  margin: 0;
  font-size: 24px;
}

.product-price {
  color: #86469C;
  font-size: 20px;
  font-weight: bold;
}

.product-summary {
  margin: 10px 0;
  text-align: justify;
}

.product-stock {
  margin-bottom: 20px;
}

/* Buttons */
.modal-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.checkout-btn {
  flex: 2;
  padding: 10px 40px;
  background-color: #86469C;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.checkout-btn:hover {
  background-color: #6e3583;
}

/* Price container */
.price-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.original-price {
  color: red;
  text-decoration: line-through;
  font-size: 16px;
}

.product-price {
  color: #86469C;
  font-size: 20px;
  font-weight: bold;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .modal-content {
    position: relative;
    margin: 0 auto; /* Pusatkan modal secara horizontal */
    top: 50%; /* Tempatkan modal 50% dari atas */
    transform: translateY(-50%); /* Geser modal ke atas setengah dari tingginya untuk pusat vertikal */
    flex-direction: column;
    max-width: 95%;
    padding: 10px;
  }

  .modal-body {
    flex-direction: column;
  }

  .modal-left {
    order: 2;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 0px;
  }

  .small-img {
    width: 100px;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .modal-center {
    order: 1;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
  }

  .large-img {
    margin-top: 30px;
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
  }

  .modal-right {
    order: 3;
    width: 100%;
    padding-left: 0;
    margin-top: 20px;
  }

  .modal-buttons {
    order: 4;
    flex-direction: column;
    gap: 10px;
  }

  .checkout-btn, .whatsapp-btn {
    width: 100%;
  }
}



/* 
---------------------------------------------
13. pengaturan jarak per section
--------------------------------------------- 
*/
/* Default margin for larger screens */
section {
  margin-top: 30px;
  margin-bottom: 0px;
}
/* Jarak antar section pada perangkat mobile */
@media (max-width: 768px) {
  .section {
    margin-top: 40px; /* Jarak atas untuk semua section */
    margin-bottom: 40px; /* Jarak bawah untuk semua section */
  }

  .shop {
    margin-top: 1px; /* Jarak atas untuk section shop */
    margin-bottom: 40px; /* Jarak bawah untuk section shop */
  }

  .portfolio {
    margin-top: 40px; /* Jarak atas untuk section portfolio */
    margin-bottom: 40px; /* Jarak bawah untuk section portfolio */
  }

  .pricing {
    margin-top: 40px; /* Jarak atas untuk section pricing */
    margin-bottom: 40px; /* Jarak bawah untuk section pricing */
  }

  .contact {
    margin-top: 40px; /* Jarak atas untuk section contact */
    margin-bottom: 40px; /* Jarak bawah untuk section contact */
  }

  .blog {
    margin-top: 40px; /* Jarak atas untuk section blog */
  }
  /* Tambahkan aturan untuk section lain jika diperlukan */
}


/* 
---------------------------------------------
14. section faq
--------------------------------------------- 
*/
/* Center image */
.product-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  z-index: 0;
}

.product-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  z-index: 0;
}

/* Accordion */
.accordion {
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 1;
}

.accordion-button {
  background-color: #ffffff; /* Warna putih untuk accordion item */
  border: none;
  border-radius: 0.375rem; /* Sedikit rounded pada item */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan lembut */
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s; /* Animasi transisi */
  padding: 1rem 1.5rem; /* Padding vertikal 1rem, horizontal 1.5rem */
  display: flex;
  justify-content: space-between; /* Teks di kiri, panah di kanan */
  align-items: center; /* Panah dan teks vertikal sejajar */
  padding: 10px 30px; /* Sesuaikan padding untuk kecantikan */
  font-weight: 600;
}

.accordion-button:not(.collapsed) {
  background-color: #86469C; /* Warna ungu saat dibuka */
  color: #ffffff; /* Ubah teks jadi putih */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat dibuka */
  transform: translateY(-2px); /* Beri efek sedikit naik ketika dibuka */
  font-weight: 600;
}


.accordion-item {
  border: none; /* Hilangkan border pada item */
  margin-bottom: 1rem; /* Beri jarak antar item */
  background-color: #ffffff; /* Warna dasar putih */
  border-radius: 0.375rem; /* Rounded edges */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan dasar */
  overflow: hidden; /* Untuk memastikan isi accordion tidak keluar dari batas */
  transition: box-shadow 0.3s ease; /* Transisi smooth untuk bayangan */
}

.accordion-item:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Tambahkan bayangan saat hover */
}

.accordion-body {
  background-color: #f8f9fa; /* Background isi accordion tetap putih */
  color: #000000;
  border-top: none; /* Hilangkan border antara button dan isi */
  padding: 1rem 1.5rem; /* Padding untuk isi accordion */
  font-weight: 600;
  text-align: justify; /* Rata kiri dan kanan */
}

/* Styling untuk efek transisi saat collapse */
.accordion-collapse {
  transition: height 0.35s ease;
}

/* Ensure the accordion container is properly positioned */
.accordion-container {
  position: relative;
}

/* Basic styling for accordion buttons */
.accordion-button {
  background-color: #ffffff; /* Warna putih sebelum di-hover */
  border: none;
  padding: 1rem;
  border-bottom-left-radius: 0.375rem; /* Border radius hanya di bawah kiri */
  border-bottom-right-radius: 0.375rem; /* Border radius hanya di bawah kanan */
  border-top-left-radius: 0; /* Tidak ada border radius atas */
  border-top-right-radius: 0; /* Tidak ada border radius atas */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan lembut */
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
  min-height: 80px; /* Tentukan tinggi minimum untuk seragam */
  padding: 10px 30px; /* Sesuaikan padding agar teks dan panah terlihat rapi */
  position: relative; /* Untuk mengatur panah di kanan */
}

/* Posisi panah di kanan dan tengah */
.accordion-button::after {
  content: '';
  position: absolute;
  right: 20px; /* Jarak dari tepi kanan */
  left: 30px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg); /* Posisikan panah di tengah secara vertikal */
  width: 10px;
  height: 10px;
  border-top: 2px solid black; /* Warna panah sebelum hover */
  border-right: 2px solid black;
  transition: border-color 0.3s;
}

/* Mengubah warna panah saat hover */
.accordion-button:hover::after {
  border-color:  #db8ade; /* Warna panah berubah menjadi putih saat hover */
}

.accordion-button[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(225deg); /* Rotasi panah ke bawah saat expanded */
  border-color: white; /* Warna panah saat dibuka */
}

.accordion-button:focus,
.accordion-button[aria-expanded="true"] {
  background-color: #86469C; /* Warna ungu saat accordion diklik */
  border-bottom-left-radius: 0.375rem; /* Tetap border radius bawah saat diklik */
  border-bottom-right-radius: 0.375rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Tambahkan bayangan lebih besar saat diklik */
  color: white; /* Text menjadi putih setelah diklik */
}

.accordion-button[aria-expanded="true"]::after {
  transform: rotate(225deg); /* Rotate panah ke arah bawah saat expanded */
  border-color: white; /* Arrow berubah warna jadi putih saat expanded */
}

.accordion-button:focus {
  outline: none;
}

.accordion-item {
  margin-bottom: 1rem; /* Spasi antar accordion item */
}

/* Adjust z-index for accordion items */
.accordion-item {
  position: relative;
  z-index: 1;
}

/* Bring the last 3 accordion items to the front */
#headingThreeLeft, #headingFourLeft, #headingFiveLeft,
#headingThreeRight, #headingFourRight, #headingFiveRight {
  position: relative;
  z-index: 1;
}

/* Ensure accordion content area is also on top */
.accordion-body {
  background-color: #ffffff; /* Adjust as needed */
  border: 1px solid #ddd; /* Adjust as needed */
  border-top: none; /* Remove border between button and content */
}

/* Styling for the accordion collapse animation */
.accordion-collapse {
  transition: height 0.35s ease;
}

/* Optional: Add a higher z-index to the accordion-container to ensure it is above other content */
.accordion-container {
  z-index: 1;
  position: relative;
}

/* Default styles for the layout */
.featured-product {
  position: relative;
  z-index: 1;
}

.product-image {
  text-align: center;
}

/* Media query for mobile devices (Android) */
@media only screen and (max-width: 767px) {
  /* Adjust top margin for the right accordion */
  .accordion {
    margin-top: 1rem; /* Adjust this value as needed */
    margin-bottom: 4rem;
  }
  .product-image {
    display: flex;
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically (if there's extra height) */
    margin: 0 auto; /* Center the image */
 
  }
  .product-image img {
    width: 100%; /* Increase the width to 80% of the container */
    max-width: 100%; /* Ensure the image does not exceed this size */
    margin-bottom: 0rem; /* Ensure there is space below the image */
  }
}

/* animasi scroll */
/* CSS untuk animasi fade-in alternatif */
.fade-in {
  opacity: 0;
  transform: translateY(30px); /* Mulai dari posisi sedikit di bawah */
  transition: opacity 1.5s ease, transform 1.5s ease; /* Durasi animasi dan easing */
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0); /* Kembali ke posisi normal */
}

/* 
---------------------------------------------
15. whatsapp button
--------------------------------------------- 
*/
/* Container for the WhatsApp icon and notification */
.whatsapp-icon-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* WhatsApp notification */
.whatsapp-notification {
  background-color: #86469C;
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  opacity: 0; /* Initially hidden */
  transform: translateX(100%); /* Start off-screen */
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  white-space: nowrap; /* Prevent text wrapping */
}

/* Show notification when hovering over the icon */
.whatsapp-icon-container:hover .whatsapp-notification {
  opacity: 1;
  transform: translateX(0); /* Slide in from the left */
}

/* WhatsApp Icon */
.whatsapp-icon img {
  width: 100px;
  height: 100px;
  cursor: pointer;
}

/* 
---------------------------------------------
16. service/skill section
--------------------------------------------- 
*/
/* Container global style already applied in the container class */
.skills {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 1px;
}

.skills-container {
  position: relative;
}

.swiper-container {
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  flex: 0 0 auto;
  width: 100%;
  max-width: 25%;
  padding: 10px;
  transition: all 0.3s ease;
}

.skill {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  transition: padding 0.3s ease, background-color 0.3s ease;
}

.skill-img-wrapper {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.skill-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.skill-body {
  text-align: center;
  margin-top: 15px;
}

.skill-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

.skill-description {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.skill:hover {
  background-color: #86469C;
}

.skill:hover .skill-title,
.skill:hover .skill-description {
  color: #ffffff;
}

@media (max-width: 1200px) {
  .swiper-slide {
    max-width: 33.33%;
  }
}

@media (max-width: 900px) {
  .swiper-slide {
    max-width: 50%;
  }
}

@media (max-width: 600px) {
  .swiper-slide {
    max-width: 100%;
  }

  .skill-img {
    height: 300px;
  }

  .skill-body {
    margin-top: 10px;
  }

  .skill-title {
    font-size: 20px;
    margin-top: 5px;
  }

  .skill-description {
    font-size: 16px;
    margin-top: 5px;
  }
}


/* 
---------------------------------------------
17. loading screen style
--------------------------------------------- 
*/

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.loading-spinner {
  border: 8px solid rgba(255, 255, 255, 0.3); /* Light spinner border */
  border-radius: 50%;
  border-top: 8px solid #fff; /* White spinner top border */
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Spinner Animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Hide loading screen when the page has loaded */
body.loaded #loading-screen {
  display: none;
}

/* Fade-in After Load Animation */
.fade-in-after-load {
  opacity: 0;
  transition: opacity 1s ease-in; /* Smooth transition for fade-in after load */
}

body.loaded .fade-in-after-load {
  opacity: 1; /* Elemen muncul setelah loading selesai */
}

/* Fade In on Scroll */
.fade-in {
  opacity: 0;
  transform: translateY(30px); /* Mulai dari posisi sedikit di bawah */
  transition: opacity 1.5s ease, transform 1.5s ease; /* Durasi animasi dan easing */
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0); /* Kembali ke posisi normal */
}


/* 
---------------------------------------------
18. website pricing
--------------------------------------------- 
*/
:root {
  --main-color: #86469C;; /* Sesuaikan warna utama */
  --secondary-color: #b4bdc6;
  --table-width: 31%;
  --bg-color: #ffffff; /* Ubah menjadi putih */
  --font-color: #86469C;
  --button-color: #71ce73;
}

.pricingTable {
  margin: 40px auto;
  color: var(--font-color);
}

.pricingTable-title {
  text-align: center;
  color: var(--main-color);
  font-size: 3em;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
  text-decoration: bold;
}

.pricingTable-subtitle {
  text-align: center;
  color: var(--secondary-color);
  font-size: 1.8em;
  margin-bottom: 60px;
}

.pricingTable-firstTable {
  list-style: none;
  padding: 0 2em;
  text-align: center;
}

.pricingTable-firstTable_table {
  width: var(--table-width);
  background-color: var(--bg-color); /* Warna putih */
  display: inline-block;
  padding: 0 30px 40px;
  text-align: center;
  max-width: 3420px;
  border-radius: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan hitam */
}

.pricingTable-firstTable_table:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bayangan saat hover */
}

.pricingTable-firstTable_table__header {
  font-size: 2em;
  padding: 40px 0;
  border-bottom: 2px solid #ebedec;
  font-weight: 600;
}

.pricingTable-firstTable_table__pricing {
  font-size: 3em;
  padding: 30px 0;
  font-weight: 700;
  color: #000;
}

.pricingTable-firstTable_table__options li {
  padding: 8px 0;
}

.pricingTable-firstTable_table__getstart {
  background-color: var(--button-color);
  color: #fff;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.pricingTable-firstTable_table__getstart:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Bayangan saat hover */
}

/* Menyesuaikan tampilan di layar tablet (max-width 991px) */

.pricingTable-firstTable_table {
  margin: 0 0px 40px; /* Menambahkan jarak antar tabel */
}

@media (max-width: 991px) {
  .pricingTable-firstTable_table {
    width: 45%; /* Lebar tabel di tablet */
    padding: 0 20px 30px; /* Sesuaikan padding di layar tablet */
  }

  .pricingTable-title {
    font-size: 2.5em; /* Sesuaikan ukuran font di tablet */
  }

  .pricingTable-subtitle {
    font-size: 1.5em; /* Sesuaikan ukuran font di tablet */
  }

  .pricingTable-firstTable_table__header {
    font-size: 1.8em; /* Ukuran font di header tabel */
  }

  .pricingTable-firstTable_table__pricing {
    font-size: 2.5em; /* Ukuran font pricing di tablet */
  }
}

/* Menyesuaikan tampilan di layar mobile (max-width 767px) */
@media (max-width: 767px) {
  .pricingTable-firstTable_table {
    width: 80%; /* Lebar tabel di mobile */
    padding: 0 15px 30px; /* Sesuaikan padding di layar mobile */
  }

  .pricingTable-title {
    font-size: 2em; /* Sesuaikan ukuran font di mobile */
  }

  .pricingTable-subtitle {
    font-size: 1.3em; /* Sesuaikan ukuran font di mobile */
  }

  .pricingTable-firstTable_table__header {
    font-size: 1.2em; /* Ukuran font di header tabel */
  }

  .pricingTable-firstTable_table__pricing {
    font-size: 2em; /* Ukuran font pricing di mobile */
  }
}

/* Menyesuaikan tampilan di layar sangat kecil (max-width 480px) */
@media (max-width: 480px) {
  .pricingTable-firstTable_table {
    width: 100%; /* Lebar tabel memenuhi layar */
    padding: 0 10px 60px; /* Sesuaikan padding di layar kecil */
  }

  .pricingTable-title {
    font-size: 1.8em; /* Ukuran font lebih kecil di layar kecil */
  }

  .pricingTable-subtitle {
    font-size: 1.1em; /* Ukuran font subtitle lebih kecil */
  }

  .pricingTable-firstTable_table__header {
    font-size: 1.8em; /* Ukuran font header lebih kecil */
  }

  .pricingTable-firstTable_table__pricing {
    font-size: 2.5em; /* Ukuran font pricing lebih kecil */
  }
}

/* 
---------------------------------------------
19. Shop Detail
--------------------------------------------- 
*/

.trending {
  padding: 60px 0; /* Atur padding sesuai kebutuhan */
}

.trending .section-heading h6 {
  color: #7a7a7a; /* Sesuaikan dengan style global */
}

.trending .section-heading h2 {
  color: #111; /* Sesuaikan dengan style global */
}

.trending .item {
  background-color: #ffffff; /* Sesuaikan dengan style global */
  border-radius: 15px; /* Sesuaikan dengan style global */
}

.trending .item .thumb img {
  border-radius: 15px 15px 0 0; /* Sesuaikan dengan style global */
}

.trending .item .down-content h4 {
  color: #111; /* Sesuaikan dengan style global */
}

.trending .item .down-content span.category {
  color: #7a7a7a; /* Sesuaikan dengan style global */
}

/* 
---------------------------------------------
Shop Style
--------------------------------------------- 
*/

.trending .main-button {
  margin-top: 32px;
  text-align: right;
}

.trending .item  {
  background-color: #eeeeee;
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  margin-bottom: 30px;
}

.trending .item .thumb {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
}

.trending .item span.price em {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  text-decoration: line-through;
  display: block;
}

.trending .item span.price {
  text-align: right;
  position: absolute;
  right: 20px;
  top: 20px;
  border-radius: 10px;
  background-color: #86469C;
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  padding: 8px 15px 6px 15px;
}

.trending .item .down-content {
  padding: 25px;
}

.trending .item .down-content span.category {
  font-size: 14px;
  color: #7a7a7a;
  margin-bottom: 5px;
  display: inline-block;
}

.trending .item .down-content h4 {
  font-size: 17px;
  font-weight: 600;
  transition: all .3s;
}

.trending .item .down-content a {
  position: absolute;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  width: 40px;
  height: 40px;
  background-color: #DB8ADE;
  color: #fff;
  border-radius: 50%;
  right: 25px;
  bottom: 25px;
  transition: all .3s;
}

.trending .item:hover .down-content h4 {
  color: #86469C;
}

.trending .item:hover .down-content a {
  background-color: #86469C;
}

.trending ul.trending-filter {
  list-style: none;
  text-align: center;
  margin-bottom: 70px;
}

.trending ul.trending-filter li {
  display: inline-block;
  margin: 5px 8px;
}

.trending ul.trending-filter li a {
  display: inline-block;
  text-align: center;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #1e1e1e;
  background-color: #eee;
  padding: 8px 20px;
  border-radius: 25px;
  transition: all .3s;
}

.trending ul.trending-filter li a.is_active {
  background-color: #DB8ADE;
  color: #fff;
}

.trending ul.trending-filter li a.is_active:hover {
  color: #fff;
}

.trending ul.trending-filter li a:hover {
  color: #DB8ADE;
}

.trending-box .item  {
  background-color: #eeeeee;
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  margin-bottom: 30px;
}

.trending-box .item .thumb {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
}

.trending-box .item span.price em {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  text-decoration: line-through;
  display: block;
}

.trending-box .item span.price {
  text-align: right;
  position: absolute;
  right: 20px;
  top: 20px;
  border-radius: 10px;
  background-color: #86469C;
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  padding: 8px 15px 6px 15px;
}

.trending-box .item .down-content {
  padding: 25px;
}

.trending-box .item .down-content span.category {
  font-size: 14px;
  color: #7a7a7a;
  margin-bottom: 5px;
  display: inline-block;
}

.trending-box .item .down-content h4 {
  font-size: 17px;
  font-weight: 600;
  transition: all .3s;
}

.trending-box .item .down-content a {
  position: absolute;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  width: 40px;
  height: 40px;
  background-color: #DB8ADE;
  color: #fff;
  border-radius: 50%;
  right: 25px;
  bottom: 25px;
  transition: all .3s;
}

.trending-box .item:hover .down-content h4 {
  color: #86469C;
}

.trending-box .item:hover .down-content a {
  background-color: #86469C;
}

.trending ul.pagination {
  margin-top: 50px;
  text-align: center;
  width: 100%;
  display: inline-block;
}

.trending ul.pagination li {
  display: inline-block;
  margin: 0px 5px;
}

.trending ul.pagination li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #eee;
  color: #1e1e1e;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50%;
  transition: all .3s;
}

.trending ul.pagination li a:hover,
.trending ul.pagination li a.is_active {
  background-color: #86469C;
  color: #fff;
}

.trending ul.trending-filter li a {
  font-size: 13px;
  padding: 8px 10px;
}
.trending ul.trending-filter li {
  margin: 5px 2px;
}

/* 
---------------------------------------------
Additional Info
--------------------------------------------- 
*/
section.additional-info .container {
  max-width: 1140px;
  margin: 0 auto;
  margin-bottom: 40px;
}

section.additional-info .last-info {
  background-color: #fff;
  margin-top: 20px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  padding: 40px;
}

section.additional-info .last-info p {
  margin-bottom: 20px;
  text-align: justify;
}

section.additional-info .last-info h6 {
  text-align: left;
}

section.additional-info .last-info h4 {
  text-align: left;
}

section.additional-info .last-info ul li {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #4a4a4a;
  font-style: italic;
  margin-bottom: 10px;
}

section.additional-info .last-info ul li:last-child {
  margin-bottom: 0px;
}

section.additional-info .last-info .main-button-gradient {
  margin-top: 20px;
}