/* ========================================================= MAIN SECTION ========================================================= */ .au-trust-section { width: 100%; background: #363636; padding: 70px 20px; margin: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; overflow: hidden; } .au-trust-section *, .au-trust-section *::before, .au-trust-section *::after { box-sizing: border-box; } /* ========================================================= CONTAINER ========================================================= */ .au-trust-container { width: 100%; max-width: 1120px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .au-trust-header { width: 100%; text-align: center; margin-bottom: 42px; } .au-trust-eyebrow { display: inline-block; margin-bottom: 10px; color: #F4A261; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: 2px; } .au-trust-header h2 { margin: 0 0 10px 0; padding: 0; color: #FFFFFF; font-size: 32px; line-height: 1.25; font-weight: 800; } .au-trust-header p { margin: 0; padding: 0; color: #D8D8D8; font-size: 15px; line-height: 1.6; } /* ========================================================= DESKTOP GRID ========================================================= */ .au-trust-grid { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } /* First row */ .au-trust-card:nth-child(1) { grid-column: 1 / span 2; } .au-trust-card:nth-child(2) { grid-column: 3 / span 2; } .au-trust-card:nth-child(3) { grid-column: 5 / span 2; } /* Second row */ .au-trust-card:nth-child(4) { grid-column: 2 / span 2; } .au-trust-card:nth-child(5) { grid-column: 4 / span 2; } /* ========================================================= CARD ========================================================= */ .au-trust-card { position: relative; width: 100%; min-height: 175px; display: flex; align-items: flex-start; gap: 16px; padding: 27px 22px 23px 22px; background: #2E2E2E; border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; margin: 0; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,0.14); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* Orange top line */ .au-trust-top-line { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #F4A261; } /* Subtle decoration */ .au-trust-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -55px; bottom: -55px; border-radius: 50%; background: rgba(244,162,97,0.06); pointer-events: none; } /* Hover */ .au-trust-card:hover { transform: translateY(-4px); border-color: rgba(244,162,97,0.55); box-shadow: 0 12px 28px rgba(0,0,0,0.22); } /* ========================================================= ICON ========================================================= */ .au-trust-icon { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #363636; background: #F4A261; font-size: 17px; line-height: 1; font-weight: 800; text-align: center; box-shadow: 0 4px 12px rgba(244,162,97,0.20); } /* ========================================================= CONTENT ========================================================= */ .au-trust-content { position: relative; z-index: 2; flex: 1; min-width: 0; margin: 0; padding: 0; } .au-trust-number { margin: 0 0 3px 0; color: #F4A261; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 1px; } .au-trust-content h3 { margin: 0 0 8px 0; padding: 0; color: #FFFFFF; font-size: 18px; line-height: 1.35; font-weight: 700; } .au-trust-content p { margin: 0; padding: 0; color: #D2D2D2; font-size: 13px; line-height: 1.65; font-weight: 400; } .au-trust-content strong { color: #FFFFFF; font-weight: 700; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 850px) { .au-trust-section { padding: 58px 18px; } .au-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .au-trust-card:nth-child(1), .au-trust-card:nth-child(2), .au-trust-card:nth-child(3), .au-trust-card:nth-child(4) { grid-column: auto; } .au-trust-card:nth-child(5) { grid-column: 1 / -1; width: 50%; justify-self: center; } } /* ========================================================= MOBILE HORIZONTAL SWIPE ========================================================= */ @media (max-width: 600px) { .au-trust-section { padding: 48px 0; overflow: hidden; } .au-trust-container { width: 100%; max-width: 100%; } /* Header */ .au-trust-header { padding: 0 18px; margin-bottom: 28px; } .au-trust-eyebrow { font-size: 10px; letter-spacing: 1.7px; } .au-trust-header h2 { font-size: 26px; } .au-trust-header p { font-size: 13px; line-height: 1.55; } /* ======================================================= SWIPE CONTAINER ======================================================= */ .au-trust-grid { display: flex !important; flex-wrap: nowrap !important; gap: 16px; width: 100%; overflow-x: scroll; overflow-y: hidden; /* IMPORTANT: Space between screen edge and cards */ padding-top: 0; padding-right: 20px; padding-bottom: 14px; padding-left: 20px; /* Snap position */ scroll-padding-left: 20px; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; /* Makes horizontal swipe feel natural */ touch-action: pan-x; } /* Hide scrollbar */ .au-trust-grid::-webkit-scrollbar { display: none; } /* ======================================================= MOBILE CARD ======================================================= */ .au-trust-card, .au-trust-card:nth-child(1), .au-trust-card:nth-child(2), .au-trust-card:nth-child(3), .au-trust-card:nth-child(4), .au-trust-card:nth-child(5) { /* Card width 86% means: - 20px left spacing - next card partially visible - 16px gap between cards */ flex: 0 0 86% !important; width: 86% !important; min-width: 86%; max-width: 86%; min-height: 170px; grid-column: auto; justify-self: auto; margin: 0; padding: 23px 20px; gap: 14px; scroll-snap-align: start; scroll-snap-stop: always; } /* Icon */ .au-trust-icon { flex: 0 0 40px; width: 40px; height: 40px; font-size: 14px; } /* Number */ .au-trust-number { font-size: 9px; margin-bottom: 4px; } /* Title */ .au-trust-content h3 { margin: 0 0 7px 0; font-size: 17px; line-height: 1.35; } /* Description */ .au-trust-content p { font-size: 13px; line-height: 1.65; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .au-trust-header { padding-left: 15px; padding-right: 15px; } .au-trust-grid { gap: 14px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; } .au-trust-card, .au-trust-card:nth-child(1), .au-trust-card:nth-child(2), .au-trust-card:nth-child(3), .au-trust-card:nth-child(4), .au-trust-card:nth-child(5) { flex-basis: 88% !important; width: 88% !important; min-width: 88%; max-width: 88%; min-height: 160px; padding: 20px 17px; gap: 12px; } .au-trust-icon { flex: 0 0 38px; width: 38px; height: 38px; font-size: 13px; } .au-trust-content h3 { font-size: 16px; } .au-trust-content p { font-size: 12px; line-height: 1.6; } }