/* DusiTransfer on the Niotech template: what changes beyond the colours set in main.css.
   Loaded after main.css on every page; the template's own rules stay as they are. */

:root {
  --navy: #112336;
  --navy-deep: #0c1b2a;
  /* Orange for text on light backgrounds: the brand orange is too light to read at text sizes. */
  --theme-text: #a94a00;
}

/* The template's two solid bands, the counters and the app banner, in navy: white text reads on
   it (on orange it would not). Their line patterns are recoloured to match. */
.counter-wrapper.style1 { background-color: var(--navy); }
.cta-wrapper.style1 { background: var(--navy); }

/* Labels and small orange words on light backgrounds, in the darker orange. */
.section-title .subtitle,
.intro-wrapper.style1 .intro-content .intro-section-title .intro-subtitle { color: var(--theme-text); }

/* Nothing may pull the page sideways on a phone: the template clips the body only, and some
   phone browsers still pan towards what lies past the edge (the closed menu panel). */
html,
body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html,
  body { overflow-x: clip; }
}
.offcanvas__info { visibility: hidden; transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out, visibility 0s 0.45s; }
.offcanvas__info.info-open { visibility: visible; transition-delay: 0s; }

/* What the site fills in from the platform's Website screen stays hidden until it is there. */
[data-site]:not(.dt-on),
[data-site-logos]:not(.dt-on),
[data-plan-pattern],
.dt-off { display: none !important; }

/* The template's search icon place: Sign In, set like the menu's links. */
.dt-sign-in {
  color: var(--title);
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.dt-sign-in:hover { color: var(--theme-text); }
.header-3 .header-right .dt-sign-in { margin-left: 30px; }
@media (max-width: 1399px) {
  .header-3 .header-right .dt-sign-in { margin-left: 10px; }
}
@media (max-width: 575px) {
  .dt-sign-in { display: none; }
}

/* The preloader spells DUSITRANSFER: four letters more than the template's. */
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(9):before { animation-delay: 1.6s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(10):before { animation-delay: 1.8s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(11):before { animation-delay: 2s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(12):before { animation-delay: 2.2s; }
@media (max-width: 767px) {
  .preloader .animation-preloader .txt-loading { font-size: 1.7em; }
}

/* A link inside running text, in the readable orange. */
.dt-link { color: var(--theme-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dt-link:hover { color: var(--title); }

/* The owner's review queue in the features cards: the branch where it happened. */
.dt-branch {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 30px;
  background: var(--theme2);
  color: var(--theme-text);
  font-family: "Urbanist", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* The contact form's answers: a field's own problem under it, the thank-you in its place. */
.dt-field-error {
  display: block;
  margin-top: 6px;
  color: #b33333;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.dt-wrong input,
.dt-wrong textarea,
.dt-wrong .nice-select { border-color: #b33333 !important; }
[data-form-problem]:not(.dt-on),
[data-form-thanks]:not(.dt-on) { display: none; }
[data-form-problem] {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff0ef;
  color: #b33333;
  font-weight: 600;
}
[data-form-thanks]:focus { outline: none; }

/* The plans arrive from the platform: until then, and if they can't, the note says where they are. */
[data-plans] [data-plans-note] { display: none; text-align: center; margin-top: 30px; }
[data-plans].dt-plans-failed [data-plans-note] { display: block; }

/* While no client logo is on, the strip is hidden; the About section then keeps the room the
   strip's own padding gave it in the template. */
.brand-slider-section:not(.dt-on) + .about-section { padding-top: 120px; }
@media (max-width: 1199px) {
  .brand-slider-section:not(.dt-on) + .about-section { padding-top: 100px; }
}
@media (max-width: 991px) {
  .brand-slider-section:not(.dt-on) + .about-section { padding-top: 80px; }
}
@media (max-width: 575px) {
  .brand-slider-section:not(.dt-on) + .about-section { padding-top: 60px; }
}

/* Plan names in the readable orange; and with no yearly plans the toggle goes, so its room stays. */
.pricing-card.style1 .pricing-card-header h6 { color: var(--theme-text); }
.pricing-wrapper .tab-section.dt-off ~ .tab-content { margin-top: 40px; }

/* The Features page's "works with" boxes hold the template's own icon font instead of logos. */
.technology-box-items .logo i { font-size: 34px; line-height: 1; color: var(--theme); }

/* The contact page: with no contact box to show, the form section keeps the room the
   boxes' padding gave it (over the template's pt-0, which is !important). */
.contact-section:not(.dt-on) + .contact-form-section { padding-top: 120px !important; }
@media (max-width: 1199px) { .contact-section:not(.dt-on) + .contact-form-section { padding-top: 100px !important; } }
@media (max-width: 991px) { .contact-section:not(.dt-on) + .contact-form-section { padding-top: 80px !important; } }
@media (max-width: 575px) { .contact-section:not(.dt-on) + .contact-form-section { padding-top: 60px !important; } }
/* Beside the form: what happens next, quick ways to talk (each shown once the Website screen
   has it), then the map. On phones the form comes first. */
.dt-next, .dt-talk { padding: 36px 40px; border-radius: 20px; background: var(--theme3); }
.dt-talk { margin-top: 24px; }
.dt-next-title { margin-bottom: 24px; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--title); }
.dt-steps { list-style: none; margin: 0; padding: 0; }
.dt-steps li { display: flex; gap: 18px; align-items: flex-start; }
.dt-steps li + li { margin-top: 22px; }
.dt-step-no { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--theme); color: var(--white, #fff); font-family: "Urbanist", sans-serif; font-size: 16px; font-weight: 700; }
.dt-steps h4 { margin-bottom: 4px; font-size: 20px; font-weight: 700; color: var(--title); }
.dt-steps p { margin: 0; font-size: 16px; line-height: 26px; color: var(--text); }
.dt-talk-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.dt-talk-buttons .theme-btn i { margin-right: 8px; }
.dt-hours { margin: 18px 0 0; color: var(--text); }
.dt-hours i { margin-right: 6px; color: var(--theme); }
.contact-form-wrapper.style1 .dt-talk ~ .contact-map { height: 340px; margin-top: 24px; border-radius: 20px; overflow: hidden; }
@media (max-width: 575px) {
  .dt-next, .dt-talk { padding: 28px 22px; }
  .dt-next-title { font-size: 24px; }
  .dt-talk-buttons .theme-btn { width: 100%; justify-content: center; }
}
.contact-form.style1 .contact-form-items .form-clt .nice-select { width: 100%; height: 60px; line-height: 58px; border-radius: 5px; }
.dt-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.dt-form-note { margin: 14px 0 0; font-size: 14px; color: var(--text); }
.dt-thanks { padding: 40px 0; }
.dt-thanks h3 { font-size: 30px; margin-bottom: 12px; }
.dt-thanks p { margin-bottom: 26px; }

/* How A Day Runs: the template lowercases this list, which would make SSP and USD "ssp and usd". */
.service-details-wrapper .feature-wrapper .feature li { text-transform: none; }

/* Client logos come in any size from the Website screen: each is drawn at the template's
   60-pixel height, whole, in the middle of its slide. */
.brand-slider-section .brand-logo { display: flex; align-items: center; justify-content: center; height: 60px; }
.brand-slider-section .brand-logo img { width: auto; height: auto; max-width: 100%; max-height: 60px; object-fit: contain; }

/* The product's pictures are stored at twice their display size (sharp on phones), with
   width and height on each tag; where the template's max-width shrinks one, it keeps its
   shape. Real dashboard crops sit on the page as cards; the CTA's on the navy band gets
   a light edge so the dashboard's own navy menu doesn't melt into it. */
img.dt-shot { height: auto; }
.dt-app-icon { border-radius: 14px; box-shadow: 0 0 0 1px rgba(17, 35, 54, .08); }
.dt-card-shot { border-radius: 14px; box-shadow: 0 18px 40px rgba(17, 35, 54, .14), 0 0 0 1px rgba(17, 35, 54, .06); }
.dt-panel-shot { border-radius: 20px; box-shadow: 0 0 0 1px rgba(17, 35, 54, .08); }
.faq-wrapper.style1 .faq-thumb .main-thumb.dt-faq-shot { box-shadow: 0 0 0 1px rgba(17, 35, 54, .08); }
.dt-cta-shot { border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .16); }
/* The hero's hand holds the phone on its right side, its wrist cut by the picture's
   bottom edge. On wide screens the picture ends at its column's right edge instead of
   running out of the hero (so the whole phone shows at 1440px as at 1920px), a little
   smaller where the column is narrow, and always sits on the hero's bottom edge. Where
   the hero stacks, the picture comes above the title: the wrist fades out there. */
@media (min-width: 1200px) {
  .intro-wrapper.style1 .row > .col-xl-5 { align-self: flex-end; }
  .intro-wrapper.style1 .intro-thumb .main-thumb.dt-shot { display: block; margin-left: calc(100% - 700px); }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .intro-wrapper.style1 .intro-thumb .main-thumb.dt-shot { width: 560px; margin-left: calc(100% - 560px); }
}
@media (max-width: 1199px) {
  .intro-wrapper.style1 .intro-thumb .main-thumb.dt-shot {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 97%);
  }
}
/* About, Who It's For: the PIN card floats over the screenshot's corner without running
   into the heading beside it. */
@media (min-width: 1200px) { .wcu-wrapper.style2 .wcu-thumb .thumb3 { right: -20px; } }
/* Features: the banner reaches down into the next section (the template's -302px margin);
   above it, so that section's orange tint doesn't lie over the dashboard's lower half. */
.service-section-3 .service-thumb { position: relative; z-index: 2; }
/* How A Day Runs: the template lowercases these paragraphs too ("the day opens... tellers
   then..."); sentences keep their capitals. */
.service-details-wrapper .details-box1 .text,
.service-details-wrapper .details-box2 .text,
.service-details-wrapper .details-box2 .feature-wrapper ul li { text-transform: none; }

/* No picture of the product is cut off: each fits inside its section at every width. The
   template lets some run past the right edge (the FAQ's -200px margin, the CTA's wide
   picture in a narrow column), which cut the dashboard and the app at the side. */
.advantage-wrapper.style1 .advantage-thumb .thumb1 img.dt-shot,
.cta-wrapper.style1 .cta-thumb img.dt-shot { max-width: 100%; }
.faq-wrapper.style1 .faq-thumb { margin-right: 0; }
.faq-wrapper.style1 .faq-thumb .main-thumb.dt-faq-shot { margin-left: 110px; max-width: calc(100% - 110px); }
.faq-wrapper.style1 .faq-thumb .absolute-thumb img.dt-shot { width: 200px; }
@media (min-width: 1200px) and (max-width: 1399px) {
  .faq-wrapper.style1 .faq-thumb .absolute-thumb img.dt-shot { width: 180px; }
  .wcu-wrapper.style2 .wcu-thumb .thumb2 { left: -20px; }
}
@media (max-width: 991px) {
  .faq-wrapper.style1 .faq-thumb .main-thumb.dt-faq-shot { margin-left: 120px; max-width: calc(100% - 120px); }
  .faq-wrapper.style1 .faq-thumb .absolute-thumb { top: 0; right: auto; transform: none; }
}
@media (max-width: 767px) {
  .faq-wrapper.style1 .faq-thumb .main-thumb.dt-faq-shot { margin-left: 90px; max-width: calc(100% - 90px); }
  .faq-wrapper.style1 .faq-thumb .absolute-thumb img.dt-shot { width: 150px; }
  .wcu-wrapper.style3 .wcu-thumb,
  .wcu-wrapper.style3 .wcu-thumb .main-thumb { margin-left: 0; }
  .wcu-wrapper.style3 .wcu-thumb .thumb-box { left: 0; }
  .wcu-wrapper.style3 .wcu-thumb .thumb2 { left: 0; margin-left: 0; }
}
@media (max-width: 575px) {
  .faq-wrapper.style1 .faq-thumb .main-thumb.dt-faq-shot { margin-left: 64px; max-width: calc(100% - 64px); }
  .faq-wrapper.style1 .faq-thumb .absolute-thumb img.dt-shot { width: 108px; }
}

/* The privacy policy: the template's type in a readable column. */
.dt-policy { max-width: 860px; margin: 0 auto; }
.dt-policy-date { display: inline-block; margin-bottom: 18px; padding: 4px 14px; border-radius: 30px;
  background: var(--theme2); color: var(--theme-text); font-size: 14px; font-weight: 600; }
.dt-policy .dt-policy-lead { font-size: 18px; line-height: 30px; color: var(--title); }
.dt-policy h2 { margin: 44px 0 14px; font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--title); }
.dt-policy p, .dt-policy li { font-size: 16px; line-height: 28px; color: var(--text); }
.dt-policy ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.dt-policy li { margin-bottom: 10px; }
.dt-policy li strong { font-weight: 700; color: var(--title); }
.dt-policy ul.dt-policy-contact { padding-left: 0; list-style: none; }
.dt-policy-contact i { width: 24px; color: var(--theme); }
@media (max-width: 575px) {
  .dt-policy h2 { margin-top: 34px; font-size: 24px; }
  .dt-policy .dt-policy-lead { font-size: 17px; line-height: 28px; }
}
/* The footer's link to the policy, beside the copyright. */
.footer-bottom .dt-sep { margin: 0 6px; opacity: .6; }
.footer-bottom.style1 .footer-wrapper p a.dt-footer-link { color: var(--title); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom.style1 .footer-wrapper p a.dt-footer-link:hover { color: var(--theme-text); }
/* The Teller App: the orange circle behind the phones stays inside the section's rounded
   box where the template's right: -30px would push it past the edge (it looked cut off). */
@media (max-width: 1279px) { .advantage-wrapper.style1 .advantage-thumb .shape1 { right: 0; } }
/* The hero's two facts stay side by side on phones, so the line between them divides them
   instead of hanging beside the second. */
@media (max-width: 767px) {
  .fancy-box-wrapper.style1 { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px 28px; }
}
/* Email addresses keep their own letters: the template capitalises headings
   ("Hello@Example.Com"). */
[data-site="email"] .title, [data-site="email"] [data-site-value], a[href^="mailto:"] { text-transform: none; }
/* Contact: the three quick buttons fit one row beside the form, and the box stays hidden
   while none of its details is set. */
.dt-talk-buttons .theme-btn { padding: 16px 24px; }
.dt-talk.dt-on:not(:has(.dt-on)) { display: none !important; }
@media (max-width: 359px) {
  .fancy-box-wrapper.style1 { flex-direction: column; }
  .fancy-box-wrapper.style1 .fancy-box.style5 { padding-left: 0; text-align: center; }
  .fancy-box-wrapper.style1 .fancy-box.style5:before { display: none; }
}
/* About, Who It's For, below desktop: the two small cards float over the Users
   screenshot's corners at a third of its width, so they no longer cover it (on a phone the
   template draws each as wide as the screenshot). */
@media (max-width: 1199px) {
  .wcu-wrapper.style2 .wcu-thumb .thumb2,
  .wcu-wrapper.style2 .wcu-thumb .thumb3 { width: 36%; max-width: 215px; }
  .wcu-wrapper.style2 .wcu-thumb .thumb2 img,
  .wcu-wrapper.style2 .wcu-thumb .thumb3 img { width: 100%; }
}