.elementor-kit-7{--e-global-color-primary:#0F2A1A;--e-global-color-secondary:#1B4429;--e-global-color-text:#4C5A4F;--e-global-color-accent:#D2A63C;--e-global-color-vhsand:#F1E9D6;--e-global-color-vhcrem:#FAF6EC;--e-global-color-vhline:#DCD0B4;--e-global-color-vhgldl:#EBC96B;--e-global-color-vhglddk:#A8801F;--e-global-color-vhgrns:#2A5C39;--e-global-color-vhwhite:#FFFFFF;--e-global-color-vhdeep:#081A10;--e-global-color-vhink2:#3C4A40;--e-global-color-vhmute:#7C857A;--e-global-typography-primary-font-family:"Marcellus";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1.12em;--e-global-typography-secondary-font-family:"Cinzel";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-letter-spacing:2.6px;--e-global-typography-text-font-family:"Mulish";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.78em;--e-global-typography-accent-font-family:"Cinzel";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:2.9px;--e-global-typography-vhh1-font-family:"Marcellus";--e-global-typography-vhh1-font-size:58px;--e-global-typography-vhh1-font-weight:400;--e-global-typography-vhh1-line-height:1.1em;--e-global-typography-vhh1-letter-spacing:-0.5px;--e-global-typography-vhh2-font-family:"Marcellus";--e-global-typography-vhh2-font-size:40px;--e-global-typography-vhh2-font-weight:400;--e-global-typography-vhh2-line-height:1.2em;--e-global-typography-vhh3-font-family:"Marcellus";--e-global-typography-vhh3-font-size:24px;--e-global-typography-vhh3-font-weight:400;--e-global-typography-vhh3-line-height:1.28em;--e-global-typography-vhh4-font-family:"Marcellus";--e-global-typography-vhh4-font-size:20px;--e-global-typography-vhh4-font-weight:400;--e-global-typography-vhh4-line-height:1.35em;--e-global-typography-vhlede-font-family:"Mulish";--e-global-typography-vhlede-font-size:18px;--e-global-typography-vhlede-font-weight:400;--e-global-typography-vhlede-line-height:1.8em;--e-global-typography-vhsmall-font-family:"Mulish";--e-global-typography-vhsmall-font-size:15px;--e-global-typography-vhsmall-font-weight:400;--e-global-typography-vhsmall-line-height:1.7em;--e-global-typography-vhbtn-font-family:"Cinzel";--e-global-typography-vhbtn-font-size:12px;--e-global-typography-vhbtn-font-weight:600;--e-global-typography-vhbtn-text-transform:uppercase;--e-global-typography-vhbtn-letter-spacing:1.9px;background-color:#FAF6EC;color:#4C5A4F;font-family:"Mulish", Sans-serif;font-size:17px;font-weight:400;line-height:1.78em;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:#D2A63C;font-family:"Mulish", Sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.9px;color:#0F2A1A;border-radius:2px 2px 2px 2px;padding:19px 34px 19px 34px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#A8801F;}.elementor-kit-7 a:hover{color:#0F2A1A;}.elementor-kit-7 h1{color:#0F2A1A;font-family:"Marcellus", Sans-serif;font-size:66px;font-weight:400;line-height:1.1em;}.elementor-kit-7 h2{color:#0F2A1A;font-family:"Marcellus", Sans-serif;font-size:44px;font-weight:400;line-height:1.18em;}.elementor-kit-7 h3{color:#0F2A1A;font-family:"Marcellus", Sans-serif;font-size:26px;font-weight:400;line-height:1.3em;}.elementor-kit-7 h4{color:#0F2A1A;font-family:"Marcellus", Sans-serif;font-size:21px;font-weight:400;line-height:1.34em;}.elementor-kit-7 h5{color:#0F2A1A;font-family:"Mulish", Sans-serif;font-size:17px;font-weight:700;}.elementor-kit-7 h6{color:#4C5A4F;font-family:"Cinzel", Sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2.9px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{color:#0F2A1A;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-vhh1-font-size:44px;--e-global-typography-vhh2-font-size:34px;}.elementor-kit-7 h1{font-size:48px;}.elementor-kit-7 h2{font-size:36px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-vhh1-font-size:32px;--e-global-typography-vhh2-font-size:27px;--e-global-typography-vhh3-font-size:21px;--e-global-typography-vhlede-font-size:16px;}.elementor-kit-7 h1{font-size:36px;}.elementor-kit-7 h2{font-size:29px;}.elementor-kit-7 h3{font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============ Vraiment Holidays design system ============ */
:root{
  --vh-ink:#0F2A1A;        /* deepest green - logo background */
  --vh-green:#1B4429;      /* mid green */
  --vh-green-soft:#2A5C39;
  --vh-gold:#D2A63C;       /* logo gold */
  --vh-gold-lt:#EBC96B;
  --vh-gold-dk:#A8801F;
  --vh-cream:#FAF6EC;
  --vh-sand:#F1E9D6;
  --vh-body:#4C5A4F;
  --vh-line:#DCD0B4;
  --vh-line-lt:rgba(250,246,236,.18);
}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* a text-editor's trailing paragraph should not add space below the widget - the
   container's gap already handles rhythm (client change, kept) */
.elementor-widget-text-editor p:last-child{margin-bottom:0}

/* ---- Section side gutter, defined once ----
   Sections carry 80/0/80/0 padding so the vertical rhythm is uniform and the
   horizontal inset lives here instead of being repeated on every container. Without
   this the content sits flush to the viewport edge whenever the window is at or below
   the kit's Container Max Width (1440px). Only top-level boxed sections match, because
   every inner container is content_width:full. */
.e-con-boxed > .e-con-inner{padding-left:20px;padding-right:20px}
@media(max-width:767px){
  .e-con-boxed > .e-con-inner{padding-left:16px;padding-right:16px}
}
::selection{background:var(--vh-gold);color:var(--vh-ink)}

/* ---- Section boundaries ----
   Cream (#FAF6EC) and sand (#F1E9D6) are only a few percent apart, so where two light
   sections meet the join is almost invisible and the page reads as one long block.
   A hairline between consecutive sections gives the eye an edge without introducing
   another colour. A 7% ink line is plainly visible on cream or sand and effectively
   invisible on the dark and photographic sections, so one rule covers every case. */
.e-con.e-parent + .e-con.e-parent{border-top:1px solid rgba(15,42,26,.07)}

/* Eyebrows now reference the `accent` global typography role (Cinzel caps) rather
   than a CSS block - see the eyebrow helpers in the builders. 131 elements. */

/* ---- Display headings ---- */
.vh-display .elementor-heading-title{letter-spacing:-.005em;text-wrap:balance}
.vh-lede .elementor-widget-container{text-wrap:pretty}

/* ---- Cards ---- */
.vh-card{transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease,border-color .5s ease}
.vh-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px -22px rgba(15,42,26,.34);border-color:var(--vh-gold) !important}

/* ---- Image tiles ----
   The scrim is a native Background Overlay on the container (see h_tile in
   _home.php). Only the lift and the reveal of the "View journey" link are left
   here, because Elementor has no control for either. */
.vh-tile{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .6s cubic-bezier(.2,.7,.3,1),box-shadow .6s ease}
.vh-tile:hover{transform:translateY(-6px);box-shadow:0 26px 54px -26px rgba(15,42,26,.46)}
.vh-tile .vh-tile-more .elementor-heading-title{
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.vh-tile:hover .vh-tile-more .elementor-heading-title{opacity:1;transform:none}

/* ---- Travel-style pills ----
   An inline icon-list under the region grid. Elementor's inline view only removes the
   line breaks; the pill shape, the centring and the hover state have no controls. */
.vh-style-pills .elementor-icon-list-items{justify-content:center}
.vh-style-pills .elementor-icon-list-item{
  border:1px solid #DCD0B4;border-radius:999px;background:rgba(255,255,255,.55);
  padding:10px 20px !important;
  transition:background-color .3s ease,border-color .3s ease,transform .3s ease}
.vh-style-pills .elementor-icon-list-item:hover{
  background:#fff;border-color:var(--vh-gold);transform:translateY(-2px)}
.vh-style-pills .elementor-icon-list-item:not(:last-child):after{border:0}

/* ---- Zoom ---- */
.vh-zoom img{transition:transform 1.2s cubic-bezier(.2,.7,.3,1);will-change:transform}
.vh-zoom:hover img{transform:scale(1.05)}
.vh-clip{overflow:hidden}

/* ---- Editorial numerals ---- */
.vh-num .elementor-heading-title{
  font-family:"Cinzel",serif;font-weight:400;line-height:.9;color:var(--vh-gold)}

/* ================= HEADER ================= */
header.elementor-location-header{
  position:absolute;top:0;left:0;width:100%;z-index:99}
/* Frosted, not transparent.
   A fully transparent header puts the gold logo and cream nav over whatever the hero
   happens to be - which is fine over a dark overlay and illegible over pale sky, sand or
   snow. Rather than darken every hero, the bar carries its own faint scrim: enough to
   guarantee contrast, light enough that the photograph still reads through it. */
header.elementor-location-header > .e-con{
  background-color:rgba(11,32,21,.30);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  transition:background-color .4s ease,box-shadow .4s ease,border-color .4s ease,
             backdrop-filter .4s ease}
/* Where backdrop-filter is unsupported the blur silently does nothing, so the scrim has to
   be able to carry the contrast on its own. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.elementor-location-header > .e-con{background-color:rgba(11,32,21,.55)}
}
/* A short gradient under the bar softens the edge so it does not read as a floating band. */
header.elementor-location-header::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:64px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,32,21,.28),rgba(11,32,21,0))}
header.elementor-location-header .elementor-sticky--effects::after{display:none}
header.elementor-location-header .elementor-sticky--effects{
  background-color:rgba(15,42,26,.96) !important;
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(210,166,60,.34);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.7)}
body.admin-bar header.elementor-location-header .elementor-sticky--effects{top:32px !important}
@media(max-width:782px){
  body.admin-bar header.elementor-location-header .elementor-sticky--effects{top:46px !important}
}

/* Wordmark */
.vh-logo .elementor-heading-title{
  font-family:"Cinzel",serif;font-weight:700;letter-spacing:.14em;color:var(--vh-gold)}
.vh-logo-sub .elementor-heading-title{
  font-family:"Mulish",sans-serif !important;font-weight:500 !important;
  letter-spacing:.42em !important;text-transform:uppercase !important;
  color:rgba(250,246,236,.72) !important}

/* ---- Pro Menu (mega-menu) in the header ----
   Replaces the WordPress Menu widget. Its markup is e-n-menu-*, unrelated to the
   nav-menu classes below, which are kept for the footer / any legacy use. */
.vh-megamenu .e-n-menu-heading{
  display:flex;align-items:center;gap:28px;margin:0;padding:0;list-style:none}
@media(max-width:1180px){ .vh-megamenu .e-n-menu-heading{gap:18px} }
.vh-megamenu .e-n-menu-title{
  font-family:"Mulish",sans-serif !important;font-size:13px !important;font-weight:600 !important;
  letter-spacing:.12em !important;text-transform:uppercase !important;
  padding:6px 0 !important;background:transparent !important;border:0 !important;
  position:relative}
.vh-megamenu .e-n-menu-title-text{
  background-image:linear-gradient(var(--vh-gold),var(--vh-gold));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .45s cubic-bezier(.2,.7,.3,1)}
.vh-megamenu .e-n-menu-title:hover .e-n-menu-title-text,
.vh-megamenu .e-n-menu-item[aria-expanded="true"] .e-n-menu-title-text{background-size:100% 1px}
.vh-megamenu .e-n-menu-dropdown-icon{background:transparent !important;padding:0 0 0 6px !important}

/* Dropdown panel. The gold rule lives on the panel container (mmd0100), not on
   .e-n-menu-content - that wrapper is present even when closed, so a border on it
   drew a stray gold line straight across the header. */
.vh-megamenu .e-n-menu-content{box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.vh-megamenu .e-n-menu-content > .e-con{border-top:2px solid var(--vh-gold)}
.vh-megalink .elementor-heading-title{
  font-family:"Mulish",sans-serif !important;font-size:15px !important;font-weight:500 !important;
  line-height:1.5 !important}
.vh-megalink .elementor-heading-title a{
  color:rgba(250,246,236,.82);text-decoration:none;transition:color .25s ease}
.vh-megalink .elementor-heading-title a:hover{color:var(--vh-gold)}

/* Burger, shown from tablet down. Elementor's own widget CSS loads after the kit and
   ties on specificity, so these need !important to land. */
/* Never set `display` here: Elementor hides the toggle above the breakpoint with
   display:none, and an !important display:flex forces the burger onto desktop and
   breaks the horizontal layout. */
.vh-megamenu .e-n-menu-toggle{
  width:46px !important;height:46px !important;
  border:1px solid rgba(210,166,60,.45) !important;border-radius:2px !important;
  align-items:center !important;justify-content:center !important;
  background:rgba(15,42,26,.55) !important;padding:0 !important;
  transition:background .3s ease,border-color .3s ease}
.vh-megamenu .e-n-menu-toggle svg{width:20px;height:20px;fill:var(--vh-gold) !important}
.vh-megamenu .e-n-menu-toggle:hover{
  background:var(--vh-gold) !important;border-color:var(--vh-gold) !important}
.vh-megamenu .e-n-menu-toggle:hover svg{fill:var(--vh-ink) !important}
@media(max-width:1024px){
  .vh-megamenu .e-n-menu-wrapper{
    background:var(--vh-ink) !important;border-top:2px solid var(--vh-gold)}
  .vh-megamenu .e-n-menu-heading{flex-direction:column;align-items:stretch;gap:0}
  .vh-megamenu .e-n-menu-title{
    padding:16px 24px !important;font-size:15px !important;
    border-bottom:1px solid rgba(250,246,236,.10)}
}

/* ================= BUTTONS ================= */
.elementor-button{transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .35s ease}
.vh-btn-primary .elementor-button:hover{transform:translateY(-2px)}

/* ---- Footer link lists ---- */
.vh-links ul{list-style:none;margin:0;padding:0}
.vh-links li{margin:0 0 13px}
.vh-links li:last-child{margin-bottom:0}
.vh-links a{color:rgba(250,246,236,.62);text-decoration:none;font-size:15px;display:inline-block;
  transition:color .3s ease,padding-left .3s ease}
.vh-links a:hover{color:var(--vh-gold);padding-left:5px}
.vh-links p{color:rgba(250,246,236,.60)}

/* ---- FAQ accordion ----
   Styling lives on the nested-accordion widget itself (see p_faq in _pages.php),
   not here. Only the answer prose needs a nudge, because that is a child
   text-editor rather than one of the widget's own controls. */
.vh-faq .vh-prose p{margin:0}
.vh-faq .vh-prose p + p{margin-top:14px}

/* nested-accordion sets its title colour through a :where() .elementor-kit-7, which carries
   ZERO specificity - so the kit's own heading colour beats it and the text renders
   ink-on-ink inside a dark section. The widget's control is set correctly; it simply
   cannot win. These three lines restore it, and are the reason the dark variant
   exists at all. */
.vh-faq-dark .e-n-accordion-item-title-text{color:var(--vh-cream)}
.vh-faq-dark .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
.vh-faq-dark details[open] .e-n-accordion-item-title-text{color:var(--vh-gold)}

/* ---- Travel-desk list rows ----
   Equal-height cards are handled by Elementor's own Align Items / Flex Grow
   controls now (see p_grid / p_cell / p_card), so no CSS is needed for that.
   Only the hairline between list rows lives here. */
.vh-deskrow + .vh-deskrow{border-top:1px solid var(--vh-line)}

/* ---- Forms ---- */
.vh-form .elementor-field-group>label{
  font-family:"Mulish",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vh-body);margin-bottom:9px;font-weight:700}
.vh-form .elementor-field-textual{
  border:0 !important;border-bottom:1px solid var(--vh-line) !important;border-radius:0 !important;
  background:transparent !important;padding:12px 2px !important;font-family:"Mulish",sans-serif;
  font-size:15px;color:var(--vh-ink);transition:border-color .3s ease}
.vh-form .elementor-field-textual:focus{
  border-bottom-color:var(--vh-gold) !important;box-shadow:none !important;outline:none}
.vh-form .elementor-field-textual::placeholder{color:#A8B0A6}

/* The hand-written `.vh-wa` pill and its Floating-Buttons fallback rule lived here.
   Both are gone: there is now exactly one floating WhatsApp button, an ordinary button
   widget pinned by its container's Position controls (scripts/add-whatsapp-fab.php).
   Its only CSS is the circle sizing, further down under "Floating WhatsApp button". */

/* ---- Trust strip ---- */
.vh-trust .elementor-heading-title{
  font-family:"Cinzel",serif !important;font-size:12px !important;font-weight:600 !important;
  letter-spacing:.18em !important;text-transform:uppercase !important}

/* ---- Prose from ACF / editor ---- */
.vh-prose p{margin:0 0 1.15em;line-height:1.8}
.vh-prose p:last-child{margin-bottom:0}
.vh-prose strong{color:var(--vh-ink);font-weight:700}
.vh-prose ul{margin:0;padding:0;list-style:none}
.vh-prose li{position:relative;padding-left:24px;margin-bottom:12px;line-height:1.7}
.vh-ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  transform:rotate(45deg);background:var(--vh-gold)}
.vh-on-dark.vh-prose strong{color:var(--vh-cream)}

/* ---- Journal article typographic scale ----
   Headings written into post content inherit the global roles, and the global h2 is 40px
   because it is sized for a full-width section heading. Inside a 620px article column
   that is larger than the piece it introduces, and every subhead ends up the same weight
   as the page title. This gives articles their own scale with three real levels, so a
   long piece can be structured rather than flat.
   More space above a heading than below it - a heading belongs to what follows. */
.vh-article h2,
.vh-article h3,
.vh-article h4{font-family:"Marcellus",serif;font-weight:400;color:var(--vh-ink);
  letter-spacing:-.01em}
.vh-article h2{font-size:26px;line-height:1.3;margin:2.1em 0 .55em}
.vh-article h3{font-size:21px;line-height:1.35;margin:1.8em 0 .5em}
.vh-article h4{font-size:17px;line-height:1.4;margin:1.6em 0 .45em;
  font-family:"Mulish",sans-serif;font-weight:700;letter-spacing:0}
.vh-article > h2:first-child,
.vh-article > h3:first-child{margin-top:0}
.vh-article h2 + p,
.vh-article h3 + p,
.vh-article h4 + p{margin-top:0}
.vh-article blockquote{margin:1.9em 0;padding:0 0 0 22px;
  border-left:2px solid var(--vh-gold);font-family:"Marcellus",serif;
  font-size:19px;line-height:1.6;color:var(--vh-ink)}
.vh-article blockquote p:last-child{margin-bottom:0}
@media(max-width:767px){
  .vh-article h2{font-size:22px}
  .vh-article h3{font-size:19px}
  .vh-article h4{font-size:16px}
}
/* ---- Suggested itinerary, one row per vh_days repeater row ----
   Everything else about a day (type, colour, spacing, the optional stay line and photo)
   is set on the widgets themselves. Only the timeline spine needs CSS, because a
   continuous rule with a dot per day cannot be drawn with container controls. The line
   is drawn on the rail and stopped on the last visible row - :last-child works here
   because a hidden day is not rendered at all, rather than rendered and hidden. */
.vh-days{border-top:1px solid var(--vh-line);padding-top:30px}
.vh-day{position:relative}
.vh-day::before{
  content:"";position:absolute;left:3px;top:12px;bottom:-6px;width:1px;
  background:var(--vh-line)}
.vh-day::after{
  content:"";position:absolute;left:0;top:5px;width:7px;height:7px;
  border-radius:50%;background:var(--vh-gold)}
/* the spine stops at the last day - a hidden day is never rendered, so :last-child
   lands on the last VISIBLE row rather than on an invisible eighth one */
.vh-day:last-child::before{display:none}

/* ---- Per-destination FAQ list ----
   Same trick as the itinerary: because an unfilled row never renders, :first-child and
   :last-child land on the visible ones and the rules stay correct at any length. */
/* ---- Floating WhatsApp button ----
   An ordinary button, pinned by the container's Position controls. Elementor's own
   Floating Buttons widgets were the wrong tool: every variant renders a chat dialogue
   with a persona and a row of channel icons, and there is no "just a link" variant.
   Only the circle sizing needs CSS - a button with an icon and no text has no width. */
.vh-wa-btn .elementor-button{width:56px;height:56px;display:flex;align-items:center;
  justify-content:center;transition:transform .18s ease,background-color .18s ease}
.vh-wa-btn .elementor-button:hover{transform:scale(1.06)}
.vh-wa-btn .elementor-button-icon{font-size:28px;line-height:1}
.vh-wa-btn .elementor-button-icon svg{width:28px;height:28px;fill:currentColor}
.vh-wa-btn .elementor-button-content-wrapper{gap:0}
@media(max-width:767px){
  .vh-wa-btn .elementor-button{width:50px;height:50px}
  .vh-wa-btn .elementor-button-icon svg{width:25px;height:25px}
}

/* ---- Photo credits ----
   A couple of hundred entries. As one column that is a scroll nobody finishes, so it runs
   in CSS columns and breaks by licence. `break-inside:avoid` keeps a heading attached to
   the entries under it instead of stranding it at the foot of a column. */
.vh-credits{columns:var(--vh-credit-cols,3);column-gap:38px}
.vh-credits__lic{font-family:"Cinzel",serif;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--vh-gold-dk);margin:26px 0 10px;
  break-inside:avoid;break-after:avoid;padding-bottom:7px;
  border-bottom:1px solid var(--vh-line)}
.vh-credits__lic:first-child{margin-top:0}
.vh-credits__lic span{color:var(--vh-body);font-weight:400;letter-spacing:0}
.vh-credits__list{list-style:none;margin:0 0 4px;padding:0}
/* A gold marker per entry. Without one the columns read as a wall of text and it is hard
   to see where one credit ends and the next begins - which matters more here than usual,
   because each line is two different things (a title and a name). */
.vh-credits__list li{font-size:13px;line-height:1.55;margin:0 0 9px;break-inside:avoid;
  color:var(--vh-body);position:relative;padding-left:16px}
.vh-credits__list li::before{content:"";position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:var(--vh-gold);opacity:.85}
.vh-credits__list a{color:var(--vh-ink);text-decoration:none;
  border-bottom:1px solid var(--vh-line)}
.vh-credits__list a:hover{color:var(--vh-gold-dk);border-bottom-color:var(--vh-gold)}
.vh-credits__by{color:var(--vh-mute);white-space:nowrap}
.vh-credits__by::before{content:" — "}
@media(max-width:1024px){.vh-credits{columns:2}}
@media(max-width:767px){.vh-credits{columns:1}}

.vh-faqs{border-top:1px solid var(--vh-line)}
.vh-faqrow{border-bottom:1px solid var(--vh-line)}
.vh-faqrow:last-child{border-bottom:0}

/* ---- Sticky enquiry card rows ---- */
.vh-fact{border-bottom:1px solid var(--vh-line)}
.vh-fact:last-of-type{border-bottom:0}

/* ---- Gallery ---- */
.vh-gallery .elementor-gallery__titles-container{margin-bottom:38px}
.vh-gallery .elementor-gallery-title{
  font-family:"Cinzel",serif;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vh-body);padding:0 0 7px;margin:0 30px 0 0;
  transition:color .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.vh-gallery .elementor-gallery-title--current,
.vh-gallery .elementor-gallery-title:hover{color:var(--vh-gold-dk);border-bottom-color:var(--vh-gold)}
.vh-gallery .elementor-gallery-item__title{
  font-family:"Marcellus",serif;font-size:18px;color:#fff}

/* ---- Pro: Slides hero ----
   The widget's own typography/position controls are unreliable here, so the
   slide content is laid out entirely from CSS: boxed, left aligned, cream on green. */
.vh-hero .swiper-slide-inner{
  /* matches the kit's Container Max Width (1440) so the hero copy lines up with
     every other section's left edge */
  max-width:1440px;margin:0 auto;padding:0 20px !important;
  align-items:center !important;justify-content:flex-start !important}
.vh-hero .swiper-slide-contents{
  text-align:left !important;align-items:flex-start !important;max-width:660px;width:100%}
.vh-hero .elementor-slide-heading{
  color:#FAF6EC !important;
  font-family:"Marcellus",serif !important;font-weight:400 !important;
  font-size:64px !important;line-height:1.08 !important;
  text-transform:none !important;letter-spacing:0 !important;
  margin:0 0 20px !important;text-wrap:balance}
.vh-hero .elementor-slide-description{
  color:rgba(250,246,236,.88) !important;
  font-family:"Mulish",sans-serif !important;font-weight:400 !important;
  font-size:18px !important;line-height:1.78 !important;
  text-transform:none !important;letter-spacing:0 !important;
  margin:0 0 32px !important;text-wrap:pretty}
.vh-hero .elementor-slide-button{
  font-family:"Mulish",sans-serif !important;font-weight:700 !important;
  font-size:13px !important;letter-spacing:.15em !important;text-transform:uppercase !important;
  background-color:var(--vh-gold) !important;color:var(--vh-ink) !important;
  border:0 !important;border-radius:2px !important;padding:19px 34px !important;
  transition:background-color .35s ease,transform .35s ease}
.vh-hero .elementor-slide-button:hover{
  background-color:var(--vh-gold-lt) !important;color:var(--vh-ink) !important;transform:translateY(-2px)}
@media(max-width:1024px){
  .vh-hero .elementor-slide-heading{font-size:46px !important}
  .vh-hero .swiper-slide-contents{max-width:78%}
}
@media(max-width:767px){
  .vh-hero .swiper-slide-inner{padding:0 20px !important}
  .vh-hero .elementor-slide-heading{font-size:32px !important;margin-bottom:14px !important}
  .vh-hero .elementor-slide-description{font-size:15px !important;margin-bottom:24px !important}
  .vh-hero .elementor-slide-button{padding:16px 26px !important;font-size:12px !important}
  .vh-hero .swiper-slide-contents{max-width:100%}
}
.vh-hero .swiper-pagination-bullet{background:#FAF6EC;opacity:.45;width:9px;height:9px}
.vh-hero .swiper-pagination-bullet-active{background:var(--vh-gold);opacity:1;width:26px;border-radius:5px}
.vh-hero .elementor-swiper-button{color:var(--vh-gold)}

/* ---- Pro: Flip box ---- */
.vh-flip .elementor-flip-box__front,
.vh-flip .elementor-flip-box__back{border:1px solid var(--vh-line)}
.vh-flip .elementor-flip-box__layer__title{font-family:"Marcellus",serif;letter-spacing:.01em}
.vh-flip .elementor-flip-box__layer__description{font-family:"Mulish",sans-serif}
/* the widget's per-face colour controls do not reliably apply - pin them here.
   Elementor renders Font Awesome as inline SVG, so fill has to be set too. */
.vh-flip .elementor-flip-box__front .elementor-icon,
.vh-flip .elementor-flip-box__front .elementor-icon i,
.vh-flip .elementor-flip-box__front svg{
  color:var(--vh-gold-dk) !important;fill:var(--vh-gold-dk) !important}
.vh-flip .elementor-flip-box__back .elementor-icon,
.vh-flip .elementor-flip-box__back .elementor-icon i,
.vh-flip .elementor-flip-box__back svg{
  color:var(--vh-gold) !important;fill:var(--vh-gold) !important}

/* ---- Pro: Animated headline sits in a left-aligned column ---- */
.elementor-widget-animated-headline .elementor-headline{text-align:left}
.elementor-widget-animated-headline .elementor-headline-dynamic-wrapper{text-align:left}
.vh-flip .elementor-flip-box__front .elementor-flip-box__layer__title{color:var(--vh-ink) !important}
.vh-flip .elementor-flip-box__front .elementor-flip-box__layer__description{color:var(--vh-body) !important}
.vh-flip .elementor-flip-box__back .elementor-flip-box__layer__title{color:var(--vh-cream) !important}
.vh-flip .elementor-flip-box__back .elementor-flip-box__layer__description{
  color:rgba(250,246,236,.80) !important}

/* ---- Pro: Testimonial carousel ---- */
.vh-tcar .elementor-testimonial__text{
  font-family:"Mulish",sans-serif;font-size:17px;line-height:1.8;color:#3C4A40}
.vh-tcar .elementor-testimonial__name{
  font-family:"Marcellus",serif;font-size:19px;color:var(--vh-ink)}
.vh-tcar .elementor-testimonial__title{
  font-family:"Cinzel",serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vh-gold-dk)}
.vh-tcar .swiper-pagination-bullet-active{background:var(--vh-gold)}
.vh-tcar .elementor-swiper-button{color:var(--vh-gold-dk)}

/* ---- Pro: Media carousel ---- */
.vh-mcar .elementor-carousel-image-overlay{
  font-family:"Marcellus",serif;font-size:21px;letter-spacing:.01em}
.vh-mcar .swiper-pagination-bullet-active{background:var(--vh-gold)}
.vh-mcar .elementor-swiper-button{color:#FAF6EC}

/* ---- Pro: Call to action ---- */
.vh-cta .elementor-cta__title{font-family:"Marcellus",serif;letter-spacing:-.005em}
.vh-cta .elementor-cta__description{font-family:"Mulish",sans-serif}
.vh-cta .elementor-cta__button{
  font-family:"Mulish",sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* ---- Pro: Blockquote (sits over dark imagery) ---- */
.vh-quote blockquote,
.vh-quote .elementor-blockquote{border:0 !important;padding:0 !important;margin:0 !important}
.vh-quote .elementor-blockquote__content{
  font-family:"Marcellus",serif !important;font-weight:400 !important;
  color:#FAF6EC !important;line-height:1.32 !important;letter-spacing:-.005em;
  font-size:42px !important;text-wrap:balance}
.vh-quote .elementor-blockquote__author{
  font-family:"Cinzel",serif !important;color:var(--vh-gold) !important;
  letter-spacing:.18em;text-transform:uppercase;font-size:12px !important;
  margin-top:22px !important}
@media(max-width:767px){
  .vh-quote .elementor-blockquote__content{font-size:25px !important}
}

/* Small variant, for a pull-quote inside a light column rather than over a photo.
   The base .vh-quote above is cream at 42px because it sits on dark imagery - on a
   sand background that renders invisible and far too large. */
.vh-quote-sm .elementor-blockquote{
  border-left:2px solid var(--vh-gold) !important;
  padding:2px 0 2px 22px !important}
.vh-quote-sm .elementor-blockquote__content{
  color:var(--vh-ink) !important;font-size:22px !important;line-height:1.45 !important}
.vh-quote-sm .elementor-blockquote__author{margin-top:14px !important}
@media(max-width:767px){
  .vh-quote-sm .elementor-blockquote__content{font-size:19px !important}
}

/* ---- Pro: Price List used as an inclusions table ----
   The default lays title and price at opposite ends of a very wide row, which reads as
   two disconnected columns. Constrain it and let the dotted leader do its job. */
.vh-plist .elementor-price-list-item{padding:14px 0}
.vh-plist .elementor-price-list-header{
  font-family:"Marcellus",serif;font-size:18px;font-weight:400;align-items:baseline}
/* heading_color lands on .elementor-price-list-header, but the title is an <h4> INSIDE
   it - and the kit's own heading colour hits that h4 directly, beating the inherited
   value. So the colour has to be set on the title element itself. */
.vh-plist .elementor-price-list-title{flex:0 1 auto;color:inherit}
.vh-plist .elementor-price-list-separator{flex:1 1 auto;margin:0 12px;opacity:.5}
.vh-plist .elementor-price-list-price{
  font-family:"Cinzel",serif;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;flex:0 0 auto}
.vh-plist .elementor-price-list-description{
  font-family:"Mulish",sans-serif;font-size:14px;line-height:1.65;margin-top:6px;
  max-width:46ch}

/* ---- Pro: Loop Grid / Loop Carousel of destination cards ----
   One loop-item template renders every destination card on the site, so all the card
   chrome lives here. Same rule as the post cards: the card itself never transforms,
   only the photo inside it, or the two animations fight each other. */
/* Elementor emits _css_classes on widgets but NOT on containers inside a loop item,
   so the two card containers are addressed by their element ids (lp00100 = card,
   lp00110 = photo window), both set in _loop-item.php. */
.e-loop-item{display:flex;height:100%}
.elementor-element-lp00100{
  width:100%;transition:box-shadow .45s ease,border-color .45s ease}
.elementor-element-lp00100:hover{
  box-shadow:0 22px 48px -22px rgba(15,42,26,.34);border-color:var(--vh-gold) !important}

.elementor-element-lp00110{
  position:relative !important;width:100%;aspect-ratio:3/2;flex:0 0 auto;
  overflow:hidden;background:var(--vh-sand)}
.elementor-element-lp00110 .elementor-widget-image{position:absolute;inset:0;margin:0}
.elementor-element-lp00110 .elementor-widget-image a,
.elementor-element-lp00110 .elementor-widget-image figure{display:block;height:100%;margin:0}
.elementor-element-lp00110 img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.elementor-element-lp00100:hover .elementor-element-lp00110 img{transform:scale(1.06)}

.vh-dcard-badge{
  position:absolute !important;left:0;bottom:0;z-index:2;margin:0 !important;
  padding:8px 16px;background:rgba(15,42,26,.86)}
.vh-dcard-badge .elementor-heading-title{
  font-family:"Cinzel",serif !important;font-size:11px !important;font-weight:600 !important;
  letter-spacing:.15em !important;text-transform:uppercase !important;color:var(--vh-cream) !important}
.vh-dcard-title .elementor-heading-title a{color:var(--vh-ink);text-decoration:none}
.vh-dcard-title .elementor-heading-title a:hover{color:var(--vh-gold-dk)}
/* height:100% + a flexing text column is what pins every "View destination" to the
   same baseline across a row; without it each card sizes to its own copy. */
.elementor-element-lp00100{height:100%}
.elementor-element-lp00120{display:flex;flex-direction:column;flex:1 1 auto}
.vh-dcard-excerpt{flex:1 1 auto}
.vh-dcard-excerpt p{margin:0}
.vh-dcard-more .elementor-heading-title{
  font-family:"Cinzel",serif !important;font-size:12px !important;font-weight:600 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important}
.vh-dcard-more .elementor-heading-title a{color:var(--vh-gold-dk);text-decoration:none}
.vh-dcard-more .elementor-heading-title a:hover{color:var(--vh-ink)}

/* ---- Pro: Loop Grid of journal cards ----
   Deliberately unlike the destination card: no border, wider 16:9 crop, a category
   meta line above the headline, and a gold rule that draws in under the read link. */
.vh-jgrid .e-loop-item{display:flex;height:100%}
/* height:100% is what lets the excerpt flex and pin every "Read the piece" to the
   same baseline across a row; without it the cards size to their own content. */
.elementor-element-lj00100{width:100%;height:100%}
.elementor-element-lj00120{display:flex;flex-direction:column;flex:1 1 auto}
.elementor-element-lj00110{
  position:relative !important;width:100%;aspect-ratio:16/9;flex:0 0 auto;
  overflow:hidden;background:var(--vh-sand)}
.elementor-element-lj00110 .elementor-widget-image{position:absolute;inset:0;margin:0}
.elementor-element-lj00110 .elementor-widget-image a,
.elementor-element-lj00110 .elementor-widget-image figure{display:block;height:100%;margin:0}
.elementor-element-lj00110 img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.elementor-element-lj00100:hover .elementor-element-lj00110 img{transform:scale(1.05)}

.vh-jmeta .elementor-heading-title{
  font-family:"Cinzel",serif !important;font-size:11px !important;font-weight:600 !important;
  letter-spacing:.18em !important;text-transform:uppercase !important}
.vh-jtitle .elementor-heading-title a{color:var(--vh-ink);text-decoration:none;
  background-image:linear-gradient(var(--vh-gold),var(--vh-gold));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .5s cubic-bezier(.2,.7,.3,1)}
.elementor-element-lj00100:hover .vh-jtitle .elementor-heading-title a{background-size:100% 1px}
.vh-jexcerpt{flex:1 1 auto}
.vh-jexcerpt p{margin:0}
.vh-jmore .elementor-heading-title{
  font-family:"Cinzel",serif !important;font-size:12px !important;font-weight:600 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;
  padding-top:16px;border-top:1px solid var(--vh-line)}
.vh-jmore .elementor-heading-title a{color:var(--vh-gold-dk);text-decoration:none}
.vh-jmore .elementor-heading-title a:hover{color:var(--vh-ink)}

/* ---- Home travel-desk strip ----
   Elementor does not emit _css_classes on these child containers, so the row is
   addressed through the grid (v1a1510) whose direct children are the ten items. */
.elementor-element-v1a1510 > .e-con{border-top:1px solid rgba(250,246,236,.14)}
.vh-desk-name .elementor-heading-title{
  font-family:"Mulish",sans-serif !important;font-size:15px !important;font-weight:600 !important;
  letter-spacing:.02em !important;text-transform:none !important;line-height:1.3 !important}
.vh-desk-note p{
  font-family:"Mulish",sans-serif;font-size:13px;line-height:1.55;margin:0}

/* ---- Pro: Countdown ---- */
.vh-countdown .elementor-countdown-item{
  background:rgba(250,246,236,.06);border:1px solid rgba(250,246,236,.16);padding:22px 10px}
.vh-countdown .elementor-countdown-digits{
  font-family:"Marcellus",serif !important;font-size:44px !important;font-weight:400 !important;
  color:var(--vh-gold) !important;line-height:1.1 !important}
.vh-countdown .elementor-countdown-label{
  font-family:"Cinzel",serif !important;font-size:11px !important;font-weight:600 !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;
  color:rgba(250,246,236,.62) !important;margin-top:8px}

/* ---- Pro: Nested Carousel ("Moments") ---- */
.vh-moments .swiper-slide{height:auto}
.vh-moment-img img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.vh-moment-quote p{margin:0}
.vh-moments .elementor-swiper-button{color:var(--vh-ink)}

/* ---- Pro: Taxonomy Filter ---- */
.vh-filter .e-filter{justify-content:flex-start;gap:10px;flex-wrap:wrap}
.vh-filter .e-filter-item{
  font-family:"Cinzel",serif !important;font-size:12px !important;font-weight:600 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  background:transparent !important;border:1px solid var(--vh-line) !important;
  border-radius:0 !important;transition:background .3s ease,border-color .3s ease,color .3s ease}
.vh-filter .e-filter-item:hover{border-color:var(--vh-gold) !important}
.vh-filter .e-filter-item[aria-pressed="true"]{
  background:var(--vh-ink) !important;border-color:var(--vh-ink) !important;
  color:var(--vh-cream) !important}

/* ---- Framed photo: gold rule offset behind the image ---- */
.vh-frame{position:relative}
.vh-frame::before{
  content:"";position:absolute;left:16px;top:16px;width:100%;height:100%;
  border:1px solid var(--vh-gold);pointer-events:none}
.vh-frame img{position:relative;display:block;width:100%;height:auto}

/* ---- Fact list under the framed photo ---- */
.vh-facts .elementor-icon-list-item{padding:13px 0 !important}
.vh-facts .elementor-icon-list-text{
  font-family:"Mulish",sans-serif !important;font-size:14px !important;color:var(--vh-body) !important}
.vh-facts .elementor-icon-list-text strong{color:var(--vh-ink);font-weight:700}

/* ---- Pro: Table of contents ---- */
.vh-toc .elementor-toc__header{background:var(--vh-ink) !important;border-color:var(--vh-ink) !important}
.vh-toc .elementor-toc__header-title{
  font-family:"Cinzel",serif !important;font-size:13px !important;letter-spacing:.16em !important;
  text-transform:uppercase !important;color:var(--vh-gold) !important}
.vh-toc .elementor-toc__body{background:#FFFFFF !important}
.vh-toc .elementor-toc__list-item-text{
  font-family:"Mulish",sans-serif;font-size:15px;color:var(--vh-body)}
.vh-toc .elementor-toc__list-item-text:hover{color:var(--vh-gold-dk)}

@media(max-width:767px){
  .vh-tile{min-height:330px !important}
}
/* ---- Travel-style archive: one hero photo per term ---- */
body.term-heritage-and-temples .elementor-element-xta0100{background-image:url("https://vraimentholidays.com/wp-content/uploads/2026/08/vh-odisha-konark-wheel.jpg") !important}
body.term-himalaya-and-high-passes .elementor-element-xta0100{background-image:url("https://vraimentholidays.com/wp-content/uploads/2026/08/vh-thiksey.jpg") !important}
body.term-wildlife-and-parks .elementor-element-xta0100{background-image:url("https://vraimentholidays.com/wp-content/uploads/2026/08/vh-tiger.jpg") !important}
body.term-wellness-and-pilgrimage .elementor-element-xta0100{background-image:url("https://vraimentholidays.com/wp-content/uploads/2026/08/vh-rishikesh.jpg") !important}/* End custom CSS */