/*
* Theme Name: Metikos
* Theme URI: https://eeriee.com/custom-wordpress-theme
* Author: Panagiota Lagka @ eeriee.com
* Author URI: https://eeriee.com
* Description: Metikos Custom Theme. Curated by Saint of Athens, Devloped by eeriee
* Version: 1.0.1
*/

    /* ==========================================================================
   1. Root Variables: Typography, Spacing, Colors, Transitions
   ========================================================================== */
:root {
    /* --- Core Layout & Sizing --- */
    --header-height: 55px;
    --timeline-nav-height: 85px;
    --hero-padding: 35px;
    --hero-padding-mobile: 14px;

    /* --- Derived hero heights --- */
    --hero-height: calc(100vh - var(--header-height) - var(--timeline-nav-height));
    --hero-height-blog: 83vh;
    --hero-height-mobile: 81vh;
    --parallax-offset: calc(-1 * var(--hero-height));
    
    /* --- Footer Calculations 614px--- */
    --footer-height: 614px; 

    /* --- Calculated Content Height --- */
    --content-section-height: calc(100vh - var(--header-height) - var(--footer-height));

    /* --- Colors --- */
    --scrollbar-thumb: rgba(0,0,0,0.2);
    --dark-divider: #444;

    /* --- Typography (Semantic Naming) --- */
    --font-size-h1: clamp(2.5rem, 7vw, 8rem);   /* Main titles (section, hero)  Largest size for HD desktops */
    --font-size-h2: clamp(4rem, 6vw, 5rem);     /* Main titles (section, hero) */
    --font-size-h3: clamp(3rem, 7vw, 6rem);     /* h3 tags */
    --font-size-h4: clamp(1rem, 3vw, 1.5rem);   /* h4 tags */
    --font-size-h5: clamp(1.375rem, 3vw, 2.188rem); /* Subsection titles 2.188rem = 35px 1.375 = 22px*/
    --font-size-h6: clamp(1rem, 2vw, 1.25rem);
    --font-size-body: clamp(1rem, 2vw, 1.875rem); /* 25px = 1.563rem 30px =1.875 */
    
    /* --- Line Heights --- */
    --line-height-heading: 1.2;     /* For large headings and titles */
    --line-height-body: 1.6;        /* Standard for body copy */
    --line-height-tight: 1.4;       /* For subtitles and condensed text */
    --line-height-solid: 1.1;       /* For very compact text like single-line mobile items */

    /* --- Spacing Scale --- */
    --space-xxs: 0.6rem;
    --space-xs: 1.25rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 10rem; 
    --space-btwn-sections:5.1rem; /* 81px; This is between subesection titles*/
    --subsection-spacing-height: 18rem; /*12.5rem = 200 px */
    --bottom-content-spacing: 6.25rem; /* 6.25 = 100px*/

    /* for the travel service heading */
    --custom-caption-space: clamp(3.5rem, 8vw, 7.5rem);

    /* --- Transitions --- */
    --transition-default: 0s ease;
}


/* ==========================================================================
   2. Fonts & Global Resets
   ========================================================================== */
@font-face {
    font-family: 'Matahari';
    src: url('fonts/matahari-600semibold-webfont.woff2') format('woff2'),
         url('fonts/matahari-600semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/*@font-face {
    font-family: 'Optima';
    src: url('fonts/Optima.ttc');
    font-display: swap;
}*/
/* Regular */
@font-face {
  font-family: 'Optima';
  src: url('fonts/Optima-Regular-01.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face {
  font-family: 'Optima';
  src: url('fonts/Optima-Italic-03.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Optima';
  src: url('fonts/Optima-Bold-02.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: 'Optima';
  src: url('fonts/Optima-BoldItalic-04.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Extra Black */
@font-face {
  font-family: 'Optima';
  src: url('fonts/Optima-ExtraBlack-05.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* ==========================================================================
   3. Base Typography & Links
   ========================================================================== */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--background-light);
    color: var(--color-primary);
    font-family: var(--font-family-base, 'Optima', sans-serif);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    overflow-x: hidden;
    padding-top: var(--header-height);
    padding-bottom: var(--timeline-nav-height);
    transition: background-color var(--transition-default), color var(--transition-default);
    cursor: none;
    
}
html, body { height: 100%; }

a {
    color: inherit;
    text-decoration: none;
    font-size: 1.2em;
    text-align:left;
    -webkit-text-decoration: none !important; /* Safari/WebKit fallback */
}
h1, .section-title, .hero-title, .entry-title {
    font-family: 'Matahari', sans-serif;
    font-weight: 600;
    line-height: var(--line-height-heading);
    text-transform: uppercase;
    color: inherit;
    font-size: var(--font-size-h1);
    margin: .88rem 0 .88rem 0;
    text-align: left;
    width: 81%;
    line-height: 1;
}
.section-title[aria-label="PRE-ARRIVAL SERVICES"],
.section-title[aria-label="TRAVEL & HOSPITALITY SERVICES"] {
  width: 100%;
}


h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: 1.75rem; } /* Not using a variable, kept as is */
h5 { font-size: 1.1rem; } /* Not using a variable, kept as is */
h6 { font-size: var(--font-size-h6); }

 .section-text {
    font-family: 'Optima', sans-serif;
    font-size: var(--font-size-body);
    line-height: var(--line-height-tight);
    text-align: justify;
    color: inherit;
    margin: -0.5rem 0 0 1.2rem;
    line-height: 1.3;
}

#about .section-text, #home .section-text  {
        font-size: var(--font-size-h6);
}
#relocation-services .section-text {
  letter-spacing: -1px;
}

.subsection-title {
    font-size: var(--font-size-h5);
    font-family: 'Matahari', sans-serif;
    font-weight: 600;
    line-height: var(--line-height-tight);
    letter-spacing: 1px;
    display: flex;
    align-items: flex-start;
    text-align: left;
    margin: 0 0 var(--space-xs) 0;
}
.blog-post-item .bullet-icon {margin:.5rem .5rem 0 0; }

/* ==========================================================================
   5. Core Layout: Header, Main, Footer
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    background-color: var(--background-light);
    height: var(--header-height);
    display: flex;
    justify-content: space-between; /* This creates the space */
    align-items: center;
    padding: 0 var(--hero-padding); /* Use your variable for consistent spacing */
}
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 var(--hero-padding);
}
.site-branding {
    flex-grow: 1; /* Allows it to take up all available middle space */
    display: flex;
    justify-content: center; /* Centers the logo within its space */
    align-items: center;
    height: 100%;
}
.site-branding .flex-grow-1.text-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.logo {
    height: 25.2px;
    position: relative;
    left: 15px;
    top: -3px;
}
#dark-mode-toggle {
    width: 30px; /* This MUST match the burger's width for perfect centering */
    display: flex;
    justify-content: flex-end; /* Align icon to the right */
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

#dark-mode-toggle img {
    width: 25px;
    height: 25px;
}

/* ==========================================================================
   6. Main Content Layout
   ========================================================================== */
.site-main {
    flex: 1 0 auto; /* This makes the footer sticky */
    position: relative;
    width: 100%;
    min-height: var(--header-height);
    margin-top: var(--hero-height);
    padding-bottom: var(--bottom-content-spacing);
    z-index: 2;
    background-color: var(--background-light);
}

.content-section { display: none; }
.content-section.is-active {
    display: block;
    position: relative;
    min-height: var(--content-section-height);
    width: 100%;
    z-index: 2;
    background-color: var(--background-light);
    padding: 0 var(--hero-padding);
}
  .section-content {padding-left:0;}

.home-subsection,
.contact-subsection {
    min-height:var(--space-btwn-sections);
}

#home .col-md-7 {
    padding-left:0;
}
#about .content-section {
    padding-bottom: var(--space-btwn-sections);
}

 .col-custom-split-left {
        width: 60vw;
          flex: 0 0 60vw; 
    }
    .col-custom-split-right {
        flex: 1;
    }

/* Clamp section text to 2 lines in blog list */
.blog-post-item .section-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -moz-box;
    line-clamp: 2;
    box-orient: vertical;
    overflow: hidden;
    max-height: calc(1.4em * 2); /* Adjusted to match --line-height-tight */
    line-height: var(--line-height-tight);
    text-align: left;
    text-overflow:ellipsis;

}

/* 1. Blog list scrollable */
.blog-posts-list {
    height: 70vh; 
    overflow-y: auto; /* 'auto' is better than 'scroll' as it only shows the scrollbar when needed */
    padding-right: .8rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
    -webkit-overflow-scrolling: touch;
}
/* 2. Webkit Scrollbar Styling (Chrome, Safari, Edge) */
.blog-posts-list::-webkit-scrollbar {
    width: 8px;
}
.blog-posts-list::-webkit-scrollbar-track {
    background: transparent;
}
.blog-posts-list::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
    border: 2px solid transparent;
}
.blog-posts-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.4);
}

.hero-slide[data-image-slug="blog"] .hero-caption {
    width:50%;
}


/* ==========================================================================
   7. Components
   ========================================================================== */
.bullet-icon {
    width: 25px;
    height: 25px;
    margin: 0 .5rem 0 0;
}

@media screen and (min-width: 1024px) {
 #about .bullet-icon {
     width: 30px;
     height: 30px;
     margin: -0.6rem 0.6rem 0 0;
 }
}

.about-bullet-icon {
    width: 32px;
    height: 32px;
    margin: .1rem .5rem 0 0;
}
.view-more-link {
    font-family: 'Optima', sans-serif;
    font-size: 2.188rem; /*35PX*/
    font-weight: 400;
    letter-spacing: 1px;
    text-align: left;
    padding: 1.6rem 0 0 1.2rem ;
    display:flex;
    cursor: none;
}
.blog-section-divider {border-top:none;}


.title-line-svg line {
    stroke: var(--color-primary);
    stroke-width: 2px;
    transition: stroke var(--transition-default);
}
.hero-mobile-title-line-svg line {
    stroke: var(--color-primary);
    stroke-width: 2px;
    transition: stroke var(--transition-default);
}

 .section-divider {
    border: 0;
    height: 1px;
    background-color: transparent;
    margin: var(--space-md) 0;
}
.relocation-section-divider {
    border: 0;
    height: 1px;
    background-color: transparent;
    margin: var(--space-lg) 0;
}

.title-line-wrapper {
    display:flex;
    margin-bottom:.88rem;
    
}   
 
/* ==========================================================================
   8. Dark Mode
   ========================================================================== */
body.dark-mode {
    background-color: var(--background-dark);
    color: var(--color-secondary);
}
body.dark-mode .site-header,
body.dark-mode .hero-wrapper,
body.dark-mode .site-main,
body.dark-mode .site-footer,
body.dark-mode .hero-caption,
body.dark-mode .content-section.is-active,
body.dark-mode .single-post .entry-header
body.dark-mode .entry-title-container,
body.dark-mode .single-post .entry-title-container,
body.dark-mode .entry-content,
body.dark-mode .post-hero-image-wrapper,
body.dark-mode .post-body-content {
    background-color: var(--background-dark);
}
/* body.dark-mode #about .section-divider { background-color: var(--dark-divider); } */
body.dark-mode .title-line-svg line { stroke: var(--color-secondary); }
body.dark-mode .hero-mobile-title-line-svg line { stroke: var(--color-secondary); }
body.dark-mode .inverting-svg,
body.dark-mode .logo,
body.dark-mode .footer-logo-svg,
body.dark-mode .bullet-icon { filter: invert(1); }
body.dark-mode .timeline-indicator-line { background-color: var(--background-light); }

#dark-mode-toggle .dark-mode-icon { display: none; }
#dark-mode-toggle .light-mode-icon { display: block; }
body.dark-mode #dark-mode-toggle .dark-mode-icon { display: block; }
body.dark-mode #dark-mode-toggle .light-mode-icon { display: none; }

body.dark-mode .blog-posts-list::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
}
body.dark-mode .blog-posts-list {
    scrollbar-color: var(--scrollbar-thumb);
}

body.dark-mode .sti,
body.dark-mode .bullet {
  filter: invert(1);
}

/* Scroll to Section */
.scroll-to-section-wrapper {
  width: 100%;
  height: 10vh;
  bottom: 0;
  right: 0;
  z-index: 9999;
  position: fixed;
  cursor: none;
  overflow: hidden;
  pointer-events: none;
}

.scroll-to-section {
  width: 160px;
  position: absolute;
  cursor: none;
}

.header,
.hero-wrapper,
.hero-title,
.timeline-nav,
.timeline-link {
  cursor: none;
}

.sti, .bullet {
  position: absolute;
  pointer-events: none;
  transform: translate(0, 0);
  will-change: left, top, opacity;
}
.sti { width:160px; height:auto; }
.bullet { width:23px; height:auto; opacity:0; }
.hidden { opacity:0; }
.visible { opacity:1; }

/* ==========================================================================
   9. Hero & Single Post Layout
   ========================================================================== */
.hero-wrapper {
  position: fixed;
  top: var(--header-height);
  width: 100%;
  height: var(--hero-height);
  padding: 0 var(--hero-padding);
  z-index: 1;
}
.hero-wrapper.hero-hidden { display: none; }
.hero-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.hero-image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index:1;
}
.hero-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    margin: 0 1.2em 0 0;
    overflow: hidden;
    position: relative;
}
.hero-video.mobile { display: none; }
.hero-video.desktop{ display: block; }

.hero-video-wrapper {
    width: 100%;
    height: 100%;
    position: relative; /* Create a positioning context */
    overflow: hidden;   /* Ensure nothing spills out */
}
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the video covers the area without distortion */
}

.hero-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    height: auto;
    background-color: var(--background-light);
    text-align: left;
}
.hero-title {
    font-family: 'Matahari', sans-serif;
    font-size: var(--font-size-h1);
    line-height: var(--line-height-heading);
    text-transform: uppercase;
    text-align: left;
    margin: 0;
    width: 100%;
}
.hero-mobile-title-line-svg{
    display:none;
}
/* By default (on desktop), show the desktop title and hide the mobile one */
.hero-title .title-mobile {
    display: none;
}
.hero-title .title-desktop {
    display: inline;
}



/* --- Single Post Layout --- */
/* --- The Main Wrapper on Single Posts --- */
.single-post .site-main {
    margin: 0;
}
.single-post .entry-title {margin-top:-5rem;} 

/* --- The Hero Container --- */
.single-post .entry-header {
    position: sticky;
    top: var(--header-height); /* Match your header height */
    width:100%;
    height: var(--hero-height-blog);
    z-index: 1; /* Stays at the back */
    /* background-color: var(--background-light, #fff); */
    padding: 0 var(--hero-padding); /* This creates the "frame" effect */
    overflow: hidden;
}

.single-post .post-hero-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative; /* This is crucial for positioning the title */
}

.single-post .post-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- The Title Container --- */
.single-post .entry-title-container {
    padding: 0 var(--hero-padding);
    width: 100%;
    z-index: 2; /* Sits on top of the image */
    /* background-color: var(--background-light, #fff); */
}
.post-meta {
        padding: 0 0 0 var(--hero-padding);

}
.post-date {
    font-size:2.5rem;
    line-height: var(--line-height-heading);
}

/* --- The Main Content --- */
.single-post .post-body-content {
    position: relative;
    z-index: 2; /* Sits ON TOP of the hero */
    margin-top: var( --parallax-offset); /* This creates the parallax overlap */
    background-color: var(--background-light, #fff);
}
 .single-post .post-content-wrapper {
    margin:-0.8rem 1rem;
 }

/* .blog-slide-content {height: var(--hero-height-blog);z-index:1} */
/* .single-post .site-footer {top: -8rem;} */

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer {
    flex-shrink: 0; /* Prevents the footer from shrinking */
    height: var(--footer-height);
    top: 0;
    bottom:0;
    background-color: var(--background-light);
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes content to the bottom */
    padding: 0 var(--hero-padding) var(--timeline-nav-height) var(--hero-padding); 
}
.site-footer .container-fluid {
    position: relative;
}   
.footer-logo .custom-logo, .footer-logo-svg { 
    height: auto; 
    width: auto; 
}
.footer-logo-wrapper { 
    position: relative;
    padding: 0; 
}
.footer-text {
    font-family: 'Matahari', sans-serif;
    font-size: 0.938rem;
    line-height: var(--line-height-tight);
    letter-spacing: 0.4px;
    color: inherit;
    margin: 1rem 0 0 0;
}
/* This is for the copyright text  & Credits to align perfectly with the footer container*/
.footer-copyright {padding-right:0; padding-left:0;}
.footer-curated-by {padding-right:0;}
.footer-text span { display: inline-block; margin-left: 1.5rem; padding:0;}
.footer-text span:first-child { margin-left: 0; padding:0;}
.footer-text p { margin: 0; padding:0;}
.footer-text a { font-size: 1rem; }

/*
* ========================================================================
* Conditional Footer Credits
* ========================================================================
*/

/* By default, hide the credits row */
.footer-credits-row {
    display: none;
}

/* When the footer has the .show-credits class, display the row as a flex container */
.site-footer.show-credits .footer-credits-row {
    display: flex;
}

/* We are spliting the footer into 3 columns 
so we can then re-order the columns when responsive */
.col-4.footer-col.text-end {
    padding-right: 11px;
    top: -3px;
    position: relative;
}
.text-end .footer-text,
.text-end .footer-text a:any-link {
    text-align: right;
    font-size: 0.75rem;
    padding:0;
}

/*
* ========================================================================
* 11. Animated Heading Styles 
* ========================================================================
*/

/* The main heading container */
.heading-animation {
    display: block; /* Ensures it behaves predictably with line breaks */
}

/* The wrapper for all the words and spaces */
.heading-split {
    /* These inherit properties to ensure original font styles are kept */
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    display: block;
    height: 100%;
    overflow: hidden;
}

/* Each word is wrapped in a span, which is the key to correct line breaks */
.heading-split .word {
    display: inline-block;
}

/* Base style for each individual character */
.heading-split .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(1em) rotate(5deg);
    transform-origin: center bottom;
    transition: all 0.8s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--i) * 40ms); /* Stagger delay */
}

/* This targets the space character and gives it a visible width */
.heading-split .is-space {
    width: 0.4em; /* Adjust for wider or narrower spaces */
}
.heading-animation.visible-on-load {
    opacity: 1;
}
.heading-animation.visible-on-load .char {
    opacity: 1;
    transform: none;
    transition: none;
}
/* When the parent heading scrolls into view, trigger the animation */
.heading-animation.in .char {
    opacity: 1;
    transform: translateY(0) rotate(0);
}
/*
 * Title Animation Line Breaks
 */
.heading-animation .animation-line {
    display: block; /* Ensures each line takes up its own line */
    text-align: inherit; /* Inherits the text alignment from the parent h1 */
}

/* To make words on the same line flow correctly */
.heading-animation .animation-line .word,
.heading-animation .animation-line .is-space {
    display: inline-block; /* Keeps words and spaces on the same line */
}

/* For users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .heading-split .char,
    .heading-animation.in .char {
        opacity: 1;
        transform: none;
        transition: none !important;
    }
}
/* ==========================================================================
   12. Media Queries
   ========================================================================== */

@media (min-width:2560px) { 
    
    .site-footer {height: 55rem; padding-top:0;}
        h1, .section-title, .hero-title, .entry-title {
        width:100%;
    }
}

/* Large Desktops 1920px+ */
@media (min-width: 1920px) {
    
    .section-title {
        width:100%;
    }

    #home .col-md-5{
        flex: 0 0 1; 
       
    }
     #home .col-md-7 {
        width: 55,47vw;
        flex: 0 0 55,47vw;
     }
    /* This rule applies to all relevant sections and sets the precise column widths. */
    #relocation-services .col-custom-split-left,
    #travel-services .col-custom-split-left,
    #contact .col-custom-split-left,
    .blog-posts-list .col-custom-split-left{
        flex: 0 0 60vw; /* Do not grow, do not shrink, base width is 1152px */
        width: 60vw;
        max-width: 60vw; /* Enforce the maximum width */
    }
    

    #relocation-services .col-custom-split-right,
    #travel-services .col-custom-split-right,
    #contact .col-custom-split-right,
    .blog-posts-list .col-custom-split-right {
        flex: 1; /* This tells the right column to take up all remaining space */
    }

    /* --- Create the 200px Space BETWEEN Subsections --- */
    /* This targets the <hr> element that separates the blog view blocks. */
    .section-divider,
    .relocation-section-divider,
    .blog-section-divider {
        height: var(--space-btwn-sections); /* This uses the 200px variable */
        border: none;  /* Ensure it's just an invisible spacer */
        margin: 0;     /* Reset any default margins */
        background-color: transparent; /* Ensure it's invisible */
    }

    /* The subsections container that will have a min of 200px height*/
    .relocation-subsection,
    .contact-subsection,
    .travel-subsection,
    .blog-post-item {
        display: flex;
        align-items: flex-start;
        min-height: var(--subsection-spacing-height); 
    }
    

    .blog-post-item .col-custom-split-right {padding-left:.4rem;}
    .single-post .post-body-content { 
        margin-top:1rem;
    }

    .single-post .entry-content {
        min-height: var(--content-section-height);
    }
}

/* Laptops 1401px–1919px */
@media (min-width: 1441px) and (max-width: 1919px) {

    .hero-caption {padding-bottom:.5rem;}
    .single-post .post-body-content { 
        top: 0;
        margin-top:0; 
        padding-bottom: var(--bottom-content-spacing);
        
    }
    .footer-text { 
        margin: 0; padding:0 
    }
    .relocation-subsection,
    .contact-subsection,
    .travel-subsection,
    .blog-post-item {
        display: flex;
        align-items: flex-start;
        min-height: var(--subsection-spacing-height); 
    }
            
}
/* Medium Devices 769px–1400px */
@media (min-width: 769px) and (max-width: 1440px) {

    .single-post .post-body-content { 
        top: 0; 
        margin-top: -5rem;
        min-height: 100vh;
    }
    .section-text { 
        font-size: var(--font-size-h4);
    }

    #home .col-md-7{
        margin:0;
    }
    .site-main {
        padding-bottom: 0;
    }
    
    .relocation-subsection,
    .contact-subsection,
    .travel-subsection,
    .blog-post-item {
        display: flex;
        align-items: flex-start;
        min-height: var(--subsection-spacing-height); 
    }   
}

/* Mobile Devices ≤768px */
@media (max-width: 768px) {
    :root {
        --hero-padding: var(--hero-padding-mobile);
        --hero-height: var(--hero-height-mobile);
        --parallax-offset: calc(-1 * var(--hero-height));
    }
    
    .hero-title .title-mobile {
        display: inline;
    }
    .hero-title .title-desktop {
        display: none;
    }

    /* On mobile, allow the height to be automatic */
    .hero-slide[data-image-slug="travel-services"] .hero-caption {
        height: auto;
        display: block; /* Revert to default display */
    }
 
    .hero-caption { padding: .9rem 0 0 0; }
    .hero-video {
        object-fit:cover;
    }

    .hero-video-wrapper .mobile { display: flex; }
    .hero-video-wrapper .hero-video--desktop{ display: none; }
    .hero-slide {
        position: absolute;
        top:0; 
        left:0;
        width:100%; 
        height:100%;
        margin-right:0;
        opacity:0;
    }
    .hero-slide.is-slide-active { 
        opacity:1; z-index:1;
    }

    .hero-mobile-title-line-svg {display:block;}

    .hero-slide[data-image-slug="blog"] .hero-caption {
        width:100%;
    }
    .logo {
        left: 0;
        top: 0;
    }
    .col-custom-split-left,
    .col-custom-split-right {
        width: 100%;
        flex: 0 0 100%;
    }
    #home .section-text {  
        padding: 0 0 .5rem var(--hero-padding);
        margin:0;
    }
    .section-text {
        padding: 0 0 2.125rem 0;
        margin: 0 0 0 1.6rem;
    } 

    .single-post .entry-header {
        height: var(--hero-height-blog);
        padding: 0 var(--hero-padding);
    }

    .single-post .entry-title-container{
        padding:var(--hero-padding); margin:-7rem 0 .5rem 0;
    }
    .single-post .post-body-content { 
        margin-top:0 ; margin-bottom: 0;
        padding-bottom: var(--bottom-content-spacing);

    }

    .single-post .entry-content {
        padding:0; margin:-2rem 0;
        line-height: var(--line-height-tight);
    
    }

    .post-body-content .container-fluid {
        padding:0 .2rem;
    }
    .blog-post-item .section-text {margin:0 0 0 1rem;}
 
    .view-more-link {
        margin-left: 1.5rem;
        font-size: var(--font-size-h6);
        padding: .8rem 0;
    }
  
    .single-post .entry-title {
        margin-top:0;
    }
 .single-post .post-content-wrapper {
    margin:0 var(--hero-padding);
 }
    .section-title {
      width: 100%;
    }

    .subsection-title {
        align-items: flex-start;
    }


    .bullet-icon {
    width: 18px;
    height: 18px;
    margin:.3rem .5rem 0 0
   
}
.post-date {
    font-size:1.375rem;
}
    /* Footer - Mobile Adjustments */   
    .site-footer .text-start,
    .site-footer .text-end { 
        text-align: left !important; padding: 0; 
    }

    .footer-credits-row { 
        display: flex; 
        flex-direction: column; 
    }
    .footer-curated-by { 
        order: 1; 
    }
    .footer-copyright { 
        order: 2; 
    
    }

    .footer-text { 
        margin: 0; padding:0 0 .313rem 0; 
         font-size: 0.75rem;
    }
    .footer-text span { 
        display: block; 
        margin: 0 0 .313rem 0;
        text-align: left; 
        font-size: 0.75rem;
        padding: 0;
        line-height: var(--line-height-solid);
    }
 
    .footer-logo-wrapper { 
        padding: 0 0 .625rem 0; 
    }
    .site-footer { 
        padding: 0 var(--hero-padding-mobile) 0 var(--hero-padding-mobile);
        height:10.75rem; /* 170 pixels = 19.563rem */
    }
}