/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. You may delete these comments and get started with your customizations.

By default, your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. Just write here what you want to change, you don't need to copy all your theme's stylesheet content.
*/


/* checkout buttons: */
.checkoutbtn{ /*color:;*/ /*background-color:;*/ /*border-color:;*/ }
.checkoutbtn:hover{ /*color:;*/ /*background-color:;*/ /*border-color:;*/ }

 
.myphone a{font-size:1.00em;color:#000000 }
.phoneCall a{text-decoration:none; color:white;}



.xphonecta a {}
.xphonecta .hxeaderdataTypePhone{
    background: transparent;
    color: var(--df-sky);
    border: 1.5px solid var(--df-sky);
}





/* fixed banners: */
#fixedpanelleft{  }
#fixedpanelright{  }
#fixedpanelbottom{  }

/* ============================================
   dotFRONT — custom.css
   Brand tokens + overrides (Bootstrap 4 base)
   ============================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* --- Brand Tokens --- */
.df-accordion-body.open {
  --df-navy:       #0d1d3a;
  --df-navy-mid:   #122344;
  --df-navy-light: #1a3060;
  --df-blue:       #2f80ed;
  --df-sky:        #4aabea;
  --df-white:      #f0f6ff;
  --df-text:       #c8d8f0;
  --df-muted:      #7a96be;
  --df-border:     rgba(74,171,234,0.18);
  --df-glow:       0 0 24px rgba(47,128,237,0.35);
  --df-radius:     10px;
  --df-radius-lg:  18px;
  --df-transition: 0.28s cubic-bezier(0.4,0,0.2,1);
  --df-font-head:  'Syne', sans-serif;
  --df-font-body:  'DM Sans', sans-serif;
}
/* ============================================
   dotFRONT — custom.css
   Brand tokens + overrides (Bootstrap 4 base)
   ============================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* --- Brand Tokens --- */

body {
  --df-navy:       #0d1d3a;
  --df-navy-mid:   #122344;
  --df-navy-light: #1a3060;
  --df-blue:       #2f80ed;
  --df-sky:        #4aabea;
  --df-white:      #f0f6ff;
  --df-text:       #c8d8f0;
  --df-muted:      #7a96be;
  --df-border:     rgba(74,171,234,0.18);
  --df-glow:       0 0 24px rgba(47,128,237,0.35);
  --df-radius:     10px;
  --df-radius-lg:  18px;
  --df-transition: 0.28s cubic-bezier(0.4,0,0.2,1);
  --df-font-head:  'Syne', sans-serif;
  --df-font-body:  'DM Sans', sans-serif;
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--df-font-body);
  background-color: var(--df-navy);
  color: var(--df-text);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Grid texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(47,128,237,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,128,237,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--df-font-head);
  color: var(--df-white);
  line-height: 1.18;
  font-weight: 700;
}

/* Global h1 — used on inner pages (page-header). Hero overrides this below. */
h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }

/* Body text — lifted from #c8d8f0 to pure near-white for readability */
p { color: #d8eaff; font-weight: 300; }

a {
  color: var(--df-sky);
  text-decoration: none;
  transition: color var(--df-transition);
}
a:hover { color: var(--df-white); }

/* --- Utility --- */
.df-section {
  position: relative;
  z-index: 1;
  padding: 96px 5%;
}

.df-section-sm {
  position: relative;
  z-index: 1;
  padding: 64px 5%;
}

.df-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.df-col-half  { flex: 1 1 420px; min-width: 0; }
.df-col-third { flex: 1 1 280px; min-width: 0; }
.df-col-quarter{ flex: 1 1 220px; min-width: 0; }
.df-col-full  { flex: 1 1 100%; }

.df-center { text-align: center; }
.df-muted  { color: var(--df-muted); font-size: 0.9rem; }

.df-label {
  display: inline-block;
  font-family: var(--df-font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--df-sky);
  margin-bottom: 12px;
}

.df-rule {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--df-blue), var(--df-sky));
  border: none;
  border-radius: 2px;
  margin: 0 auto 28px;
}
.df-rule.left { margin-left: 0; }

/* --- Buttons --- */
.df-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--df-font-head);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 14px 30px;
  border-radius: var(--df-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--df-transition);
}

.df-btn-primary {
  background: linear-gradient(135deg, var(--df-blue), var(--df-sky));
  color: #fff;
  box-shadow: var(--df-glow);
}
.df-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(47,128,237,0.55);
  color: #fff;
}

.df-btn-outline {
  background: transparent;
  color: var(--df-sky);
  border: 1.5px solid var(--df-sky);
}
.df-btn-outline:hover {
  background: rgba(74,171,234,0.12);
  color: var(--df-white);
  border-color: var(--df-white);
}

.df-btn-ghost {
  background: rgba(47,128,237,0.10);
  color: var(--df-sky);
  border: 1.5px solid var(--df-border);
}
.df-btn-ghost:hover {
  background: rgba(47,128,237,0.2);
  color: var(--df-white);
}

.checkoutbtn {
  background: rgba(47,128,237,0.10);
  color: var(--df-sky);
  border: 1.5px solid var(--df-border);
}
.checkoutbtn:hover {
  background: rgba(47,128,237,0.2);
  color: var(--df-white);
}

/* --- Cards --- */
.df-card {
  background: rgba(18,35,68,0.7);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-lg);
  padding: 36px 30px;
  transition: all var(--df-transition);
  backdrop-filter: blur(6px);
}
.df-card:hover {
  border-color: rgba(74,171,234,0.45);
  box-shadow: var(--df-glow);
  transform: translateY(-4px);
}

.df-card-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(47,128,237,0.2), rgba(74,171,234,0.1));
  border: 1px solid var(--df-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--df-sky);
  margin-bottom: 20px;
}

.df-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.df-card p  { font-size: 0.92rem; color: var(--df-muted); margin-bottom: 20px; }

/* --- Navigation --- */
.df-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(13,29,58,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--df-border);
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  transition: background var(--df-transition);
}

.df-nav-logo {
  font-family: var(--df-font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--df-white);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.df-nav-logo span { color: var(--df-sky); }

.df-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.df-nav-links a {
  font-family: var(--df-font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--df-muted);
  padding: 8px 14px;
  border-radius: 6px;
  transition: all var(--df-transition);
}
.df-nav-links a:hover,
.df-nav-links a.active {
  color: var(--df-white);
  background: rgba(74,171,234,0.1);
}

.df-nav-cta { margin-left: 12px; }

.df-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}
.df-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--df-sky);
  border-radius: 2px;
  transition: all var(--df-transition);
}

.df-mobile-menu {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  background: rgba(13,29,58,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--df-border);
  padding: 24px 5%;
  z-index: 999;
  flex-direction: column;
  gap: 8px;
}
.df-mobile-menu.open { display: flex; }
.df-mobile-menu a {
  font-family: var(--df-font-head);
  font-size: 1.1rem;
  color: var(--df-text);
  padding: 12px 0;
  border-bottom: 1px solid var(--df-border);
  font-weight: 600;
}

/* --- Hero --- */
.df-hero {
  position: relative;
  min-height: auto; /* 100vh; */
  display: grid;
  /* 2 content columns, stat row spans both */
  grid-template-columns: 1fr 1fr;
  /* row 1: content+image auto height; row 2: stat bar auto height */
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 0 0;
  row-gap: 40px;
  padding: 40px 5% 56px;
  overflow: hidden;
  z-index: 1;
}

.df-hero-bg {
  position: absolute;
  inset: 0;
  /* Stronger left-side solid so text always has dark backing */
  background:
    linear-gradient(90deg,
      var(--df-navy) 0%,
      var(--df-navy) 48%,
      rgba(13,29,58,0.55) 62%,
      rgba(13,29,58,0.0) 100%
    ),
    radial-gradient(ellipse 80% 70% at 75% 40%, rgba(47,128,237,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 15% 85%, rgba(74,171,234,0.12) 0%, transparent 60%),
    var(--df-navy);
  z-index: 0;
}

/* Left column — text */
.df-hero-content {
  position: relative;
  z-index: 2;
  /* Never wider than the left column, with breathing room from image */
  max-width: 600px;
  padding-right: 32px;
}

.df-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(47,128,237,0.15);
  border: 1px solid rgba(74,171,234,0.35);
  border-radius: 100px;
  padding: 7px 18px;
  font-size: 0.78rem;
  font-family: var(--df-font-head);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--df-sky);
  margin-bottom: 28px;
}

/* H1 inside hero — crisp white, no bleed into gradient */
.df-hero h1 {
  margin-bottom: 24px;
  /* Force bright white so it pops off the dark left panel */
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(13,29,58,0.8);
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  line-height: 1.14;
}

.df-hero h1 em {
  font-style: normal;
  background: linear-gradient(95deg, #5ba8ff, var(--df-sky));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Fallback for Safari clip issues */
  display: inline;
}

/* Paragraph — brighter than default --df-text for hero contrast */
.df-hero p {
  font-size: 1.12rem;
  color: #ddeeff;
  font-weight: 400;
  margin-bottom: 36px;
  line-height: 1.75;
}

.df-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Right column — image */
.df-hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 24px;
}

.df-hero-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--df-radius-lg);
  border: 1px solid rgba(74,171,234,0.25);
  box-shadow:
    0 0 0 1px rgba(47,128,237,0.15),
    var(--df-glow),
    0 40px 80px rgba(0,0,0,0.55);
  display: block;
  object-fit: cover;
}

.df-hero-stat-row {
  /* Span both grid columns so stats sit in their own full-width row */
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;          /* keep all 4 on one line */
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  padding: 32px 0 0;
  border-top: 1px solid rgba(74,171,234,0.2);
  margin-top: 0;              /* grid gap handles spacing from the rows above */
}

.df-hero-stat {
  flex: 1;
  text-align: center;
  padding: 0 20px;
  position: relative;
}

/* Vertical divider between each stat */
.df-hero-stat + .df-hero-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(74,171,234,0.25);
}

.df-hero-stat strong {
  display: block;
  font-family: var(--df-font-head);
  font-size: 1.9rem;
  font-weight: 800;
  background: linear-gradient(90deg, #6db8ff, var(--df-sky));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.df-hero-stat span {
  font-size: 0.78rem;
  color: #8fb0d8;
  font-weight: 400;
  margin-top: 4px;
  display: block;
  letter-spacing: 0.03em;
}

/* --- Pricing --- */
.df-price-card {
  background: rgba(18,35,68,0.6);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-lg);
  padding: 48px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.df-price-card.featured {
  border-color: var(--df-blue);
  box-shadow: var(--df-glow);
}

.df-price-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: 32px; right: -39px;
  background: linear-gradient(135deg, var(--df-blue), var(--df-sky));
  color: #fff;
  font-family: var(--df-font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 40px;
  transform: rotate(45deg);
}

.df-price-amount {
  font-family: var(--df-font-head);
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--df-white);
  line-height: 1;
  margin: 12px 0 6px;
}

.df-price-amount sup {
  font-size: 1.4rem;
  vertical-align: super;
  color: var(--df-sky);
}

.df-price-amount sub {
  font-size: 1rem;
  color: var(--df-muted);
  font-weight: 300;
}

.df-price-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 32px;
  text-align: left;
}

.df-price-list li {
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--df-text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid rgba(74,171,234,0.07);
}
.df-price-list li::before {
   content: '\2713'; /* checkmark */
  color: var(--df-sky);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Testimonials --- */
.df-testimonial {
  background: rgba(18,35,68,0.5);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-lg);
  padding: 36px 30px;
  position: relative;
}

.df-testimonial::before {
  content: '"';
  position: absolute;
  top: -10px; left: 24px;
  font-family: var(--df-font-head);
  font-size: 5rem;
  color: var(--df-blue);
  opacity: 0.4;
  line-height: 1;
}

.df-testimonial p {
  font-size: 0.95rem;
  color: var(--df-text);
  font-style: italic;
  margin-bottom: 20px;
}

.df-testimonial-name {
  font-family: var(--df-font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--df-sky);
}

.df-stars { color: #f4c842; letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 12px; }

/* --- CTA Band --- */
.df-cta-band {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--df-navy-light), var(--df-navy-mid));
  border-top: 1px solid var(--df-border);
  border-bottom: 1px solid var(--df-border);
  padding: 80px 5%;
  text-align: center;
  overflow: hidden;
}

.df-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(47,128,237,0.12) 0%, transparent 70%);
}

.df-cta-band > * { position: relative; z-index: 1; }

/* --- Industries --- */
.df-industry-chip {
  display: inline-block;
  background: rgba(47,128,237,0.08);
  border: 1px solid var(--df-border);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 0.82rem;
  color: var(--df-text);
  margin: 4px;
  transition: all var(--df-transition);
}
.df-industry-chip:hover {
  background: rgba(47,128,237,0.18);
  color: var(--df-white);
  border-color: rgba(74,171,234,0.4);
}

/* --- Feature list --- */
.df-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.df-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(74,171,234,0.07);
  font-size: 0.92rem;
}
.df-feature-list li:last-child { border-bottom: none; }
.df-feature-list .icon {
  color: var(--df-sky);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 3px;
}

/* --- Image blocks --- */
.df-img-block {
  border-radius: var(--df-radius-lg);
  overflow: hidden;
  border: 1px solid var(--df-border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.df-img-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Contact Form --- */
.df-input {
  width: 100%;
  background: rgba(18,35,68,0.6);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  padding: 14px 18px;
  color: var(--df-white);
  font-family: var(--df-font-body);
  font-size: 0.92rem;
  outline: none;
  transition: border-color var(--df-transition);
}
.df-input:focus { border-color: var(--df-blue); }
.df-input::placeholder { color: var(--df-muted); }

.df-label-form {
  display: block;
  font-size: 0.82rem;
  font-family: var(--df-font-head);
  font-weight: 600;
  color: var(--df-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.df-form-group { margin-bottom: 20px; }

textarea.df-input { resize: vertical; min-height: 130px; }

/* --- Footer --- */
.df-footer {
  position: relative;
  z-index: 1;
  background: rgba(8,17,35,0.95);
  border-top: 1px solid var(--df-border);
  padding: 72px 5% 32px;
}

.df-footer-logo {
  font-family: var(--df-font-head);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--df-white);
  margin-bottom: 16px;
}
.df-footer-logo span { color: var(--df-sky); }

.df-footer p { font-size: 0.88rem; color: var(--df-muted); max-width: 300px; }

.df-footer-heading {
  font-family: var(--df-font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--df-sky);
  margin-bottom: 16px;
}

.df-footer-links {
  list-style: none;
  padding: 0; margin: 0;
}
.df-footer-links li + li { margin-top: 8px; }
.df-footer-links a {
  font-size: 0.88rem;
  color: var(--df-muted);
  transition: color var(--df-transition);
}
.df-footer-links a:hover { color: var(--df-white); }

.df-footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--df-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--df-muted);
}

.df-social-links { display: flex; gap: 12px; }
.df-social-links a {
  width: 36px; height: 36px;
  background: rgba(47,128,237,0.1);
  border: 1px solid var(--df-border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--df-muted);
  font-size: 0.9rem;
  transition: all var(--df-transition);
}
.df-social-links a:hover {
  background: rgba(47,128,237,0.25);
  color: var(--df-sky);
  border-color: var(--df-sky);
}

/* --- Divider with gradient --- */
.df-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--df-blue), var(--df-sky), transparent);
  border: none;
  margin: 0;
  opacity: 0.3;
}

/* --- Page header --- */
.df-page-header {
  position: relative;
  z-index: 1;
  padding: 160px 5% 80px;
  text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(47,128,237,0.15) 0%, transparent 70%);
}

.df-page-header h1 { margin-bottom: 16px; }
.df-page-header p { font-size: 1.1rem; color: var(--df-muted); max-width: 580px; margin: 0 auto; }

/* --- Accordion (FAQ) --- */
.df-accordion-item {
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.df-accordion-header {
  padding: 18px 24px;
  font-family: var(--df-font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--df-white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(18,35,68,0.5);
  user-select: none;
}
.df-accordion-header:hover { background: rgba(47,128,237,0.08); }
.df-accordion-body {
  display: none;
  padding: 18px 24px;
  font-size: 0.9rem;
  color: var(--df-muted);
  background: rgba(13,29,58,0.4);
}
.df-accordion-body.open { display: block; }
.df-accordion-icon { font-size: 1.2rem; color: var(--df-sky); }

/* --- Services inner page grid --- */
.df-service-img {
  width: 100%;
  border-radius: var(--df-radius);
  border: 1px solid var(--df-border);
  object-fit: cover;
  display: block;
  max-height: 340px;
}

/* --- Animations --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(47,128,237,0.3); }
  50%       { box-shadow: 0 0 40px rgba(47,128,237,0.6); }
}

.df-animate { animation: fadeUp 0.7s ease both; }
.df-animate-d1 { animation-delay: 0.1s; }
.df-animate-d2 { animation-delay: 0.2s; }
.df-animate-d3 { animation-delay: 0.3s; }
.df-animate-d4 { animation-delay: 0.4s; }

.df-pulse { animation: pulseGlow 3s ease-in-out infinite; }

/* --- Responsive --- */

/* Tablet — 900–1100px: tighten hero columns */
@media (max-width: 1100px) {
  .df-hero {
    grid-template-columns: 55% 45%;
    padding: 120px 4% 80px;
  }
  .df-hero-content { padding-right: 20px; }
  .df-hero h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
}

/* Mobile — =900px: stack hero vertically */
@media (max-width: 900px) {
  .df-nav-links, .df-nav-cta { display: none; }
  .df-hamburger { display: flex; }
  .df-topbar { display: none !important; }


  /* Hero: single column, image below text */
  .df-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 110px 5% 64px;
    min-height: unset;
    gap: 48px;
  }
  .df-hero-bg {
    /* On mobile, full dark background — no gradient cutoff issue */
    background:
      radial-gradient(ellipse 100% 60% at 50% 20%, rgba(47,128,237,0.2) 0%, transparent 70%),
      var(--df-navy);
  }
  .df-hero-content {
    max-width: 100%;
    padding-right: 0;
    grid-row: 1;
    grid-column: 1;
  }
  .df-hero-visual {
    grid-row: 2;
    grid-column: 1;
    justify-content: center;
    padding-left: 0;
  }
  .df-hero-img {
    max-width: 100%;
    max-height: 320px;
    object-fit: cover;
  }
  .df-hero h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }

  .df-col-half, .df-col-third, .df-col-quarter { flex: 1 1 100%; }
  .df-section, .df-section-sm { padding: 64px 5%; }

 /* Collapsed menu background */
    #navbarHeaderRowMenu {
      background: rgba(8,17,35,0.98) !important;
      border: 1px solid rgba(74,171,234,0.18) !important;
      border-radius: 10px !important;
      padding: 12px 0 !important;
      margin-top: 8px !important;
    }

    /* All nav links */
    #navbarHeaderRowMenu .nav-link,
    #navbarHeaderRowMenu .dropdown-item {
      color: #c8d8f0 !important;
      font-family: 'Syne', sans-serif !important;
      font-size: 0.88rem !important;
      font-weight: 600 !important;
      padding: 10px 20px !important;
      border-bottom: 1px solid rgba(74,171,234,0.07) !important;
    }

    /* Hover state */
    #navbarHeaderRowMenu .nav-link:hover,
    #navbarHeaderRowMenu .dropdown-item:hover {
      color: #ffffff !important;
      background: rgba(47,128,237,0.12) !important;
    }

    /* Active / selected link */
    #navbarHeaderRowMenu .linkSelected {
      color: #4aabea !important;
    }

    /* Dropdown toggle arrow */
    #navbarHeaderRowMenu .dropdown-toggle::after {
      border-top-color: #4aabea !important;
    }

    /* Dropdown submenu */
    #navbarHeaderRowMenu .dropdown-menu {
      background: rgba(13,29,58,0.98) !important;
      border: 1px solid rgba(74,171,234,0.15) !important;
      border-radius: 8px !important;
      padding: 4px 0 !important;
      margin-left: 12px !important;
    }

    #navbarHeaderRowMenu .dropdown-item {
      border-bottom: 1px solid rgba(74,171,234,0.05) !important;
      font-size: 0.82rem !important;
      color: #a0b8d8 !important;
    }

    #navbarHeaderRowMenu .dropdown-item:last-child {
      border-bottom: none !important;
    }

    /* Hamburger icon — make it visible on dark background */
    .navbar-toggler {
      border-color: rgba(74,171,234,0.4) !important;
      padding: 6px 10px !important;
    }

    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(74,171,234,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

}

/* Small mobile — =600px */
@media (max-width: 600px) {
  .df-hero { gap: 36px; padding: 100px 5% 48px; }
  .df-hero h1 { font-size: 1.85rem; }
  .df-topbar { display: none !important; }
 
  h2 { font-size: 1.55rem; }
  .df-hero-stat-row {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px 32px;
  }
  .df-hero-stat strong { font-size: 1.6rem; }
  .df-price-card { padding: 32px 20px; }
  .df-hero-img { max-height: 240px; }

 /* Collapsed menu background */
    #navbarHeaderRowMenu {
      background: rgba(8,17,35,0.98) !important;
      border: 1px solid rgba(74,171,234,0.18) !important;
      border-radius: 10px !important;
      padding: 12px 0 !important;
      margin-top: 8px !important;
    }

    /* All nav links */
    #navbarHeaderRowMenu .nav-link,
    #navbarHeaderRowMenu .dropdown-item {
      color: #c8d8f0 !important;
      font-family: 'Syne', sans-serif !important;
      font-size: 0.88rem !important;
      font-weight: 600 !important;
      padding: 10px 20px !important;
      border-bottom: 1px solid rgba(74,171,234,0.07) !important;
    }

    /* Hover state */
    #navbarHeaderRowMenu .nav-link:hover,
    #navbarHeaderRowMenu .dropdown-item:hover {
      color: #ffffff !important;
      background: rgba(47,128,237,0.12) !important;
    }

    /* Active / selected link */
    #navbarHeaderRowMenu .linkSelected {
      color: #4aabea !important;
    }

    /* Dropdown toggle arrow */
    #navbarHeaderRowMenu .dropdown-toggle::after {
      border-top-color: #4aabea !important;
    }

    /* Dropdown submenu */
    #navbarHeaderRowMenu .dropdown-menu {
      background: rgba(13,29,58,0.98) !important;
      border: 1px solid rgba(74,171,234,0.15) !important;
      border-radius: 8px !important;
      padding: 4px 0 !important;
      margin-left: 12px !important;
    }

    #navbarHeaderRowMenu .dropdown-item {
      border-bottom: 1px solid rgba(74,171,234,0.05) !important;
      font-size: 0.82rem !important;
      color: #a0b8d8 !important;
    }

    #navbarHeaderRowMenu .dropdown-item:last-child {
      border-bottom: none !important;
    }

    /* Hamburger icon — make it visible on dark background */
    .navbar-toggler {
      border-color: rgba(74,171,234,0.4) !important;
      padding: 6px 10px !important;
    }

    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(74,171,234,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

.divmyphone {
    font-family: var(--df-font-head);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--df-muted);
    text-decoration: none;
    transition: color var(--df-transition);
    text-align:center;
}
.divmyphone a {color:white}


}





/* =========================================================
   SWIPER HERO VERSION
   Isolated version of df-hero specifically for Swiper.js
   ========================================================= */

.df-swiper-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;

  width: 100%;
  height: auto !important;
  min-height: unset;

  padding: 40px 5% 56px;

  overflow: visible !important;
  z-index: 1;
}

/* Background */
.df-swiper-hero-bg {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      var(--df-navy) 0%,
      var(--df-navy) 48%,
      rgba(13,29,58,0.55) 62%,
      rgba(13,29,58,0.0) 100%
    ),
    radial-gradient(
      ellipse 80% 70% at 75% 40%,
      rgba(47,128,237,0.22) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 50% 50% at 15% 85%,
      rgba(74,171,234,0.12) 0%,
      transparent 60%
    ),
    var(--df-navy);

  z-index: 0;
}

/* LEFT COLUMN */
.df-swiper-hero-content {
  position: relative;
  z-index: 2;

  max-width: 600px;
  padding-right: 32px;
}

/* Badge */
.df-swiper-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: rgba(47,128,237,0.15);
  border: 1px solid rgba(74,171,234,0.35);

  border-radius: 100px;

  padding: 7px 18px;

  font-size: 0.78rem;
  font-family: var(--df-font-head);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--df-sky);

  margin-bottom: 28px;
}

/* H1 */
.df-swiper-hero h1 {
  margin-bottom: 24px;

  color: #ffffff;

  text-shadow: 0 2px 24px rgba(13,29,58,0.8);

  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  line-height: 1.14;
}

.df-swiper-hero h1 em {
  font-style: normal;

  background: linear-gradient(
    95deg,
    #5ba8ff,
    var(--df-sky)
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
}

/* Paragraph */
.df-swiper-hero p {
  font-size: 1.12rem;
  color: #ddeeff;

  font-weight: 400;

  margin-bottom: 36px;

  line-height: 1.75;
}

/* Buttons */
.df-swiper-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* RIGHT COLUMN */
.df-swiper-hero-visual {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: 100%;

  padding-left: 24px;
}

/* Image */
.df-swiper-hero-img {
  width: 100%;
  max-width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

  border-radius: var(--df-radius-lg);

  border: 1px solid rgba(74,171,234,0.25);

  box-shadow:
    0 0 0 1px rgba(47,128,237,0.15),
    var(--df-glow),
    0 40px 80px rgba(0,0,0,0.55);
}

/* Stats Row */
.df-swiper-hero-stat-row {
  grid-column: 1 / -1;

  display: flex;
  flex-wrap: nowrap;

  justify-content: space-between;
  align-items: stretch;

  gap: 0;

  padding-top: 32px;

  border-top: 1px solid rgba(74,171,234,0.2);
}

/* Individual Stat */
.df-swiper-hero-stat {
  position: relative;

  flex: 1;

  text-align: center;

  padding: 0 20px;
}

/* Divider */
.df-swiper-hero-stat + .df-swiper-hero-stat::before {
  content: '';

  position: absolute;

  left: 0;
  top: 10%;

  width: 1px;
  height: 80%;

  background: rgba(74,171,234,0.25);
}

.df-swiper-hero-stat strong {
  display: block;

  font-family: var(--df-font-head);

  font-size: 1.9rem;
  font-weight: 800;

  line-height: 1.1;

  background: linear-gradient(
    90deg,
    #6db8ff,
    var(--df-sky)
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
}

.df-swiper-hero-stat span {
  display: block;

  margin-top: 4px;

  font-size: 0.78rem;
  font-weight: 400;

  color: #8fb0d8;

  letter-spacing: 0.03em;
}

/* =========================================================
   MOBILE / RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

  .df-swiper-hero {
    grid-template-columns: 1fr;
    gap: 32px;

    padding: 32px 20px 48px;
  }

  .df-swiper-hero-content {
    max-width: 100%;
    padding-right: 0;
  }

  .df-swiper-hero-visual {
    justify-content: center;
    padding-left: 0;
  }

  .df-swiper-hero-stat-row {
    flex-wrap: wrap;
    gap: 24px 0;
  }

  .df-swiper-hero-stat {
    width: 50%;
    flex: none;
  }

  .df-swiper-hero-stat:nth-child(odd)::before {
    display: none;
  }

}

@media (max-width: 576px) {

  .df-swiper-hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .df-swiper-hero p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .df-swiper-hero-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .df-swiper-hero-btns .df-btn {
    width: 100%;
    text-align: center;
  }

  .df-swiper-hero-stat {
    width: 100%;
  }

  .df-swiper-hero-stat::before {
    display: none !important;
  }

}










/* Privacy Policy page — custom styles on top of Bootstrap 5 */
.privacy-page{
  color:#293241;
  line-height:1.65;
}
.privacy-page p,
.privacy-page li{
  font-size:15px;
}
.privacy-page .lead-sm{
  font-size:16px;
  color:#3a4453;
}
.privacy-page .section-title{
  font-size:19px;
  font-weight:600;
  margin-top:2rem;
  margin-bottom:.5rem;
}
.privacy-page .google-callout{
  border-radius:8px;
  margin:1.5rem 0;
}
.privacy-page .google-callout ul{
  margin-bottom:1rem;
}
.privacy-page a{
  color:#1a56db;
  text-decoration:none;
}
.privacy-page a:hover{
  text-decoration:underline;
}
.privacy-page hr{
  border-top:1px solid #e5e7eb;
  opacity:1;
}





.df-value-bar{
  width:100%;
  background:#0b3160;                       /* deep brand band under the hero */
  border-top:1px solid rgba(255,255,255,.08);
  padding:15px 20px;
}
.df-value-bar-inner{
  max-width:1180px;                         /* match your site container width */
  margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:10px; text-align:center;
  color:#e8eef6; font-size:15.5px; line-height:1.4;
}
.df-value-bar-inner strong{ font-weight:700; color:#fff; }
.df-value-bar-inner .fa{ color:#3ddc84; font-size:18px; flex:none; }
@media(max-width:560px){ .df-value-bar-inner{ font-size:14px; } }



/* =========================================================
   WEBSITE DEMO SWIPER SLIDE
   Does NOT affect other df-swiper-hero slides
   ========================================================= */


/* Give this particular slide a little more horizontal room */
.df-swiper-hero-demo {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 55px;
}


/* =========================================================
   LEFT COLUMN
   ========================================================= */

.df-swiper-hero-demo .df-swiper-hero-content {
  max-width: 620px;
}


.df-swiper-hero-demo .df-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 8px 15px;
  margin-bottom: 24px;

  border: 1px solid rgba(74,171,234,0.35);
  border-radius: 100px;

  background: rgba(47,128,237,0.12);

  color: var(--df-sky);

  font-family: var(--df-font-head);
  font-size: 0.76rem;
  font-weight: 700;

  letter-spacing: 0.09em;
  text-transform: uppercase;
}


.df-swiper-hero-demo .df-demo-badge i {
  color: var(--df-sky);
}


/* Heading */

.df-swiper-hero-demo .df-demo-title {
  margin: 0 0 22px;

  color: var(--df-white);

  font-family: var(--df-font-head);
  font-size: clamp(2.5rem, 4.2vw, 4.3rem);
  font-weight: 800;

  line-height: 1.03;
  letter-spacing: -0.045em;
}


.df-swiper-hero-demo .df-demo-title span {
  display: block;

  color: var(--df-blue);

  -webkit-text-fill-color: var(--df-blue);
}


/* Paragraph */

.df-swiper-hero-demo .df-demo-lead {
  max-width: 600px;

  margin-bottom: 27px;

  color: #c8d8f0;

  font-size: 1.05rem;
  line-height: 1.7;
}


/* Benefits */

.df-swiper-hero-demo .df-demo-points {
  display: grid;

  gap: 10px;

  margin-bottom: 30px;
}


.df-swiper-hero-demo .df-demo-point {
  display: flex;
  align-items: center;

  gap: 10px;

  color: var(--df-white);

  font-size: 0.95rem;
}


.df-swiper-hero-demo .df-demo-point i {
  flex-shrink: 0;

  color: var(--df-sky);

  font-size: 0.95rem;
}


/* CTA + Price */

.df-swiper-hero-demo .df-demo-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 22px;
}


.df-swiper-hero-demo .df-demo-price {
  display: flex;
  flex-direction: column;

  line-height: 1.1;
}


.df-swiper-hero-demo .df-demo-price small {
  margin-bottom: 4px;

  color: var(--df-muted);

  font-size: 0.68rem;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}


.df-swiper-hero-demo .df-demo-price strong {
  color: var(--df-white);

  font-family: var(--df-font-head);

  font-size: 1.55rem;
}


.df-swiper-hero-demo .df-demo-price strong span {
  margin-left: 3px;

  color: var(--df-muted);

  font-family: var(--df-font-body);

  font-size: 0.72rem;
  font-weight: 400;
}


/* Trust note */

.df-swiper-hero-demo .df-demo-note {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 19px;

  color: var(--df-muted);

  font-size: 0.78rem;
}


.df-swiper-hero-demo .df-demo-note i {
  color: var(--df-sky);
}


/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.df-swiper-hero-demo .df-swiper-hero-visual {
  position: relative;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;

  padding-left: 0;

  opacity: 1 !important;
  visibility: visible !important;
}


/* Subtle glow behind browser */

.df-swiper-hero-demo .df-swiper-hero-visual::before {
  content: '';

  position: absolute;

  width: 75%;
  height: 70%;

  left: 13%;
  top: 15%;

  background: rgba(47,128,237,0.18);

  border-radius: 50%;

  filter: blur(75px);

  pointer-events: none;
}


/* Browser Window */

.df-swiper-hero-demo .df-demo-browser {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  max-width: 680px;

  overflow: hidden;

  border: 1px solid rgba(74,171,234,0.28);
  border-radius: 16px;

  background: #f6f9fd;

  box-shadow:
    0 0 0 1px rgba(47,128,237,0.08),
    0 25px 65px rgba(0,0,0,0.42),
    0 0 55px rgba(47,128,237,0.14);

  transform:
    perspective(1200px)
    rotateY(-5deg)
    rotateX(1deg);

  transform-origin: center;
}


/* Browser top */

.df-swiper-hero-demo .df-demo-browser-top {
  position: relative;

  display: flex;
  align-items: center;

  gap: 7px;

  height: 38px;

  padding: 0 13px;

  background: #e8edf4;
}


.df-swiper-hero-demo .df-demo-browser-top > span {
  display: block;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #9eacbc;
}


.df-swiper-hero-demo .df-demo-browser-url {
  position: absolute;

  left: 50%;
  top: 7px;

  transform: translateX(-50%);

  width: 45%;

  padding: 4px 10px;

  overflow: hidden;

  background: #fff;

  border-radius: 5px;

  color: #8190a4;

  font-size: 0.55rem;

  text-align: center;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* =========================================================
   DEMO WEBSITE
   ========================================================= */

.df-swiper-hero-demo .df-demo-browser-content {
  width: 100%;

  background: #ffffff;

  color: #102344;
}


/* Fake navbar */

.df-swiper-hero-demo .df-demo-site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 15px 21px;

  background: #ffffff;
}


.df-swiper-hero-demo .df-demo-site-logo {
  color: #102344;

  font-family: var(--df-font-head);

  font-size: 0.66rem;
  font-weight: 800;
}


.df-swiper-hero-demo .df-demo-site-links {
  display: flex;

  gap: 17px;

  color: #607087;

  font-size: 0.52rem;
}


/* Website hero */

.df-swiper-hero-demo .df-demo-site-hero {
  display: grid;

  grid-template-columns: 1.12fr 0.88fr;

  min-height: 285px;

  background:
    linear-gradient(
      135deg,
      #08172f 0%,
      #173a70 100%
    );
}


/* Critical:
   your global .df-swiper-hero p rule otherwise
   makes this demo-site paragraph huge.
*/

.df-swiper-hero-demo .df-demo-site-copy p {
  max-width: 270px;

  margin: 0 0 12px;

  color: #c7d6eb;

  font-size: 0.64rem;
  font-weight: 400;

  line-height: 1.55;
}


.df-swiper-hero-demo .df-demo-site-copy {
  padding: 40px 28px;

  color: #ffffff;
}


.df-swiper-hero-demo .df-demo-site-copy small {
  display: block;

  color: #69b8f2;

  font-size: 0.48rem;

  letter-spacing: 0.08em;
}


.df-swiper-hero-demo .df-demo-site-copy h3 {
  margin: 12px 0;

  color: #ffffff;

  font-family: var(--df-font-head);

  font-size: clamp(1.35rem, 2vw, 1.9rem);

  line-height: 1.08;
}


.df-swiper-hero-demo .df-demo-site-copy h3 span {
  display: block;

  color: var(--df-sky);
}


.df-swiper-hero-demo .df-demo-site-button {
  display: inline-block;

  padding: 8px 14px;

  border-radius: 5px;

  background: var(--df-blue);

  color: #ffffff;

  font-size: 0.55rem;
  font-weight: 700;
}


/* Graphic */

.df-swiper-hero-demo .df-demo-site-image {
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle,
      rgba(74,171,234,0.28),
      transparent 60%
    );

  color: rgba(255,255,255,0.92);

  font-size: 6rem;
}


/* Bottom mini features */

.df-swiper-hero-demo .df-demo-site-features {
  display: grid;

  grid-template-columns: repeat(3,1fr);

  background: #ffffff;
}


.df-swiper-hero-demo .df-demo-site-features > div {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 13px 8px;

  border-right: 1px solid #e7edf5;

  color: #24415f;

  font-size: 0.53rem;
}


.df-swiper-hero-demo .df-demo-site-features > div:last-child {
  border-right: 0;
}


.df-swiper-hero-demo .df-demo-site-features i {
  color: var(--df-blue);
}


/* =========================================================
   FLOATING CARD
   ========================================================= */

.df-swiper-hero-demo .df-demo-floating-card {
  position: absolute;
  z-index: 5;

  right: -5px;
  bottom: 10px;

  display: flex;
  align-items: center;

  gap: 11px;

  min-width: 185px;

  padding: 13px 16px;

  border: 1px solid var(--df-border);
  border-radius: 11px;

  background: rgba(13,29,58,0.96);

  box-shadow:
    0 16px 38px rgba(0,0,0,0.35);
}


.df-swiper-hero-demo .df-demo-floating-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 36px;

  width: 36px;
  height: 36px;

  border-radius: 50%;

  background: var(--df-blue);

  color: #ffffff;
}


.df-swiper-hero-demo .df-demo-floating-card small {
  display: block;

  color: var(--df-muted);

  font-size: 0.58rem;

  letter-spacing: 0.08em;
}


.df-swiper-hero-demo .df-demo-floating-card strong {
  display: block;

  color: var(--df-white);

  font-family: var(--df-font-head);

  font-size: 0.8rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

  .df-swiper-hero-demo {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .df-swiper-hero-demo .df-swiper-hero-content {
    max-width: 100%;

    padding-right: 0;
  }


  .df-swiper-hero-demo .df-swiper-hero-visual {
    width: 100%;

    padding-left: 0;

    justify-content: center;
  }


  .df-swiper-hero-demo .df-demo-browser {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    transform: none;
  }


  .df-swiper-hero-demo .df-demo-floating-card {
    right: 0;
    bottom: -20px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

  .df-swiper-hero-demo .df-demo-title {
    font-size: 2.45rem;

    line-height: 1.04;
  }


  .df-swiper-hero-demo .df-demo-actions {
    align-items: stretch;

    flex-direction: column;

    gap: 17px;
  }


  .df-swiper-hero-demo .df-demo-actions .df-btn {
    width: 100%;

    justify-content: center;
  }


  .df-swiper-hero-demo .df-demo-site-links {
    display: none;
  }


  .df-swiper-hero-demo .df-demo-site-hero {
    grid-template-columns: 1fr;

    min-height: auto;
  }


  .df-swiper-hero-demo .df-demo-site-copy {
    padding: 30px 21px;
  }


  .df-swiper-hero-demo .df-demo-site-image {
    display: none;
  }


  .df-swiper-hero-demo .df-demo-site-features {
    grid-template-columns: 1fr;
  }


  .df-swiper-hero-demo .df-demo-site-features > div {
    justify-content: flex-start;

    padding: 11px 16px;

    border-right: 0;
    border-bottom: 1px solid #e7edf5;
  }


  .df-swiper-hero-demo .df-demo-site-features > div:last-child {
    border-bottom: 0;
  }


  .df-swiper-hero-demo .df-demo-floating-card {
    position: relative;

    right: auto;
    bottom: auto;

    width: 100%;

    margin-top: 18px;
  }

}



/* =========================================================
   DEMO WEBSITE HERO
   Bootstrap 5 + Font Awesome 4
   ========================================================= */

.df-demo-page-hero {
  position: relative;
  width: 100%;
  padding: 78px 5% 44px;
  overflow: hidden;
  background: #08182f;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.df-demo-page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    radial-gradient(
      circle at 80% 40%,
      rgba(47,128,237,0.24),
      transparent 34%
    ),
    linear-gradient(
      rgba(74,171,234,0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(74,171,234,0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      135deg,
      #07152a 0%,
      #0d1d3a 55%,
      #081831 100%
    );

  background-size:
    auto,
    64px 64px,
    64px 64px,
    auto;
}

.df-demo-page-hero > .row,
.df-demo-page-bottom {
  position: relative;
  z-index: 2;
}


/* =========================================================
   LEFT COLUMN
   ========================================================= */

.df-demo-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 24px;
  padding: 9px 18px;

  border: 1px solid rgba(74,171,234,0.35);
  border-radius: 100px;

  background: rgba(47,128,237,0.12);

  color: var(--df-sky);

  font-family: var(--df-font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.df-demo-page-badge i {
  color: #ffffff;
}


/* Heading */

.df-demo-page-title {
  max-width: 650px;

  margin: 0 0 24px;

  color: var(--df-white);

  font-family: var(--df-font-head);
  font-size: clamp(2.9rem, 4.6vw, 5rem);
  font-weight: 800;

  line-height: 1.02;
  letter-spacing: -0.045em;
}

.df-demo-page-title span {
  display: block;

  background: linear-gradient(
    90deg,
    #2f80ed,
    #4aabea
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
}


/* Intro */

.df-demo-page-lead {
  max-width: 610px;

  margin: 0 0 30px;

  color: #d4e1f3;

  font-size: 1.08rem;
  line-height: 1.75;
}


/* Benefits */

.df-demo-page-points {
  display: grid;

  gap: 13px;

  margin-bottom: 30px;
}

.df-demo-page-point {
  display: flex;
  align-items: center;

  gap: 11px;

  color: var(--df-white);

  font-size: 0.98rem;
}

.df-demo-page-point i {
  flex: 0 0 auto;

  color: #3b9cff;

  font-size: 1rem;
}


/* Pricing */

.df-demo-page-price {
  margin-top: 6px;
}

.df-demo-page-price small {
  display: block;

  margin-bottom: 5px;

  color: var(--df-muted);

  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.df-demo-page-price-line {
  display: flex;
  align-items: flex-end;

  gap: 5px;
}

.df-demo-page-price-line strong {
  color: #ffffff;

  font-family: var(--df-font-head);

  font-size: 2.2rem;
  line-height: 1;
}

.df-demo-page-price-line span {
  margin-bottom: 3px;

  color: var(--df-text);

  font-size: 0.8rem;
}


/* Trust note */

.df-demo-page-note {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 22px;

  color: var(--df-muted);

  font-size: 0.82rem;
}

.df-demo-page-note i {
  color: var(--df-blue);
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.df-demo-page-visual {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;

  min-height: 560px;
}


/* Glow */

.df-demo-page-glow {
  position: absolute;

  width: 78%;
  height: 76%;

  left: 11%;
  top: 12%;

  background: rgba(47,128,237,0.25);

  border-radius: 50%;

  filter: blur(95px);

  pointer-events: none;
}


/* =========================================================
   BROWSER
   ========================================================= */

.df-demo-page-browser {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  max-width: 790px;

  min-width: 0;

  overflow: hidden;

  border: 1px solid rgba(91,168,255,0.55);
  border-radius: 19px;

  background: #f7f9fc;

  box-shadow:
    0 0 0 1px rgba(47,128,237,0.15),
    0 0 55px rgba(47,128,237,0.28),
    0 38px 85px rgba(0,0,0,0.48);

  transform:
    perspective(1450px)
    rotateY(-5deg)
    rotateX(1deg);

  transform-origin: center center;
}


/* Browser top */

.df-demo-page-browser-top {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 44px;

  padding: 0 15px;

  background:
    linear-gradient(
      180deg,
      #243a5d,
      #182b49
    );
}

.df-demo-page-dots {
  display: flex;
  align-items: center;

  gap: 8px;
}

.df-demo-page-dots span {
  display: block;

  width: 10px;
  height: 10px;

  border-radius: 50%;
}

.df-demo-page-dots span:nth-child(1) {
  background: #ff4e45;
}

.df-demo-page-dots span:nth-child(2) {
  background: #f1c84b;
}

.df-demo-page-dots span:nth-child(3) {
  background: #42c35a;
}


/* URL */

.df-demo-page-url {
  position: absolute;

  left: 50%;
  top: 8px;

  transform: translateX(-50%);

  width: 38%;

  padding: 5px 12px;

  overflow: hidden;

  border-radius: 8px;

  background: rgba(8,24,47,0.35);

  color: #edf5ff;

  font-size: 0.64rem;

  text-align: center;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.df-demo-page-url i {
  margin-right: 6px;

  font-size: 0.55rem;
}


/* =========================================================
   WEBSITE MOCKUP
   ========================================================= */

.df-demo-page-browser-body {
  width: 100%;

  background: #ffffff;
}


/* Nav */

.df-demo-page-site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;

  min-height: 60px;

  padding: 0 27px;

  background: #ffffff;
}

.df-demo-page-site-logo {
  color: #132847;

  font-family: var(--df-font-head);

  font-size: 0.7rem;
  font-weight: 800;
}

.df-demo-page-site-links {
  display: flex;

  gap: 24px;

  color: #344b69;

  font-size: 0.58rem;
}


/* Website hero */

.df-demo-page-site-hero {
  display: grid;

  grid-template-columns: 0.95fr 1.05fr;

  min-height: 340px;

  background:
    linear-gradient(
      135deg,
      #f6faff 0%,
      #dcecff 100%
    );
}


/* Website copy */

.df-demo-page-site-copy {
  min-width: 0;

  padding: 55px 34px;
}

.df-demo-page-site-copy small {
  display: block;

  margin-bottom: 15px;

  color: #176fea;

  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.df-demo-page-site-copy h2 {
  margin: 0 0 16px;

  color: #142944;

  font-family: var(--df-font-head);

  font-size: clamp(1.8rem, 2.4vw, 2.75rem);

  line-height: 1.02;
}

.df-demo-page-site-copy h2 span {
  color: var(--df-blue);
}

.df-demo-page-site-copy p {
  max-width: 290px;

  margin: 0;

  color: #455b78;

  font-size: 0.7rem;

  line-height: 1.6;
}

.df-demo-page-fake-btn {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  margin-top: 20px;

  padding: 9px 16px;

  border-radius: 6px;

  background: var(--df-blue);

  color: #ffffff;

  font-size: 0.58rem;
  font-weight: 700;
}


/* Graphic */

.df-demo-page-site-photo {
  position: relative;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  min-width: 0;

  overflow: hidden;

  background:
    linear-gradient(
      150deg,
      #e5f1ff,
      #7eb6ee
    );
}

.df-demo-page-building {
  display: flex;
  align-items: flex-end;
  justify-content: center;

  width: 100%;
  height: 100%;

  color: #144b8a;

  font-size: 12rem;

  opacity: 0.9;
}


/* =========================================================
   WEBSITE BENEFITS
   ========================================================= */

.df-demo-page-site-benefits {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  padding: 16px 10px;

  background: #ffffff;
}

.df-demo-page-site-benefits > div {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;
  min-height: 98px;

  padding: 9px 16px;

  border-right: 1px solid #e2e9f1;

  text-align: center;
}

.df-demo-page-site-benefits > div:last-child {
  border-right: 0;
}

.df-demo-page-site-benefits i {
  margin-bottom: 8px;

  color: var(--df-blue);

  font-size: 1.55rem;
}

.df-demo-page-site-benefits strong {
  color: #172944;

  font-size: 0.63rem;
}

.df-demo-page-site-benefits span {
  display: block;

  margin-top: 4px;

  color: #6e7d90;

  font-size: 0.52rem;

  line-height: 1.4;
}


/* =========================================================
   SEE IT FIRST CALLOUT
   ========================================================= */

.df-demo-page-callout {
  position: absolute;
  z-index: 4;

  right: -8px;
  bottom: 15px;

  display: flex;
  align-items: center;

  gap: 13px;

  min-width: 210px;

  padding: 17px 20px;

  border: 1px solid rgba(74,171,234,0.55);
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(13,29,58,0.98),
      rgba(23,58,112,0.98)
    );

  box-shadow:
    0 20px 45px rgba(0,0,0,0.45),
    0 0 30px rgba(47,128,237,0.25);
}

.df-demo-page-callout-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: var(--df-blue);

  color: #ffffff;
}

.df-demo-page-callout-text {
  min-width: 0;
}

.df-demo-page-callout strong {
  display: block;

  color: #ffffff;

  font-family: var(--df-font-head);

  font-size: 0.9rem;

  line-height: 1.25;
}

.df-demo-page-callout span {
  display: block;

  margin-top: 2px;

  color: #d5e4f8;

  font-size: 0.82rem;

  line-height: 1.3;
}


/* =========================================================
   BOTTOM BENEFIT BAR
   ========================================================= */

.df-demo-page-bottom {
  display: grid;

  grid-template-columns: repeat(4,1fr);

  margin-top: 45px;

  overflow: hidden;

  border: 1px solid rgba(74,171,234,0.2);
  border-radius: 12px;

  background: rgba(10,32,63,0.78);
}

.df-demo-page-bottom-item {
  position: relative;

  display: flex;
  align-items: center;

  gap: 14px;

  min-width: 0;

  padding: 22px 30px;
}

.df-demo-page-bottom-item + .df-demo-page-bottom-item::before {
  content: '';

  position: absolute;

  left: 0;
  top: 20%;

  width: 1px;
  height: 60%;

  background: rgba(74,171,234,0.22);
}

.df-demo-page-bottom-item > i {
  flex: 0 0 auto;

  color: var(--df-blue);

  font-size: 2rem;
}

.df-demo-page-bottom-item strong {
  display: block;

  color: #ffffff;

  font-family: var(--df-font-head);

  font-size: 0.92rem;
}

.df-demo-page-bottom-item span {
  display: block;

  margin-top: 2px;

  color: #a9bdd8;

  font-size: 0.75rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

  .df-demo-page-hero {
    padding: 62px 5% 40px;
  }

  .df-demo-page-hero > .row {
    align-items: stretch !important;
  }

  .df-demo-page-title {
    max-width: 780px;
  }

  .df-demo-page-visual {
    display: block;

    width: 100%;
    min-height: auto;

    margin-top: 25px;
  }

  .df-demo-page-browser {
    width: 100%;
    max-width: 800px;

    margin: 0 auto;

    transform: none;
  }

  .df-demo-page-glow {
    width: 70%;
    height: 70%;

    left: 15%;
    top: 15%;
  }

  .df-demo-page-callout {
    position: relative;

    right: auto;
    left: auto;
    top: auto;
    bottom: auto;

    width: fit-content;
    max-width: 320px;

    margin: 20px 0 0 auto;

    transform: none;
  }

  .df-demo-page-bottom {
    grid-template-columns: repeat(2,1fr);
  }

  .df-demo-page-bottom-item:nth-child(3)::before {
    display: none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

  .df-demo-page-hero {
    padding: 50px 18px 34px;
  }

  .df-demo-page-title {
    font-size: 2.5rem;

    line-height: 1.04;
  }

  .df-demo-page-lead {
    font-size: 1rem;

    line-height: 1.65;
  }

  .df-demo-page-point {
    align-items: flex-start;

    font-size: 0.93rem;
  }


  /* RIGHT VISUAL */

  .df-demo-page-visual {
    display: block;

    width: 100%;
    min-height: 0;

    margin-top: 20px;
  }


  /* Browser takes full available width */

  .df-demo-page-browser {
    width: 100%;
    max-width: 100%;

    margin: 0;

    border-radius: 13px;

    transform: none;
  }


  /* Browser top */

  .df-demo-page-browser-top {
    min-height: 38px;

    padding: 0 10px;
  }

  .df-demo-page-dots {
    gap: 5px;
  }

  .df-demo-page-dots span {
    width: 8px;
    height: 8px;
  }

  .df-demo-page-url {
    top: 7px;

    width: 52%;

    padding: 4px 7px;

    font-size: 0.5rem;
  }


  /* Mock site navbar */

  .df-demo-page-site-nav {
    min-height: 50px;

    padding: 0 16px;
  }

  .df-demo-page-site-logo {
    font-size: 0.62rem;
  }

  .df-demo-page-site-links {
    display: none;
  }


  /* Mock site hero */

  .df-demo-page-site-hero {
    display: block;

    min-height: 0;
  }

  .df-demo-page-site-copy {
    width: 100%;

    padding: 32px 22px;
  }

  .df-demo-page-site-copy h2 {
    font-size: 1.7rem;

    line-height: 1.07;
  }

  .df-demo-page-site-copy p {
    max-width: none;

    font-size: 0.66rem;
  }

  .df-demo-page-site-photo {
    display: none;
  }


  /* Feature grid */

  .df-demo-page-site-benefits {
    grid-template-columns: repeat(2,1fr);

    padding: 0;
  }

  .df-demo-page-site-benefits > div {
    min-height: 125px;

    padding: 16px 10px;

    border-right: 1px solid #e2e9f1;
    border-bottom: 1px solid #e2e9f1;
  }

  .df-demo-page-site-benefits > div:nth-child(2n) {
    border-right: 0;
  }

  .df-demo-page-site-benefits > div:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .df-demo-page-site-benefits i {
    font-size: 1.35rem;
  }

  .df-demo-page-site-benefits strong {
    font-size: 0.62rem;
  }

  .df-demo-page-site-benefits span {
    max-width: 110px;

    font-size: 0.5rem;
  }


  /* SEE IT FIRST
     Important: normal document flow on mobile */

  .df-demo-page-callout {
    position: relative !important;

    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;

    display: flex;

    width: 100% !important;
    max-width: 100%;

    min-width: 0;

    margin: 16px 0 0 !important;

    padding: 14px 16px;

    transform: none !important;
  }

  .df-demo-page-callout-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;
  }

  .df-demo-page-callout-text {
    flex: 1;

    min-width: 0;
  }

  .df-demo-page-callout strong {
    font-size: 0.82rem;

    white-space: normal;
  }

  .df-demo-page-callout span {
    font-size: 0.74rem;

    white-space: normal;
  }


  /* Bottom bar */

  .df-demo-page-bottom {
    grid-template-columns: 1fr;

    margin-top: 30px;
  }

  .df-demo-page-bottom-item {
    padding: 18px 20px;
  }

  .df-demo-page-bottom-item + .df-demo-page-bottom-item::before {
    top: 0;
    left: 7%;

    width: 86%;
    height: 1px;
  }

  .df-demo-page-bottom-item > i {
    font-size: 1.7rem;
  }

}






/* =========================================================
   HOW IT WORKS
   dotFRONT Brand Style
   Bootstrap 5 + Font Awesome 4
   ========================================================= */

.df-process-wrap {
  position: relative;

  padding: 85px 5%;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(47,128,237,0.10),
      transparent 38%
    ),
    var(--df-navy);
}


/* HEADING */

.df-process-heading {
  max-width: 720px;

  margin: 0 auto 52px;

  text-align: center;
}

.df-process-label {
  margin-bottom: 12px;

  color: var(--df-sky);

  font-family: var(--df-font-head);
  font-size: 0.76rem;
  font-weight: 700;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.df-process-heading h2 {
  margin: 0 0 16px;

  color: var(--df-white);

  font-family: var(--df-font-head);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 800;

  line-height: 1.05;
  letter-spacing: -0.035em;
}

.df-process-heading h2 span {
  color: var(--df-blue);
}

.df-process-heading p {
  margin: 0;

  color: var(--df-muted);

  font-size: 1rem;
  line-height: 1.7;
}


/* CARD */

.df-process-card {
  position: relative;

  height: 100%;
  min-height: 325px;

  padding: 32px 28px;

  overflow: hidden;

  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(18,35,68,0.95),
      rgba(13,29,58,0.95)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,0.18);

  transition: var(--df-transition);
}

.df-process-card:hover {
  transform: translateY(-5px);

  border-color: rgba(74,171,234,0.4);

  box-shadow:
    0 24px 55px rgba(0,0,0,0.25),
    var(--df-glow);
}


/* STEP NUMBER */

.df-process-step {
  position: absolute;

  top: 20px;
  right: 22px;

  color: rgba(74,171,234,0.12);

  font-family: var(--df-font-head);
  font-size: 3.6rem;
  font-weight: 800;

  line-height: 1;
}


/* ICON */

.df-process-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  margin-bottom: 24px;

  border: 1px solid rgba(74,171,234,0.3);
  border-radius: 14px;

  background: rgba(47,128,237,0.12);

  color: var(--df-sky);

  font-size: 1.35rem;
}


/* TEXT */

.df-process-card h3 {
  position: relative;

  margin: 0 0 14px;

  color: var(--df-white);

  font-family: var(--df-font-head);
  font-size: 1.2rem;
  font-weight: 700;

  line-height: 1.3;
}

.df-process-card p {
  position: relative;

  margin: 0;

  color: var(--df-text);

  font-size: 0.92rem;
  line-height: 1.7;
}

.df-process-card p strong {
  color: var(--df-sky);

  font-weight: 700;
}


/* FEATURED LAST CARD */

.df-process-card-featured {
  border-color: rgba(47,128,237,0.42);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(47,128,237,0.17),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      rgba(18,35,68,0.98),
      rgba(13,29,58,0.98)
    );
}

.df-process-card-featured .df-process-icon {
  background: var(--df-blue);

  color: #ffffff;

  box-shadow: var(--df-glow);
}


/* CONNECTOR LINE - DESKTOP */

@media (min-width: 1200px) {

  .df-process-wrap .row {
    position: relative;
  }

  .df-process-wrap .row::before {
    content: '';

    position: absolute;

    left: 12.5%;
    right: 12.5%;
    top: 59px;

    height: 1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(74,171,234,0.22),
        rgba(74,171,234,0.22),
        transparent
      );

    z-index: 0;
  }

  .df-process-wrap .col-xl-3 {
    position: relative;

    z-index: 1;
  }

}


/* TABLET */

@media (max-width: 991.98px) {

  .df-process-wrap {
    padding: 70px 5%;
  }

}


/* MOBILE */

@media (max-width: 575.98px) {

  .df-process-wrap {
    padding: 58px 18px;
  }

  .df-process-heading {
    margin-bottom: 38px;
  }

  .df-process-heading h2 {
    font-size: 2.35rem;
  }

  .df-process-card {
    min-height: 0;

    padding: 28px 24px;
  }

  .df-process-step {
    font-size: 3rem;
  }

}

/* =========================================================
    WHY DOTFRONT    */

.df-why-wrap {
  position: relative;

  padding: 90px 5%;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(47,128,237,0.12),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      var(--df-navy) 0%,
      #09182f 100%
    );
}


/*   cta   demo page  */
 
.df-final-cta {
  position: relative;
  overflow: hidden;
  padding: 85px 5%;
  background: var(--df-navy);
  text-align: center;
}

.df-final-cta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(47,128,237,0.22),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      rgba(18,35,68,0.92),
      rgba(8,18,38,0.98)
    );
  z-index: 0;
}

.df-final-cta-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.df-final-cta-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}