:root {
  --isi-font-body: "Serenity", sans-serif;      
  --isi-text-color: #105249;                    
  --isi-body-size: 18px;                        
  --isi-body-lh: 1.65;                          
  --isi-content-lh: 1.7;                        
}
p {
  line-height: var(--isi-body-lh);
}
p.serenity-light,
p.title-description,
p.activity-stays-v2__description,
p.activity-card-v2__text {
  line-height: var(--isi-body-lh);
}
.summernote-content,
.summernote-content p,
.summernote-content div,
.summernote-content span,
.summernote-content font,
.summernote-content li,
.summernote-content td,
.summernote-content th {
  font-family: var(--isi-font-body) !important;
  font-size: var(--isi-body-size) !important;     
  color: var(--isi-text-color) !important;        
  line-height: var(--isi-content-lh) !important;
  background-color: transparent !important;       
}
.summernote-content a,
.summernote-content a span {
  color: var(--isi-text-color) !important;
  text-decoration: underline !important;
}
.summernote-content h1,
.summernote-content h2 {
  font-size: 28px !important;
}
.summernote-content h3 {
  font-size: 24px !important;
}
.summernote-content h4 {
  font-size: 20px !important;
}
.summernote-content h5,
.summernote-content h6 {
  font-size: 18px !important;
  font-weight: 700 !important;
}
.summernote-content h1,
.summernote-content h2,
.summernote-content h3,
.summernote-content h4,
.summernote-content h5,
.summernote-content h6 {
  font-family: var(--isi-font-body) !important;
  color: var(--isi-text-color) !important;
  line-height: 1.25 !important;
  text-align: left !important;
  background-color: transparent !important;
}
.summernote-content h1 span, .summernote-content h1 font,
.summernote-content h2 span, .summernote-content h2 font,
.summernote-content h3 span, .summernote-content h3 font,
.summernote-content h4 span, .summernote-content h4 font,
.summernote-content h5 span, .summernote-content h5 font,
.summernote-content h6 span, .summernote-content h6 font {
  font-size: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}
@media (min-width: 576px) {.summernote-content p,
  .summernote-content li,
  .summernote-content div {
    text-align: justify !important;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
.tsix-richtext p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }}
@media (max-width: 575.98px) {.summernote-content p,
  .summernote-content li,
  .summernote-content div {
    text-align: left !important;
  }}
.summernote-content img {
  max-width: 100% !important;   
  height: auto !important;      
  display: block;               
  margin: 1.25rem auto;         
}
.summernote-content div[style*="width"],
.summernote-content table,
.summernote-content td[style*="width"],
.summernote-content th[style*="width"] {
  max-width: 100% !important;
}
.summernote-content iframe {
  max-width: 100%;
}
@media (max-width: 991.98px) {.tsix-about-section__media {
    max-height: 440px;
  }
.tsix-about-section__media img {
    max-height: 440px;
    object-fit: cover;
    object-position: center;
  }}
.footer-section::before,
.footer-section::after {
  background-image: none !important;
}
.tsix-about-hero[style*="d2670381493aebb89afccaf6ff55a3276810a708"] {
  background-image: url("https://pub-77dfd32c2b4a41d3a61992ed7048ee22.r2.dev/__assets/www.sunseek.africa/1d/9f/1d9f24e634c52fa00e0dc340c6aa38e11cc0fc0f.jpg") !important;
}
.summernote-content video,
.summernote-content iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}
.summernote-content,
.summernote-content p,
.summernote-content div,
.summernote-content span,
.summernote-content li {
  overflow-wrap: anywhere;
  word-break: normal;
}
@media (min-width: 992px) and (max-width: 1199.98px) {.ss-header__inner {
    width: calc(100% - 240px) !important;
    max-width: calc(100% - 240px) !important;
  }
.ss-header__nav {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
.ss-header__toggle {
    display: flex !important;
  }
.ss-nav {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--ss-header-bg, #fff) !important;
  }
.ss-nav.open {
    max-height: calc(1080px - 112px) !important;
  }
.ss-nav > li,
  .ss-nav__link {
    width: 100%;
  }
.ss-nav__item--has-children > .ss-dropdown {
    position: static !important;
    display: none !important;
    width: 100% !important;
    transform: none !important;
  }
.ss-nav__item--has-children.open > .ss-dropdown {
    display: block !important;
  }}
@media (max-width: 575.98px) {html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }
.container > .row.g-5 {
    --bs-gutter-x: 0;
  }
.ss-header,
  .ss-header__inner,
  .ss-header__nav {
    min-width: 0;
    max-width: 100%;
  }
.ss-header__inner {
    width: calc(100% - 120px) !important;
    margin-left: 120px !important;
    padding-inline: 0.75rem !important;
  }
.ss-theme-six-logo-shell {
    top: 0;
    left: 0;
    width: 120px;
    max-width: 120px;
    height: 112px !important;
  }
.ss-theme-six-logo-bg {
    width: 120px;
    max-width: 120px;
    height: 112px !important;
    min-height: 0 !important;
    padding: 0.5rem;
    align-items: center;
  }
.ss-theme-six-logo-bg img {
    width: 100%;
    max-width: 104px;
    max-height: 96px;
    padding: 0;
    transform: none;
    object-fit: contain;
  }
.ss-nav {
    max-width: 1920px;
  }
.footer-section.theme-six-footer-main {
    width: 100%;
    max-width: 1920px;
  }
.main-description.mx-120.px-120 {
    display: block;
    width: 100%;
    margin-inline: 0 !important;
    padding: 3rem 1.25rem !important;
  }
.main-description.mx-120.px-120 > .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 0 !important;
  }
.main-description .h1-mega {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: 2rem !important;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
#resources-tenders,
  #resources-tenders > .p-4,
  #resources-tenders .table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
.tender-archive-card,
  .tender-archive-card > .card-body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
#resources-tenders > .p-4 {
    padding: 1rem !important;
  }
#resources-tenders .table-responsive {
    overflow: visible;
  }
#resources-tenders table,
  #resources-tenders tbody,
  #resources-tenders tr,
  #resources-tenders td {
    display: block;
    width: 100%;
  }
#resources-tenders thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
#resources-tenders tbody tr {
    padding: 1rem;
    margin-bottom: 0.85rem;
    border: 1px solid rgba(16, 82, 73, 0.16);
    border-radius: 6px;
    background: #fff;
  }
#resources-tenders tbody td {
    padding: 0.3rem 0;
    border: 0;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
#resources-tenders tbody td:nth-child(1)::before {
    content: "Published: ";
    font-weight: 700;
  }
#resources-tenders tbody td:nth-child(3):not(:empty)::before {
    content: "Closing date: ";
    font-weight: 700;
  }
#resources-tenders tbody td:empty {
    display: none;
  }
#resources-tenders .d-flex {
    justify-content: flex-start !important;
  }}


  .breadcrumb-area::after {
    background-color: #FDFDFD !important;
    opacity: 0.76 !important;
  }



        .tsix-about-hero {
            position: relative;
            background-size: cover;
            background-position: center;
            min-height: 360px;
            display: flex;
            align-items: center;
        }
        .tsix-about-hero__overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(6, 42, 58, 0.72), rgba(6, 42, 58, 0.35));
        }
        .tsix-about-hero__content {
            padding: clamp(2rem, 96px, 4rem) 0;
        }
        .tsix-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.35rem 1rem;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.16);
            color: var(--color-quinary, #FDFDFD);
        }
        .tsix-richtext p {
            margin-bottom: 1.2rem;
        }
        .text-white-75 {
            color: rgba(255, 255, 255, 0.8) !important;
        }
        .card img {
            border-radius: 16px;
        }
    


        :root {
            --color-primary: #00ABC5;
            --color-primary-rgb: 0, 171, 197;
            --color-secondary: #F7C23D;
            --color-secondary-rgb: 247, 194, 61;
            --color-tertiary: #105249;
            --color-tertiary-rgb: 16, 82, 73;
            --color-quinary: #FFDE8A;
            --color-quinary-rgb: 255, 222, 138;
            --font-default-color: #105249;
            --font-default-color-rgb: 16, 82, 73;
            --font-highlight-color: #ED1B24;
            --font-highlight-color-rgb: 237, 27, 36;
            --spacing-section-gap: 6rem;
            --spacing-activity-card-gap: 1rem;
            --spacing-extra-lg-vertical: 6rem;
            --spacing-extra-lg-horizontal: 3rem;
            --spacing-lg-vertical: 4.5rem;
            --spacing-lg-horizontal: 2.5rem;
            --spacing-md-vertical: 3.5rem;
            --spacing-md-horizontal: 2rem;
            --spacing-vertical: 3rem;
            --spacing-horizontal: 1.75rem;
            --spacing-sm-vertical: 2rem;
            --spacing-sm-horizontal: 1.5rem;
            --spacing-xs-vertical: 1rem;
            --spacing-xs-horizontal: 1rem;
            --button-border-radius: 999px;
            --button-padding-y: 0.75rem;
            --button-padding-x: 1.75rem;
            --form-input-border-radius: 0.75rem;
            --form-input-padding-y: 0.75rem;
            --form-input-padding-x: 1rem;
            --form-input-background: #ffffff;
            --form-input-color: #333333;
            --form-input-border-color: #ced4da;

        body {
            color: #105249;
                            font-family: 'Serenity', sans-serif;
                                        font-weight: 400;
                                        font-size: 18px;
                                        line-height: 19.5px;
                                                    font-style: normal;
                    }

                    --typography-h1_prime-font-family: "Warnock Pro", sans-serif;
                    --typography-h1_prime-font-weight: 600;
                    --typography-h1_prime-font-size: 64px;
                    --typography-h1_prime-line-height: 60px;
                    --typography-h1_prime-letter-spacing: normal;
                    --typography-h1_prime-font-style: normal;
                    --typography-h1_prime-text-transform: none;
                    --typography-h1_prime-color: var(--font-default-color);
                        --typography-h1_mega-font-family: "Serenity", sans-serif;
                    --typography-h1_mega-font-weight: 200;
                    --typography-h1_mega-font-size: 64px;
                    --typography-h1_mega-line-height: 60px;
                    --typography-h1_mega-letter-spacing: 1px;
                    --typography-h1_mega-font-style: normal;
                    --typography-h1_mega-text-transform: none;
                    --typography-h1_mega-color: var(--font-default-color);
                        --typography-h1_super-font-family: "Warnock Pro", sans-serif;
                    --typography-h1_super-font-weight: 600;
                    --typography-h1_super-font-size: 50px;
                    --typography-h1_super-line-height: 50px;
                    --typography-h1_super-letter-spacing: -5px;
                    --typography-h1_super-font-style: italic;
                    --typography-h1_super-text-transform: none;
                    --typography-h1_super-color: var(--font-default-color);
                        --typography-h1-font-family: "Serenity", sans-serif;
                    --typography-h1-font-weight: 200;
                    --typography-h1-font-size: 50px;
                    --typography-h1-line-height: 50px;
                    --typography-h1-letter-spacing: normal;
                    --typography-h1-font-style: normal;
                    --typography-h1-text-transform: none;
                    --typography-h1-color: var(--font-default-color);
                        --typography-h2-font-family: "Serenity", sans-serif;
                    --typography-h2-font-weight: 200;
                    --typography-h2-font-size: 40px;
                    --typography-h2-line-height: 37px;
                    --typography-h2-letter-spacing: normal;
                    --typography-h2-font-style: normal;
                    --typography-h2-text-transform: none;
                    --typography-h2-color: var(--font-default-color);
                        --typography-h3-font-family: "Warnock Pro", sans-serif;
                    --typography-h3-font-weight: 700;
                    --typography-h3-font-size: 40px;
                    --typography-h3-line-height: 37px;
                    --typography-h3-letter-spacing: normal;
                    --typography-h3-font-style: italic;
                    --typography-h3-text-transform: none;
                    --typography-h3-color: var(--font-default-color);
                        --typography-h4-font-family: "Serenity", sans-serif;
                    --typography-h4-font-weight: 200;
                    --typography-h4-font-size: 32px;
                    --typography-h4-line-height: 26px;
                    --typography-h4-letter-spacing: normal;
                    --typography-h4-font-style: normal;
                    --typography-h4-text-transform: none;
                    --typography-h4-color: var(--font-default-color);
                        --typography-h5-font-family: "Serenity", sans-serif;
                    --typography-h5-font-weight: 500;
                    --typography-h5-font-size: 22px;
                    --typography-h5-line-height: 1.2rem;
                    --typography-h5-letter-spacing: normal;
                    --typography-h5-font-style: italic;
                    --typography-h5-text-transform: none;
                    --typography-h5-color: var(--font-default-color);
                        --typography-h6-font-family: "Serenity", sans-serif;
                    --typography-h6-font-weight: 700;
                    --typography-h6-font-size: 18px;
                    --typography-h6-line-height: 22.5px;
                    --typography-h6-letter-spacing: normal;
                    --typography-h6-font-style: normal;
                    --typography-h6-text-transform: none;
                    --typography-h6-color: var(--font-default-color);
                        --typography-text-font-family: "Serenity", sans-serif;
                    --typography-text-font-weight: 400;
                    --typography-text-font-size: 18px;
                    --typography-text-line-height: 19.5px;
                    --typography-text-letter-spacing: normal;
                    --typography-text-font-style: normal;
                    --typography-text-text-transform: none;
                    --typography-text-color: var(--font-default-color);
                        --typography-highlight-font-family: "Warnock Pro", sans-serif;
                    --typography-highlight-font-weight: 700;
                    --typography-highlight-font-style: italic;
                    --typography-highlight-text-transform: none;
                    --typography-highlight-color: inherit;
            }

                                                                        
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    

                                                .h1-prime {
                     font-family: 'Warnock Pro', sans-serif;                      font-weight: 600;                      font-size: 64px;                      line-height: 60px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            .h1-mega {
                     font-family: 'Serenity', sans-serif;                      font-weight: 200;                      font-size: 64px;                      line-height: 60px;                      letter-spacing: 1px;                      font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            .h1-super {
                     font-family: 'Warnock Pro', sans-serif;                      font-weight: 600;                      font-size: 50px;                      line-height: 50px;                      letter-spacing: -5px;                      font-style: italic;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h1, .heading-1 {
                     font-family: 'Serenity', sans-serif;                      font-weight: 200;                      font-size: 50px;                      line-height: 50px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h2, .heading-2 {
                     font-family: 'Serenity', sans-serif;                      font-weight: 200;                      font-size: 40px;                      line-height: 37px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h3, .heading-3 {
                     font-family: 'Warnock Pro', sans-serif;                      font-weight: 700;                      font-size: 40px;                      line-height: 37px;                                          font-style: italic;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h4, .heading-4 {
                     font-family: 'Serenity', sans-serif;                      font-weight: 200;                      font-size: 32px;                      line-height: 26px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h5, .heading-5 {
                     font-family: 'Serenity', sans-serif;                      font-weight: 500;                      font-size: 22px;                      line-height: 1.2rem;                                          font-style: italic;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h6, .heading-6 {
                     font-family: 'Serenity', sans-serif;                      font-weight: 700;                      font-size: 18px;                      line-height: 22.5px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            body {
                     font-family: 'Serenity', sans-serif;                      font-weight: 400;                      font-size: 18px;                      line-height: 19.5px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }

        body {
            color: #105249;
        }

        strong,
        b,
        .font-highlight {
            font-family: inherit;
            font-weight: inherit;
            font-style: inherit;
                        color: inherit;
                         font-family: 'Warnock Pro', sans-serif;              font-weight: 700;              font-style: italic;         }

        /* legacy menu overrides removed; unified header controls styles */

    


            .newsletter-content, .newsletter-content .h1-mega, .activity-details .h1-prime {
color: white !important;
}

.ss-nav__link {
 text-decoration: none;
}
.ss-header .ss-dropdown__link {
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    border-radius: 0;
    border: 1px solid #fff;
    padding: 9px 21px 13px !important;
    transform: none !important;
    justify-content: center;
    white-space: nowrap;
}

.ss-dropdown {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;


}

/* Center desktop dropdowns beneath their parent link */
.ss-nav__item--has-children > .ss-dropdown {
    left: 50%;
    transform: translate(-50%, 10px);
}

.ss-nav__item--has-children.open > .ss-dropdown {
    transform: translate(-50%, 0);
}

/* Keep mobile stacked menus untouched */
@media (max-width: 992px) {
    .ss-nav__item--has-children > .ss-dropdown {
        left: 0;
        transform: none;
    }
}

.ss-header__social a {
    font-size: 1.35rem !important;   /* production icons are ~22px */
    line-height: 1;
    letter-spacing: 10px;
}
/* Tighten the header height like production */
.ss-header__inner {
    padding: 0.45rem 1.5rem !important;   /* reduces top/bottom space */
}

.ss-nav__link {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.ss-theme-six-logo-shell{
max-width: 30%;
background-color: transparent;
z-axis:1003;
position: fixed;
top: -20px;
left:-20px;
padding:0px;
}

.ss-theme-six-logo-bg{
 max-width: 270px;
height: 230px;
background-size:  auto;
padding-left: 22px;
background-color:#ffffff;
border-radius:0 0 28px 28px;
box-shadow:0 6px 18px rgba(0,0,0,0.10);
}

.ss-theme-six-logo-bg img{
 max-width: 220px;
vertical-align: top;
transform: translateY(-30px);
padding-right: 25px;
}

.ss-header__inner{
 height: 112px;
margin-left: 240px;
}
        


/* ISI-ACT-0040: menu banner full length with bigger icons; keeps About Us
   dropdown clear of the fixed logo card (ISI-ACT-0003/0029). */
.ss-header__social a {
    font-size: 1.75rem !important;
}
@media (min-width: 1279.98px) and (max-width: 1550px) {
    .ss-nav__link {
        white-space: nowrap;
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }
    .ss-header__inner {
        margin-left: 210px;
    }
    .ss-header__social a {
        font-size: 1.45rem !important;
    }
}
@media (min-width: 992.02px) {
    .ss-nav > .ss-nav__item--has-children:first-child > .ss-dropdown {
        left: 0;
        transform: translate(0, 10px);
    }
    .ss-nav > .ss-nav__item--has-children:first-child.open > .ss-dropdown {
        transform: translate(0, 0);
    }
}



.header-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.header-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: #FFD700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    letter-spacing: -0.5px;
    transition: all 0.3s ease;
}

.header-description {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 700px;
    opacity: 0.9;
    font-weight: 300;
}

@media (max-width: 991px) {
    .header-title {
        font-size: 2.5rem;
    }

    .header-description {
        font-size: 1.1rem;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .header-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .header-description {
        font-size: 1rem;
    }
}

.header-hero-section {
    position: relative;
    overflow: hidden;
}

.header-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white"/><circle cx="75" cy="75" r="1" fill="white"/><circle cx="50" cy="10" r="1" fill="white"/><circle cx="10" cy="60" r="1" fill="white"/><circle cx="90" cy="40" r="1" fill="white"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.1;
    z-index: 1;
}

.header-hero-section .container {
    position: relative;
    z-index: 2;
}

.header-date-card {
    transition: all 0.3s ease;
}

.header-date-card:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-5px);
}

.meta-item {
    transition: all 0.3s ease;
}

.meta-item:hover {
    transform: translateX(5px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-title {
        font-size: 2.2rem !important;
    }

    .header-date-card {
        margin-top: 30px;
    }

    .header-meta-info {
        flex-direction: column;
        gap: 15px !important;
    }

    .date {
        font-size: 3rem !important;
    }
}

@media (max-width: 576px) {
    .header-title {
        font-size: 1.8rem !important;
    }

    .header-date-card {
        padding: 30px !important;
    }

    .date {
        font-size: 2.5rem !important;
    }
}



.ue-section {
    background: white;
    padding: 20px 0 110px;
    position: relative;
}

.ue-section-highlighted {
    background: var(--color-secondary, #F7C23D);
    padding: 70px 0 70px;
    position: relative;
    padding-inline: 230px;
}

.ue-title, .ue-title-highlighted {
    font-size: 2.5rem;
}

.ue-light, .ue-light-highlighted {
    font-weight: 200;
    font-size: 64px;
    line-height: 37px;
}

.ue-bold, .ue-bold-highlighted {
    font-weight: 700;
    font-size: 64px;
}

.col-lg-4.text-end, .col-lg-4.text-end-highlighted {
    display: flex;
    justify-content: flex-end;
}



/* Footer Styling */
.footer-container {
  margin-top: 0;
}

/* Upper footer section */
.footer-upper {
  background-color: #F7C23D;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

h1.footer-copyright.mt-5.serenity-light {
    font-size: 15px !important;
}

.footer-location {
  color: #2d5a3d;
  font-size: 0.9rem;
  margin: 0 0 5px 0;
  font-weight: 500;
}

.footer-location:last-child {
  margin-bottom: 0;
}

/* Lower footer section */
.end-footer {
  background-color: #FFDE8A;
  padding: 20px 0;
  color: #2d5a3d;
  font-weight: 500;
}

.footer-section {
  background: #fff8eb;
  padding: 60px 0 30px;
  position: relative;
  overflow: hidden;
}

.footer-section::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -50px;
  background: url(./a065.png) no-repeat;
  background-size: contain;
  width: 250px;
  height: 220px;
  opacity: 0.15;
}

.footer-section::after {
  content: "";
  position: absolute;
  bottom: -70px;
  left: -40px;
  background: url(./a040.png) no-repeat;
  background-size: contain;
  width: 220px;
  height: 200px;
  opacity: 0.15;
}

.footer-section .container {
  position: relative;
  z-index: 2;
}

.footer-menu-column {
  min-width: 200px;
}

.footer-title {
  color: #2d5a3d;
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.footer-logo {
  max-width: 200px;
  height: auto;
  width: 100%;
}

.footer-icons {
  display: flex;
  gap: 15px;
}

.footer-icons i {
  color: #2d5a3d;
  font-size: 1.2rem;
}

.footer-heading {
  color: #2d5a3d;
  font-weight: 600;
  font-style: italic;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

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

.footer-list li {
  margin-bottom: 8px;
}

.footer-list a {
  color: #2d5a3d;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
  font-family: 'SS Serenity', sans-serif;
}

.footer-list a:hover {
  color: #1f3d29;
}

.footer-buttons {
  gap: 10px;
}

.footer-btn {
  background: #1f3d29;
  border: none;
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-btn:hover {
  background: #2d5a3d;
  transform: translateY(-2px);
  color: white;
}

.footer-btn i {
  font-size: 0.8rem;
}

.footer-social {
  display: flex;
  gap: 15px;
}

.social-icon {
  color: #2d5a3d !important;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.social-icon i {
  color: #2d5a3d !important;
}

.social-icon:hover {
  color: #1f3d29 !important;
}

.social-icon:hover i {
  color: #1f3d29 !important;
}

@media (max-width: 768px) {
  .footer-copyright,
  .footer-powered-by {
    text-align: center;
    margin-bottom: 10px;
  }

  .footer-section {
    padding: 40px 0 20px;
  }

  .footer-buttons {
    margin-bottom: 20px;
  }
}

:root {
  --theme-six-footer-background: #F7C23D;
  --theme-six-footer-background-rgb: 247, 194, 61;
  --theme-six-footer-copyright: #FFDE8A;
  --theme-six-footer-copyright-rgb: 255, 222, 138;
}

.theme-six-footer-main {
  background: var(--theme-six-footer-background);
}

.theme-six-footer-main::before {
  background: linear-gradient(
    135deg,
    rgba(var(--theme-six-footer-background-rgb), 0.35),
    rgba(var(--theme-six-footer-background-rgb), 0.15)
  );
}

.theme-six-footer-main::after {
  background: linear-gradient(
    135deg,
    rgba(var(--theme-six-footer-background-rgb), 0.2),
    rgba(var(--theme-six-footer-background-rgb), 0.25)
  );
}

.theme-six-footer-copyright {
  background-color: var(--theme-six-footer-copyright);
}

.theme-six-footer-copyright,
.theme-six-footer-copyright .footer-powered-by,
.theme-six-footer-copyright .footer-copyright {
  color: #2d5a3d;
}



/* --- fixups (spec rule: a{}/a:hover{} colors copied from theme) --- */
a { color: var(--color-primary, #00ABC5); }
a:hover { color: var(--font-highlight-color, #ED1B24); }

  
/* rule 8 - iSimangaliso design-system pass. One appended block per page so the

   whole site reads from the same tokens: #00ABC5 primary, #F7C23D secondary,

   #105249 tertiary, Serenity type. Replaces Bootstrap's default blue links and

   buttons, unifies the two competing page-header treatments, and removes the

   hard-coded 200px hero inset that broke phone and tablet layouts. */

:root {

  --isi-primary: #00ABC5;

  --isi-secondary: #F7C23D;

  --isi-tertiary: #105249;

  --isi-hero-pad: clamp(1rem, 4vw, 3rem);

  --isi-hero-img: none;

}

a { color: var(--isi-tertiary); text-decoration: none; }

a:hover, a:focus { color: var(--isi-primary); text-decoration: underline; }

.tsix-richtext a, .summernote-content a { text-decoration: underline; text-underline-offset: 2px; }

.btn-primary {

  --bs-btn-bg: var(--isi-tertiary);

  --bs-btn-border-color: var(--isi-tertiary);

  --bs-btn-hover-bg: var(--isi-primary);

  --bs-btn-hover-border-color: var(--isi-primary);

  --bs-btn-active-bg: var(--isi-primary);

  --bs-btn-active-border-color: var(--isi-primary);

  --bs-btn-color: #fff;

  --bs-btn-hover-color: #fff;

  --bs-btn-active-color: #fff;

  border-radius: 999px;

  font-weight: 600;

}

.btn-outline-primary {

  --bs-btn-color: var(--isi-tertiary);

  --bs-btn-border-color: var(--isi-tertiary);

  --bs-btn-hover-bg: var(--isi-tertiary);

  --bs-btn-hover-border-color: var(--isi-tertiary);

  --bs-btn-hover-color: #fff;

  border-radius: 999px;

}

.btn-sm { padding-inline: 1rem; }

.header-hero-section {

  background-image:

    linear-gradient(100deg, rgba(16,82,73,.95) 0%, rgba(16,82,73,.74) 48%, rgba(16,82,73,.38) 100%),

    var(--isi-hero-img) !important;

  background-size: cover !important;

  background-position: center !important;

  background-repeat: no-repeat !important;

  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem) !important;

}

.header-hero-section > .container {

  padding-left: var(--isi-hero-pad) !important;

  padding-right: var(--isi-hero-pad) !important;

}

.header-hero-section > .container > br { display: none; }

@media (min-width: 1200px) {

  .header-hero-section > .container { padding-left: 250px !important; }

}

.header-hero-section .header-title {

  font-family: "Serenity", sans-serif !important;

  font-weight: 200 !important;

  color: #fff !important;

  font-size: clamp(2rem, 5vw, 3.25rem) !important;

  line-height: 1.1 !important;

  margin-bottom: 0 !important;

  text-wrap: pretty;

}

.header-hero-section .breadcrumb { margin-bottom: 1rem !important; font-size: .9rem; }

.tsix-about-hero {

  padding: clamp(3rem, 8vw, 6rem) 0 !important;

  background-size: cover !important;

  background-position: center !important;

}

.tsix-about-hero__overlay {

  background: linear-gradient(100deg, rgba(16,82,73,.94) 0%, rgba(16,82,73,.66) 52%, rgba(16,82,73,.3) 100%) !important;

}

.tsix-about-hero h1 {

  font-family: "Serenity", sans-serif !important;

  font-weight: 200 !important;

  font-size: clamp(2rem, 5vw, 3.25rem) !important;

  text-wrap: pretty;

}

.tsix-pill {

  display: inline-block;

  background: var(--isi-secondary);

  color: var(--isi-tertiary);

  border-radius: 999px;

  padding: .35rem 1rem;

  font-size: .78rem;

  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;

}

.card.border-0.shadow-sm { border-radius: 24px; }

.card-body h2 {

  font-family: "Serenity", sans-serif;

  font-weight: 200;

  color: var(--isi-tertiary);

  font-size: clamp(1.5rem, 3vw, 2.25rem);

}

.card-body h3, .card-body h4, .card-body h5 { color: var(--isi-tertiary); }

.table > thead th {

  background: rgba(16,82,73,.06);

  color: var(--isi-tertiary);

  border-bottom-color: rgba(16,82,73,.25);

  font-weight: 600;

}

.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(0,171,197,.055); }

img, video, iframe, table { max-width: 100%; }

@media (max-width: 575.98px) {

  .container { padding-left: 1rem; padding-right: 1rem; }

}

:root { --isi-hero-img: url("/images/design/photo-mseni.jpg"); }
.tsix-about-hero { background-image: url("/images/design/photo-mseni.jpg") !important; }

/* rule 9 - responsive guards (phone 430, tablet 768, laptop 1280). The captured
   pages carried a full-bleed section pinned to 1920px with -960px side margins,
   and fixed 675px media heights, both of which forced horizontal scrolling on
   anything narrower than a desktop. */
.full-width-image-section {
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 1199.98px) {
  .full-width-image, .full-width-image img { height: auto !important; min-height: 300px; }
}
@media (max-width: 991.98px) {
  :root { --theme-six-hero-height: 70vh; }
  .full-width-image, .full-width-image img { max-height: 55vh !important; min-height: 240px; }
  .full-width-image-section [style*="height: 675px"],
  .full-width-image-section [style*="height:675px"] { height: auto !important; padding: 2rem !important; }
  [style*="min-height: 675px"], [style*="min-height:675px"] { min-height: 340px !important; }
  .destination-section .container > br, .contact-map-section .container > br { display: none; }
  .destination-title { margin-top: 1rem !important; }
}
@media (max-width: 767.98px) {
  :root { --theme-six-hero-height: 62vh; }
  .card-body.p-4.p-lg-5 { padding: 1.5rem !important; }
  .footer-section.theme-six-footer-main { text-align: left; }
}
@media (max-width: 575.98px) {
  .tsix-about-hero, .header-hero-section { padding-top: 2rem !important; }
  .resource-cards-grid { grid-template-columns: 1fr !important; }
}

/* rule 10 - un-scope the carousel collapse. The captured theme bundle narrows a
   bare `.card` to 12/11/10/9rem with fixed heights inside max-width media
   queries; those values were authored for the home-page `.explore-card`
   carousel but hit every Bootstrap card on the site, slicing the content cards
   on Accommodation, Brand, Governance, Documents, Tenders and the rest into
   176px slivers below 1200px. Scope it back to the carousel and clear the
   residual horizontal scroll from negative row gutters. */
@media (max-width: 1200px) {
  .card:not(.explore-card) {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}
html, body { overflow-x: clip; }

/* rule 11 - restore normal flow inside card bodies. The captured theme applies
   `.card-body { display:flex; align-items:flex-end; justify-content:center }`
   to every Bootstrap card body, not just the home-page carousel it was written
   for, which shrink-wrapped headings and lists and pushed them to the bottom
   right of every content card. Scope it to the carousel. */
.card:not(.explore-card) > .card-body {
  display: block;
  align-items: initial;
  justify-content: initial;
}
.card:not(.explore-card) > .card-body.d-flex {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.card:not(.explore-card) > .card-body.d-flex.flex-column { flex-direction: column; }
.card:not(.explore-card) > .card-body > ul,
.card:not(.explore-card) > .card-body > ol { width: 100%; }

/* rule 12 - restore the one grid utility the purged bundle dropped. The captured
   CSS only ships the column classes the original pages happened to use, so
   `.col-6` resolves to nothing and any half-width column collapses to full
   width. Used by the Brand stat row and the Multimedia gallery. Because this
   block sits after the bundle's breakpoint blocks, the paired responsive
   classes are re-declared with attribute-boosted specificity so they still win
   above their breakpoint. */
.col-6 { flex: 0 0 auto; width: 50%; }
@media (min-width: 576px) { .col-sm-6 { flex: 0 0 auto; width: 50%; } }
@media (min-width: 768px) {
  [class].col-md-3 { width: 25%; }
  [class].col-md-4 { width: 33.33333333%; }
  [class].col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  [class].col-lg-3 { width: 25%; }
  [class].col-lg-4 { width: 33.33333333%; }
  [class].col-lg-6 { width: 50%; }
}
@media (min-width: 1200px) {
  [class].col-xl-3 { width: 25%; }
  [class].col-xl-4 { width: 33.33333333%; }
}

/* rule 15 - About Us section design language. The About pages were single
   centred prose cards on a white field - accurate but flat. These components
   give the section a shared editorial system: full-bleed photographic heroes,
   impact bands, alternating split rows, pull quotes, a milestone timeline and
   closing calls to action, all built from the Park's own tokens (#105249
   tertiary, #00ABC5 primary, #F7C23D secondary, Serenity display type). */
.isi-hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: #105249; min-height: clamp(340px, 56vh, 600px); }
.isi-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.isi-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,40,36,.12) 0%, rgba(6,40,36,.5) 52%, rgba(6,40,36,.93) 100%); }
.isi-hero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); }
/* The floating logo badge (.ss-theme-six-logo-shell) is position:fixed at the
   viewport's top-left, roughly x -20..250 / y -20..210, and paints above the
   hero at z-index 1100. .isi-hero bottom-aligns its content, so a tall headline
   grows upward into that band and the breadcrumb and kicker disappear behind
   the badge. Reserve vertical clearance so hero content always starts below the
   badge, whatever the headline length. */
.isi-hero__inner { padding-top: 170px; }
.isi-hero { min-height: clamp(430px, 60vh, 660px); }
@media (max-width: 575.98px) {
  .isi-hero__inner { padding-top: 120px; }
  .isi-hero { min-height: clamp(360px, 56vh, 520px); }
}
.isi-hero h1 { font-family: "Serenity", sans-serif; font-weight: 200; color: #fff; font-size: clamp(2.1rem, 5.6vw, 4.25rem); line-height: 1.03; margin: 1.15rem 0 0; text-wrap: balance; }
.isi-hero__lede { color: rgba(255,255,255,.9); font-size: clamp(1.02rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 62ch; margin: 1.15rem 0 0; text-wrap: pretty; }
.isi-crumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .9rem; color: rgba(255,255,255,.75); }
.isi-crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.isi-crumb a:hover { color: #F7C23D; text-decoration: underline; }
.isi-kicker { display: inline-block; background: #F7C23D; color: #105249; border-radius: 999px; padding: .42rem 1.1rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.isi-section { padding: clamp(2.75rem, 7vw, 5.5rem) 0; }
.isi-section--tint { background: #F4F8F7; }
.isi-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 700; color: #00737F; margin: 0 0 .85rem; }
.isi-h2 { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.8rem, 4vw, 2.9rem); color: #105249; line-height: 1.08; margin: 0 0 1.25rem; text-wrap: balance; }
.isi-h3 { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: #105249; line-height: 1.15; margin: 0 0 .75rem; }
.isi-lead { font-size: clamp(1.04rem, 1.45vw, 1.22rem); line-height: 1.68; color: #24423d; text-wrap: pretty; }
.isi-body { font-size: 1.02rem; line-height: 1.72; color: #33514c; text-wrap: pretty; }
.isi-measure { max-width: 68ch; }
.isi-band { background: #105249; color: #fff; padding: clamp(2.5rem, 6vw, 4.25rem) 0; }

.isi-statgrid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .isi-statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.isi-statgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .isi-statgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.isi-stat__num { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1; color: #F7C23D; margin: 0; }

.isi-stat__label { margin: .6rem 0 0; font-size: .95rem; line-height: 1.45; color: #fff; }
.isi-split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .isi-split { grid-template-columns: 1fr 1fr; } .isi-split--rev .isi-split__media { order: 2; } }
.isi-split__media img { width: 100%; height: 100%; min-height: clamp(240px, 34vw, 420px); object-fit: cover; border-radius: 26px; display: block; }
.isi-figcap { margin: .7rem 0 0; font-size: .85rem; color: #546965; }
.isi-quote { border-left: 4px solid #F7C23D; padding: .25rem 0 .25rem 1.5rem; margin: 0; }
.isi-quote p { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.35rem, 3vw, 2.15rem); line-height: 1.25; color: #105249; margin: 0; text-wrap: balance; }
.isi-quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; color: #00737F; }
.isi-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .isi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) { .isi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .isi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.isi-tile { background: #fff; border: 1px solid rgba(16,82,73,.12); border-radius: 24px; padding: clamp(1.4rem, 2.6vw, 2rem); height: 100%; }
.isi-tile--solid { background: #105249; border-color: transparent; color: #fff; }
.isi-tile.isi-tile--solid .isi-h3, .isi-tile.isi-tile--solid p:not(.isi-tile__idx) { color: #fff; }
.isi-tile .isi-tile__idx { font-family: "Serenity", sans-serif; font-weight: 200; font-size: 2.2rem; line-height: 1; color: #00737F; margin: 0 0 .9rem; }
.isi-tile.isi-tile--solid .isi-tile__idx { color: #F7C23D; }
.isi-tile p { margin: 0; font-size: .99rem; line-height: 1.65; color: #43605b; }
.isi-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.isi-list li { position: relative; padding-left: 1.8rem; font-size: 1rem; line-height: 1.6; color: #33514c; }
.isi-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: #00ABC5; }
.isi-time { margin: 0; padding: 0; list-style: none; }
.isi-time > li { position: relative; margin-left: 8px; padding: 0 0 2.25rem 2.5rem; border-left: 2px solid rgba(0,171,197,.3); }
.isi-time > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.isi-time > li::before { content: ""; position: absolute; left: -8px; top: .35rem; width: 14px; height: 14px; border-radius: 50%; background: #F7C23D; box-shadow: 0 0 0 4px rgba(247,194,61,.2); }
.isi-time__yr { display: block; font-family: "Serenity", sans-serif; font-weight: 200; font-size: 1.6rem; line-height: 1; color: #00737F; margin: 0 0 .45rem; }
.isi-time__t { font-weight: 600; color: #105249; margin: 0 0 .35rem; font-size: 1.05rem; }
.isi-time p { margin: 0; font-size: .99rem; line-height: 1.65; color: #43605b; }
.isi-cta { position: relative; overflow: hidden; border-radius: 30px; background: #105249; color: #fff; padding: clamp(2rem, 5vw, 3.5rem); }
.isi-cta h2 { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 .85rem; color: #fff; text-wrap: balance; }
.isi-cta p { color: rgba(255,255,255,.85); max-width: 58ch; margin: 0 0 1.6rem; font-size: 1.03rem; line-height: 1.6; }
.isi-btnrow { display: flex; flex-wrap: wrap; gap: .85rem; }
.isi-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .7rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .97rem; text-decoration: none; transition: background .2s ease, color .2s ease; }
.isi-btn--gold { background: #F7C23D; color: #105249; }
.isi-btn--gold:hover { background: #fff; color: #105249; text-decoration: none; }
.isi-btn--ghost { border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.isi-btn--ghost:hover { background: #fff; color: #105249; text-decoration: none; }
.isi-btn--solid { background: #105249; color: #fff; }
.isi-btn--solid:hover { background: #00737F; color: #fff; text-decoration: none; }
.isi-note { font-size: .88rem; color: #546965; margin: 1.5rem 0 0; }
/* The captured theme sets h1-h6 { font-family:"Warnock Pro"; font-weight:700;
   font-style:italic }. Every Serenity display component below overrides family
   and weight but inherited that italic unless it says otherwise, so .isi-h3
   card titles rendered slanted. Declare font-style explicitly across the set so
   no component can pick it up from a bare element selector. */
.isi-hero h1,
.isi-h2,
.isi-h3,
.isi-stat__num,
.isi-quote p,
.isi-cta h2,
.isi-time__yr,
.isi-tile .isi-tile__idx,
.isi-tile strong, .isi-tile b,
.isi-hours strong, .isi-hours b,
.isi-contactcard strong, .isi-contactcard b,
.isi-estcard strong, .isi-estcard b,
.isi-list strong, .isi-list b,
.isi-body strong, .isi-body b,
.isi-lead strong, .isi-lead b { font-style: normal; font-family: "Serenity", sans-serif; }

/* rule 16 - motion. The section was entirely static: no reveal, no hover
   feedback, no depth. Everything below is gated on [data-motion="on"], which
   about-motion.js only sets when the visitor has NOT asked for reduced motion -
   so with JS off, or reduced motion on, nothing is hidden and nothing animates. */
html[data-motion="on"] [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
}
html[data-motion="on"] [data-reveal].is-in { opacity: 1; transform: none; }
html[data-motion="on"] .isi-hero__img {
  animation: isi-kenburns 26s cubic-bezier(.22,.61,.36,1) forwards;
  transform-origin: 52% 48%;
}
@keyframes isi-kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }
.isi-split__media { overflow: hidden; border-radius: 26px; }
.isi-split__media img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.isi-split__media:hover img { transform: scale(1.045); }
.isi-tile { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.isi-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(16,82,73,.14); border-color: rgba(0,171,197,.45); }
.isi-tile.isi-tile--solid:hover { box-shadow: 0 18px 42px rgba(16,82,73,.4); }
.isi-btn { transition: transform .25s ease, background-color .2s ease, color .2s ease; }
.isi-btn:hover { transform: translateY(-2px); }
.isi-hero { will-change: auto; }
.isi-stat__num { font-variant-numeric: tabular-nums; }
.isi-time > li::before { transition: transform .3s ease, box-shadow .3s ease; }
.isi-time > li:hover::before { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(247,194,61,.28); }

/* rule 17 - establishment profile components. Extends the About Us editorial
   system (rule 15) with the pieces the 30 establishment profiles and the
   directory need: chip lists for linked places and activities, an outline
   button variant for secondary contact actions, and the directory card. Colours
   are the same tokens - #105249 tertiary, #00737F accessible teal, #F7C23D
   gold - so profiles read as part of the same site. */
.isi-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.isi-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.15rem; border-radius: 999px; border: 1px solid rgba(16,82,73,.22); background: #fff; color: #105249; font-size: .95rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
a.isi-chip:hover, a.isi-chip:focus { background: #105249; border-color: #105249; color: #fff; text-decoration: none; transform: translateY(-2px); }
.isi-chip--static { background: rgba(16,82,73,.05); color: #3f5a55; font-weight: 500; }
.isi-btn--outline { border: 1.5px solid rgba(16,82,73,.4); color: #105249; background: transparent; }
.isi-btn--outline:hover { background: #105249; border-color: #105249; color: #fff; text-decoration: none; }
.isi-contact { margin: 0; font-size: 1rem; line-height: 1.7; color: #33514c; text-wrap: pretty; }
.isi-estcard { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; border: 1px solid rgba(16,82,73,.12); background: #fff; height: 100%; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.isi-estcard:hover, .isi-estcard:focus { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(16,82,73,.14); border-color: rgba(0,171,197,.45); text-decoration: none; }
.isi-estcard__img { width: 100%; height: 210px; object-fit: cover; display: block; }
.isi-estcard__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.isi-estcard__type { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #00737F; }
.isi-estcard__name { font-family: "Serenity", sans-serif; font-weight: 200; font-style: normal; font-size: 1.35rem; line-height: 1.2; color: #105249; margin: 0; }
.isi-estcard__text { font-size: .95rem; line-height: 1.6; color: #43605b; margin: 0; }
.isi-estcard__more { margin-top: auto; padding-top: .35rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #00737F; }
.isi-estgrid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .isi-estgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .isi-estgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .isi-estgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.isi-estcard__img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.isi-estcard:hover .isi-estcard__img { transform: scale(1.05); }

/* rule 21 - footer menu columns must fit their links on one line. Each column
   is col-sm-6 col-lg-6 col-xl-4 nested inside a col-lg-5 wrapper, so on a wide
   screen a column resolves to roughly 14% of the page - not enough for
   "Western Shores & Charters Creek", which wrapped onto two lines. There are
   only two menu columns, so the wrapper can afford the width: the inner row
   becomes an auto-fitting grid whose track is sized to the longest label, and
   the links stop wrapping. */
.footer-section .footer-menu-column {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
@media (min-width: 768px) {
  .footer-section .col-lg-5 > .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(15rem, max-content));
    gap: 0 clamp(1.5rem, 3vw, 3rem);
    margin: 0 !important;
  }
  .footer-section .col-lg-5 > .row > .footer-menu-column { padding-inline: 0 !important; }
  .footer-section .footer-list a,
  .footer-section .footer-list li { white-space: nowrap; }
}
@media (min-width: 992px) {
  .footer-section > .container > .row > .col-lg-4 { flex: 0 0 auto; width: 30%; }
  .footer-section > .container > .row > .col-lg-5 { flex: 1 1 auto; width: auto; max-width: 46%; }
  .footer-section > .container > .row > .col-lg-3 { flex: 0 0 auto; width: 24%; }
}
@media (max-width: 767.98px) {
  .footer-section .footer-menu-column { width: 100% !important; }
  .footer-section .footer-list a { white-space: normal; }
}