/*------------------------------------------------------------------
 * Theme Name: SKYHOST - WHMCS & HTML Responsive Domain & Web Hosting Template
 * Author: coodiv
 * Author URI: http://coodiv.net/
 * Author URI: https://themeforest.net/user/coodiv
 * Description: A Bootstrap Responsive Domain & Web Hosting Template + WHMCS theme
 * Version: 1.0
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2017 coodiv.
 -------------------------------------------------------------------*/

 
 /* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Canvas Chart Constraints - Prevents chart from gradually enlarging */
#usageDayChart {
    max-width: 100% !important;
    width: 816px !important;
    height: 408px !important;
}


section#header {
    z-index: 200;
    padding: 0;
    position: relative;
    background-color: rgba(0, 4, 6, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

ul.top-nav>li>a {
    padding: 6px 10px;
    color: #fff;
    line-height: 20px;
    font-size: 12px;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
}

ul.top-nav>li:active>a, ul.top-nav>li:focus>a, ul.top-nav>li:hover>a, ul.top-nav>li>a:focus {
    color: #d5dade;
    text-decoration: none;
    background: 0 0;
}

/* Fix BS5 Popper mis-positioning dropdown in top-nav (position:relative on li) */
ul.top-nav > li.dropdown > .dropdown-menu {
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    inset: auto !important;
    margin-top: 0;
    position: absolute;
}

.navbar-right .login-areadwn {
    z-index: 2000;
}

.login input[type='email'], .login input[type='password'] {
    position: relative;
    z-index: 99999999999;
}


@media (min-width: 768px){
.login-out {
    text-transform: capitalize;
    background: #F44336;
    color: #ffffff;
    padding: 6px 31px !important;
    border-radius: 40px;
    margin: 34px 0px;
    margin-left: 17px;
    box-shadow: 0px 0px 43px -1px rgba(0, 0, 0, 0.95);
}

.login-out:after {
    display:none;
}

.login-out:hover, .login-out:focus {
    background: rgb(210, 55, 44) !important;
}
}


.head-whmcs-info a{
    display: inline-block;
    position: relative;
    line-height: 31px;
    padding: 6px 10px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
	text-decoration: none;
}


.head-whmcs-info a:hover{
    color: #eaeaea;
	text-decoration: none;
}


.logo-simple {
    padding: 37px 15px 15px 15px !important;
}

@media (max-width: 991px){
.navbar-toggle {
    margin-top: 23px !important;
    margin-bottom: 26px  !important;
}
.logo-simple {
    padding: 27px 15px 15px 15px !important;
}

.navbar-offcanvas.offcanvas-transform.in {
    padding-top: 32px;
}

.head-whmcs-info a{
    display:none;
}


}

ul.top-nav>li.primary-action {
    border-left: solid 1px rgba(221, 221, 221, 0.21);
}


.language-popover .popover-content li {
    padding: 0
}



.language-popover {
    background-color: #06121b  !important;
    padding: 10px  !important; 
}

.not-index-header .navbar {
    margin-bottom: 0 !important; 
}

.navbar-main {
    background-color: #e0e4e6;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    border-top: 0 !important;
    border-radius: 0 !important;
	min-height: auto !important;
	margin-bottom: 0 !important;
}

.navbar-main .navbar-nav>li>a {
    color: #798f9e;
    font-weight: 100;
    text-transform: lowercase;
    padding: 16px 15px;
}

.navbar-main .navbar-nav>.active>a, .navbar-main .navbar-nav>.active>a:focus, .navbar-main .navbar-nav>.active>a:hover, .navbar-main .navbar-nav>.open>a, .navbar-main .navbar-nav>.open>a:focus, .navbar-main .navbar-nav>.open>a:hover, .navbar-main .navbar-nav>li>a:focus, .navbar-main .navbar-nav>li>a:hover {
    color: #7c8b92;
    background-color: #cad0d4;
}


section#home-banner {
    margin: 0;
    padding: 90px 0 30px;
    background-color: #ffffff;
    color: #0f1d28;
}

section#home-banner h2 {
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    color: #05253a;
    padding-bottom: 0;
    margin-bottom: 0;
}

section#home-banner h2>span {
    font-weight: 300;
}

section#home-banner p {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 14px;
    margin-top: 5px;
    text-transform: capitalize;
    color: rgba(5, 37, 58, 0.50);
    margin-bottom: 30px;
}

section#home-banner .form-control {
    border-radius: 0;
    border: 0;
    box-shadow: none;
    font-weight: 300;
    height: 53px;
    width: 100%;
    border: 0;
    border-radius: 58px;
    padding: 5px 30px;
    font-size: 14px;
    background: #fff;
    box-shadow: 0px 0px 43px -1px rgba(0,0,0,0.05);
    z-index: 0;
    position: relative;
    border: 1px solid #ebedf1 !important;
}

.domainsearchbttn{
    position: absolute;
    right: 11px;
    top: 3.5px;
    background: rgb(38,182,223);
    background: -moz-linear-gradient(top, rgba(38,182,223,1) 0%, rgba(0,173,221,1) 100%);
    background: -webkit-linear-gradient(top, rgba(38,182,223,1) 0%,rgba(0,173,221,1) 100%);
    background: linear-gradient(to bottom, rgba(38,182,223,1) 0%,rgba(0,173,221,1) 100%);
    border: 0;
    color: #fff;
    height: 46px;
    border-radius: 90px;
    width: 46px;
    opacity: 0.7;
    z-index: 0;
}

.domainsearchbttn:hover{
    opacity: 1;
}


.domainsearchbttn img{
    width: 30px;
}

.homepagewhat{
    border-top: 1px solid #f1f2f3;
	border-bottom: 1px solid #f1f2f3;
	margin-bottom: 60px;
}


.homepagewhat .col-md-3 {
    padding: 0;
}

.homepagewhat .non-index-futr-host {
    margin: 0;
    border-right: 1px solid #f1f2f3;
    padding: 50px 30px;
    margin-bottom: 0;
    display: block;
}

.homepagewhat .non-index-futr-host:hover ,.homepagewhat .non-index-futr-host:focus{
	text-decoration: none;
    background: rgba(241, 242, 243, 0.41);
}

.homepagewhat .non-index-futr-host h5 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    color: #05253a;
}

.homepagewhat .lastfrast {
    border-right: 0;
}

.domain-search-info-plus {
    background: #f5f5f5;
    background: -moz-linear-gradient(to bottom, rgba(245, 245, 245, 0.78) 0%,rgba(243, 245, 247, 0.11) 100%) !important;
    background: -webkit-linear-gradient(to bottom, rgba(245, 245, 245, 0.78) 0%,rgba(243, 245, 247, 0.11) 100%) !important;
    background: linear-gradient(to bottom, rgba(245, 245, 245, 0.78) 0%,rgba(243, 245, 247, 0.11) 100%) !important;
    padding: 60px 0;
}

.label-succes{
    background: #8ac92c;
    font-size: 14px !important;
    text-transform: uppercase;
}

.anoncementhraf{
    text-transform: uppercase;
    font-size: 19px;
    font-weight: bold;
    color: #607D8B;
    padding-top: 5px;
}

.anoncementhraf:hover{
    color: #49636f;
	text-decoration: none;
}

.anoncementhraftext{
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 15px;
    line-height: 28px;
    color: #738188;
}

.not-index-header .navbar {
    z-index: 99 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}


div.header-lined h1 {
    margin-top: 0;
    margin-bottom: 15px;
    padding: 6px 0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px;
    color: rgba(7, 38, 59, 0.69);
	border-bottom:0;
}

div.header-lined .breadcrumb {
    background: #eeeff3;
    padding-left: 15px;
}

div.header-lined small {
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    text-transform: lowercase;
    font-size: 13px;
    color: #8394a0;
}

.logincontainer {
    margin: 40px auto 100px auto;
    max-width: 500px;
    background: rgba(224, 228, 230, 0.32);
    padding: 32px;
    border-radius: 8px;
}

.form-control {
    box-shadow: none;
    border-radius: 3px;
    padding: 9px 12px;
    border: 1px solid #e5e6ea;
    height: auto;
}


.btn-primary {
text-transform: capitalize;
    background: rgb(85, 200, 232);
    color: #ffffff;
    padding: 6px 31px !important;
    border-radius: 40px;
    box-shadow: 0px 0px 43px -1px rgba(0, 0, 0, 0.15);
    border: 0;
}

.btn-primary:hover{
    background: rgb(68, 166, 193);
    color: #ffffff;
}


.btn-outline-secondary {
    text-transform: capitalize;
    background: rgb(255, 255, 255);
    color: #91a4b1;
    padding: 6px 31px !important;
    border-radius: 40px;
    margin-left: 6px;
    box-shadow: 0px 0px 43px -1px rgba(0, 0, 0, 0.15);
    border: 1px solid #e4e7ea;
}


.btn-outline-secondary:hover {
    background: rgb(241, 243, 245);
    color: #718390;
	border: 1px solid #e4e7ea;
}

/* BS3 panel → BS5 card compat for client area home panels */
.client-home-panels .card {
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    margin-bottom: 20px;
}
.client-home-panels .card > .card-header {
    background-color: #fff;
    border-bottom: 0;
    font-weight: bold;
    padding: 10px 15px;
}
.client-home-panels .card > .card-header .card-title .btn {
    color: #1d303d;
    border: 0;
    background: #dde3e6;
    box-shadow: none;
    font-size: 11px;
    padding: 5px 21px !important;
    border-radius: 4px;
    display: block;
    margin-top: -5px;
}
.client-home-panels .card > .card-header .card-title .btn:hover {
    color: #1d303d;
    background: #c7d0d4;
}
.client-home-panels .card small {
    color: #888;
}
.client-home-panels .card > .card-body {
    padding: 0;
    max-height: 170px;
    overflow: auto;
}
.client-home-panels .card > .card-footer {
    border-top: 0;
    background-color: #f5f5f5;
    padding: 10px 15px;
}
.client-home-panels .card > .card-body p {
    padding: 10px 15px;
}
.client-home-panels .card > .list-group {
    max-height: 170px;
    overflow: auto;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.client-home-panels .card > .list-group .list-group-item {
    padding: 4px 10px;
}
.client-home-panels .card > .list-group .list-group-item:last-child {
    border-bottom: 0;
}

.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group {
    padding: 5px 10px !important;
    border-radius: 0;
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Titillium Web', sans-serif;
}

.card-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    color: inherit;
    font-weight: bold;
    text-transform: uppercase;
}

.card-sidebar .card-title {
    font-size: 14px;
	font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    line-height: 26px;
    color: #555;
}



.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1999999999;
}

.preloader.immune {
  bottom: 0;
}

.preloader.white {
  background-color: rgba(255, 255, 255, .3);
}

.preloader.black {
  background-color: rgba(1, 1, 1, .3);
}

.preloader > i.radial-loader:not(:required) {
  -moz-animation: radial-loader .5s infinite linear;
  -webkit-animation: radial-loader .5s infinite linear;
  animation: radial-loader .5s infinite linear;
  border-color: #ea6052;
  border-style: solid;
  border-width: 2px;
  border-right-color: transparent;
  border-radius: 100%;
  display: block;
  position: relative;
  float: right;
  margin: 10px;
  overflow: hidden;
  width: 10px;
  height: 10px;
}

.preloader > span.loading-bar {
  -moz-animation: loading-bar 3s 1;
  -webkit-animation: loading-bar 3s 1;
  animation: loading-bar 3s 1;
  display: block;
  height: 2px;
  background-color: #ea6052;
  opacity: 0;
  transition: width .5s;
}

.preloader > span.loading-bar.red-colored {
  background-color: #ea6052;
}

.preloader > .red-colored.radial-loader {
  border-color: #ea6052 !important;
  border-right-color: transparent !important;
}

.preloader > span.loading-bar.blue-colored {
  background-color: #3498db;
}

.preloader > .blue-colored.radial-loader {
  border-color: #3498db !important;
  border-right-color: transparent !important;
}

.preloader > span.loading-bar.green-colored {
  background-color: #2ecc71;
}

.preloader > .green-colored.radial-loader {
  border-color: #2ecc71 !important;
  border-right-color: transparent !important;
}

.preloader > span.loading-bar.yellow-colored {
  background-color: #f1c40f;
}

.preloader > .yellow-colored.radial-loader {
  border-color: #f1c40f !important;
  border-right-color: transparent !important;
}
/* Animations */

@-moz-keyframes loading-bar {
  0% {
    width: 0%;
    opacity: 1;
  }
  90% {
    width: 90%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

@-webkit-keyframes loading-bar {
  0% {
    width: 0%;
    opacity: 1;
  }
  90% {
    width: 90%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

@keyframes loading-bar {
  0% {
    width: 0%;
    opacity: 1;
  }
  90% {
    width: 90%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

@-moz-keyframes radial-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes radial-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes radial-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.navbar-main .navbar-toggle {
    border-color: #607D8B;
}

.navbar-main .navbar-toggle .icon-bar {
    background-color: #879cab;
}

.telegram-login-button {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.telegram-login-button iframe {
    margin: 0 !important;
}

/* Adjust this selector based on your social login buttons container */
.social-login-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.social-login-container > * {
    margin-left: 10px;
}


/* Ensure vertical stacking for items in list-group-tab-nav */
.list-group-tab-nav .list-group-item {
    display: block !important; /* Force block display */
    width: 100% !important;   /* Ensure items take full width */
    float: none !important;     /* Clear any floats */
    margin-bottom: -1px; /* Retain Bootstrap's border overlap */
}

/* Optional override for the container if it uses flex */
.list-group-tab-nav {
    display: block !important; /* Override potential flex display */
}

/* BS3→BS5 compat: WHMCS core outputs panel-accent-* classes on .card elements */
.card.panel-accent-gold { border-top: 3px solid #f0ad4e; }
.card.panel-accent-green { border-top: 3px solid #5cb85c; }
.card.panel-accent-red { border-top: 3px solid #d9534f; }
.card.panel-accent-blue { border-top: 3px solid #5bc0de; }
.card.panel-accent-orange { border-top: 3px solid #f39c12; }
.card.panel-accent-pink { border-top: 3px solid #e671b8; }
.card.panel-accent-purple { border-top: 3px solid #7b4f9d; }
.card.panel-accent-lime { border-top: 3px solid #8cbf26; }
.card.panel-accent-magenta { border-top: 3px solid #ff0097; }
.card.panel-accent-teal { border-top: 3px solid #00aba9; }
.card.panel-accent-turquoise { border-top: 3px solid #1abc9c; }
.card.panel-accent-emerald { border-top: 3px solid #2ecc71; }
.card.panel-accent-amethyst { border-top: 3px solid #9b59b6; }
.card.panel-accent-wet-asphalt { border-top: 3px solid #34495e; }
.card.panel-accent-midnight-blue { border-top: 3px solid #2c3e50; }
.card.panel-accent-sun-flower { border-top: 3px solid #f1c40f; }
.card.panel-accent-pomegranate { border-top: 3px solid #c0392b; }
.card.panel-accent-silver { border-top: 3px solid #bdc3c7; }
.card.panel-accent-asbestos { border-top: 3px solid #7f8c8d; }
.card.panel-accent-brand-cpanel-orange { border-top: 3px solid #ff6c2c; }

/* ==========================================================================
   Homepage trust band  (AEO/SEO plan W5 — permission-first testimonial band)
   Markup: includes/testimonial-band.tpl, included from homepage.tpl.
   Scoped entirely under .trust-band — safe to remove wholesale on rollback.
   Uses the theme tokens from variables.css and the .features-place card
   language (white card, --radius-md, --shadow-sm, --accent-cyan).

   Layout: refined section header (eyebrow / headline / one-line support), a
   store-rating pair, then a two-row quote marquee wall. Density is the point —
   most public quotes about this product are one-liners, and a wall of many short
   cards reads as real usage where a few big cards read as a thin sample.

   Contrast: the muted greys are darker than the theme default (--text-muted
   #8b969e is only 3.0:1 on white and fails WCAG AA for body text). This block
   uses #5a6b76 (5.5:1) for metadata and fine print, #4a5c66 (7.0:1) for support
   copy, and #106b87 (6.0:1) for the cyan accent wherever it carries text. Raw
   --accent-cyan is used only for non-text marks that have a text equivalent.

   Motion: CSS-only marquee. No library, no rAF loop, no scroll listener. Rows
   pause on hover/focus, collapse to a wrapped grid under prefers-reduced-motion,
   and become native swipe rows on touch widths.

   CLS: every slot reserves its height (badge row, card min-height, row
   min-height) and the marquee animates transform only, so nothing reflows after
   first paint and an empty ledger removes whole blocks rather than shifting them.
   ========================================================================== */
.trust-band {
  padding: 56px 0 60px;
  /* The wall bleeds past the container gutter; clip here so a rounding error in
     the gutter arithmetic can never turn into horizontal scroll on the PAGE.
     Nothing in this band needs to escape the section. */
  overflow-x: hidden;
  /* A hair off white so the band separates from #hosting-plans above and
     #why-us below without introducing a second theme. */
  background: #f5f8fa;
  border-top: 1px solid #e6edf1;
  border-bottom: 1px solid #e6edf1;
}

/* 1. Architecture claim — visually SEPARATE from the testimonials below.
      A section header, not a panel: nothing boxed, nothing attributed, so it
      cannot be misread as something a customer said.

      DEFENSIVE RESET — read before editing. style.css:371 styles the bare
      element selector `header` as the site hero banner (640px tall, dark navy
      gradient, inset shadow) and style.css:439 hangs a half-circle image off
      `header:after`. Neither is class-scoped, so an unclassed <header> anywhere
      on this site turns into a dark navy slab. style.css also loads AFTER
      custom.css. The markup uses a <div> for exactly this reason; these
      declarations keep the block flat even if someone changes the tag back. */
.trust-band__claim {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
  position: static;
  height: auto;
  background: none;
  box-shadow: none;
}
.trust-band__claim::after { content: none; display: none; }
.trust-band__eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 14px;
  border: 1px solid rgba(16, 107, 135, 0.22);
  border-radius: 999px;
  background: rgba(40, 163, 204, 0.08);
  color: #106b87;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.trust-band__claim-line {
  color: var(--bg-dark, #082031);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.trust-band__claim-sub {
  color: #4a5c66;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
/* CJK headline typography: the Latin stack above has no Chinese face, and the
   default fallback on Windows is a thin, poorly-hinted one. */
.trust-band [lang^="zh"] {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC",
               "Hiragino Sans GB", "Noto Sans SC", "Noto Sans TC",
               "Microsoft YaHei", "Heiti SC", sans-serif;
  letter-spacing: 0.01em;
}
.trust-band__claim-line[lang^="zh"] { letter-spacing: 0.02em; }

/* 2. Social proof */
.trust-band__proof { text-align: center; }

/* Store ratings — sit directly under the header as the credibility line, then
   hand off to the quote wall. Image badge + plain text only; no schema. */
.trust-band__stores {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
}
.trust-band__store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Equal tiles: the two rating labels are different lengths, and two
     near-but-not-quite matching boxes read as a mistake. */
  min-width: 236px;
  min-height: 62px; /* reserve: 40px badge + tile padding */
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #e2eaef;
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.12));
}
.trust-band__store-link { display: inline-flex; line-height: 0; }
.trust-band__store-badge {
  height: 40px;
  width: auto;
  max-width: 100%;
  display: block;
}
.trust-band__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  text-align: left;
}
.trust-band__rating-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--bg-dark, #082031);
  white-space: nowrap;
}
.trust-band__rating-star {
  color: var(--accent-cyan, #28a3cc);
  font-size: 16px;
  margin-left: 3px;
}
.trust-band__rating-src {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a6b76;
  white-space: nowrap;
  margin-top: 3px;
}

.trust-band__ratings-note,
.trust-band__consent-note,
.trust-band__legal {
  font-size: 12px;
  line-height: 1.6;
  color: #5a6b76;
  margin: 8px auto 0;
  max-width: 720px;
}
.trust-band__legal { margin-top: 16px; font-size: 11px; }

.trust-band__heading {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a6b76;
  margin: 34px 0 16px;
}

/* ---- Quote wall -------------------------------------------------------
   Two rows drifting in opposite directions. Each row's cards are emitted three
   times in the markup; the track slides exactly one pass width (-33.3333%) and
   snaps back, which reads as an endless loop. Per-card margin-right (not flex
   gap) is what makes that translate land exactly on a clone boundary — with a
   gap the offset is out by half a gap and the loop visibly stutters. Do not swap
   it back to gap, and do not drop a pass: two passes leave a visible empty
   stretch on a wide row. */
.trust-band__wall {
  /* Bleed out to the container edge so cards enter and leave at the page margin
     rather than at an inset. Bootstrap 5's gutter is a variable (and this theme
     runs a 10px root font size), so derive it instead of hardcoding 15px — a
     hardcoded value overshoots the real gutter and creates page-level
     horizontal scroll on narrow viewports. */
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  padding: 4px 0;
}
.trust-band__row {
  position: relative;
  overflow: hidden;
  min-height: 132px; /* reserved: card min-height + vertical padding */
  /* The container indents, not the track: translate3d(-50%) is 50% of the
     track's BORDER box, so any padding on the track would put the loop seam
     out by half that padding and make the wrap visibly jump. */
  padding: 6px 0;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  /* Fade the cards out at both edges instead of chopping them. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 68px, #000 calc(100% - 68px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 68px, #000 calc(100% - 68px), transparent);
}
.trust-band__row:focus-visible {
  outline: 2px solid var(--accent-cyan, #28a3cc);
  outline-offset: -2px;
  border-radius: var(--radius-md, 8px);
}
.trust-band__marquee {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  width: -webkit-max-content;
  width: max-content;
  animation: trust-band-drift 68s linear infinite;
  will-change: transform;
}
/* Row 2 runs the same keyframe backwards, so it drifts the other way. */
.trust-band__row--2 .trust-band__marquee {
  animation-duration: 84s;
  animation-direction: reverse;
}
@keyframes trust-band-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}
/* Reading beats drifting: pause the row the visitor is on, not the whole wall. */
.trust-band__row:hover .trust-band__marquee,
.trust-band__row:focus-within .trust-band__marquee { animation-play-state: paused; }
/* Set by the inline guard when one pass cannot fill the row — a short ledger
   would otherwise loop with a visible empty stretch. */
.trust-band__row--static {
  -webkit-mask-image: none;
          mask-image: none;
  padding-left: 0;
}
.trust-band__row--static .trust-band__marquee {
  animation: none;
  width: auto;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-band__row--static .trust-band__card--dup { display: none; }

.trust-band__card {
  flex: 0 0 auto;
  /* Natural width: a four-character quote gets a small card, a full sentence a
     wide one. The wall's rhythm comes from that variation. */
  width: -webkit-max-content;
  width: max-content;
  min-width: 148px;
  max-width: 340px;
  min-height: 108px;
  margin: 0 18px 0 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border: 1px solid #e2eaef;
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.12));
  text-align: left;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.trust-band__card:hover {
  border-color: rgba(40, 163, 204, 0.4);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15));
}
.trust-band__stars {
  display: block;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--accent-cyan, #28a3cc);
  margin-bottom: 9px;
}
/* Unfilled stars stay drawn so a 4-star review reads as 4 of 5, not as 4. */
.trust-band__star--off { color: #ccd8de; }
.trust-band__quote { border: 0; margin: 0; padding: 0; }
.trust-band__quote p {
  font-size: 15px;
  line-height: 1.65;
  color: #1d2b34;
  margin: 0;
}
.trust-band__quote-translation {
  font-size: 13px;
  line-height: 1.6;
  color: #5a6b76;
  margin: 8px 0 0;
}
.trust-band__translation-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #106b87;
  margin-right: 6px;
}
.trust-band__quote-by {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #5a6b76;
  margin: 11px 0 0;
  padding-top: 9px;
  border-top: 1px solid #eef3f6;
}

@media (max-width: 991px) {
  .trust-band__claim-line { font-size: 27px; }
}

@media (max-width: 767px) {
  .trust-band { padding: 38px 0 42px; }
  .trust-band__claim { margin-bottom: 24px; }
  .trust-band__claim-line { font-size: 23px; }
  .trust-band__claim-sub { font-size: 15px; }
  .trust-band__store { flex: 0 0 auto; min-width: 218px; padding: 8px 12px; gap: 10px; }
  .trust-band__rating-num { font-size: 19px; }
  .trust-band__heading { margin-top: 26px; }
  /* Touch keeps the drift: the wall reads as continuous usage, which is the
     whole point of the pattern. Manual swipe is deliberately NOT enabled here —
     a marquee and a finger fight over the same axis — so instead the row pauses
     while a finger is down (:active), letting a visitor stop and read. */
  .trust-band__row {
    /* narrower fades so small screens lose less card to the mask */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    min-height: 116px;
  }
  .trust-band__card {
    max-width: 78vw;
    min-height: 96px;
    margin-right: 12px;
  }
  .trust-band__row:active .trust-band__marquee { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  /* No drift at all: the wall becomes a wrapped, centred grid of the same cards
     in the same order, and the clone pass is dropped so nothing repeats. */
  .trust-band__row {
    overflow: visible;
    min-height: 0;
    padding-left: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .trust-band__marquee {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .trust-band__card--dup { display: none; }
  .trust-band__card {
    margin: 0 9px 18px;
    transition: none;
  }
  .trust-band__card:hover { box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.12)); }
}