/* ==========================================================================
   vishnufy.com — homepage design layer
   --------------------------------------------------------------------------
   READ THIS BEFORE CHANGING COLOURS.

   Elementor kept the homepage's entire visual design in one generated
   stylesheet, post-119.css, served through LiteSpeed's combined bundle.
   Both are gone: the bundle 404s, the generated file 404s, and neither was
   ever archived. 142 elements on the homepage were left with no styling of
   any kind. The Astra theme settings and the Elementor kit that did survive
   both turned out to be stock defaults, so they carried no identity either.

   What survived, and what this file is built from:
     - the logo mark, whose gold-on-teal is the only real brand colour left
     - data-settings on every section, which still records which sections had
       a background, which had wave dividers, and which animated
     - wp-custom-css, whose white-bordered transparent form fields prove the
       contact section had a dark background
     - the content and the DOM, both untouched

   So this is a reconstruction, not a recovery. It is faithful to the
   evidence above and to nothing else.

   Sections
     1  Palette
     2  Astra header grid
     3  Astra social icons
     4  Elementor structure
     5  Wave dividers
     6  Icons that needed a font
     7  Section-by-section design
     8  Cards
     9  Responsive
   ========================================================================== */

/* --------------------------------------------------------- 1  Palette - */
:root {
  --d-deep: #12292e;
  --d-teal-dk: #1a363c;
  --d-teal: #2d525a;
  --d-teal-lt: #4a747e;
  --d-gold: #d6a858;
  --d-gold-dk: #8a6317;
  --d-cream: #f7f3eb;
  --d-cream-2: #efe8db;
  --d-ink: #22303a;
  --d-ink-soft: #4a5a66;
  --d-line: #e2e6ea;
  --d-on-dark: #eef3f4;
  --d-on-dark-soft: #c3d1d4;      /* 8.6:1 on --d-teal-dk */
  --d-radius: 14px;
  --d-shadow: 0 2px 4px rgba(18, 41, 46, .05), 0 14px 34px rgba(18, 41, 46, .09);
  --d-shadow-lg: 0 6px 14px rgba(18, 41, 46, .08), 0 26px 60px rgba(18, 41, 46, .14);
}

body {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--d-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--d-teal-dk);
  letter-spacing: -.01em;
}

/* ----------------------------------------------- 2  Astra header grid -
   Astra 4.x builds its header with a flex grid whose stylesheet was in the
   part of main.min.css that was never archived. Without it the header
   collapses into a single narrow column, which is what the live site shows.

   Two settings did survive, in the body class and the inline theme CSS:
     ast-theme-transparent-header     the bar sits over the hero, not above it
     .main-header-menu .menu-link { color:#ffffff }   with white links
   and a 225px line-height on the menu items, which is Astra's way of
   recording the configured header height. All three are honoured here.
   That the header was transparent and its links white is also why the wide
   logo has been rebuilt light: a dark one could never have been legible. */
.ast-primary-header-bar { background: #fff; }
.ast-full-width-primary-header .ast-primary-header-bar > .ast-container { max-width: 1360px; }

.ast-theme-transparent-header .ast-main-header-wrap {
  position: absolute; inset-inline: 0; top: 0;
  background: transparent;
  border-bottom: 0;
  z-index: 600;
}
.ast-theme-transparent-header .ast-primary-header-bar { background: transparent; }
.ast-theme-transparent-header .main-header-menu .menu-link { color: #fff; }
.ast-theme-transparent-header .main-header-menu > li > a:hover,
.ast-theme-transparent-header .main-header-menu > li > a:focus-visible {
  color: var(--d-gold); background: rgba(255, 255, 255, .10);
}
.ast-theme-transparent-header .main-header-menu > li.current-menu-item > a {
  color: #fff; background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 -2px 0 var(--d-gold);
}
.ast-theme-transparent-header .header-social-item .ast-builder-social-element {
  background: rgba(255, 255, 255, .12); color: #fff;
}
.ast-theme-transparent-header .header-social-item a:hover .ast-builder-social-element {
  background: var(--d-gold); color: var(--d-deep);
}

/* Astra's own header-height setting, kept but made to scale down */
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item { line-height: 1.2 !important; }
.ast-theme-transparent-header .ast-builder-grid-row { min-height: clamp(84px, 13vw, 170px); }

/* once the page scrolls the bar becomes solid so the links stay legible */
.ast-theme-transparent-header .ast-main-header-wrap.vf-stuck {
  position: fixed;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
          backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--d-line);
  box-shadow: var(--d-shadow);
  animation: vf-drop .28s ease both;
}
@keyframes vf-drop { from { transform: translateY(-100%); } to { transform: none; } }
.ast-theme-transparent-header .vf-stuck .ast-builder-grid-row { min-height: 72px; }
.ast-theme-transparent-header .vf-stuck .main-header-menu .menu-link { color: var(--d-ink); }
.ast-theme-transparent-header .vf-stuck .main-header-menu > li > a:hover { background: var(--d-cream); color: var(--d-teal-dk); }
.ast-theme-transparent-header .vf-stuck .header-social-item .ast-builder-social-element {
  background: var(--d-cream-2); color: var(--d-teal-dk);
}
/* the light wordmark is unreadable on the white bar, so swap in the dark one */
.ast-theme-transparent-header .vf-stuck .custom-logo {
  content: url("/assets/img/vishnufy-logo1-dark-300x100.webp");
}
@media (prefers-reduced-motion: reduce) {
  .ast-theme-transparent-header .ast-main-header-wrap.vf-stuck { animation: none; }
}

/* interior pages have no transparent header, so they need the dark logo */
body:not(.ast-theme-transparent-header) .custom-logo {
  content: url("/assets/img/vishnufy-logo1-dark-300x100.webp");
}
.site-primary-header-wrap.ast-container,
.ast-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.ast-builder-grid-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 74px;
}
.ast-builder-grid-row-has-sides.ast-builder-grid-row-no-center {
  justify-content: space-between;
}
.site-header-section { display: flex; align-items: center; gap: 1rem; }
.site-header-section-left { margin-inline-end: auto; }
.ast-grid-right-section { margin-inline-start: auto; justify-content: flex-end; }
.ast-flex { display: flex; align-items: center; }
.ast-inline-flex { display: inline-flex; align-items: center; }
.ast-builder-layout-element { display: flex; align-items: center; }
.site-branding { display: flex; align-items: center; }
.ast-main-header-wrap { border-bottom: 1px solid var(--d-line); }

/* Astra's mobile header duplicates the whole bar; only one may show */
#ast-mobile-header { display: none; }
@media (max-width: 921px) {
  #ast-desktop-header { display: none; }
  #ast-mobile-header { display: block; }
}

/* ------------------------------------------------ 3  Astra social icons */
.ast-builder-social-element,
.header-social-item, .element-social-inner-wrap { display: flex; align-items: center; gap: .4rem; }
.ahfb-svg-iconset { display: inline-flex; align-items: center; }
.ahfb-svg-iconset svg { width: 1em; height: 1em; fill: currentColor; }
.svg-baseline { vertical-align: -.125em; }

.ast-social-element-style-filled .ast-builder-social-element,
.header-social-item .ast-builder-social-element {
  width: 34px; height: 34px;
  border-radius: 50%;
  justify-content: center;
  background: var(--d-cream-2);
  color: var(--d-teal-dk);
  font-size: 15px;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.header-social-item a:hover .ast-builder-social-element,
.header-social-item a:focus-visible .ast-builder-social-element {
  background: var(--d-teal-dk); color: var(--d-gold); transform: translateY(-2px);
}
.ast-linkedin:hover  { color: #0a66c2 !important; }
.ast-instagram:hover { color: #d62976 !important; }
.ast-whatsapp:hover  { color: #25d366 !important; }

/* ------------------------------------------------ 4  Elementor structure */
/* Astra's "page builder" template hands the whole width to the builder.
   That rule lived in the unarchived part of main.min.css, so without it the
   full-width hero was being squeezed into the 1140px content column. */
.ast-page-builder-template .site-content > .ast-container,
.ast-page-builder-template #content > .ast-container,
.ast-page-builder-template .entry-content,
.ast-page-builder-template .site-content .ast-container {
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}
.ast-page-builder-template .entry-content { margin-bottom: 0; }
.ast-page-builder-template .site-content article { padding: 0; border: 0; }
.ast-page-builder-template #primary {
  margin: 0; padding: 0;
  /* .ast-container is a flex row, so #primary was sizing itself to the
     1140px max-content of the Elementor sections inside it */
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.elementor-section { position: relative; }
.elementor-section-boxed > .elementor-container {
  max-width: 1200px; margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.elementor-section-full_width > .elementor-container { max-width: none; }
.elementor-container {
  display: flex; gap: 0;
  width: 100%;
  /* full-width sections still need a gutter, or the text touches the edge */
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.elementor-section-full_width > .elementor-container {
  max-width: 1360px; margin-inline: auto;
}
.elementor-section-items-middle > .elementor-container { align-items: center; }
.elementor-column { display: flex; position: relative; min-width: 0; }
.elementor-widget-wrap { display: flex; flex-wrap: wrap; align-content: flex-start; width: 100%; }
.elementor-widget { width: 100%; }
.elementor-widget:not(:last-child) { margin-block-end: 21px; }
.elementor-background-overlay { position: absolute; inset: 0; pointer-events: none; }
.elementor-section-height-min-height > .elementor-container { min-height: 78vh; }

.elementor-col-100 { width: 100%; }
.elementor-col-50  { width: 50%; }
.elementor-col-33  { width: 33.333%; }
.elementor-col-25  { width: 25%; }
.elementor-col-16  { width: 16.666%; }
.elementor-col-66  { width: 66.666%; }

/* icon "views" */
.elementor-view-stacked .elementor-icon {
  background: var(--d-teal-dk); color: #fff; padding: .6em;
}
.elementor-view-framed .elementor-icon {
  border: 3px solid currentColor; padding: .5em; color: var(--d-teal-dk);
}
.elementor-shape-circle .elementor-icon { border-radius: 50%; }
.elementor-shape-square .elementor-icon { border-radius: 6px; }
.elementor-icon-wrapper { display: flex; }
.elementor-widget-icon { text-align: center; }
.elementor-widget-icon .elementor-icon-wrapper { justify-content: center; }
.elementor-animation-shrink { transition: transform .25s ease; }
.elementor-animation-shrink:hover { transform: scale(.92); }

/* ---------------------------------------------------- 5  Wave dividers -
   Elementor ships these as inline SVG whose fill comes from CSS. With no
   CSS the browser falls back to black, which is why the live page shows
   four solid black bands. Each fill is set to the neighbouring section so
   the wave reads as that section's soft edge. */
.elementor-shape {
  position: absolute; left: 0; width: 100%;
  overflow: hidden; line-height: 0; direction: ltr; pointer-events: none;
  z-index: 1;
}
.elementor-shape-top    { top: -1px; }
.elementor-shape-bottom { bottom: -1px; transform: rotate(180deg); }
.elementor-shape svg {
  display: block; position: relative; left: 50%;
  width: calc(133% + 1.3px); height: 46px;
  transform: translateX(-50%);
}
.elementor-shape-fill { fill: #fff; }

/* ---------------------------------------- 6  Icons that needed a font -
   Twenty testimonial stars were <i class="fa fa-star">. Font Awesome was
   never archived, so they are drawn with a mask instead: they still take
   their size from font-size and their colour from currentColor. */
.fa, [class*=" fa-"], [class^="fa-"] {
  display: inline-block; width: 1em; height: 1em;
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  font-style: normal;
}
.fa-star, .fa-star-o {
  color: var(--d-gold);
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E");
}
.fa-star-o { opacity: .32; }
.e-font-icon-svg { width: 1em; height: 1em; fill: currentColor; }

/* --------------------------------------- 7  Section-by-section design - */

/* ---- 0  hero ---------------------------------------------------------- */
.elementor-element-10ead1c {
  background: radial-gradient(120% 90% at 78% 15%, #234148 0%, var(--d-deep) 62%);
  color: var(--d-on-dark);
  /* the transparent header sits on top of this section, so the top padding
     has to clear it */
  padding-block: clamp(7rem, 17vw, 12rem) clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.elementor-element-10ead1c::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 46% at 12% 88%, rgba(214, 168, 88, .16), transparent 70%),
    radial-gradient(38% 34% at 92% 8%,  rgba(214, 168, 88, .10), transparent 70%);
}
.elementor-element-10ead1c > .elementor-container { position: relative; z-index: 2; }
.elementor-element-10ead1c h1 {
  color: #fff;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.elementor-element-10ead1c h2,
.elementor-element-10ead1c h3 { color: var(--d-gold); }
.elementor-element-10ead1c p,
.elementor-element-10ead1c .elementor-text-editor { color: var(--d-on-dark-soft); font-size: 1.03rem; }
.elementor-element-10ead1c .elementor-icon { color: #fff; }
.elementor-element-10ead1c .elementor-view-stacked .elementor-icon {
  background: rgba(255, 255, 255, .12);
}
.elementor-element-10ead1c .elementor-view-stacked .elementor-icon:hover {
  background: var(--d-gold); color: var(--d-deep);
}
.elementor-element-10ead1c img { border-radius: var(--d-radius); }

/* ---- 1  about me ------------------------------------------------------ */
.elementor-element-ecae57b {
  background: var(--d-cream);
  padding-block: clamp(4rem, 9vw, 6.5rem);
}
.elementor-element-ecae57b > .elementor-shape-top .elementor-shape-fill { fill: var(--d-deep); }
.elementor-element-ecae57b > .elementor-shape-bottom .elementor-shape-fill { fill: #fff; }
.elementor-element-ecae57b img { border-radius: var(--d-radius); box-shadow: var(--d-shadow-lg); }
.elementor-element-ecae57b h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

/* ---- 2  my skills ----------------------------------------------------- */
.elementor-element-66f46a9 {
  background: #fff;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
.elementor-element-66f46a9 > .elementor-shape-bottom .elementor-shape-fill { fill: var(--d-teal); }

/* ---- 3  the call to action band --------------------------------------- */
.elementor-element-9d57d06 {
  background: linear-gradient(115deg, var(--d-teal) 0%, var(--d-teal-dk) 100%);
  color: var(--d-on-dark);
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
.elementor-element-9d57d06 h2, .elementor-element-9d57d06 h3 { color: #fff; }
.elementor-element-9d57d06 p { color: var(--d-on-dark-soft); }
.elementor-element-9d57d06 > .elementor-shape-bottom .elementor-shape-fill { fill: #fff; }
.elementor-element-9d57d06 .elementor-button {
  background: var(--d-gold); color: var(--d-deep);
  padding: .85rem 1.9rem; border-radius: 999px; font-weight: 700;
}
.elementor-element-9d57d06 .elementor-button:hover { background: #e8bd72; }

/* ---- 4  services ------------------------------------------------------ */
.elementor-element-50d9034e { background: #fff; padding-block: clamp(3.5rem, 8vw, 5.5rem); }

/* ---- 5  blogs --------------------------------------------------------- */
.elementor-element-96d03a2 { background: var(--d-cream); padding-block: clamp(3.5rem, 8vw, 5.5rem); }

/* ---- 6-8  testimonials ------------------------------------------------ */
.elementor-element-1e382eb5 { background: #fff; padding-block: clamp(3.5rem, 7vw, 4.5rem) 0; }
.elementor-element-537ed94d,
.elementor-element-6b92b79c { background: #fff; padding-block: 0 clamp(1.5rem, 4vw, 2.5rem); }

/* ---- 9  certifications ------------------------------------------------ */
.elementor-element-88162bf { background: var(--d-cream); padding-block: clamp(3.5rem, 8vw, 5.5rem); }

/* ---- 10  FAQ ---------------------------------------------------------- */
.elementor-element-725a0475 { background: #fff; padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.elementor-element-725a0475 .elementor-toggle { max-width: 860px; margin-inline: auto; }

/* ---- 11  contact ------------------------------------------------------ */
/* wp-custom-css styles these fields white-on-transparent, which only works
   on a dark ground. That is the evidence this section was dark. */
.elementor-element-b66af11 {
  background: linear-gradient(160deg, var(--d-teal-dk) 0%, var(--d-deep) 100%);
  color: var(--d-on-dark);
  padding-block: clamp(4rem, 9vw, 6rem);
}
.elementor-element-b66af11 > .elementor-shape-top .elementor-shape-fill { fill: #fff; }
.elementor-element-b66af11 h2,
.elementor-element-b66af11 h3,
.elementor-element-b66af11 h4 { color: #fff; }
.elementor-element-b66af11 p,
.elementor-element-b66af11 a { color: var(--d-on-dark-soft); }
.elementor-element-b66af11 a:hover { color: var(--d-gold); }
.elementor-element-b66af11 .elementor-icon { color: var(--d-gold); }
.elementor-element-b66af11 .elementor-view-stacked .elementor-icon {
  background: rgba(255, 255, 255, .1); color: var(--d-gold);
}
.elementor-element-b66af11 input[type="submit"] {
  border-radius: 999px; font-weight: 700; padding: .8rem 1.2rem;
  border: none; cursor: pointer;
}
.elementor-element-b66af11 input[type="submit"]:hover { background: var(--d-gold) !important; }

/* -------------------------------------------------------------- 8  Cards */
/* Service tiles, blog cards and testimonial cards were all "classic
   background" columns whose colour is gone. They become cards. */
.elementor-element-50d9034e .elementor-column .elementor-widget-wrap.elementor-element-populated,
.elementor-element-96d03a2 .elementor-column .elementor-widget-wrap.elementor-element-populated,
.elementor-element-537ed94d .elementor-column .elementor-widget-wrap.elementor-element-populated,
.elementor-element-6b92b79c .elementor-column .elementor-widget-wrap.elementor-element-populated {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  margin: .6rem;
  box-shadow: var(--d-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.elementor-element-50d9034e .elementor-column .elementor-widget-wrap.elementor-element-populated:hover,
.elementor-element-96d03a2 .elementor-column .elementor-widget-wrap.elementor-element-populated:hover {
  transform: translateY(-4px);
  border-color: var(--d-gold);
  box-shadow: var(--d-shadow-lg);
}
.elementor-element-96d03a2 .elementor-column .elementor-widget-wrap.elementor-element-populated { background: #fff; }
.elementor-element-96d03a2 img { border-radius: 10px; }

.elementor-element-537ed94d h3, .elementor-element-6b92b79c h3,
.elementor-element-537ed94d h2, .elementor-element-6b92b79c h2 {
  font-size: 1rem; font-weight: 500; line-height: 1.65;
  color: var(--d-ink-soft); letter-spacing: 0;
}
.elementor-element-537ed94d img, .elementor-element-6b92b79c img {
  border-radius: 50%; width: 72px; height: 72px; object-fit: cover;
  border: 2px solid var(--d-gold);
}

/* section headings get a gold rule */
.elementor-element-ecae57b > .elementor-container h2:first-of-type::after,
.elementor-element-50d9034e h2::after,
.elementor-element-96d03a2 h2::after,
.elementor-element-1e382eb5 h2::after,
.elementor-element-88162bf h2::after,
.elementor-element-725a0475 h4::after {
  content: ""; display: block;
  width: 52px; height: 3px; border-radius: 2px;
  background: var(--d-gold);
  margin-top: .7rem;
}
.elementor-element-1e382eb5 h2::after,
.elementor-element-88162bf h2::after,
.elementor-element-725a0475 h4::after { margin-inline: auto; }

/* the many repeated "Freelance Digital Marketer In Kottayam" sub-headings
   read as a kicker rather than a second title */
.elementor-widget-heading h3 a,
.elementor-widget-heading h2 a { text-decoration: none; }

/* ---------------------------------------------------------- 9  Responsive */
@media (max-width: 1024px) {
  .elementor-col-33 { width: 50%; }
  .elementor-section-height-min-height > .elementor-container { min-height: 0; }
}
@media (max-width: 767px) {
  .elementor-container { flex-wrap: wrap; }
  .elementor-col-50, .elementor-col-33, .elementor-col-25, .elementor-col-66 { width: 100%; }
  .elementor-shape svg { height: 30px; }
  .elementor-element-10ead1c { padding-block: 2.5rem 3.5rem; }
  .elementor-element-10ead1c h1 { font-size: clamp(1.75rem, 8vw, 2.3rem); }
}

/* ==========================================================================
   10  Second pass — the things that only showed up once it rendered
   ========================================================================== */

/* ---- cards must not nest ------------------------------------------------
   The card treatment was landing on every .elementor-widget-wrap, including
   the section's own outer column and the little boxes around each
   testimonial's avatar. Only a section's direct child columns are cards. */
.elementor-element-50d9034e > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-96d03a2  > .elementor-container > .elementor-column > .elementor-widget-wrap {
  background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
}
.elementor-element-50d9034e .elementor-inner-column > .elementor-widget-wrap.elementor-element-populated,
.elementor-element-96d03a2  .elementor-inner-column > .elementor-widget-wrap.elementor-element-populated {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  padding: clamp(1.25rem, 2.4vw, 1.8rem);
  margin: .55rem;
  box-shadow: var(--d-shadow);
  height: 100%;
}
.elementor-element-537ed94d .elementor-inner-column > .elementor-widget-wrap.elementor-element-populated,
.elementor-element-6b92b79c .elementor-inner-column > .elementor-widget-wrap.elementor-element-populated {
  background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
}
/* a testimonial card is the top-level column, not the boxes inside it */
.elementor-element-537ed94d > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-6b92b79c > .elementor-container > .elementor-column > .elementor-widget-wrap {
  background: var(--d-cream);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  margin: .6rem;
  box-shadow: var(--d-shadow);
}
.elementor-element-50d9034e .elementor-container .elementor-container,
.elementor-element-96d03a2 .elementor-container .elementor-container,
.elementor-element-537ed94d .elementor-container .elementor-container,
.elementor-element-6b92b79c .elementor-container .elementor-container { padding-inline: 0; }

/* the attribution line: avatar, then name and role beside it */
.elementor-element-537ed94d .elementor-inner-column,
.elementor-element-6b92b79c .elementor-inner-column { align-items: center; }
.elementor-element-537ed94d .elementor-widget-image,
.elementor-element-6b92b79c .elementor-widget-image { margin-block-end: 0; }
.elementor-element-537ed94d .elementor-widget-heading,
.elementor-element-6b92b79c .elementor-widget-heading { margin-block-end: .1rem; }
.elementor-element-537ed94d .elementor-widget-heading h2,
.elementor-element-6b92b79c .elementor-widget-heading h2 {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--d-gold-dk);
}
.elementor-element-537ed94d .elementor-widget-heading h3 a,
.elementor-element-6b92b79c .elementor-widget-heading h3 a {
  font-size: .98rem; font-weight: 700; color: var(--d-teal-dk); text-decoration: none;
}

/* ---- buttons ----------------------------------------------------------- */
.elementor-button, .uc_more_btn, .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .72rem 1.5rem;
  border-radius: 999px;
  font: 600 .84rem/1 "Montserrat", sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid var(--d-teal-dk);
  background: var(--d-teal-dk);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.elementor-button:hover, .uc_more_btn:hover, .wpcf7-submit:hover {
  background: var(--d-gold); border-color: var(--d-gold);
  color: var(--d-deep); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 41, 46, .18);
}
.uc_more_btn {
  background: none; color: var(--d-teal-dk);
  border-color: var(--d-line); padding: .55rem 1.15rem; font-size: .78rem;
}
.btn_wrap { margin-top: .9rem; }

/* ---- FAQ --------------------------------------------------------------- */
.elementor-toggle .elementor-tab-title { border-bottom: 1px solid var(--d-line); }
.elementor-toggle .elementor-toggle-title,
.elementor-toggle .elementor-tab-title a {
  font-size: 1rem; font-weight: 600; color: var(--d-teal-dk);
  text-decoration: none;
}
.elementor-toggle .elementor-tab-title:hover .elementor-toggle-title { color: var(--d-gold-dk); }
.elementor-toggle .elementor-toggle-icon { color: var(--d-gold-dk); font-size: .85rem; }
.elementor-toggle .elementor-tab-content {
  color: var(--d-ink-soft); font-size: .95rem; line-height: 1.7;
}

/* ---- the repeated sub-heading reads as a kicker, not a second title ----- */
.elementor-widget-heading h3 a { color: var(--d-teal); text-decoration: none; }
.elementor-widget-heading h3 a:hover { color: var(--d-gold-dk); }

/* ---- text contrast ----------------------------------------------------- */
.elementor-widget-text-editor,
.elementor-text-editor,
.elementor-image-box-description,
.elementor-icon-box-description { color: var(--d-ink-soft); line-height: 1.75; }
.elementor-element-50d9034e .elementor-image-box-description { font-size: .92rem; }

/* ---- skill bars -------------------------------------------------------- */
.elementor-progress-wrapper { margin-block: .55rem 1.1rem; height: 26px; border-radius: 999px; }
.elementor-progress-bar {
  background: linear-gradient(90deg, var(--d-teal) 0%, var(--d-teal-lt) 100%);
  min-height: 26px; padding-inline: .9rem;
  justify-content: flex-start;
}
.elementor-progress-text {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: #fff; white-space: nowrap;
}

/* ---- certifications carousel breathing room ---------------------------- */
.elementor-element-88162bf .elementor-swiper { padding-inline: 26px; }
.elementor-element-88162bf .elementor-swiper-button-prev { left: -6px; }
.elementor-element-88162bf .elementor-swiper-button-next { right: -6px; }

/* ---- contact ----------------------------------------------------------- */
.elementor-element-b66af11 .elementor-icon-box-title,
.elementor-element-b66af11 .elementor-image-box-title { color: #fff; }
.elementor-element-b66af11 .wpcf7-submit { background: #fff; color: var(--d-deep); border-color: #fff; }
.elementor-element-b66af11 .vf-form-note {
  background: rgba(255, 255, 255, .07);
  border-left-color: var(--d-gold);
  color: var(--d-on-dark-soft);
  max-width: 80%;
}
.elementor-element-b66af11 .vf-form-note a { color: var(--d-gold); }
.elementor-element-b66af11 .elementor-custom-embed iframe { min-height: 260px; border-radius: 10px; }

/* ---- footer ------------------------------------------------------------ */
.site-footer, .ast-below-footer-wrap, .site-below-footer-wrap {
  background: var(--d-deep);
  color: var(--d-on-dark-soft);
}
.ast-footer-copyright { padding-block: 1.4rem; }
.ast-footer-copyright p { margin: 0; font-size: .84rem; color: var(--d-on-dark-soft); }
.ast-footer-copyright a { color: var(--d-gold); }
.site-below-footer-inner-wrap { justify-content: center; }

/* ---- hero proportions -------------------------------------------------- */
.elementor-element-10ead1c .elementor-widget-icon .elementor-icon {
  width: 62px; height: 62px; font-size: 24px;
}
.elementor-element-10ead1c .elementor-col-33 { display: flex; justify-content: center; }

/* ==========================================================================
   11  Third pass
   ========================================================================== */

/* ---- testimonials -------------------------------------------------------
   Three of the four quotes are marked up as <h3> and the fourth as <h2>, so
   the small-uppercase role treatment was catching that fourth quote and
   setting a whole paragraph in gold caps. Roles only ever live in an inner
   column; quotes never do. */
.elementor-element-537ed94d > .elementor-container > .elementor-column
  > .elementor-widget-wrap > .elementor-widget-heading h2,
.elementor-element-537ed94d > .elementor-container > .elementor-column
  > .elementor-widget-wrap > .elementor-widget-heading h3,
.elementor-element-6b92b79c > .elementor-container > .elementor-column
  > .elementor-widget-wrap > .elementor-widget-heading h2,
.elementor-element-6b92b79c > .elementor-container > .elementor-column
  > .elementor-widget-wrap > .elementor-widget-heading h3 {
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  text-transform: none;
  color: var(--d-ink-soft);
}
.elementor-element-537ed94d .elementor-inner-column .elementor-widget-heading h2,
.elementor-element-6b92b79c .elementor-inner-column .elementor-widget-heading h2 {
  font-size: .74rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--d-gold-dk); line-height: 1.5;
}
.elementor-element-537ed94d .elementor-inner-column .elementor-widget-heading h3 a,
.elementor-element-6b92b79c .elementor-inner-column .elementor-widget-heading h3 a {
  font-size: .98rem; font-weight: 700; color: var(--d-teal-dk); text-decoration: none;
}
/* quotation mark */
.elementor-element-537ed94d > .elementor-container > .elementor-column > .elementor-widget-wrap::before,
.elementor-element-6b92b79c > .elementor-container > .elementor-column > .elementor-widget-wrap::before {
  content: "\201C";
  font: 700 3rem/1 Georgia, serif;
  color: var(--d-gold);
  opacity: .5;
  display: block;
  margin-bottom: -.7rem;
}

/* ---- carousel arrows must sit outside the cards ------------------------ */
.elementor-element-88162bf .elementor-swiper { padding-inline: 52px; }
.elementor-element-88162bf .elementor-swiper-button-prev { left: 2px; }
.elementor-element-88162bf .elementor-swiper-button-next { right: 2px; }
@media (max-width: 767px) {
  .elementor-element-88162bf .elementor-swiper { padding-inline: 0; }
  .elementor-element-88162bf .elementor-swiper-button { display: none; }
}

/* ---- footer ------------------------------------------------------------
   Astra's own inline CSS paints the below-footer row pure black, which is
   the one colour nothing else on the page uses. */
.site-footer .site-below-footer-wrap,
.site-footer .ast-below-footer-wrap,
footer#colophon .site-below-footer-wrap {
  background-color: var(--d-deep) !important;
  background-image: none !important;
  border-top: 1px solid rgba(214, 168, 88, .22);
}
.site-footer .ast-footer-copyright p { color: var(--d-on-dark-soft); }
.site-footer .ast-footer-copyright a { color: var(--d-gold); text-decoration: none; }
.site-footer .ast-footer-copyright a:hover { text-decoration: underline; }
.site-footer .ast-footer-copyright span { color: inherit !important; }

/* ---- the page must end at the footer ----------------------------------- */
#page { min-height: 100vh; display: flex; flex-direction: column; }
#content { flex: 1 0 auto; }
.site-footer { flex: none; }

/* ==========================================================================
   12  The article page
   --------------------------------------------------------------------------
   /freelance-digital-marketer-in-kottayam/ was published on Elementor's
   Canvas template: no header, no footer, and a near-black background with
   white type. The background and the white type are recovered design and
   are kept. The header and footer are added, because a Canvas page leaves a
   reader who arrives from a search result with nowhere to go.
   ========================================================================== */

body.elementor-template-canvas {
  background: #070614;
  color: #e7ecef;
}
body.elementor-template-canvas .elementor-widget-text-editor,
body.elementor-template-canvas .elementor-text-editor,
body.elementor-template-canvas p {
  color: #d5dde1;
  font-size: 1.02rem;
  line-height: 1.85;
}
body.elementor-template-canvas h1,
body.elementor-template-canvas h2,
body.elementor-template-canvas h3,
body.elementor-template-canvas h4 { color: #fff; }
body.elementor-template-canvas .elementor-heading-title {
  text-decoration-color: rgba(214, 168, 88, .55);
  text-underline-offset: .28em;
  text-decoration-thickness: 2px;
}
body.elementor-template-canvas a { color: var(--d-gold); }
body.elementor-template-canvas a:hover { color: #f0cd8b; }

/* a comfortable measure — the copy was running the full width of the page */
body.elementor-template-canvas .elementor-section-boxed > .elementor-container {
  max-width: 860px;
}
body.elementor-template-canvas .elementor-widget-theme-post-content,
body.elementor-template-canvas .elementor-widget-text-editor { max-width: 78ch; }

body.elementor-template-canvas .elementor-widget-image img {
  border-radius: var(--d-radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

/* the header, on this page, sits on the dark ground rather than over a hero */
.vf-article-header {
  background: rgba(7, 6, 20, .92);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
          backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  position: sticky; top: 0; z-index: 600;
}
.vf-article-header .ast-main-header-wrap {
  position: static; background: transparent; border-bottom: 0;
}
.vf-article-header .ast-primary-header-bar { background: transparent; }
.vf-article-header .ast-builder-grid-row { min-height: 72px; }
.vf-article-header .main-header-menu .menu-link { color: #e7ecef; }
.vf-article-header .main-header-menu > li > a:hover,
.vf-article-header .main-header-menu > li > a:focus-visible {
  color: var(--d-gold); background: rgba(255, 255, 255, .09);
}
.vf-article-header .header-social-item .ast-builder-social-element {
  background: rgba(255, 255, 255, .12); color: #fff;
}
.vf-article-header .header-social-item a:hover .ast-builder-social-element {
  background: var(--d-gold); color: var(--d-deep);
}
/* the light wordmark is the right one here */
body.elementor-template-canvas .custom-logo { content: normal; }

body.elementor-template-canvas .site-footer .site-below-footer-wrap {
  background-color: #05040f !important;
}

@media (max-width: 921px) {
  .vf-article-header .main-header-bar-navigation.vf-nav-open {
    background: #0d0c1e;
    border-top-color: rgba(255, 255, 255, .12);
  }
  .vf-article-header .main-header-bar-navigation.vf-nav-open .main-header-menu > li > a {
    border-bottom-color: rgba(255, 255, 255, .10);
  }
  .vf-article-header .menu-toggle {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
  }
}

/* ==========================================================================
   13  /Blogs/ and the 404 page
   --------------------------------------------------------------------------
   Neither existed. "More Blogs" on the homepage has always pointed at
   /Blogs/, which returned Apache's default 404; so did every mistyped URL.
   Both are built from the homepage's own header and footer, and use the
   article page's dark ground so they sit in the same family.
   ========================================================================== */

body.vf-blogs, body.vf-404-page { background: #070614; color: #e7ecef; }

.vf-page { display: block; }
.vf-wrap {
  width: 100%; max-width: 1060px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.vf-hero-slim {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
  background:
    radial-gradient(60% 70% at 12% 0%, rgba(214, 168, 88, .13), transparent 70%),
    radial-gradient(50% 60% at 92% 10%, rgba(45, 82, 90, .35), transparent 70%);
}
.vf-hero-slim h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: .3rem 0 .7rem;
}
.vf-lede {
  color: #c3d1d4;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.7;
  max-width: 62ch;
  margin: 0;
}

.vf-crumbs { font-size: .8rem; color: #92a3a8; margin: 0; }
.vf-crumbs a { color: var(--d-gold); text-decoration: none; }
.vf-crumbs a:hover { text-decoration: underline; }
.vf-crumbs span { padding-inline: .35rem; }

.vf-section { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5rem); }

/* ---- the post list ----------------------------------------------------- */
.vf-posts { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
@media (min-width: 760px) { .vf-posts { grid-template-columns: repeat(2, 1fr); } }

.vf-post {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--d-radius);
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}
.vf-post:hover {
  transform: translateY(-3px);
  border-color: rgba(214, 168, 88, .5);
  background: rgba(255, 255, 255, .06);
}
.vf-post-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.vf-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-post-body { padding: clamp(1.1rem, 2.2vw, 1.5rem); display: flex; flex-direction: column; gap: .55rem; }
.vf-post-where {
  margin: 0;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--d-gold);
}
.vf-post-title { margin: 0; font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.35; }
.vf-post-title a { color: #fff; text-decoration: none; }
.vf-post-title a:hover { color: var(--d-gold); }
.vf-post-blurb { margin: 0; color: #c3d1d4; font-size: .94rem; line-height: 1.7; }
.vf-post-more { margin: .2rem 0 0; }
.vf-post-more a {
  color: var(--d-gold); text-decoration: none;
  font-size: .84rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .4rem;
}
.vf-post-more a::after {
  content: ""; width: .45em; height: .45em;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.vf-post-more a:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.vf-note {
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
  color: #92a3a8; font-size: .88rem; line-height: 1.7;
  border-left: 3px solid rgba(214, 168, 88, .55);
  padding-left: .9rem;
}
.vf-note a { color: var(--d-gold); }

/* ---- 404 --------------------------------------------------------------- */
.vf-404 { padding-block: clamp(3rem, 9vw, 6rem) clamp(3rem, 8vw, 5rem); min-height: 62vh; }
.vf-404-code {
  margin: 0; font-size: clamp(3.5rem, 12vw, 7rem); font-weight: 800; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(214, 168, 88, .55);
  letter-spacing: .02em;
}
.vf-404-links { list-style: none; margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; padding: 0;
  display: grid; gap: .55rem; max-width: 640px; }
.vf-404-links li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem;
  padding: .8rem .95rem;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .18s ease, background-color .18s ease;
}
.vf-404-links li:hover { border-color: rgba(214, 168, 88, .5); background: rgba(255, 255, 255, .06); }
.vf-404-links a { color: #fff; font-weight: 700; text-decoration: none; font-size: 1rem; }
.vf-404-links a:hover { color: var(--d-gold); }
.vf-404-links span { color: #92a3a8; font-size: .86rem; }

body.vf-blogs .site-footer .site-below-footer-wrap,
body.vf-404-page .site-footer .site-below-footer-wrap {
  background-color: #05040f !important;
}

/* ---- the new pages inherit the article page's gold link colour, which is
   right for body copy but wrong for card titles and list links --------- */
body.vf-blogs .vf-post-title a,
body.vf-404-page .vf-404-links a { color: #fff; }
body.vf-blogs .vf-post-title a:hover,
body.vf-404-page .vf-404-links a:hover { color: var(--d-gold); }
body.vf-blogs .vf-post-blurb,
body.vf-404-page .vf-404-links span { color: #c3d1d4; }
body.vf-blogs .site-footer,
body.vf-404-page .site-footer,
body.elementor-template-canvas .site-footer { background: #05040f; }

/* ==========================================================================
   14  Fourth pass — contrast
   ========================================================================== */

/* ---- white text stranded on a light section -----------------------------
   Three runs of copy in the About section carry an inline color:#ffffff.
   They were invisible on the live site too, which is why that paragraph
   reads "Hi there! I'm ___ a passionate freelance digital marketer" and
   "I'm particularly skilled in ___". The words are Vishnu Hari, SEO, and a
   link to the Facebook page. Inline styles can only be beaten with
   !important, so that is what this does. */
.elementor-element-ecae57b [style*="color: #ffffff"],
.elementor-element-ecae57b [style*="color:#ffffff"],
.elementor-element-66f46a9 [style*="color: #ffffff"],
.elementor-element-50d9034e [style*="color: #ffffff"],
.elementor-element-96d03a2 [style*="color: #ffffff"],
.elementor-element-88162bf [style*="color: #ffffff"],
.elementor-element-725a0475 [style*="color: #ffffff"] {
  color: var(--d-teal-dk) !important;
}
.elementor-element-ecae57b a[style*="#ffffff"],
.elementor-element-66f46a9 a[style*="#ffffff"],
.elementor-element-50d9034e a[style*="#ffffff"],
.elementor-element-96d03a2 a[style*="#ffffff"] {
  color: var(--d-gold-dk) !important;
  text-decoration-color: rgba(138, 99, 23, .5);
}

/* ---- the current page's menu link -------------------------------------
   Astra colours it with its global accent, a mid blue, which on the dark
   hero comes out at 1.8:1. */
.ast-theme-transparent-header .main-header-menu .current-menu-item > .menu-link,
.ast-theme-transparent-header .main-header-menu .current-menu-ancestor > .menu-link,
.ast-theme-transparent-header .main-header-menu .current-menu-item > .menu-link:hover {
  color: #fff !important;
}
.ast-theme-transparent-header .vf-stuck .main-header-menu .current-menu-item > .menu-link {
  color: var(--d-teal-dk) !important;
}
.vf-article-header .main-header-menu .current-menu-item > .menu-link { color: #e7ecef !important; }

/* ==========================================================================
   15  The mobile header
   --------------------------------------------------------------------------
   Astra renders a second, separate header for small screens and relies on
   its own JavaScript to put the body into "break point" mode. Without that
   script the branding block collapsed to zero height and the logo was laid
   out 74px above the top of the page, so the mobile header showed nothing
   but the two toggle icons — and both of them at once, because the close
   icon is only hidden while the menu is shut.
   ========================================================================== */

@media (max-width: 921px) {
  #ast-mobile-header { position: relative; }
  #ast-mobile-header .ast-main-header-wrap { z-index: 700; }
  #ast-mobile-header .ast-primary-header-bar { height: auto; }
  #ast-mobile-header .ast-builder-grid-row {
    align-items: center;
    min-height: 68px;
    padding-inline: clamp(.9rem, 4vw, 1.5rem);
    gap: 1rem;
  }
  #ast-mobile-header .site-header-section,
  #ast-mobile-header .ast-builder-layout-element,
  #ast-mobile-header .site-branding,
  #ast-mobile-header .site-logo-img {
    height: auto;
    min-height: 0;
    align-items: center;
    align-self: center;
  }
  #ast-mobile-header .site-logo-img img {
    max-width: 132px;
    max-height: 44px;
    width: auto;
    height: auto;
  }
  .ast-theme-transparent-header #ast-mobile-header .ast-builder-grid-row { min-height: 74px; }

  /* Astra ships both a menu icon and a close icon and swaps them in script.
     Only one may ever be on screen. */
  .mobile-menu-toggle-icon .ahfb-svg-iconset + .ahfb-svg-iconset,
  .mobile-menu-toggle-icon svg + svg { display: none; }
  [aria-expanded="true"] .mobile-menu-toggle-icon .ahfb-svg-iconset:first-child,
  [aria-expanded="true"] .mobile-menu-toggle-icon svg:first-child { display: none; }
  [aria-expanded="true"] .mobile-menu-toggle-icon .ahfb-svg-iconset + .ahfb-svg-iconset,
  [aria-expanded="true"] .mobile-menu-toggle-icon svg + svg { display: inline-flex; }

  #ast-mobile-header .menu-toggle {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
  }
  #ast-mobile-header .menu-toggle svg { fill: currentColor; width: 20px; height: 20px; }
  .vf-stuck #ast-mobile-header .menu-toggle,
  body:not(.ast-theme-transparent-header) #ast-mobile-header .menu-toggle {
    background: var(--d-cream-2); border-color: var(--d-line); color: var(--d-teal-dk);
  }

  /* the panel the toggle opens */
  #ast-mobile-header .main-header-bar-navigation.vf-nav-open {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #0d1e22;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: .4rem .9rem 1rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  }
  #ast-mobile-header .main-header-bar-navigation.vf-nav-open .main-header-menu > li > a {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .12);
  }
  #ast-mobile-header .main-header-bar-navigation.vf-nav-open .main-header-menu > li > a:hover {
    background: rgba(255, 255, 255, .09); color: var(--d-gold);
  }

  /* the hero has to clear whatever the header takes up */
  .elementor-element-10ead1c { padding-block: 5.5rem 3.5rem; }
}

/* ---- the logo link is an inline box inside a 225px line-height ----------
   Astra records its configured header height as a line-height on the header
   bar. The logo anchor is display:inline, so that line-height was placing
   the image most of a line above the header — off the top of the page on
   mobile, where the bar is shorter than the line it inherits. */
.site-header .ast-primary-header-bar,
.site-header .site-branding,
.site-header .site-logo-img { line-height: 1; }
.site-header .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* the two wrappers between the grid row and the branding were computing to
   zero height, which centred a 47px logo at -23px and pushed it off-screen */
@media (max-width: 921px) {
  #ast-mobile-header .site-header-primary-section-left,
  #ast-mobile-header .site-header-primary-section-right,
  #ast-mobile-header .ast-builder-layout-element {
    min-height: 44px !important;
    height: auto !important;
    align-items: center !important;
    align-self: center !important;
  }
}

/* Astra's mobile header carried a -203px top margin on the branding block —
   a leftover of its 225px header-height setting. That, and not any of the
   flex sizing, is what put the logo above the top of the page. */
@media (max-width: 921px) {
  #ast-mobile-header .site-branding,
  #ast-mobile-header .ast-site-identity { margin: 0 !important; padding: 0 !important; }
}

/* ---- the small-screen menu panel ---------------------------------------
   Astra keeps it in .ast-mobile-header-content, which its own script slides
   open. Closed by default once JavaScript is running; with no JavaScript it
   simply stays open, because an unopenable menu is worse than a long one. */
@media (max-width: 921px) {
  html.vf-js .ast-mobile-header-content { display: none; }
  html.vf-js .ast-mobile-header-content.vf-nav-open,
  html:not(.vf-js) .ast-mobile-header-content {
    display: block;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #0d1e22;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: .4rem .9rem 1rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    max-height: calc(100vh - 80px); overflow-y: auto;
    z-index: 50;
  }
  .ast-mobile-header-content .main-header-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .ast-mobile-header-content .main-header-menu > li > a,
  .ast-mobile-header-content .menu-link {
    display: block; padding: .9rem .4rem;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    border-radius: 0;
  }
  .ast-mobile-header-content .main-header-menu > li > a:hover,
  .ast-mobile-header-content .main-header-menu > li > a:focus-visible {
    background: rgba(255, 255, 255, .09); color: var(--d-gold);
  }
  .ast-mobile-header-content .main-header-menu > li.current-menu-item > a {
    color: var(--d-gold) !important; background: rgba(255, 255, 255, .07);
  }
  html:not(.vf-js) #ast-mobile-header .menu-toggle { display: none; }
}

/* ---- the FAQ answers ----------------------------------------------------
   Elementor's stylesheet hides .elementor-tab-content and its script slid
   them open. Without the script the hidden attribute alone was not enough,
   because display:none outranks it. */
.elementor-toggle .elementor-tab-content { display: none; }
.elementor-toggle .elementor-tab-content.elementor-active,
.elementor-toggle .elementor-tab-content:not([hidden]) { display: block; }
html:not(.vf-js) .elementor-toggle .elementor-tab-content { display: block; }

/* the open panel was anchoring to a zero-height box, so "top: 100%" put it
   over the logo instead of under the bar */
@media (max-width: 921px) {
  #ast-mobile-header .ast-primary-header-bar {
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1;
  }
  #ast-mobile-header .ast-main-header-wrap { height: auto; }
}

/* The header wrap is an overlay with no height of its own, so a percentage
   offset resolves to zero and the panel landed on top of the logo. The bar
   is a known 74px tall, so anchor to that. */
@media (max-width: 921px) {
  html.vf-js .ast-mobile-header-content.vf-nav-open,
  html:not(.vf-js) .ast-mobile-header-content { top: 74px; }
}

@media (max-width: 921px) {
  .ast-mobile-header-content .main-header-menu,
  .ast-mobile-header-content .ast-builder-menu-mobile,
  .ast-mobile-header-content .ast-main-header-bar-alignment { width: 100%; }
  .ast-mobile-header-content .header-social-item .ast-builder-social-element {
    background: rgba(255, 255, 255, .12); color: #fff;
  }
  .ast-mobile-header-content .header-social-item a:hover .ast-builder-social-element,
  .ast-mobile-header-content a:hover .ast-builder-social-element {
    background: var(--d-gold); color: var(--d-deep);
  }
  .ast-mobile-header-content .element-social-inner-wrap { gap: .55rem; padding-top: .8rem; }
}