@import url('https://fonts.cdnfonts.com/css/Poppins'); * { font-family: 'Poppins'; } body { font-family: 'Poppins'; } .navbar { box-shadow: none !important; background: white; border-bottom: none; font-size: 14px; } .navbar-nav > li{ padding-left:10px; padding-right:10px; } .navbar-nav > li{ margin-left:10px; margin-right:10px; } /* HERO */ .hero { padding: 80px 0; } .hero-title { font-size: 42px; font-weight: 700; } .hero-sub { color: #6B7280; } /* BADGE */ .badge-custom { background: #E0F2FE; color: #2563EB; padding: 6px 12px; border-radius: 20px; font-size: 12px; } /* FLOATING BOXES */ .rating-box { position: absolute; top: 10px; right: 30px; background: white; padding: 8px 12px; border-radius: 8px; } .escrow-box { position: absolute; bottom: 10px; left: 30px; background: white; padding: 10px; border-radius: 10px; } /* STATS */ .stats { background: #fff; padding: 40px 0; } .stats h3 { color: #2563EB; font-weight: 700; } /* FEATURES */ .feature-card { background: white; border: 1px solid #E5E7EB; padding: 25px; border-radius: 12px; } /* Buttons */ .btn-rounded { border-radius: 50px !important; text-transform: none; font-weight: 600; padding: 0.6rem 1.5rem; } .btn-primary { box-shadow: 0 4px 14px 0 rgba(18, 102, 241, 0.39) !important; } /* Cards & Components */ .feature-card { padding: 2.5rem; border-radius: 20px; border: 1px solid #eee; transition: var(--ih-transition); height: 100%; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: var(--ih-primary); } .icon-wrapper { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background-color: rgba(18, 102, 241, 0.1); color: var(--ih-primary); margin-bottom: 1.5rem; } /* Footer */ footer { background-color: #ffffff; } .footer-link { color: #6c757d; text-decoration: none; transition: var(--ih-transition); } .footer-link:hover { color: var(--ih-primary); padding-left: 5px; } /* Responsiveness */ @media (max-width: 991.98px) { .hero-section { padding: 60px 0; text-align: center; } .hero-section .d-flex { justify-content: center; } }


/* TRUST USERS */
.trust-users {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* AVATAR STACK */
.avatars {
    display: flex;
    align-items: center;
}

/* AVATAR BASE */
.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 12px;
    font-weight: 600;
    color: #fff;

    position: relative;
    cursor: pointer;

    border: 2px solid #fff;

    /* overlap */
    margin-left: -10px;

    /* smooth animation */
    transition: all 0.3s ease;
}

/* FIRST AVATAR RESET */
.avatar:first-child {
    margin-left: 0;
}

/* GRADIENT COLORS (PREMIUM LOOK) */
.avatar:nth-child(1) {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.avatar:nth-child(2) {
    background: linear-gradient(135deg, #22C55E, #16A34A);
}

.avatar:nth-child(3) {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.avatar:nth-child(4) {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

/* HOVER EFFECT (LIFT + FOCUS) */
.avatar:hover {
    transform: translateY(-4px) scale(1.05);
    z-index: 10;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ONLINE STATUS DOT */
.status-dot {
    width: 8px;
    height: 8px;
    background: #22C55E;
    border: 2px solid #fff;
    border-radius: 50%;

    position: absolute;
    bottom: 1px;
    right: 1px;
}

/* TOOLTIP */
.avatar::after {
    content: attr(data-name);
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%) translateY(5px);

    background: #111827;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;

    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* SHOW TOOLTIP */
.avatar:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* TEXT */
.trust-text {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
}

.trust-text strong {
    color: #111827;
}

  .why-section{
      padding:80px 0;
    }

    .section-tag{
      color:#2563eb;
      font-size:14px;
      font-weight:700;
      letter-spacing:1px;
      text-transform:uppercase;
      margin-bottom:15px;
    }

    .section-title{
      font-size:52px;
      font-weight:800;
      line-height:1.2;
      margin-bottom:20px;
    }

    .section-subtitle{
      max-width:720px;
      margin:0 auto;
      color:#64748b;
      font-size:22px;
      line-height:1.6;
    }

    .feature-card{
      background:#fff;
      border:1px solid #e5e7eb;
      border-radius:20px;
      padding:35px 30px;
      height:100%;
      transition:all 0.3s ease;
    }

    .feature-card:hover{
      transform:translateY(-5px);
      box-shadow:0 10px 30px rgba(0,0,0,0.06);
    }



    .feature-title{
      font-size:30px;
      font-weight:700;
      margin-bottom:15px;
    }

    .feature-text{
      color:#64748b;
      font-size:20px;
      line-height:1.7;
    }

    @media (max-width: 992px){
      .section-title{
        font-size:40px;
      }

      .feature-title{
        font-size:24px;
      }

      .feature-text{
        font-size:17px;
      }
    }

    @media (max-width: 768px){
      .why-section{
        padding:60px 0;
      }

      .section-title{
        font-size:32px;
      }

      .section-subtitle{
        font-size:18px;
      }

      .feature-card{
        padding:30px 24px;
      }
    }