/*
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:;*/ }


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

  .lp-wrap {
    padding: 50px 20px;
    background: #f5f7fa;
  }

  .lp-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    margin-bottom: 30px;
  }

  .lp-hero {
    background: linear-gradient(135deg, #0f2742, #1f4e79);
    color: #ffffff;
  }

  .lp-eyebrow {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 700;
    color: #ffc107;
    margin-bottom: 10px;
  }

  .lp-title {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 20px;
  }

  .lp-text {
    font-size: 17px;
    line-height: 1.7;
    color: #555;
  }

  .lp-hero .lp-text {
    color: #e8eef5;
  }

  .lp-heading {
    font-size: 28px;
    font-weight: 700;
    color: #0f2742;
    margin-bottom: 20px;
  }

  .lp-list {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
  }

  .lp-list li {
    margin-bottom: 12px;
    font-size: 16px;
    color: #555;
  }

  .lp-list i {
    color: #1f8f4d;
    margin-right: 10px;
  }

  .lp-service-box {
    background: #f8fafc;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    padding: 25px;
    height: 100%;
  }

  .lp-service-box i {
    font-size: 34px;
    color: #1f4e79;
    margin-bottom: 15px;
  }

  .lp-service-box h3 {
    font-size: 20px;
    color: #0f2742;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .lp-cta {
    background: #0f2742;
    color: #ffffff;
    text-align: center;
  }

  .lp-cta h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 15px;
  }

  .lp-cta p {
    color: #e8eef5;
    font-size: 17px;
    margin-bottom: 25px;
  }

  .lp-btn {
    display: inline-block;
    background: #ffc107;
    color: #0f2742;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
  }

  .lp-btn:hover {
    color: #0f2742;
    text-decoration: none;
    background: #ffcf3f;
  }





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


/* ============================================
   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);
}

/* --- 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;
  }

}