body {

  background-image: url("/assets/img/pages/white.jpg");

  background-size: cover;

  /* width:1200px; */

  background-position: center;

}

p {

  font-size: 13px;

}

h2 {

  font-family: "Roboto", sans-serif;

}

.justified {

  text-align: justify;

}

.navbar-nav li a {

  color: white;

  font-family: "Roboto", sans-serif;

  font-size: 12px;

  flex-grow: 1;

  opacity: 0.9;

  text-transform: uppercase;

}

.navbar-nav .dropdown-item {

  color: white;

}

.dropdown-menu {

  background-color: #383434;

  border-radius: 1px;

  padding: 10px;

  margin-top: 1px;

  border: 1px solid gray;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /* Memberikan bayangan */

  transform: translateY(1px);

  opacity: 0.9;

}



.navbar-nav .dropdown-item .nav-item {

  color: white;

}



ul li a {

  color: white;

}



.dropdown-menu .nav-link:hover {

  cursor: pointer;

  background-color: black;

  opacity: 0.7;

  /* background-color: #484747; */

}



.nav-item:hover {

  cursor: pointer;

  background-color: #484747;

}



.navbar-nav .nav-item:hover .nav-link {

  color: white;

}



.nav-item:hover .dropdown-menu {

  display: block;

}



.dropdown-menu .nav-link {

  color: white;

}



.navbar form {

  margin-top: 7px;

  margin-bottom: 7px;

}

.navbar {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  background-color: #383434;

  height: 40px;

}

.footer {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  font-size: 13px;

  margin: 0px;

  background-color: #383434;

  padding: 0px;

  border-top: 1px solid #dee2e6;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 60px;

}



/*  BATAS CSS AWAL */



.hidden {

  display: none;

}



#content-wrapper .normal {

  width: 99%;

  margin-left: 10px;

  margin-bottom: 20px;

}



#content-wrapper .normalhalf {

  width: 50%;

  float: left;

  margin-bottom: 20px;

}



#content-wrapper .normal p {

  font-size: 12px;

  color: #2f2e2e;

  line-height: 16px;

  padding-top: 12px;

  margin: 0 15px 0 0;

  /* font-family: 'Tahoma', sans-serif; */

}



#content-wrapper .normal h1 {

  font-size: 24px;

  line-height: 24px;

}



#content-wrapper .normalhalf p {

  font-size: 12px;

  color: #2f2e2e;

  line-height: 16px;

  padding-top: 12px;

  margin: 0 25px 0 0;

  /* font-family: 'Tahoma', sans-serif; */

}



#content-wrapper .normalhalf h1 {

  font-size: 24px;

  line-height: 24px;

}



#content-wrapper .normalthird {

  width: 30%;

  margin-left: 10px;

  float: left;

  margin-bottom: 20px;

}



#content-wrapper .normalfourth {

  width: 22%;

  margin-left: 15px;

  float: left;

  margin-bottom: 20px;

}



ul.butttts li {

  display: inline;

  padding-right: 28px;

  padding: 6px 14px;

  margin-bottom: 1px;

  background-color: #000;

  color: #ccc;

  border: solid 1px #333;

}



ul.butttts li a {

  color: #ffffff;

}



ul.butttts:last-child {

  padding-right: 0;

}



ul.butttts li:hover {

  background-color: #999;

  color: #ccc;

  border: solid 1px #333;

}



.container {

  width: 100%;

  margin: 0 auto;

}



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

  .menu-wrapper ul {

    display: flex;

    justify-content: flex-start;

  }



  .menu-wrapper ul li ul {

    display: none !important;

  }



  .menu-wrapper ul li:hover ul {

    display: block !important;

  }

}



/* @media screen and (max-width: 992px) { 

  .category_item {        

    width: 20% !important;    

  }

} */



@media screen and (max-width: 992px) {

  .category_item {

    width: 30% !important;

  }

}



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

  .category_item {

    width: 50% !important;

  }

  .copy {

    font-size: 11px !important;

    /* display: flex; */

    justify-content: center; /* Align items horizontally to the center */

    align-items: center;

  }

  .navbar-header {

    display: block;

  }

  .row .director {

    width: 100%;

  }

}



@media screen and (max-width: 413px) {

  .category_item {

    width: 100% !important;

  }

  .row .director {

    width: 100%;

  }

}



.form-wrapper {

}



.form-wrapper p {

  margin: 0 !important;

}



.form-wrapper input[type="text"],

input[type="password"],

input[type="number"],

select {

  height: 35px;

}



.form-wrapper input[type="text"],

input[type="password"],

input[type="number"],

select,

.form-wrapper textarea {

  border: 1px solid #ccc;

  border-radius: 4px;

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;

  color: #555;

  width: 100%;

  padding: 5px;

}



.category_list {

  margin: 0 auto;

  padding-bottom: 40px;

  display: inline-block !important;

}



.pre_category .first_column {

  margin-right: 0px;

  float: left;

}



.pre_category .category_item {

  margin-left: 0;

}



.category_item {

  float: left;

  width: 250px;

  z-index: 0;

  position: relative;

}



.category_item .inner {

  margin: 20px;

  position: relative;

}



.category_item .inner-prod {

  margin: 20px 20px 20px 0;

  width: 95%;

}



.category_item .inner-prod .link-overlay .copy .text-white {

  color: #000 !important;

}

.category_item .image-wrapper {

  height: 0;

  width: 100%;

  padding-bottom: 62%;

  position: relative;

  z-index: 0;

  border: 1px solid #d8f2df;



  /* border: 1px solid #333; */

}



.category_item .image-wrapper img {

  height: 100%;

  width: 100%;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 0;

}



.text-center .text-white {

  color: #000 !important;

}



#content-wrapper .text-light {

  color: #000 !important;

}



#content-wrapper .border-light {

  border-color: #000 !important;

}



.landing-title {

  text-align: center;

}



.category_item .copy {

  border: 1px solid #d8f2df;

  color: #000 !important;

  text-align: center;

  height: 55px;

  position: relative;

  margin-top: -1px;

  width: 100%;

  font-size: 13px;

}



.category_item .copy span {

  position: absolute;

  width: 100%;

  width: calc(100% - 10px);

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  padding: 5px;

}



.featured-box {

  position: relative;

  overflow: hidden;

  margin: 0;

}



.featured-box .wrapper {

  display: block;

  /* margin: 10px; */

  border: 1px solid #333;

}



.featured-box .copy {

  text-align: center;

  border: 1px solid #333;

  margin: -1px;

}



.featured-box .image-wrapper img {

  width: 100%;

  max-width: 100%;

  display: block;

}



.featured-box .copy .copy-inner {

  padding: 10px;

}



.featured-box .copy .copy-inner p {

  font-family: "Tahoma", sans-serif;

}



/* styles.css */

#theme-switcher {

  position: fixed;

  bottom: 20px;

  left: 20px;

  width: 79px;

  padding: 2px;

  font-family: "Tahoma", sans-serif;

  font-size: 8px;

  font-style: inherit;

  font-weight: bold;

  line-height: 20px;

  height: 20px;

  background-color: #0606060c;

  color: #0c0c0c;

  border-color: #f6ecec17;

  border: 1px solid #f6ecec17;

  border-radius: 2px;

  cursor: pointer;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}



#theme-switcher:before {

  content: "DARK THEME";

  display: block;

  line-height: 10px;

  text-align: center;

}



#theme-switcher:hover {

  background-color: #b6b9bc7a;

}



/* for login form */

.vertical-line {

  border-left: 1px solid black;

  height: 200px;

  margin: 0 15px;

}

.login-column {

  position: relative;

}



.login-column::before {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  right: -1px;

  width: 1px;

  background-color: grey;

}

.card-body1 {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  height: 100%;

}



.carousel-fade .carousel-item {

  opacity: 0;

  transition-property: opacity;

  transform: none;

  animation: slide-fade 5s ease-in-out infinite; /* Ubah 5s menjadi interval yang diinginkan dalam detik */

}



@keyframes slide-fade {

  0% {

    opacity: 0;

  }

  20% {

    opacity: 1;

  }

  80% {

    opacity: 1;

  }

  100% {

    opacity: 0;

  }

}