/*
========================================================================
0.  INDEX
........................................................................
*/
/*
 *  ██╗███╗   ██╗██████╗ ███████╗██╗  ██╗
 *  ██║████╗  ██║██╔══██╗██╔════╝╚██╗██╔╝
 *  ██║██╔██╗ ██║██║  ██║█████╗   ╚███╔╝
 *  ██║██║╚██╗██║██║  ██║██╔══╝   ██╔██╗
 *  ██║██║ ╚████║██████╔╝███████╗██╔╝ ██╗
 *  ╚═╝╚═╝  ╚═══╝╚═════╝ ╚══════╝╚═╝  ╚═╝
 */

 /*
 *  1.   FONTS
 *  2.   COLORS
 *  3.   BODY
 *  4.   TYPOGRAPHY
 *  5.   GRID
 *  6.   TOP NAVBAR
 *  7.   LINKS
 *  8.   BUTTONS
 *  9.   CORE COMPONENTS
 *  10.  BACKGROUND IMAGES
 *  11.  BLOG COMPONENTS
 *  12.  FOOTER
 */






/*
========================================================================
0.  FONTS
........................................................................
*/
/*
 *  ███████╗ ██████╗ ███╗   ██╗████████╗███████╗
 *  ██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔════╝
 *  █████╗  ██║   ██║██╔██╗ ██║   ██║   ███████╗
 *  ██╔══╝  ██║   ██║██║╚██╗██║   ██║   ╚════██║
 *  ██║     ╚██████╔╝██║ ╚████║   ██║   ███████║
 *  ╚═╝      ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚══════╝
 */


/* TOP OF overrides-global.css */
:root {
  --bs-title-font-family: "Poppins", system-ui, -apple-system, sans-serif;
  --bs-body-font-family: "Open Sans", system-ui, -apple-system, sans-serif;
}

/*
========================================================================
0.  COLORS
........................................................................
*/
/*
 *   ██████╗ ██████╗ ██╗      ██████╗ ██████╗ ███████╗
 *  ██╔════╝██╔═══██╗██║     ██╔═══██╗██╔══██╗██╔════╝
 *  ██║     ██║   ██║██║     ██║   ██║██████╔╝███████╗
 *  ██║     ██║   ██║██║     ██║   ██║██╔══██╗╚════██║
 *  ╚██████╗╚██████╔╝███████╗╚██████╔╝██║  ██║███████║
 *   ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝
 */


:root {
    /* Brand */
    --white:          #ffffff;
    --cs-blue-0:      #0080a3;
    --cs-blue-1:      #0090b8; /* Main Blue */
    --cs-blue-2:      #1aaad1;

    /* CS Accent */
    --cs-accent-000:  #00a852;
    --cs-accent-00:  #00c05e;
    --cs-accent-0:  #00d869;
    --gold:    #d4af37; /* Main Accent */
    --cs-accent-2:  #33f391;
    --cs-accent-3:  #66f6ac;
    --cs-accent-4:  #99f9c8;
    --cs-accent-5:  #ccfce3;
    --cs-accent-6:  #e6fef1;

    
    /* Greys */
    --grey-0:  #1a1b25; /* Text colour */
    --grey-1:  #30313d;
    --grey-2:  #414552;
    --grey-3:  #545969;
    --grey-4:  #687385;
    --grey-5:  #87909f;
    --grey-6:  #a3acba;
    --grey-7:  #c0c8d2;
    --grey-8:  #d9dee4;
    --grey-9:  #ebeef1;
    --grey-10: #f1f3f7;
    --grey-11: #f5f7f9;
}

/* Colour utility classes */

.gold       { color: var(--gold); }
.bg-gold  { background-color: var(--gold); }

.white       { color: var(--white); }
.bg-white    { background-color: var(--white); }

.cs-accent-000  { color: var(--cs-accent-000); }
.cs-accent-00  { color: var(--cs-accent-00); }
.cs-accent-0  { color: var(--cs-accent-0); }
.cs-accent    { color: var(--cs-accent); }
.cs-accent-2  { color: var(--cs-accent-2); }
.cs-accent-3  { color: var(--cs-accent-3); }
.cs-accent-4  { color: var(--cs-accent-4); }
.cs-accent-5  { color: var(--cs-accent-5); }
.cs-accent-6  { color: var(--cs-accent-6); }

.bg-cs-accent-000  { background-color: var(--cs-accent-000); }
.bg-cs-accent-00  { background-color: var(--cs-accent-00); }
.bg-cs-accent-0  { background-color: var(--cs-accent-0); }
.bg-cs-accent    { background-color: var(--cs-accent); }
.bg-cs-accent-2  { background-color: var(--cs-accent-2); }
.bg-cs-accent-3  { background-color: var(--cs-accent-3); }
.bg-cs-accent-4  { background-color: var(--cs-accent-4); }
.bg-cs-accent-5  { background-color: var(--cs-accent-5); }
.bg-cs-accent-6  { background-color: var(--cs-accent-6); }


.grey-0  { color: var(--grey-0); }
.grey-1  { color: var(--grey-1); }
.grey-2  { color: var(--grey-2); }
.grey-3  { color: var(--grey-3); }
.grey-4  { color: var(--grey-4); }
.grey-5  { color: var(--grey-5); }
.grey-6  { color: var(--grey-6); }
.grey-7  { color: var(--grey-7); }
.grey-8  { color: var(--grey-8); }
.grey-9  { color: var(--grey-9); }
.grey-10 { color: var(--grey-10); }
.grey-11 { color: var(--grey-11); }

.bg-grey-0  { background-color: var(--grey-0); }
.bg-grey-1  { background-color: var(--grey-1); }
.bg-grey-2  { background-color: var(--grey-2); }
.bg-grey-3  { background-color: var(--grey-3); }
.bg-grey-4  { background-color: var(--grey-4); }
.bg-grey-5  { background-color: var(--grey-5); }
.bg-grey-6  { background-color: var(--grey-6); }
.bg-grey-7  { background-color: var(--grey-7); }
.bg-grey-8  { background-color: var(--grey-8); }
.bg-grey-9  { background-color: var(--grey-9); }
.bg-grey-10 { background-color: var(--grey-10); }
.bg-grey-11 { background-color: var(--grey-11); }


.muted{
    opacity: 0.5;
}




/*
========================================================================
0.  BODY
........................................................................
*/
/*
 *  ██████╗  ██████╗ ██████╗ ██╗   ██╗
 *  ██╔══██╗██╔═══██╗██╔══██╗╚██╗ ██╔╝
 *  ██████╔╝██║   ██║██║  ██║ ╚████╔╝
 *  ██╔══██╗██║   ██║██║  ██║  ╚██╔╝
 *  ██████╔╝╚██████╔╝██████╔╝   ██║
 *  ╚═════╝  ╚═════╝ ╚═════╝    ╚═╝
 */


body{
    font-family: var(--bs-body-font-family);
    font-weight: 400;
    font-optical-sizing: auto;
    text-wrap: wrap;
    color: var(--grey-0);
    background-color: var(--white);
    font-size: 1rem;
}

/* Scroll stop on ID to clear navbar depth */
section[id] {
  scroll-margin-top: 56px;
}



/*
========================================================================
0.  TYPOGRAPHY
........................................................................
*/
/*
 *  ████████╗██╗   ██╗██████╗  ██████╗  ██████╗ ██████╗  █████╗ ██████╗ ██╗  ██╗██╗   ██╗
 *  ╚══██╔══╝╚██╗ ██╔╝██╔══██╗██╔═══██╗██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║  ██║╚██╗ ██╔╝
 *     ██║    ╚████╔╝ ██████╔╝██║   ██║██║  ███╗██████╔╝███████║██████╔╝███████║ ╚████╔╝
 *     ██║     ╚██╔╝  ██╔═══╝ ██║   ██║██║   ██║██╔══██╗██╔══██║██╔═══╝ ██╔══██║  ╚██╔╝
 *     ██║      ██║   ██║     ╚██████╔╝╚██████╔╝██║  ██║██║  ██║██║     ██║  ██║   ██║
 *     ╚═╝      ╚═╝   ╚═╝      ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝  ╚═╝   ╚═╝
 */



h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5,
.page-brand{
    font-family: "Poppins", system-ui, -apple-system, sans-serif;
    font-weight: 600;
}
h1, .h1{
  letter-spacing: -0.5px;
}

@media (max-width: 767px) {
    h1, .h1 {
        font-size: 175%;
    }
}

h6, .h6{
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 400;
    font-size: 80%;
}

.oblique{
    font-style: italic;
}

.bold-oblique{
    font-style: italic;
    font-weight: 700;
}


.display{
    font-family: "Poppins", system-ui, -apple-system, sans-serif;
    margin-top: -0.5rem;
    font-weight: 300;
}

@media screen and (min-width: 769px){
    .display{
        font-size: 28px!important;
    }
}
@media screen and (max-width: 768px){
    .display{
        font-size: 24px!important;
    }
}

.display-xl,
.display-md{
    font-family: "Poppins", system-ui, -apple-system, sans-serif;
    margin-top: -0.5rem;
    font-weight: 600;
}

@media screen and (min-width: 769px){
    .display-xl{
        font-size: 48px!important;
    }
}
@media screen and (max-width: 768px){
    .display-xl{
        font-size: 40px!important;
    }
}


@media screen and (min-width: 769px){
    .display-md{
        font-size: 40px!important;
    }
}
@media screen and (max-width: 768px){
    .display-md{
        font-size: 36px!important;
    }
}


.balance{
    text-wrap: balance;
}

@media (min-width: 992px) {
    .part-width-75{
        max-width: 75%;
    }
}

.lead{
    font-weight: 400!important;
    line-height: 1.333;
    letter-spacing: 0.125px;
}

.lead-large{
    font-weight: 300!important;
    font-size: 200%!important;
    line-height: 1.25;
    letter-spacing: -1px;
}

.small{
    font-size: 85%;
}

hr {
  margin: 0.75rem 0;
}

.fw-200,
.thin{
    font-weight: 200;
}
.fw-300,
.light{
    font-weight: 300;
}
.fw-400{
    font-weight: 400;
}
.fw-500{
    font-weight: 500;
}
.fw-600{
    font-weight: 600;
}
.fw-700,
.bold{
    font-weight: 700;
}
.fw-800,
.extra-bold{
    font-weight: 800;
}






/*
========================================================================
0.  GRID
........................................................................
*/
/*
 *   ██████╗ ██████╗ ██╗██████╗
 *  ██╔════ ╝██╔══██╗██║██╔══██╗
 *  ██║  ███╗██████╔╝██║██║  ██║
 *  ██║   ██║██╔══██╗██║██║  ██║
 *  ╚██████╔╝██║  ██║██║██████╔╝
 *   ╚═════╝ ╚═╝  ╚═╝╚═╝╚═════╝
 */

.grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(12, 1fr);
}

.grid-gap {
    display: grid;
    column-gap: 1rem;
    row-gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
}


/* Span classes — like Bootstrap cols */
.g-1  { grid-column: span 1; }
.g-2  { grid-column: span 2; }
.g-3  { grid-column: span 3; }
.g-4  { grid-column: span 4; }
.g-5  { grid-column: span 5; }
.g-6  { grid-column: span 6; }
.g-7  { grid-column: span 7; }
.g-8  { grid-column: span 8; }
.g-9  { grid-column: span 9; }
.g-10 { grid-column: span 10; }
.g-11 { grid-column: span 11; }
.g-12 { grid-column: span 12; }

@media (min-width: 576px) {
    .g-sm-1  { grid-column: span 1; }
    .g-sm-2  { grid-column: span 2; }
    .g-sm-3  { grid-column: span 3; }
    .g-sm-4  { grid-column: span 4; }
    .g-sm-5  { grid-column: span 5; }
    .g-sm-6  { grid-column: span 6; }
    .g-sm-7  { grid-column: span 7; }
    .g-sm-8  { grid-column: span 8; }
    .g-sm-9  { grid-column: span 9; }
    .g-sm-10 { grid-column: span 10; }
    .g-sm-11 { grid-column: span 11; }
    .g-sm-12 { grid-column: span 12; }
}

@media (min-width: 768px) {
    .g-md-1  { grid-column: span 1; }
    .g-md-2  { grid-column: span 2; }
    .g-md-3  { grid-column: span 3; }
    .g-md-4  { grid-column: span 4; }
    .g-md-5  { grid-column: span 5; }
    .g-md-6  { grid-column: span 6; }
    .g-md-7  { grid-column: span 7; }
    .g-md-8  { grid-column: span 8; }
    .g-md-9  { grid-column: span 9; }
    .g-md-10 { grid-column: span 10; }
    .g-md-11 { grid-column: span 11; }
    .g-md-12 { grid-column: span 12; }
}

@media (min-width: 992px) {
    .g-lg-1  { grid-column: span 1; }
    .g-lg-2  { grid-column: span 2; }
    .g-lg-3  { grid-column: span 3; }
    .g-lg-4  { grid-column: span 4; }
    .g-lg-5  { grid-column: span 5; }
    .g-lg-6  { grid-column: span 6; }
    .g-lg-7  { grid-column: span 7; }
    .g-lg-8  { grid-column: span 8; }
    .g-lg-9  { grid-column: span 9; }
    .g-lg-10 { grid-column: span 10; }
    .g-lg-11 { grid-column: span 11; }
    .g-lg-12 { grid-column: span 12; }
}

@media (min-width: 1200px) {
    .g-xl-1  { grid-column: span 1; }
    .g-xl-2  { grid-column: span 2; }
    .g-xl-3  { grid-column: span 3; }
    .g-xl-4  { grid-column: span 4; }
    .g-xl-5  { grid-column: span 5; }
    .g-xl-6  { grid-column: span 6; }
    .g-xl-7  { grid-column: span 7; }
    .g-xl-8  { grid-column: span 8; }
    .g-xl-9  { grid-column: span 9; }
    .g-xl-10 { grid-column: span 10; }
    .g-xl-11 { grid-column: span 11; }
    .g-xl-12 { grid-column: span 12; }
}






/*
========================================================================
0.  KEYFRAMES
........................................................................
*/
/*
 *  ██╗  ██╗███████╗██╗   ██╗███████╗██████╗  █████╗ ███╗   ███╗███████╗███████╗
 *  ██║ ██╔╝██╔════╝╚██╗ ██╔╝██╔════╝██╔══██╗██╔══██╗████╗ ████║██╔════╝██╔════╝
 *  █████╔╝ █████╗   ╚████╔╝ █████╗  ██████╔╝███████║██╔████╔██║█████╗  ███████╗
 *  ██╔═██╗ ██╔══╝    ╚██╔╝  ██╔══╝  ██╔══██╗██╔══██║██║╚██╔╝██║██╔══╝  ╚════██║
 *  ██║  ██╗███████╗   ██║   ██║     ██║  ██║██║  ██║██║ ╚═╝ ██║███████╗███████║
 *  ╚═╝  ╚═╝╚══════╝   ╚═╝   ╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝╚══════╝╚══════╝
 */







/*
========================================================================
0.  TOP NAVBAR
........................................................................
*/
/*
 *  ████████╗ ██████╗ ██████╗     ███╗   ██╗ █████╗ ██╗   ██╗██████╗  █████╗ ██████╗
 *  ╚══██╔══╝██╔═══██╗██╔══██╗    ████╗  ██║██╔══██╗██║   ██║██╔══██╗██╔══██╗██╔══██╗
 *     ██║   ██║   ██║██████╔╝    ██╔██╗ ██║███████║██║   ██║██████╔╝███████║██████╔╝
 *     ██║   ██║   ██║██╔═══╝     ██║╚██╗██║██╔══██║╚██╗ ██╔╝██╔══██╗██╔══██║██╔══██╗
 *     ██║   ╚██████╔╝██║         ██║ ╚████║██║  ██║ ╚████╔╝ ██████╔╝██║  ██║██║  ██║
 *     ╚═╝    ╚═════╝ ╚═╝         ╚═╝  ╚═══╝╚═╝  ╚═╝  ╚═══╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝
 */

    /* ── Sticky wrapper ─────────────────────────────── */
    .sticky-top {
      position: sticky;
      top: 0;
      z-index: 1030;
    }
    

    /* ── Main nav bar ───────────────────────────────── */
    .main-nav {
      padding: 0 1rem;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      height: 56px;
      position: relative; /* anchor for mobile dropdown */
    }

    .main-nav .container {
      height: 100%;
      display: flex;
      align-items: center;
    }

    /* Brand */
    .page-brand {
      font-size: 1.125rem;
      font-weight: 600;
      font-synthesis: none;
      color: var(--grey-0);
      text-decoration: none;
      white-space: nowrap;
      margin-right: 18px;
      flex-shrink: 0;
    }
    .page-brand:hover { color: var(--gold); }

    /* Desktop nav links */
    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1;
    }

    .desktop-nav .nav-link {
      color: var(--grey-0);
      font-size: 0.875rem;
      letter-spacing: 0.25px;
      font-weight: 400;
      padding: 16px 12px;
      white-space: nowrap;
      transition: color 0.15s, background 0.15s;
    }
    .desktop-nav .nav-link:hover {
      color: var(--gold);
    }


    /* ── Hamburger button ───────────────────────────── */
    .hamburger-btn {
      /* Fixed size — never shifts layout */
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 1px solid #ebeef1;
      border-radius: 6px;
      cursor: pointer;
      margin-left: auto;
      padding: 0;
      transition: background 0.15s;
    }
    .hamburger-btn:hover { background: #fff; }
    .hamburger-btn i {
      font-size: 1.1rem;
      color: #1a1b25;
      /* Prevent icon from causing any reflow */
      line-height: 1;
      display: block;
    }

    /* ── Mobile dropdown ────────────────────────────── */
    /* Absolutely positioned so it NEVER affects nav height */
    .mobile-menu {
      position: absolute;
      top: 100%; /* sits flush below the nav bar */
      left: 0;
      right: 0;
      background: #f1f3f7;
      border-bottom: 1px solid #ebeef1;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      z-index: 1029;

      /* Animation */
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease;
    }
    .mobile-menu.open { max-height: 600px; }

    .mobile-menu ul {
      list-style: none;
      margin: 0;
      padding: 8px 0 16px;
    }

    .mobile-menu li a {
      display: block;
      text-align: center;
      padding: 12px 24px;
      margin: 1rem;
      color: #1a1b25;
      background-color: #fff;
      font-size: 0.9rem;
      font-weight: 500;
      text-decoration: none;
      transition: background 0.15s;
    }
    .mobile-menu li a:hover { background: #f9f9f9; }

    .mobile-menu .mobile-cta {
      padding: 16px 24px;
      border-top: 1px solid #ebeef1;
      margin-top: 8px;
    }
    .mobile-menu .mobile-cta a {
      display: block;
      background: #1a1b25;
      color: #fff;
      border-radius: 6px;
      padding: 10px;
      text-align: center;
      font-weight: 600;
      font-size: 0.875rem;
      text-decoration: none;
      transition: opacity 0.15s;
    }
    .mobile-menu .mobile-cta a:hover { background: #1a1b25; opacity: 0.85; }


    /* ── Dropdown menu item ────────────────────────────── */
    /* ── Desktop dropdown ── */
    .nav-dropdown {
        position: relative;
    }

    .nav-dropdown-toggle {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .nav-dropdown-chevron {
        font-size: 0.75rem;
        transition: transform 0.2s ease;
    }

    .nav-dropdown.open .nav-dropdown-chevron {
        transform: rotate(180deg);
    }

    .nav-dropdown-menu {
        display: none;
        position: absolute;
        top: calc(100% + 0.1rem);
        right: 0;
        min-width: 240px;
        background: var(--white);
        box-shadow: 0 3px 6px rgba(0,0,0,0.20);
        padding: 0.4rem 0;
        z-index: 1000;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown-item {
        display: block;
        padding: 0.55rem 1.1rem;
        color: inherit;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 400;
        transition: background 0.15s;
    }

    .nav-dropdown-item:hover {
        background-color: var(--grey-11);
    }

    /* ── Mobile accordion ── */
    .mobile-dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font-size: inherit;
        font-family: inherit;
        color: inherit;
        font-weight: inherit;
    }

    .mobile-dropdown-chevron {
        font-size: 0.7rem;
        transition: transform 0.2s ease;
    }

    .mobile-dropdown-item.open .mobile-dropdown-chevron {
        transform: rotate(180deg);
    }

    .mobile-dropdown-menu {
        display: none;
        padding-left: 1rem;
        margin-top: 0.4rem;
        list-style: none;
    }

    .mobile-dropdown-item.open .mobile-dropdown-menu {
        display: block;
    }

    .mobile-dropdown-menu li a {
        display: block;
        padding: 0.25rem;
        font-size: 0.9rem;
        opacity: 0.8;
    }





/*
========================================================================
0.  LINKS
........................................................................
*/
/*
 *  ██╗     ██╗███╗   ██╗██╗  ██╗███████╗
 *  ██║     ██║████╗  ██║██║ ██╔╝██╔════╝
 *  ██║     ██║██╔██╗ ██║█████╔╝ ███████╗
 *  ██║     ██║██║╚██╗██║██╔═██╗ ╚════██║
 *  ███████╗██║██║ ╚████║██║  ██╗███████║
 *  ╚══════╝╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝╚══════╝
 */

a {
  text-decoration: none;
}

.text-link {
  color: var(--cs-accent-00);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.text-link:hover {
  color: var(--cs-accent-000)!important;
  text-decoration: underline;
}

.text-link:active {
  color: var(--cs-accent-00);
}

.text-link:visited {
  color: var(--cs-accent-00);
}



/*
........................................................................
BREADCRUMB LINKS

*/


.breadcrumb-container{
    padding: 1rem 0;
    margin-bottom: 3rem;
    border-top: 1px solid var(--grey-7);
    border-bottom: 1px solid var(--grey-7);
}


ul.breadcrumb {
    margin: 0;
    padding-left: 1rem;
    list-style: none;
}
ul.breadcrumb li {
    display: inline;
    font-size: 85%;
    font-weight: 400;
}
ul.breadcrumb li+li:before {
    padding: 6px;
    content: "/\00a0";
}
ul.breadcrumb li a {
    text-decoration: none;
    border-bottom: 1px solid #a3acba;
    color: #30313d!important;
    transition: color 0.1s ease;
}
ul.breadcrumb li a:hover {
    text-decoration: none;
    border-bottom: 1px solid #0090b8;
    color: #0090b8!important;
}


/*
========================================================================
0.  BUTTONS
........................................................................
*/
/*
 *  ██████╗ ██╗   ██╗████████╗████████╗ ██████╗ ███╗   ██╗███████╗
 *  ██╔══██╗██║   ██║╚══██╔══╝╚══██╔══╝██╔═══██╗████╗  ██║██╔════╝
 *  ██████╔╝██║   ██║   ██║      ██║   ██║   ██║██╔██╗ ██║███████╗
 *  ██╔══██╗██║   ██║   ██║      ██║   ██║   ██║██║╚██╗██║╚════██║
 *  ██████╔╝╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚████║███████║
 *  ╚═════╝  ╚═════╝    ╚═╝      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝╚══════╝
 */

.btn{
    letter-spacing: 0.25px;
    text-transform: uppercase;
    font-weight: 600;
}


.btn-group-responsive {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

/* Make each button take equal share of the row */
.btn-group-responsive > a {
    flex: 1 1 0;               /* grow, shrink, base 0 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;              /* prevents overflow with long text */
}

@media (max-width: 767px) {
    .btn-group-responsive {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-main,
    .btn-white {
        justify-content: center;
    }
}

.btn-main,
.btn-white,
.btn-inactive,
.btn-copy-email {
    text-decoration: none;
    color: inherit;
}

/* Filled button */
.btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--grey-0);
    border: 1.5px solid var(--grey-0);
    border-radius: 7px;
    padding: 0.5rem 1rem 0.4rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-main:hover { background: var(--grey-1); }

.btn-main .btn {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    pointer-events: none;
}

.btn-main i {
    color: var(--white);
    font-size: 14px;
    transition: transform 0.15s ease;
}




/* White button */
.btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--grey-9);
    border: 1.5px solid var(--grey-9);
    border-radius: 7px;
    padding: 0.5rem 0 0.4rem 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-white:hover { background: var(--grey-8); border-color: var(--grey-8); }

.btn-white .btn {
    color: var(--grey-0);
    font-size: 14px;
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
    pointer-events: none;
}

.btn-white i {
    color: var(--grey-0);
    font-size: 14px;
    transition: transform 0.15s ease;
}


.btn-inactive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.4rem;
    background: var(--grey-6);
    border: 1.5px solid var(--grey-6);
    border-radius: 7px;
    padding: 0.5rem 1rem 0.4rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-inactive:hover { background: var(--grey-6); }

.btn-inactive .btn {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    pointer-events: none;
}

.btn-inactive i {
    color: var(--white);
    font-size: 14px;
    transition: transform 0.15s ease;
}



/* Copy email */
.btn-copy-email {
    min-width: 9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--grey-9);
    border: 1.5px solid var(--grey-9);
    border-radius: 7px;
    padding: 0.5rem 1rem 0.4rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-copy-email:hover { background: var(--grey-10); }

.btn-copy-email .btn {
    color: var(--grey-0);
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    pointer-events: none;
}

.btn-copy-email i {
    color: var(--grey-0);
    font-size: 14px;
    transition: transform 0.15s ease;
}


  
/*
========================================================================
0.  CORE COMPONENTS
........................................................................
*/

/*
 *   ██████╗ ██████╗ ██████╗ ███████╗
 *  ██╔════╝██╔═══██╗██╔══██╗██╔════╝
 *  ██║     ██║   ██║██████╔╝█████╗
 *  ██║     ██║   ██║██╔══██╗██╔══╝
 *  ╚██████╗╚██████╔╝██║  ██║███████╗
 *   ╚═════╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝
 *
 *   ██████╗ ██████╗ ███╗   ███╗██████╗  ██████╗ ███╗   ██╗███████╗███╗   ██╗████████╗███████╗
 *  ██╔════╝██╔═══██╗████╗ ████║██╔══██╗██╔═══██╗████╗  ██║██╔════╝████╗  ██║╚══██╔══╝██╔════╝
 *  ██║     ██║   ██║██╔████╔██║██████╔╝██║   ██║██╔██╗ ██║█████╗  ██╔██╗ ██║   ██║   ███████╗
 *  ██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██║   ██║██║╚██╗██║██╔══╝  ██║╚██╗██║   ██║   ╚════██║
 *  ╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ╚██████╔╝██║ ╚████║███████╗██║ ╚████║   ██║   ███████║
 *   ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝      ╚═════╝ ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═══╝   ╚═╝   ╚══════╝
 */


.sticky-element{
  position: -webkit-sticky;
  position: sticky;
  top: 6rem;
}

img {
  width: 100%;
  height: auto;
}

header .header-grid {
    margin: 0;
    padding: 0;
    min-height: 100svh; /* full viewport height on mobile */
}
@media (min-width: 768px) {
    header .header-grid {
        min-height: 30rem;
    }
}


header .header-grid-index {
    margin: 0;
    padding: 0;
    min-height: 56rem;
}
@media (min-width: 768px) {
    header .header-grid-index {
        min-height: 36rem;
    }
}


section{
  margin: 0;
  padding: 2rem 0 2rem 0;
}

.container{
  margin: 0 auto;
  padding: 0;
}

.h-auto {
  height: auto;
}


.box,
.box-top,
.box-middle,
.box-bottom,
.box-spread,
.box-top-left,
.box-top-center,
.box-top-right,
.box-middle-left,
.box-middle-center,
.box-middle-right,
.box-bottom-left,
.box-bottom-center,
.box-bottom-right {
    display: grid;
    height: 100%;
    margin: 0;
    padding: 1rem;
}

/* ── Vertical only ───────────────────────── */
.box-top    { align-content: start; }
.box-middle { align-content: center; }
.box-bottom { align-content: end; }
.box-spread { align-content: space-between; }

/* ── Top row ─────────────────────────────── */
.box-top-left   { align-content: start;  justify-items: start; }
.box-top-center { align-content: start;  justify-items: center; }
.box-top-right  { align-content: start;  justify-items: end; }

/* ── Middle row ──────────────────────────── */
.box-middle-left   { align-content: center; justify-items: start; }
.box-middle-center { align-content: center; justify-items: center; }
.box-middle-right  { align-content: center; justify-items: end; }

/* ── Bottom row ──────────────────────────── */
.box-bottom-left   { align-content: end; justify-items: start; }
.box-bottom-center { align-content: end; justify-items: center; }
.box-bottom-right  { align-content: end; justify-items: end; }



/* Pad on XS */
@media screen and (max-width: 767px){
  .flush{
      padding: 1rem;
  }
}
@media screen and (min-width: 768px){
  .flush{
      padding: 1rem 0;
  }
}

/* Pad on SM-XL */
@media screen and (max-width: 767px){
  .flush-reverse{
      padding: 1rem 0;
  }
}
@media screen and (min-width: 768px){
  .flush-reverse{
      padding: 1rem;
  }
}


/* Pad left on XS */
@media screen and (max-width: 767px){
  .flush-galley{
      padding: 0 1rem;
  }
}
@media screen and (min-width: 768px){
  .flush-galley{
      padding: 0 1rem 0 0;
  }
}

/* Flush left on all */
.flush-const{
  padding: 0 1rem 0 0;
}


.clear {
  padding: 0;
}

.h-100{
    height: 100%;
}


/*
........................................................................
ADJUSTED COMPONENTS
*/

/* Grid fix to allow travel area for STICKY elements */
.flush-galley {
    height: 100%;
}


/* Apply bottom margin to header H1 to "center" Y on desktop */
@media (max-width: 767px) {
    .header-shift-index {
        margin-bottom: 0;
    }
}
@media (min-width: 768px) {
    .header-shift-index {
        margin-bottom: 13rem;
    }
}


/* Apply bottom margin to header H1 to "center" Y on desktop */
@media (max-width: 767px) {
    .header-shift {
        margin-bottom: 0;
    }
}
@media (min-width: 768px) {
    .header-shift {
        margin-bottom: 8rem;
    }
}



/*
........................................................................
CUSTOM COMPONENTS
*/

/*INDEX*/

.feature-lift{
    margin-top: -8rem;
}

.stars{
    color: var(--gold);
    font-size: 150%;
    Margin-bottom: 0;
}

.event-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 40rem;      /* minimum, not fixed */
    height: auto;           /* allow it to expand */
    overflow: visible;      /* don’t hide overflow */
}

@media (min-width: 768px) {
    .event-card {
        min-height: 40rem;  /* smaller minimum on larger screens */
        height: auto;
    }
}



/*Others*/

@media screen and (min-width: 769px){
    .card-inner{
        padding: 0 1.5rem;
    }
}
@media screen and (max-width: 768px){
    .card-inner{
        padding: 2rem 0 0 0;
    }
}

.tag,
.tag-price,
.tag-black,
.tag-gold,
.tag-location {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;               /* space between text and optional icon */
  margin-top: 0.25rem;
  padding: 0.3rem 0.7rem 0.2rem 0.6rem;
  font-size: 0.85rem;         /* ~12px, adjust to your scale */
  line-height: 1.5;
  font-weight: 500;
  color: var(--grey-2);
  background: var(--grey-10);
  border: 1px solid var(--grey-10);
  border-radius: 4px;       /* fully rounded pill */
}

/* Optional: variant classes */
.tag-price {
  background-color: var(--white);
}

.tag-black {
  background-color: var(--grey-0);
  color: var(--white);
}

.tag-gold {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  font-weight: 700;
}

.tag-location {
  border-color: var(--grey-9);
}

.exclusive-tag{
    display: inline-flex;
    background-color: var(--gold);
    color: var(--white);
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}
.exclusive-tag-black{
    display: inline-flex;
    background-color: var(--grey-0);
    color: var(--white);
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}
.exclusive-tag-light{
    display: inline-flex;
    background-color: var(--grey-10);
    color: var(--grey-0);
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}


.pulse-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-top: -2px;
    border-radius: 50%;
    background-color: #22c55e; /* green – adjust to your palette */
    animation: pulse 1.5s ease-in-out infinite;
}

/* Optional: align with text nicely */
.pulse-dot {
    vertical-align: middle;
    margin-right: 0.35rem;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.85);
  }
}

.radius-08{
    border-radius: 0.8rem;
}

.radius-05{
    border-radius: 0.5rem;
}

.radius-03{
    border-radius: 0.3rem;
}

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

.check-list li {
    font-size: 95%;
    color: var(--grey-2);
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.4rem;
}

.check-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 600;
}


.check-list-large {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.check-list-large li {
    font-size: 110%;
    font-weight: 600;
    color: var(--grey-0);
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.4rem;
}

.check-list-large li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 600;
}


.check-list-large-white {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.check-list-large-white li {
    font-size: 110%;
    font-weight: 600;
    color: var(--white);
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.4rem;
}

.check-list-large-white li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 600;
}


.check-list-dark {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.check-list-dark li {
    font-size: 95%;
    color: var(--grey-10);
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.4rem;
}

.check-list-dark li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 600;
}


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

.caret-list li {
    font-size: 95%;
    font-weight: 600;
    color: var(--grey-2);
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.4rem;
}

.caret-list li::before {
    content: "\f231";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gold);
    font-weight: 600;
}



.map-section {
    padding: 0;
  width: 100%;
  height: 36rem;          /* or whatever height you want */
  overflow: hidden;
}

.map-section iframe {
  display: block;
  width: 100%;
  height: 100%;
}



/*
========================================================================
0.  BACKGROUND-IMAGES
........................................................................
*/
/*
 *  ██████╗  █████╗  ██████╗██╗  ██╗ ██████╗ ██████╗  ██████╗ ██╗   ██╗███╗   ██╗██████╗
 *  ██╔══██╗██╔══██╗██╔════╝██║ ██╔╝██╔════╝ ██╔══██╗██╔═══██╗██║   ██║████╗  ██║██╔══██╗
 *  ██████╔╝███████║██║     █████╔╝ ██║  ███╗██████╔╝██║   ██║██║   ██║██╔██╗ ██║██║  ██║
 *  ██╔══██╗██╔══██║██║     ██╔═██╗ ██║   ██║██╔══██╗██║   ██║██║   ██║██║╚██╗██║██║  ██║
 *  ██████╔╝██║  ██║╚██████╗██║  ██╗╚██████╔╝██║  ██║╚██████╔╝╚██████╔╝██║ ╚████║██████╔╝
 *  ╚═════╝ ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═══╝╚═════╝
 *
 *  ██╗███╗   ███╗ █████╗  ██████╗ ███████╗███████╗
 *  ██║████╗ ████║██╔══██╗██╔════╝ ██╔════╝██╔════╝
 *  ██║██╔████╔██║███████║██║  ███╗█████╗  ███████╗
 *  ██║██║╚██╔╝██║██╔══██║██║   ██║██╔══╝  ╚════██║
 *  ██║██║ ╚═╝ ██║██║  ██║╚██████╔╝███████╗███████║
 *  ╚═╝╚═╝     ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚══════╝
 */



 


/* BG img Global */
.bg-img-box{
    background-size: cover;
    background-repeat: no-repeat;
}



/* Index */

.bg-img-box-index {
    background-image: 
        linear-gradient(to bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%),
        url(../img/index/index-hero.png);
    background-position: bottom;
}
@media (min-width: 768px) {
    .bg-img-box-index {
        background-image: 
        linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.9) 100%),
            url(../img/index/lake-sunset.jpg);
        background-position: top;
    }
}


.bg-img-box-team-building {
    background-image: 
        linear-gradient(to bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%),
        url(../img/retreats/lumnely-castle-3.jpeg);
    background-position: bottom;
}


.bg-img-box-steve {
    background-image: 
        url(../img/Steve-Whiteman.jpeg);
    background-position: top;
}


.bg-img-partner-logos {
    background-image: 
        url(../img/partner-logos.png);
        background-size: contain;
    background-position: middle center;
}


.bg-img-box-sunset-lake {
    background-image: 
        url(../img/lake-sunset-crop.jpg);
    background-position: middle;
}

.bg-img-box-congburn {
    background-image: 
        linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.8) 100%),
        url(../img/fitness.jpg);
    background-position: bottom;
}

.bg-img-box-kaeso-facial {
    background-image: 
        url(../img/kaeso-facial.jpg);
    background-position: right;
    height: 18rem;
}

.bg-img-box-one-to-one-massage {
    background-image: 
        url(../img/1-to-1-massage.jpg);
    background-position: right;
    height: 18rem;
}

.bg-img-box-fitness-group {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%),
        url(../img/bootcamp.jpg);
    background-position: bottom;
}

.bg-img-box-one-to-one-training {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%),
        url(../img/one-to-one-training.jpg);
    background-position: right;
}


/* Me and the Team */

.bg-img-box-team-steve {
    background-image: 
        url(../img/team/team-steve.jpeg);
    background-position: center;
}

.bg-img-box-team-lisa {
    background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%),
        url(../img/team/team-lisa.jpeg);
    background-position: center;
}

.bg-img-box-team-atusa {
    background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%),
        url(../img/team/team-atusa.jpeg);
    background-position: center;
}

.bg-img-box-team-beth {
    background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%),
        url(../img/team/team-beth.jpg);
    background-position: top;
}

.bg-img-box-team-donna {
    background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%),
        url(../img/team/team-donna.jpeg);
    background-position: top;
}

.bg-img-box-team-helen {
    background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%),
        url(../img/lake-sunset.jpg);
    background-position: center;
}

.bg-img-box-team-chrissie {
    background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%),
        url(../img/team/team-chrissie.jpeg);
    background-position: right;
}



/* Marystone House */

.bg-img-box-marystone-1 {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(1, 102, 253, 0.089) 50%, rgba(0, 16, 68, 0.301) 100%),
        url(../img/retreats/marystone-house-1.jpeg);
    background-position: center;
}
.bg-img-box-marystone-2 {
    background-image: 
        url(../img/retreats/marystone-house-3.jpeg);
    background-position: center;
}
.bg-img-box-marystone-3 {
    background-image: 
        url(../img/retreats/marystone-house-4.jpeg);
    background-position: center;
}
.bg-img-box-marystone-4 {
    background-image: 
        url(../img/retreats/marystone-house-9.jpeg);
    background-position: center;
}


/* Congburn */

.bg-img-box-congburn-1 {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.5) 100%),
        url(../img/retreats/congburn-3-b.jpg);
    background-position: center;
}

.bg-img-box-congburn-2 {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.5) 100%),
        url(../img/retreats/congburn-2-b.jpg);
    background-position: center;
}

.bg-img-box-congburn-3 {
    background-image: 
        url(../img/retreats/congburn-4-b.jpg);
    background-position: center;
}

.bg-img-box-congburn-4 {
    background-image: 
        url(../img/retreats/congburn-5-b.jpg);
    background-position: center;
}

/* Barnard Castle */

.bg-img-box-barnard-castle-1 {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.5) 100%),
        url(../img/retreats/barnard-castle-2-b.jpg);
    background-position: bottom;
}

.bg-img-box-barnard-castle-2 {
    background-image: 
        url(../img/retreats/barnard-castle-1-b.jpg);
    background-position: center;
}

.bg-img-box-barnard-castle-3 {
    background-image: 
        url(../img/retreats/barnard-castle-5.jpeg);
    background-position: center;
}

.bg-img-box-barnard-castle-4 {
    background-image: 
        url(../img/retreats/barnard-castle-3.jpeg);
    background-position: center;
}

/* Lumley Castle */

.bg-img-box-lumley-castle-1 {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.5) 100%),
        url(../img/retreats/lumley-castle-1.jpeg);
    background-position: center;
}

.bg-img-box-lumley-castle-2 {
    background-image: 
        url(../img/retreats/lumley-castle-5.jpeg);
    background-position: center;
}

.bg-img-box-lumley-castle-3 {
    background-image: 
        url(../img/retreats/lumley-castle-4.jpeg);
    background-position: center;
}

.bg-img-box-lumley-castle-4 {
    background-image: 
        url(../img/retreats/lumley-castle-2.jpeg);
    background-position: center;
}

/* Beach Retreats */

.bg-img-box-beach-retreats-1 {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.5) 100%),
        url(../img/retreats/beach-retreats-2-b.jpg);
    background-position: center;
}

.bg-img-box-beach-retreats-2 {
    background-image: 
        url(../img/retreats/beach-retreats-3.jpeg);
    background-position: center;
}

.bg-img-box-beach-retreats-3 {
    background-image: 
        url(../img/retreats/beach-retreats-5.jpeg);
    background-position: center;
}

.bg-img-box-beach-retreats-4 {
    background-image: 
        url(../img/retreats/beach-retreats-4.jpeg);
    background-position: top;
}


/* Other Locations */

.bg-img-box-lake-sunset {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.5) 100%),
        url(../img/lake-sunset-crop.jpg);
    background-position: center;
}

.bg-img-box-horse-therapy {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.5) 100%),
        url(../img/horse-therapy.jpg);
    background-position: center;
}

.bg-img-box-fire-walk {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.5) 100%),
        url(../img/fire-walk.jpg);
    background-position: center;
}


/* Zumba */

.bg-img-box-zumba-event {
    background-image: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.5) 100%),
        url(../img/retreats/zumba-event.png);
    background-position: center;
}




/*
========================================================================
0.  BLOG COMPONENTS
........................................................................
*/
/*
 *  ██████╗ ██╗      ██████╗  ██████╗
 *  ██╔══██╗██║     ██╔═══██╗██╔════╝
 *  ██████╔╝██║     ██║   ██║██║  ███╗
 *  ██╔══██╗██║     ██║   ██║██║   ██║
 *  ██████╔╝███████╗╚██████╔╝╚██████╔╝
 *  ╚═════╝ ╚══════╝ ╚═════╝  ╚═════╝
 *
 *   ██████╗ ██████╗ ███╗   ███╗██████╗  ██████╗ ███╗   ██╗███████╗███╗   ██╗████████╗███████╗
 *  ██╔════╝██╔═══██╗████╗ ████║██╔══██╗██╔═══██╗████╗  ██║██╔════╝████╗  ██║╚══██╔══╝██╔════╝
 *  ██║     ██║   ██║██╔████╔██║██████╔╝██║   ██║██╔██╗ ██║█████╗  ██╔██╗ ██║   ██║   ███████╗
 *  ██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██║   ██║██║╚██╗██║██╔══╝  ██║╚██╗██║   ██║   ╚════██║
 *  ╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ╚██████╔╝██║ ╚████║███████╗██║ ╚████║   ██║   ███████║
 *   ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝      ╚═════╝ ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═══╝   ╚═╝   ╚══════╝
 */









/*
========================================================================
0.  FOOTER
........................................................................
*/
/*
 *  ███████╗ ██████╗  ██████╗ ████████╗███████╗██████╗
 *  ██╔════╝██╔═══██╗██╔═══██╗╚══██╔══╝██╔════╝██╔══██╗
 *  █████╗  ██║   ██║██║   ██║   ██║   █████╗  ██████╔╝
 *  ██╔══╝  ██║   ██║██║   ██║   ██║   ██╔══╝  ██╔══██╗
 *  ██║     ╚██████╔╝╚██████╔╝   ██║   ███████╗██║  ██║
 *  ╚═╝      ╚═════╝  ╚═════╝    ╚═╝   ╚══════╝╚═╝  ╚═╝
 */

footer{
    margin: 0;
    padding: 0;
}

.footer-main{
    padding: 0 1rem;
}

.footer-title{
    font-size: 100%;
    font-weight: 600;
 }

.footer-link{
    font-size: 85%;
    line-height: 2;
    color: #30313d;
    text-decoration: none;
    transition: color 0.1s ease;
}
.footer-link:hover{
    color: #0090b8;
    text-decoration: none;
}



.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-list li {
    line-height: 2;
    margin: 0;
    padding: 0;
}

.footer-list li a {
    display: block;              /* Makes the link fill the li */
    width: 100%;                 /* Ensures it spans the entire row */
    font-size: 85%;
    font-weight: 500;
    color: var(--grey-3);
    text-decoration: none;
    padding: 0;              /* Adds some vertical space for better click area */
    transition: color 0.1s ease;
}

.footer-list li a:hover {
    color: var(--cs-accent-00);
    text-decoration: none;
    cursor: pointer;
}







/*
========================================================================
========================================================================
========================================================================
========================================================================
========================================================================
========================================================================
0.  CSS END
........................................................................
*/