/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/*makes the buttons closer*/
.py-20 {
  padding-top: 1px;
  padding-bottom: 1px;
}

/*image remover*/


/*text title location*/
.py-5-nav {
  padding-top: calc(74px + 1.5rem);
  padding-bottom: 1.5rem;
  color: #ffffff
}

/*text on top of the buttons*/
.section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  }

  .section-subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
}

/*footer stuff*/
.flex-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer h5 {
  text-transform: uppercase;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/*product page customization*/
.product-wrapper .buy-buttons .btn svg {
  width: 1.25rem;
  height: 1.25rem;
  color: ;
}

.variant .name {
  font-size: 1rem;
}

.center-products {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;}



/*price color*/
.variants .variant .price {
  padding: 0.25rem 0.5rem;
  border-radius: var(--bs-border-radius);
  background: rgba(255, 255, 255, 0.025);
  color: #ffffff;
  font-weight: 500;
}

/* "in stock" remover*/
.stock {
  display: none;
}


/*feature customization*/
.features .list .feature i {
  font-size: 4rem;
  margin-bottom: 2rem;
  color: #ffffff;
}

.features .list .feature .description {
  padding: 0 0rem;
  font-size: 0.875rem;
  color: #ffffff;
}

.feature .title {
  color: #ffffff
}

.w-100 {
    width: 100%; /* Full width */
    background-color: white; /* Background color for container */
    color: #0098ff; /* Text color */
    border: none; /* No border */
    padding: 10px; /* Padding */
    cursor: pointer; /* Cursor on hover */
}

/* Override background color for images to transparent */
.d-block {
    background-color: #0098ff; /* Background color for container */
}


.footer p {
    color: white; /* Change the verified purchase text to white */
}


.d-none {
  background-color:  #0098ff;
}

.hero .content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

/*button related stuff */
.btn-primary,
.btn-outline-primary {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  width: 280px;
  text-align: center;
  border-radius: 4px;
  display: inline-block;
  background-color: var(--cl-accent);
  color: #ffffff;
  border: 2px solid var(--cl-accent);
  transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-outline-primary:hover {
  background-color: #ffffff;
  color: var(--cl-accent);
  border-color: var(--cl-accent);
  transform: scale(1.05);
}