/* Mendefinisikan variabel warna di :root */
:root {
  --primary-color: #3133cd; /* Biru */
  --secondary-color: #4cee90; /* Hijau */
  --text-color: #333; /* Warna teks */
  --background-color: #f4f4f4; /* Warna latar belakang */
}
/* Custom CSS styles */
body {
  font-family: "Poppins", sans-serif !important;
  font-style: normal;
  min-height: 100vh; /* 100% dari tinggi viewport */

}

a{
  color: #2a2525;
}

a:hover{
  color: var(--text-color);
  text-decoration: none !important;
}

#contactus{
  min-height: 100vh;
  text-align: center !important;
  padding:0 200px !important;
}
#contactus .container{
  min-height: 100vh;
  text-align: center !important;
}

#contactus img{
  width: 150px;
  margin: 30px 0;
  text-align: center !important;
}

.navbar {
  background-color: var(--primary-color) !important;
  padding: 20px 30px !important;
  color: var(--background-color) !important;
  font-size: 14px;
}

.navbar .bi{
  font-size: 17px;
  color: var(--secondary-color);
}

.navbar .btn{
  color: var(--background-color);
}

.navbar-brand img{
  width: 220px;
}

#homefront {
  background-image: url('../asset/bg-header.png');
  background-position: top top;
  background-repeat: repeat;
  background-size: cover;
  padding: 100px 50px;
  color: var(--background-color);
}

#homefront h1{
  color: var(--background-color);
  font-size: 59px;
  font-family: "Barlow", sans-serif;
  letter-spacing: -3px;
  font-weight: 600;
}

#homefront h1 span{
  color: var(--secondary-color);
}

#homefront .btn{
  background-color: var(--secondary-color);
  color: var(--primary-color);
  margin-top: 5px;
}

#homefront .btn .bi{
  margin-left: 5px;
}

#homefront .col-md-8{
  padding-right: 40px;
}
#homefront .col-md-8 .row{
  background-color: #7277f839;
  border-radius: 12px;
  padding: 60px 50px;
}
#homefront .col-md-8 img{
  width: 100%;
}

#homefront .col-md-4{
  background-color: #4a50fb;
  border-radius: 12px;
  padding: 0px;
  overflow: hidden;
  color: #ffffff;
  text-align: center;
}

#service{
  min-height: 600px;
  padding: 100px 50px;
  color: var(--primary-color);
}

#service img{
  width: 100%;
}


#service h1{
  color: var(--primary-color);
  font-size: 49px;
  font-family: "Barlow", sans-serif;
  letter-spacing: -3px;
  font-weight: 600;
}

#service h1 span{
  color: var(--secondary-color);
}

#service .btn{
  background-color: var(--secondary-color);
  color: var(--primary-color);
  margin-top: 5px;
}

#service .btn .bi{
  margin-left: 5px;
}
#home-contact{
  padding: 50px ;
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

#home-contact h3{
  color: var(--primary-color);
  font-family: "Barlow", sans-serif !important;
  font-size: 40px;
}

#home-contact h3 span{
  color: var(--background-color);
}

#home-contact .btn{
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border:  none !important;
  padding: 10px 15px !important;
}

#home-contact .btn .bi{
  margin-left: 15px;
}

#item-list{
  padding: 50px 0;
}

#item-list h1{
  color: var(--primary-color);
  font-size: 49px;
  font-family: "Barlow", sans-serif;
  letter-spacing: -3px;
  font-weight: 600;
}

#item-list h1 span{
  color: var(--secondary-color);
}

#item-list .col-md-3{
  margin-bottom: 30px;
}

#item-list .col-md-3 .card{
  padding: 0px;
  border-color: #dedede;
  color: #ffffff;
  text-decoration: none;
  background-color: var(--primary-color) !important;
}

#item-list .col-md-3 .card:hover{
  -webkit-box-shadow: 1px 2px 7px 0px rgba(122,122,122,0.32);
  -moz-box-shadow: 1px 2px 7px 0px rgba(122,122,122,0.32);
  box-shadow: 1px 2px 7px 0px rgba(122,122,122,0.32);
  border-color: #ffffff;
  color: #ffffff;
  background-image: linear-gradient(
  45deg,
  hsl(272deg 100% 50%) 0%,
  hsl(236deg 100% 62%) 21%,
  hsl(215deg 100% 50%) 30%,
  hsl(210deg 100% 50%) 39%,
  hsl(206deg 100% 50%) 46%,
  hsl(203deg 100% 50%) 54%,
  hsl(200deg 100% 50%) 61%,
  hsl(197deg 100% 48%) 69%,
  hsl(192deg 100% 45%) 79%,
  hsl(187deg 85% 46%) 100%
);
}
#item-list .col-md-3 .card .card-body{
  padding: 20px 10px;
  background-color: var(--secondary-color);
  color: var(--primary-color);
}
#item-list .col-md-3 .card .card-body .card-title{
  margin: 0;
}
#item-list .col-md-3 .card .card-body p{
  margin: 0px;
  font-size: 15px;
}
#item-list .col-md-3 .card .card-body ul{
  margin: 0;
}

#item-list .col-md-3 a{
  text-decoration: none;
}

#shopee-row .card{
  background-color: #ffffff !important;
}

.btn i{
  margin-right: 8px; 
}

#product-list {
  padding: 50px 0;
}

#product-list .card{
  background-color: var(--primary-color) !important;
  color: var(--primary-color);
}

#product-list .col-md-3 .card:hover{
  -webkit-box-shadow: 1px 2px 7px 0px rgba(122,122,122,0.32);
  -moz-box-shadow: 1px 2px 7px 0px rgba(122,122,122,0.32);
  box-shadow: 1px 2px 7px 0px rgba(122,122,122,0.32);
  border-color: #ffffff;
  color: #ffffff;
  background-image: linear-gradient(
  45deg,
  hsl(272deg 100% 50%) 0%,
  hsl(236deg 100% 62%) 21%,
  hsl(215deg 100% 50%) 30%,
  hsl(210deg 100% 50%) 39%,
  hsl(206deg 100% 50%) 46%,
  hsl(203deg 100% 50%) 54%,
  hsl(200deg 100% 50%) 61%,
  hsl(197deg 100% 48%) 69%,
  hsl(192deg 100% 45%) 79%,
  hsl(187deg 85% 46%) 100%
);
}

#product-list .card .card-body{
  background-color: var(--secondary-color) !important;
  padding: 20px 0;
}
#product-list .card .card-body .card-title{
  margin-bottom: 0;
}
#product-list .card .card-body p{
  margin-bottom: 0;
}
#product-list .card .card-body ul{
  margin-bottom: 0;
}


#product-details h6{
  font-weight: 600;
}

#product-links{
  border: 1px solid #d8d8d8;
  border-radius: 0.5rem;
  padding: 15px 17px 15px 17px;
  background-color: var(--background-color);
  margin-bottom: 30px;
  color: var(--text-color);
}

#product-links a{
  margin-bottom: 15px !important;
  display: inline-table !important;
}

#produk-page{
  padding: 50px 100px;
  background-image: url('../asset/bg-item.png');
  background-position: right top;
  background-size: cover;
  color: var(--background-color);
}

#produk-page h2{
  color: var(--background-color);
  font-size: 49px;
  font-family: "Barlow", sans-serif;
  letter-spacing: -3px;
}
#produk-page h6{
  color: var(--secondary-color);
  font-size: 19px;
  font-family: "Barlow", sans-serif !important;
}

#produk-page .col-md-6 img{
  margin-top: -200px;
}

.cntnr{
  padding: 20px 0 30px 100px;  
}

.cntnr .row{
  padding: 0px;
}

#product-name{
  padding: 30px 0px;
}

.card {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: transparent !important;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  cursor: pointer;
  overflow: hidden;
}

.card-img-top {
  width: 100%;
  height: 240px;
  min-height: 70% !important;
  object-fit: cover !important;
  object-position: 100% 50% ;
}

.card-body {
  padding: 0;
  width: 100%;
  text-align: center;
}

.card-title {
  font-size: 1.25rem;
  text-align: center;
}

.card-text {
  font-size: 1rem;
}

.btn-primary {
  background-color: #007bff;
  border: none;
}

.btn-primary:hover {
  background-color: #0056b3;
}

#thanks{
  padding: 100px 50px 0 50px;
  background-color: var(--primary-color);
  color: var(--background-color);
  background-image: url('../asset/bg-thanks.png');
  background-size: cover;
  background-position: top left;
}

#thanks img{
  width: 100%;
}

#thanks .col-md-7{
  padding-left: 70px;
}

#thanks h1{
  color: var(--background-color);
  font-size: 77px;
  letter-spacing: -1px;
  line-height: 60px;
}
#thanks h1 span{
  color: var(--secondary-color);
  font-size: 55px;
}

.list-group a{
  background: transparent !important;
  color: var(--secondary-color);
  text-decoration: none;
}
.list-group li{
  background: transparent !important;
  color: var(--secondary-color);
  border: none;
  margin-left: -10px;
}
.list-group li .bi{
  margin-right: 10px;
}

footer {
  background-color: var(--primary-color) !important;
  color: #ffffff;
  padding: 20px 0;
  border-top: 1px solid var(--background-color);
}

/* Sesuaikan ukuran gambar produk */
#product-image {
  max-width: 100%;
  height: auto;
}

.dark-mode {
      background-color: #333;
      color: #fff !important;
  }

  .light-mode {
      background-color: #fff;
      color: #333 !important;
  }

  #shop-shopee{
      color: #333;
      width: 100%;
      padding: 16px 16px 16px 12px;
      border: 1px solid #d8d8d8;
      background-color: #ffffff;
      border-radius: 0.5rem;

  }

  #shop-shopee img{
      width: 5%;
      margin-right: 10px;
  }
  #shop-tokopedia img{
      width: 5%;
      margin-right: 10px;
  }

  #shop-tokopedia{
    color: #333;
    width: 100%;
    padding: 16px 16px 16px 12px;
    border: 1px solid #d8d8d8;
    background-color: #ffffff;
    border-radius: 0.5rem;
  }

  .card ul li {
    display: none;
  }
  

/* Mobile styles */
@media only screen and (max-width: 768px) {
section {
    min-height: auto; /* Reset the minimum height for smaller screens */
    padding: 20px; /* Add padding to improve readability */
}

.navbar {
  padding: 10px !important;
}

#homefront {
  padding: 10px 10px 50px 10px;
}

#homefront .col-md-8{
  padding: 0px;
  margin-bottom: 30px;
}

#homefront .container{
  padding: 0px;
}

#homefront .row{
  padding: 0px;
  margin: 0;
}

#homefront .col-md-8 .row{
  padding: 30px 20px;
}

#homefront .col-md-6{
  margin-bottom: 20px;
}

#service{
  padding: 50px 10px;
}

#service img{
  width: 100%;
}

#home-contact{
  padding: 50px 30px;
}

#item-list{
  padding: 10px;
}

#item-list .col-md-3{
  margin-bottom: 20px;
  width: 100%;
}

#item-list .col-md-3 .card{
  padding: 0px;
}

#product-links a{
  margin-bottom: 20px !important;
  display: inline-table !important;
}

#produk-page{
  background-color: #f4f2f2;
  padding: 20px 10px;
  background-size: cover;
  background-position: top left;
}

#product-details{
  margin-top: 30px;
}

#product-name{
  padding: 17px 0px;
  margin: 0;
}

.cntnr {
  padding: 0;
}
.cntnr .row{
  padding: 20px 10px;
}
#produk-page h2{
  text-align: center;
  font-size: 40px;
  letter-spacing: 0;
}

#produk-page .col-md-6 img{
  margin-top: 10px;
}


#thanks{
  padding: 50px 20px;
  background-position: top right;
}

#thanks img{
  width: 100%;
}

#thanks h1{
  color: var(--background-color);
  font-size: 27px;
  letter-spacing: -1px;
  line-height: normal;
  margin-top: 30px;
}
#thanks h1 span{
  color: var(--secondary-color);
  font-size: 25px;
}

#thanks .col-md-7{
  padding-left: 0px;
}

#contactus{
  padding: 0 !important;
}

}