/* Custom CSS styles */
body {
  font-family: "Poppins", sans-serif !important;
  font-style: normal;
  background-color: #E8AAAA !important;
  min-height: 100vh; /* 100% dari tinggi viewport */

}

.row{
  padding: 0 !important;

}

a{
  color: #2a2525;
}

a:hover{
  color: #333;
  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: #f8f9fa !important;
  padding: 20px 30px !important;
}

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

#profile {
  padding: 10px 250px;
  background-color: #E8AAAA;
  text-align: center !important;
  height: auto;
  overflow: hidden !important;
}

#profile .row{
  margin-left: 0px;

}

#profile .container img{
  width: 150px;
  text-align: center !important;
  background-color: #E8AAAA !important;  
}

#profile .col-md-4{
  background-color: red;
  padding: 5px 0;
  margin:0 !important;
  color: #fff;
}
#profile .col-md-8{
  background-color: #222;
  color: #fff;
  padding: 5px 0;
  font-weight: 700;
}

#homefront .profile{
  text-align: center !important;
  padding: 50px 0;
  
}
#homefront .profile img{
  width: 150px !important;
  border-radius: 1px;
  text-align: center !important;
}

#homefront {
  padding: 0 250px;
  background-color: #E8AAAA;
}

#homefront .col-md-8{
  background-color: #555;
  color: #fff;
  padding: 5px 0;
  font-weight: 600;
}
#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: red;
  padding: 0px;
  color: #ffffff;
  text-align: center;
}


#homefront h2{
  padding: 20px;
  text-align: center !important;
}
#homefront p{
  text-align: center !important;
  padding: 10px;
  font-weight: 700;
}

#homefront .btn{
  width: 100%;
  padding: 25px;
  border-radius: 25px;
  margin: 20px 0;
}

#homefront marquee{
  background-color: red;
  padding: 20px;
  border-radius: 25px;
  margin-top: 20px;
  color: #fff;
  font-weight: 700;
}

#home-contact{
  padding: 50px 100px;
  background-color: #4a50fb;
  color: white;
}

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

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

#item-list .col-md-3 .card{
  padding: 0px 0px 10px 0px;
  border-color: #dedede;
  color: #ffffff;
  text-decoration: none;
  background-image: linear-gradient(
  45deg,
  hsl(210deg 98% 80%) 0%,
  hsl(213deg 95% 82%) 21%,
  hsl(216deg 91% 84%) 30%,
  hsl(220deg 85% 85%) 39%,
  hsl(225deg 79% 86%) 46%,
  hsl(230deg 70% 87%) 54%,
  hsl(235deg 61% 88%) 61%,
  hsl(243deg 52% 88%) 69%,
  hsl(250deg 45% 88%) 79%,
  hsl(257deg 39% 88%) 100%
);
}

#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: 10px;
}
#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-link{
  color: #ffffff !important;
  margin-right: 8px; 
}

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

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

#product-details{
  border: .5px solid #d8d8d8;
  border-radius: 0.5rem;
  padding: 15px 17px;
}

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

#product-links{
  border: 1px solid #d8d8d8;
  border-radius: 0.5rem;
  padding: 15px 17px;
}

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

#produk-page{
  padding: 79px;
}

.cntnr{
  border: 1px solid #dedede;
  border-radius: 11px;
  background-color:#ffffff44;
}

.cntnr .row{
  padding: 30px 20px;
}

#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;
}

.full-width-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* Ensures the button is on top of other content */
  border-radius: 0; /* Remove border radius to make it full width */
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Shadow for visual separation */
  padding: 20px; /* Adjust padding as needed */
  color: #fff;
}

.full-width-btn i {
  font-size: 24px;
}

a .full-width-btn {
  color: #ffffff !important;
  font-size: large;
  font-weight: 700;
}


footer {
  background-color: #343a40;
  color: #ffffff;
  padding: 20px 0;
}

/* 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;
}

#profile{
  padding: 0;
}
#profile .row{
  margin-left:-10px !important;
}
#profile .col-md-4{
  width: 40%;
}
#profile .col-md-8{
  width: 60%;
}


#homefront {
  padding: 0;
}

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

#homefront .container{
  padding: 0px;
}

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

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

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

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

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

#item-list{
  padding: 10px;
}

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

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

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

#produk-page{
  background-color: #f4f2f2;
  padding: 20px 10px;
}

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

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

.cntr{
  padding: 50px 20px  !important;
}

#contactus{
  padding: 0 !important;
}

}