.soft-POS-section {
    margin-top: 1rem;
    margin-bottom: 3rem;
}

.soft-POS-section h2 {
    max-width: 464px;
}

.soft-POS-section p {
    max-width: 544px;
    line-height: 26px;
}

.soft-POS-section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.soft-POS-section-content-left {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.soft-POS-section-image-container {
  object-fit: cover;
  transition: transform 0.7s ease;
}

.soft-POS-section-content-right {
  max-width: 681px;         /* Match image or set fixed size */
  max-height: 525px;
  overflow: hidden;    /* Keeps image inside the box */
  border-radius: 20px;
}

.soft-POS-section-content-right:hover .soft-POS-section-image-container {
  transform: scale(1.03);
}

.action-buttons {
    display: flex;
    gap: 1rem;
}


/* Contactless payments section */

.contactless-payments-section {
    margin-top: 0;
    margin-bottom: 4rem;
}
#secure {
    padding-bottom: 50px;
}
/*.contactless-payments-cards {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}*/
.contactless-payments-cards {
    margin-top: 30px;
}
.contactless-payments-card-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.9rem;
    padding: 20px;
    height: 100%;
    background-color: #F8F6F4;
    border-radius: 20px;
}

.contactless-payments-card-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 20px;
    height: 100%;
    border-radius: 20px;
    background-color: #F1F5FA;
}

.contactless-payments-card-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 20px;
    height: 100%;
    background-color: #F8F6F4;
    border-radius: 20px;
}

.contactless-payments-card-1,
.contactless-payments-card-2,
.contactless-payments-card-3 h4 {
    text-align: center;
}

.card-logos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350px;
    background: var(--white-color);
    border-radius: 20px;
    padding: 25px 20px 10px 20px;
}

.upi-logos {
    display: flex;
    gap: 20px;
}

.banking-logos {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.upi-logos img {
    width: 50px;
}

.banking-icon {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.banking-icon img {
    width: 30px;
}

.banking-icon p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 13px;
    text-align: left;
    padding-top: 20px;
}

.card-logos-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 350px;
    background: var(--white-color);
    border-radius: 20px;
    padding: 35px 20px 10px 20px;
}

.card-logos-div p {
    color: var(--theme-color);
}

.card-brand-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Business and Monitoring Section */

.business-and-monitoring-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.business-and-monitoring-content {
    margin-bottom: 25px;
}
/*.business-and-monitoring-section .container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}*/


.micro-merchants-image {
    width: 100%;
    overflow: hidden;    /* Keeps image inside the box */
    border-radius: 20px;
}

.micro-merchants-image-container {
    object-fit: cover;
    transition: transform 0.7s ease;
}

.micro-merchants-image:hover .micro-merchants-image-container {
    transform: scale(1.05);
}

.micro-merchants {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    gap: 20px;
    background-color: var(--theme-color);
    border-radius: 20px;
    padding: 25px 60px 25px 60px;
}

.micro-merchants h3 {
    color: var(--white-color);
}

.micro-merchants p {
    color: var(--white-color);
}

.micro-merchants-point {
    display: flex;
    gap: 1rem;
}

.micro-merchants-points {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 10px;
}

.micro-merchants-point img {
    padding-bottom: 15px;
    width: 20px;
}

.monitoring {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    gap: 20px;
    background-color: var(--main-btn-color);
    border-radius: 20px;
    padding: 25px 60px 25px 60px;
}

.monitoring h3 {
    color: var(--white-color);
}

.monitoring p {
    color: var(--white-color);
}

.monitoring-point {
    display: flex;
    gap: 1rem;
}

.monitoring-points {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 10px;
}

.monitoring-point img {
    width: 20px;
    padding-bottom: 15px;
}

.monitoring-image {
    width: 100%;
    overflow: hidden;    /* Keeps image inside the box */
    border-radius: 20px;
}

.monitoring-image-container {
    object-fit: cover;
    transition: transform 0.7s ease;
}

.monitoring-image:hover .monitoring-image-container {
    transform: scale(1.05);
}

/* =====================================================
   FAQ ACCORDION 
===================================================== */
#faq {
    padding: 50px 0;
}

.faq-title h3 {
    padding-bottom: 30px;
}




#faq .accordion-button {
    font-family: var(--font-heading);
    color: var(--text-muted);
    font-weight: 400;
    font-size: 20px;
    line-height: 29px;
    background: transparent;
}

/* Active title */
#faq .accordion-button:not(.collapsed) {
    color: var(--main-btn-color);
}

/* Body text */
#faq .accordion-body {
    font-family: var(--font-heading);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
    line-height: 23px;
}

/* Remove default accordion border */
#faq .accordion {
    border: none;
    --bs-accordion-border-width: 0;
}

/* Remove focus glow */
#faq .accordion-button:focus {
    outline: 0;
    box-shadow: none;
}

/* DEFAULT item = transparent */
/* Accordion item spacing control */
#faq .accordion-item {
    background-color: transparent;
    border: none;
    border-radius: 10px;
    margin-bottom: 0px;
    padding: 0;
}

/* Inner padding on header + body */
#faq .accordion-button {
    padding: 18px 24px;
}

#faq .accordion-body {
    padding: 12px 24px 20px;
}

/* ACTIVE background only */
#faq .accordion-item:has(.accordion-collapse.show) {
    background-color: #F8F6F4;
    border-radius: 10px;
    margin-bottom: 0;
}

#faq .accordion-item .accordion-collapse.show {
    background: transparent;
}

/* Default (closed) arrow down */
#faq .accordion-button::after {
    background-image: url("../images/accordion-down-arrow.svg");
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Active (open) = arrow UP + orange */
#faq .accordion-button:not(.collapsed)::after {
    background-image: url("../images/accordion-up-arrow.svg");
    /* up arrow */
    transform: rotate(0deg);
    filter: brightness(0) saturate(100%) invert(62%) sepia(94%) saturate(470%) hue-rotate(356deg);
}

/* =====================================================
   SOFT POS PAGE — RESPONSIVE STYLES
   Breakpoints mirror soundbox.css conventions:
   ≤1199px  Large Tablets / Landscape
   ≤991px   Tablets Portrait  (main mobile breakpoint)
   ≤767px   Mobile Landscape
   ≤575px   Mobile Portrait
   ≤360px   Small Phones
===================================================== */

/* Scale down Business & Monitoring section between 992px–1300px */
@media (min-width: 992px) and (max-width: 1300px) {
  .micro-merchants {
    padding: 30px;
  }

  .micro-merchants h3 {
    font-size: 30px;
    line-height: 30px;
  }

  .micro-merchants p {
    font-size: 10px;
  }

  .monitoring {
    padding: 25px;
  }

  .monitoring h3 {
    font-size: 30px;
    line-height: 30px;
  }

  .monitoring p {
    font-size: 10px;
  }
}

/* ── Large Tablets / Landscape (≤1199px) ── */
@media (max-width: 1199px) {

  /* Soft POS Hero */
  .soft-POS-section-content {
    gap: 2rem;
  }

  .soft-POS-section-content-right {
    max-width: 520px;
  }

  /* Business & Monitoring */
  .micro-merchants,
  .monitoring {
    padding: 30px 40px;
  }
}

/* ── Tablets Portrait (≤991px) ── */
@media (max-width: 991px) {

  /* ---- Soft POS Hero ---- */
  .soft-POS-section {
    margin-bottom: 2rem;
  }

  .soft-POS-section-content {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .soft-POS-section-content-left {
    align-items: center;
    text-align: center;
  }

  .soft-POS-section h2,
  .soft-POS-section p {
    max-width: 100%;
    text-align: center;
  }

  .action-buttons {
    justify-content: center;
  }

  .soft-POS-section-content-right {
    max-width: 100%;
    width: 100%;
    border-radius: 16px;
  }

  .soft-POS-section-content-right img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---- Contactless Payments Swiper ---- */

  .contactless-payments-section {
    margin-bottom: 3rem;
  }

  .contactless-payments-swiper {
    margin-top: 2rem;
    width: 100%;
  }

  .contactless-payments-swiper .swiper-wrapper {
    align-items: stretch;
    margin-bottom: -40px;
  }


.secure-buttons.d-lg-none.d-block {
    text-align: center;
}
  .contactless-payments-card-1,
  .contactless-payments-card-2,
  .contactless-payments-card-3 {
    height: auto;
    min-height: 340px;
    gap: 14px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  }

  .card-logos,
  .card-logos-div {
    width: 100%;
  }

  /* ---- Business & Monitoring ---- */
  .business-and-monitoring-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .business-and-monitoring-content {
    flex-direction: column;
  }

    .micro-merchants, .monitoring {
        padding: 30px 32px;
        margin-top: 25px;
    }

  .micro-merchants-image,
  .monitoring-image {
    border-radius: 16px;
  }

  .micro-merchants-image img,
  .monitoring-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---- FAQ ---- */
  #faq .accordion-button {
    font-size: 17px;
    line-height: 24px;
  }
}

/* ── Mobile Landscape (≤767px) ── */
@media (max-width: 767px) {

  .contactless-payments-card-1,
  .contactless-payments-card-2,
  .contactless-payments-card-3 {
    min-height: 300px;
  }

  .micro-merchants,
  .monitoring {
    padding: 24px 24px;
  }
}

/* ── Mobile Portrait (≤575px) ── */
@media (max-width: 575px) {

  /* Hero */
  .soft-POS-section-content-right {
    border-radius: 12px;
  }

  /* Contactless Payments */
  .contactless-payments-card-1,
  .contactless-payments-card-2,
  .contactless-payments-card-3 {
    min-height: 280px;
    padding: 16px;
  }

  .upi-logos img {
    width: 40px;
  }

  .banking-icon img {
    width: 24px;
  }

  /* Business & Monitoring */
 .micro-merchants, .monitoring {
        padding: 20px 18px;
        border-radius: 16px;
        margin-top: 20px;
    }
}

/* ── Small Phones (≤360px) ── */
@media (max-width: 360px) {

  .soft-POS-section h2 {
    font-size: 1.5rem;
  }

  .contactless-payments-card-1,
  .contactless-payments-card-2,
  .contactless-payments-card-3 {
    width: 96%;
  }

  .micro-merchants,
  .monitoring {
    padding: 16px 14px;
  }
}

/* =====================================================
   Global image safety
===================================================== */
.soft-POS-section-content-right img,
.micro-merchants-image img,
.monitoring-image img,
.card-logos img,
.card-logos-div img {
  max-width: 100%;
  height: auto;
  display: block;
}