/* ==========================================================================
   Trust Features Section - Desktop Specs (1320px x 221px)
   ========================================================================== */
.trust-features-section {
  width: 100%;
  background-color: #F8F9FA;
  padding-top: 40px;
  padding-bottom: 40px;
}

.trust-container {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* 4-Card Desktop Grid */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 282px);
  gap: 24px;
  justify-content: center;
  width: 100%;
}

/* Desktop Card: 282px x 221px, Radius: 32px */
.trust-card {
  width: 282px;
  height: 221px;
  background-color: #FFFFFF;
  border: 1px solid #F1F1F1;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.04);
}

/* Desktop Icon Wrapper: 64px x 64px, Radius: 20px */
.icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.icon-wrapper.gradient-bg {
  background: linear-gradient(135deg, #FF007A 0%, #8A2BE2 50%, #0070FF 100%);
  box-shadow: 0 8px 16px rgba(255, 0, 122, 0.2);
}

.icon-wrapper.soft-bg {
  background-color: #FFF1F5;
}

.trust-icon {
  width: 28px;
  height: 28px;
  display: block;
}

/* Desktop Title */
.trust-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #111827;
  margin: 0 0 4px 0;
}

/* Desktop Subtitle & Last Line Color */
.trust-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 19.5px;
  letter-spacing: 1.2px;
  color: #9CA3AF;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trust-desc .highlight-text {
  color: #111827;
  font-weight: 700;
}

/* ==========================================================================
   Responsive Mobile (Exact Figma Layout with Two Sides Gap)
   ========================================================================== */
@media (max-width: 1240px) and (min-width: 641px) {
  .trust-grid {
    grid-template-columns: repeat(2, 282px);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .trust-features-section {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: transparent; /* যাতে বডির ব্যাকগ্রাউন্ডের সাথে দুই পাশের গ্যাপ পরিষ্কার দেখা যায় */
  }

  /* Figma Side Margins: 16px on both sides */
  .trust-container {
    width: 100%;
    padding-inline: 16px;
    box-sizing: border-box;
  }

  /* Grid Layout: ৪টি কার্ডের মাঝের গ্যাপ ও উইডথ ব্যালান্স */
  .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 8px;
    row-gap: 0;
    width: 100%;
    max-width: 403px;
    margin: 0 auto;
  }

  /* Exact Card Specs: Radius: 9.96px, Height: 68.82px */
  .trust-card {
    position: relative;
    width: 100%;
    max-width: 87.81px;
    height: 68.82px;
    border-radius: 9.96px;
    border: 0.31px solid #F1F1F1;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    padding: 0;
    margin: 0;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Icon Wrapper: 19.93px x 19.93px, Top: 9.65px */
  .icon-wrapper {
    position: absolute;
    top: 9.65px;
    left: 50%;
    transform: translateX(-50%);
    width: 19.93px;
    height: 19.93px;
    border-radius: 6.23px;
    margin: 0;
    box-shadow: none;
  }

  /* Icon SVG: 8.72px x 8.72px */
  .trust-icon {
    width: 8.72px;
    height: 8.72px;
  }

  /* Title: Top: 35.81px, Font: 5.61px */
  .trust-title {
    position: absolute;
    top: 35.81px;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 10px;
    line-height: 11px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    transform: scale(0.561);
    transform-origin: top center;
  }

  /* Subtitle: Top: 47.02px, Font: 3.74px */
  .trust-desc {
    position: absolute;
    top: 47.02px;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 9px;
    line-height: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #9CA3AF;
    text-align: center;
    margin: 0;
    transform: scale(0.415);
    transform-origin: top center;
  }

  .trust-desc .highlight-text {
    color: #111827;
    font-size: inherit;
    line-height: inherit;
    display: inline;
  }
}