: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;
  }}

/* 3. PAGE-LOCAL CSS (Documents) */
.theme-six-header {
                position: fixed !important;
                top: 0;
                left: 0;
                right: 0;
                width: 100%;
                z-index: 10000 !important;
                background: white !important;
            }
            .theme-six-header .navbar-nav .nav-link:hover {
                color: #F7C23D !important;
            }
            .theme-six-header .navbar-nav .nav-link.active {
                color: #F7C23D !important;
            }

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

: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: 3rem;
            --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;
            --tenant-dropdown-font-family: 'Serenity', sans-serif;
            --tenant-dropdown-font-weight: 500;
            --tenant-dropdown-font-style: normal;
            --tenant-dropdown-font-size: 14px;
            --tenant-dropdown-letter-spacing: 1px;
            --tenant-dropdown-text-transform: uppercase;
            --tenant-dropdown-color: #105249;
            --tenant-dropdown-hover-color: #FDFDFD;
            --tenant-dropdown-active-color: #FDFDFD;
            --tenant-dropdown-bg: #F7C23D;
            --tenant-dropdown-hover-bg: #ED1B24;
            --tenant-dropdown-border-color: rgba(0,0,0,0.08);
        }

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

                                                .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;         }

                    .header-menu-area,
            .header-menu-area .main-menu,
            .main-menu,
            .theme-six-header,
            .theme-six-header .main-menu {
                 background-color: #FFFFFF !important;             }

            .main-menu > ul > li > a,
            .main-menu ul li > a,
            .navbar-nav > li > a,
            .navbar-nav > li > a.nav-link,
            .theme-six-header .navbar-nav .nav-link,
            .theme-six-header .main-menu ul li > a {
                 color: #00ABC5 !important;                  font-family: "Serenity", sans-serif !important;                  font-weight: 700 !important;                                  font-size: 15px !important;                  letter-spacing: 1px !important;                  text-transform: uppercase !important;             }

            .main-menu ul li:hover > a,
            .main-menu ul li > a:hover,
            .navbar-nav > li > a:hover,
            .navbar-nav > li:hover > a,
            .main-menu ul li.current-menu-item > a,
            .main-menu ul li.current > a {
                 color: #ED1B24 !important;             }

            .main-menu ul li.active > a,
            .main-menu ul li > a.is-active,
            .navbar-nav > li.active > a,
            .navbar-nav > li > a.active,
            .theme-six-header .navbar-nav .nav-link.active {
                 color: #ED1B24 !important;             }
        
                    footer .footer-links li a,
            footer .nav-widget li a,
            .footer-widget .footer-links li a,
            .footer-widget .nav-widget li a,
            .footer-area .footer-links li a,
            .footer-area .nav-widget li a {
                 color: #105249 !important;                  font-family: "Serenity", sans-serif !important;                  font-weight: 300 !important;                                  font-size: 16px !important;                  letter-spacing: 0px !important;                  text-transform: none !important;                  background-color: #F7C23D !important;             }

            footer .footer-links li a:hover,
            footer .nav-widget li a:hover,
            .footer-widget .footer-links li a:hover,
            .footer-widget .nav-widget li a:hover,
            .footer-area .footer-links li a:hover,
            .footer-area .nav-widget li a:hover {
                 color: #FDFDFD !important;             }
        
        .main-menu ul li .submenu,
        .navbar-nav li .submenu,
        .header-menu-area .submenu,
        .theme-six-header .submenu {
            position: absolute;
            left: 0;
            top: 115%;
            width: 240px;
            background: var(--tenant-dropdown-bg, #ffffff);
            border: 1px solid var(--tenant-dropdown-border-color, #F9DC6E);
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.25s ease;
            z-index: 99;
        }
        .main-menu li:hover > .submenu,
        .header-menu-area li:hover > .submenu,
        .theme-six-header li:hover > .submenu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .tenant-dropdown-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
        }
        .tenant-dropdown-list > li {
            margin: 0;
        }
        .tenant-dropdown-list > li + li {
            margin-top: 0.05rem;
        }

        .menu-right-area .main-menu li .submenu li > a,
        .navbar-nav li .submenu li > a,
        .header-area .main-navbar .menu-dropdown .nav-link,
        .header-menu-area .submenu li > a,
        .theme-six-header .main-menu li .submenu li > a,
        .theme-six-header #navMenu .submenu li > a {
            display: block;
            padding: 0.85rem 1.1rem;
            font-family: var(--tenant-dropdown-font-family, 'Serenity', sans-serif) !important;
            font-weight: var(--tenant-dropdown-font-weight, 500) !important;
            font-style: var(--tenant-dropdown-font-style, normal) !important;
            font-size: var(--tenant-dropdown-font-size, 0.875rem) !important;
            letter-spacing: var(--tenant-dropdown-letter-spacing, 0) !important;
            text-transform: var(--tenant-dropdown-text-transform, none) !important;
            color: var(--tenant-dropdown-color, #2C5F4F) !important;
            background: var(--tenant-dropdown-bg, linear-gradient(135deg, #F4C244, #E6B73A)) !important;
            background-color: var(--tenant-dropdown-bg, #F4C244) !important;
            text-decoration: none !important;
            border-radius: 6px !important;
            border: 1px solid var(--tenant-dropdown-border-color, #F9DC6E) !important;
            transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
            box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
            margin-bottom: 0.15rem;
        }

        .menu-right-area .main-menu li .submenu li > a:hover,
        .navbar-nav li .submenu li > a:hover,
        .header-area .main-navbar .menu-dropdown .nav-link:hover,
        .header-menu-area .submenu li > a:hover,
        .theme-six-header .main-menu li .submenu li > a:hover,
        .theme-six-header #navMenu .submenu li > a:hover,
        .menu-right-area .main-menu li .submenu li > a:focus,
        .navbar-nav li .submenu li > a:focus,
        .header-area .main-navbar .menu-dropdown .nav-link:focus,
        .header-menu-area .submenu li > a:focus,
        .theme-six-header .main-menu li .submenu li > a:focus,
        .theme-six-header #navMenu .submenu li > a:focus {
            color: var(--tenant-dropdown-hover-color, #ffffff) !important;
            background: var(--tenant-dropdown-hover-bg, linear-gradient(135deg, #E53E3E, #C53030)) !important;
            background-color: var(--tenant-dropdown-hover-bg, #E53E3E) !important;
            transform: translateX(5px);
        }

        .menu-right-area .main-menu li .submenu li > a.active,
        .navbar-nav li .submenu li > a.active,
        .header-area .main-navbar .menu-dropdown .nav-link.active,
        .header-menu-area .submenu li > a.active,
        .theme-six-header .main-menu li .submenu li > a.active,
        .theme-six-header #navMenu .submenu li > a.active {
            color: var(--tenant-dropdown-active-color, #ffffff) !important;
        }

        .menu-right-area .main-menu li .submenu,
        .header-menu-area .submenu,
        .theme-six-header .main-menu li .submenu,
        .theme-six-header #navMenu .submenu {
            padding: 0.35rem;
            border-radius: 0.75rem;
        }

        .tenant-nav-link {
            transition: color 0.2s ease;
        }
        .tenant-nav-link:hover,
        .tenant-nav-link:focus {
            color: #0d8a9c !important;
        }

        .tenant-dropdown-indicator {
            margin-left: 0.2rem;
            transition: transform 0.3s ease;
        }
        .dropdown-parent:hover .tenant-dropdown-indicator {
            transform: rotate(180deg);
        }

.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;
}

/* 4. Fixups */
/* theme-bundle.css only carries #resources-tenders rules (mobile table->card
   responsive behavior), not the heading color used by the resources-documents /
   park-policies fragment sections. Reference screenshot shows all section h4s
   in the theme's dark-teal brand color (#105249, same value the header's own
   data-style-map uses for --ss-dropdown-text-color and the hero gradient start)
   instead of the Bootstrap default --bs-heading-color:inherit -> #212529. */
#resources-documents h4,
#park-policies h4 {
  color: #105249;
}

  
/* 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("redesign/assets/photo-aerial-bay.jpg"); }
.tsix-about-hero { background-image: url("redesign/assets/photo-aerial-bay.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 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; }
}