/* Custom CSS for the How to Order Process Section */
.order-process-section {
  padding: 40px 0;
}

.step-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.step-arrow {
  width: 20%;
  height: 50px;
  background: #ccc;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
  position: relative;
}

.step-arrow span {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}

.step-content {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.step-box {
  flex: 1;
  border: 1px solid; /* Color defined below */
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.step-box:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.step-box .icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 24px;
  background: #ddd;
}

.step-box h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.step-box p {
  font-size: 14px;
  color: #666;
}

/* Colors for border and icons */
.step-box:nth-child(1) {
  border-color: #1A3C5A;
}
.step-box:nth-child(1) .icon-circle {
  background: #1A3C5A;
}

.step-box:nth-child(2) {
  border-color: #F5A623;
}
.step-box:nth-child(2) .icon-circle {
  background: #F5A623;
}

.step-box:nth-child(3) {
  border-color: #E5633A;
}
.step-box:nth-child(3) .icon-circle {
  background: #E5633A;
}

.step-box:nth-child(4) {
  border-color: #6B3F94;
}
.step-box:nth-child(4) .icon-circle {
  background: #6B3F94;
}

.step-box:nth-child(5) {
  border-color: #2D9CDB;
}
.step-box:nth-child(5) .icon-circle {
  background: #2D9CDB;
}

.step-arrow:nth-child(1) { background: #1A3C5A; }
.step-arrow:nth-child(2) { background: #F5A623; }
.step-arrow:nth-child(3) { background: #E5633A; }
.step-arrow:nth-child(4) { background: #6B3F94; }
.step-arrow:nth-child(5) { background: #2D9CDB; }

@media (max-width: 768px) {
  .step-arrow {
    display: none;
  }

  .step-content {
    flex-direction: column;
    gap: 15px;
  }

  .step-box {
    width: 100%;
  }
}

/* for logo and search */

  .logo-img {
    transition: opacity 0.3s ease;
  }

  .logo-scrolled {
    display: none;
  }

  .header.scrolled .logo-default {
    display: none;
  }

  .header.scrolled .logo-scrolled {
    display: inline-block;
  }

  .search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px);
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: start;
    overflow: hidden;
    padding-top: 80px;
    transition: all 0.3s ease;
  }

  .search-overlay.d-none {
    display: none !important;
  }

  .overlay-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 600px;
    width: 100%;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.4s ease;
  }

  .show-search .overlay-content {
    transform: translateY(0);
    opacity: 1;
  }

  .search-input {
    width: 100%;
    padding: 12px;
    font-size: 18px;
  }

  @media (max-width: 768px) {
    .overlay-content {
      width: 90%;
      padding: 20px;
    }
  }

/* Custom CSS for Filtering Products */
  .hover-opacity-100 {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.card:hover .hover-opacity-100 {
    opacity: 1;
}

/* custom buttons  */

  .btn-custom {
    color: #8F4808;
    border: 1px solid #8F4808;
}

.btn-custom:hover {
    background-color: #8F4808;
    color: white;
}

/* happy shopping animation */

  .happy-shopping {
    font-weight: bold;
    animation: bounceColor 3.5s infinite;
    display: inline-block;
  }

  @keyframes bounceColor {
    0% {
      transform: translateY(0);
      color: #007bff;
    }
    25% {
      transform: translateY(-10px);
      color: #e83e8c;
    }
    50% {
      transform: translateY(0);
      color: #28a745;
    }
    75% {
      transform: translateY(-6px);
      color: #ffc107;
    }
    100% {
      transform: translateY(0);
      color: #17a2b8;
    }
  }


  /* slider image css */

  /* Maintain consistent slider image size */
.slider-img {
width: 100%;
height: 386px;
object-fit: cover;
border-radius: 5px;
}



/* Equal height for both columns in the row */
.about .row {
align-items: stretch;
}

/* Give the slider container a nice frame */
.image-frame {
padding: 5px;
border: 2px solid #e0e0e0;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Optional: reduce the height of the entire slider */
.portfolio-details-slider {
max-height: 400px;
overflow: hidden;
}

/* product image */
.img-container {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
}

.product-img {
object-fit: cover;
height: 100%;
transition: transform 0.3s ease;
}

.img-container:hover .product-img {
transform: scale(1.05);
}

.zoom-icon {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 6px 9px;
color: #000;
font-size: 1.2rem;
display: none;
transition: all 0.3s ease;
z-index: 10;
}

.img-container:hover .zoom-icon {
display: block;
}

.zoom-icon:hover {
background: #f1f1f1;
color: #007bff;
}

@keyframes fadeInZoom {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}