.bg-image-section {
  position: relative;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.bg-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills area fully */
  object-position: center;
  transform: translate(-50%, -50%);
  z-index: -1;            /* puts image behind text */
}

.about-wrapper {
  z-index: 2;
}

.products-grid {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap !important;
}

 /*login pop up */
    /* General modal styling */
    .modal-content {
        border-radius: 12px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    /* Modal header */
    .modal-header {
        border-bottom: none;
        justify-content: center;
        position: relative;
    }

    .modal-header .btn-close {
        position: absolute;
        right: 15px;
        top: 15px;
    }

    /* Modal titles */
    .modal-title {
        font-weight: 700;
        font-size: 1.5rem;
        text-align: center;
        width: 100%;
    }

    /* Form inputs */
    .modal-body .form-control {
        border-radius: 8px;
        padding: 12px;
        border: 1px solid #ced4da;
        transition: all 0.3s ease;
    }

    .modal-body .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }

    /* Buttons */
    .modal-body .btn {
        padding: 12px;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .modal-body .btn-primary {
        background-color: #0d6efd;
        border: none;
    }

    .modal-body .btn-primary:hover {
        background-color: #0b5ed7;
    }

    .modal-body .btn-success {
        background-color: #198754;
        border: none;
    }

    .modal-body .btn-success:hover {
        background-color: #157347;
    }

    /* Footer links */
    .modal-footer {
        border-top: none;
        justify-content: center;
    }

    .modal-footer a {
        color: #0d6efd;
        text-decoration: none;
        font-weight: 500;
    }

    .modal-footer a:hover {
        text-decoration: underline;
    }

    /* Checkbox styling */
    .form-check-label {
        user-select: none;
        font-size: 0.9rem;
    }
.modal-content {
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.modal-title {
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
}

 .modal-content {
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  }
  .modal-body i {
    animation: pop 0.3s ease;
  }
  @keyframes pop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }