/**
* Updated: August 2025 with Bootstrap v5.3.2
*/ 

/* Fonts */   
:root {
  --font-default: "BC Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Assistant", sans-serif;
}

/* Colors */
:root {
  --color-default: #555555;
  --color-primary: #00A8B8;
  --color-secondary: #C8D444;
}

/* Smooth scroll behavior */
:root {
  scroll-behavior: smooth;
}




:root {
  --lightbox: rgb(0 0 0 / 0.75);
  --carousel-text: #fff;
}




/*--------------------------------------------------------------
# Mobile Column View
--------------------------------------------------------------*/

.row {
  display: flex;
}

.col {
  flex: 1;
}

/* Default order on desktop */
.col-a { order: 1; }
.col-b { order: 2; }
.col-c { order: 3; }

/* Change stacking order for small screens */
@media (max-width: 991px) {
  .row {
    flex-direction: column;
  }

  /* New stacking order */
  .col-a { order: 3; }
  .col-b { order: 1; }
  .col-c { order: 2; }
}


@media only screen and (max-width: 991px) {
  .hide-on-mobile {
    visibility: hidden;
  }
}



/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/




body {
  font-family: var(--font-default);
   font-size: 16px;   
   background-color: #000;

}

a {
  color: var(--color-primary);
  text-decoration: underline;
}

a:hover {
  color: #00b6a1;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  color: #F7F7F7;
}


p {
   color: #FFF;
 font-family: var(--font-default);
   font-size: 16px; 

}

p a {
   color: var(--color-secondary);
     font-weight: 400;
   text-decoration: underline; 
   text-underline-offset: 3px; 
}

p a:hover {
   color: var(--color-primary);
   text-decoration: underline; 
}


hr {
  border-top: 2px solid #fff;
 padding-top: 20px;
 margin-top: 20px;

}


.responsive {
  max-width: 100%;
  height: auto;
}



.figure-img {
  float: inline-start;
  border-radius: 8px;
  margin-right:15px;

}

.figure-caption {
  color:#ccc;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 20px;


}

.figure-end {
  float: inline-end;
  max-width: 500px;
    padding-left: 25px;
   padding-right: 10px;
  border: none ;

}

.figure-caption-end {
  color:#ccc;
  font-size: 14px;
  margin-top: 10px;
  float: inline-end;
}

.banner {
  width: 100%;
  position: relative;
  border-radius: 8px;


}


@media (max-width: 600px) {
  .banner img {
    display: none;
  }
}


.right  {
float: right;    
 margin: 20px;
}

.left  {
float: left;    
 margin: 20px;
}








sup {
    vertical-align: super;
    font-size: x-small;
}

.outcomes {
  font-family: var(--font-default);
   font-size: 16px;   
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  overflow: hidden;
   border-style: solid;
  border-width: 2px;
  margin-top: 16px;
  margin-bottom: 20px;
  max-width: 700px;
 
}

.box {
  font-family: var(--font-default);
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
   border-style: solid;
  border-width: 1px;
  padding-top: 28px;
  padding-bottom: 20px;

 max-width: 100%;
}



  .box-gold {
  background-color:#ef9e21;
  padding: 25px;
  overflow: hidden;
  border:solid;
  border-color:#ef9e21;
 border-radius: 10px;
 border-style: solid;
  border-width: 3px;
  margin-bottom: 20px;

}


.box-gold p {
  color: #000;
  font-family: var(--font-default);
  font-size: 16px;
}


 .box-title { 
  font-size: 16px;
  font-family: var(--font-default);
  font-weight: 600;
  color: #000;
  text-align: left;
  margin-top: 5px;
}


.box-green {
  background-color:#a2b039;
  padding: 25px;
  overflow: hidden;
  border:solid;
  border-color:#a2b039;
 border-radius: 10px;
 border-style: solid;
  border-width: 3px;
  color: #000;
  margin-bottom: 20px;

}

.box-green p {
  color: #000;
   font-size: 16px;
}


.box-green h4 { 
  font-size: 16px;
  font-weight: 600;
  color: #000;
  text-align: left;
  margin-top: 5px;
}

  .box-teal {
  background-color:#3ab6b9;
  padding: 25px;
  overflow: hidden;
  border:solid;
  border-color:#3ab6b9;
 border-radius: 10px;
 border-style: solid;
  border-width: 3px;
   margin-bottom: 20px;

}


.box-teal p {
  color: #000;
  font-size: 16px;
}


 .box-teal h4 { 
  font-size: 16px;
  font-weight: 600;
  color: #000;
  text-align: left;
  margin-top: 5px;
}

.container {

padding-left: 30px;
padding-right: 30px;

}






/*--------------------------------------------------------------
# Back to top button 
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--color-primary);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #000;
  line-height: 0;
  font-weight: 500;
}

.back-to-top:hover {
  background-color: var(--color-secondary);
  color: #000;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #4B8235;
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/


.pagination {
    font-size: 14px;
  margin-top: 30px;
  margin-bottom: 40px;
  color: #000;
  font-weight: 600;
}


.pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination li {
  margin: 0 5px;
  transition: 0.3s;
  border-radius: 5px;
  color: #fff;
  background-color: var(--color-primary);
}

.pagination li a {
  color: #000;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
    text-decoration: none;
}

.pagination li.active,
.pagination li:hover {
 background-color: var(--color-primary);
  color: #000;
}

.pagination li.active,
.pagination li:hover {
 background-color: var(--color-secondary);
  color: #000;
}

.pagination li.active a,
.pagination li:hover a {
 color: #000;
}


.visually-hidden-focusable:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:active {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 0.25rem;
}





/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  transition: all 0.5s;
  background: #000;
    z-index: 997;
  height: 90px;
  padding-top: 10px;
}

#header.header-scrolled {
  border-color: #fff;
  box-shadow: 0px 2px 15px rgba(18, 66, 101, 0.08);
}

#header .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.5px;
   font-family: var(--font-default);
}

#header .logo a {
  color: #16507b;
}

.header .logo img {
  max-height: 40px;
  margin-right: 6px;
  padding-top: 10px;
}

@media (max-width: 992px) {
  #header .logo {
    font-size: 28px;
  }
}






/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/

.navbar {
background-color: #000;
}

.nav-item {
  margin-bottom: 10px;
  margin-left:30px;

  }


a.nav-link {
    color:#fff;
    text-decoration: none;
    font-size: 14px;
    background-color: #000;

}

a.nav-link:hover {
  color: var(--color-secondary);
 text-decoration: none;
 background-color: #000;
}

a.nav-link.active {
  color: var(--color-secondary)!important;
 text-decoration: underline;
 text-underline-offset: 10px;

}

.nav-link .dropdown-toggle {
  color: var(--color-primary);
 text-decoration: none;

}

.nav-link .dropdown-toggle a {
  color: #fff;
 text-decoration: none;

}



.dropdown-menu {
  background-color: #393939; 
  min-width: 250px; 
  color:#FFFFFF;
}

a.dropdown:hover {
  color: var(--color-secondary);
  text-decoration: none;
  background-color: #393939;

}


.dropdown-item {
  white-space: pre-wrap;
  min-width: 150px;

}

a.dropdown-item  {
  color:#fff;
  font-size: 14px;
  text-decoration: none;
  background-color: #393939; 
  line-height: 30px;
}

a.dropdown-item:hover {
  color: var(--color-secondary);
 text-decoration: none;
 background-color: #1F1F1F;
}






/*--------------------------------------------------------------
# Sidebar 
--------------------------------------------------------------*/

.sidebar  { 
  font-family: var(--font-default);
  background-color: #000;

}


/*--------------------------------------------------------------
# side-nav
--------------------------------------------------------------*/

.index {
  font-family: var(--font-default);
  color: #fff;
  padding: 20px;
  border-radius: 10px;
   border-style: solid;
  border-width: 2px;
  margin-top: 16px;
  margin-bottom: 20px;
  max-width: 700px;
 
}




.side-nav .list-group-item {
   color: var(--color-secondary);
  background-color: #000;
   font-family: var(--font-default);
   font-size: 14px;   

}



.side-nav .list-group-item.head { 
  color:#fff;
  font-family: var(--font-default);
  font-weight: 600;
  background-color:#000;

}


.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  color: var(--color-primary);
  text-decoration: none;
  background-color: #000; 
}

a.list-group-item-action {

  text-decoration: none;
   color: var(--color-secondary);

}





/*--------------------------------------------------------------
# Site Contents styles
--------------------------------------------------------------*/


.stem-item {
 font-family: var(--font-default);
  color: #fff;
  margin: .5em 0;
  font-weight: bold;
  position: relative;
  margin-top: 30px;
}

.stem-item a {
  color: var(--color-secondary);
  text-decoration: none;
}

.stem-item a:hover {
  color: #00b6a1;
  color: var(--color-primary);
  text-decoration: none;
}


.branch-list {
  margin-left: none;
  padding-left: none;
  margin-bottom: 1em;
  
}

.branch-item {
  margin: 0.50em 0;
  font-weight: normal;
  padding-left: 0.50em;
  font-size: 14px;
}




/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/


#hero {
   display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}




#hero .container {
  padding-top: 80px;

}

#hero .hero-body h1 {
 font-size: 70px;
  padding-top: 20px;
  line-height: 70px;
  text-align: center;
  font-family: impact;
  font-weight: 200;
}


#iam {  
  color: #e95524; 
} 


#because {  
  color: #ef9e21; 
} 

#weare {  
  color: #a2b039; 
} 


@media only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation: portrait) { 
.hero-body h1   {
      font-size: 100px;
      margin-top: 20px;
      margin-bottom: 20px;
       } }




.hero-body h2 {
  font-size: 22px;
  text-align: center;
  padding-bottom: 24px;
  color: #fff;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation: portrait) { 
.hero-body h2   {
      font-size: 100px;
      margin-top: 20px;
      margin-bottom: 20px;
       } }




 .hero .h3 a {
  color: #000;
  transition: 0.3s;
  text-decoration: none;
}



.hero .icon-box .title {
  font-weight: 700;
  font-size: 24px;
  padding-bottom: 20px;
}

.hero .icon-box .title a {
  color: #000;
  transition: 0.3s;
  text-decoration: none;
}


.hero .icon-box:hover .title a,
.hero .icon-box:hover .icon {
opacity: 0.6;
}


.hero .icon-box .title a:focus {
  outline: 3px solid #0a58ca;
  outline-offset: 2px;
}



#hero .icon-box {
  padding: 50px 30px;
   text-align: center;
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 29px 0 rgba(18, 66, 101, 0.08);
  transition: all 0.3s ease-in-out;
    border-radius: 8px;
  z-index: 1;
}

@media (max-width: 576px) {
  #hero .icon-box {
    padding: 30px 20px;
  }
}

#hero .icon-box:hover {
  box-shadow: 0 10px 35px rgba(18, 66, 101, 0.15);
  transform: translateY(-5px);
}


.hero .icon-box h3 { 
  font-size: 18px;
  font-weight: 600;
  color: #124265;
  text-align: center;
  margin-top: 5px;
  text-decoration: none;
}




.hero .icon-box {
  text-align: center;
  padding: 60px 60px 60px 60px;
  transition: all ease-in-out 0.3s;
  background: #fff;
  box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.07);
  width: 100%;
}


.hero .icon-box .icon {
  margin: 0 auto;
    width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
}

.hero .icon-box .icon2 {
  margin: 0 auto;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
  background-color: none;
}

@media (max-width: 991px) and (orientation: portrait) {
  .hero {
    min-height: 100dvh;
  }
}


  #hero h1 {
     font-size: 40px;
    line-height: 40px;
  }

  #hero h2 {
    font-size: 24px;
    line-height: 24px;
  }
}



  #hero h1 {
    font-size: 40px;
    line-height: 40px;
  }

  #hero h2 {
    font-size: 24px;
    line-height: 24px;
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 50px 0;
  overflow: hidden;
}


.section-bg {
  background-color: rgba(95, 165, 68, 0.1);
}

.section-title{
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 0;
  color: #fff;
  text-align: center;
}

.section-subtitle {
  font-size: 18px;
  font-weight: 600;
  color: #124265;
  text-align: left;
}

.section-filter {
  font-size: 15px;
  font-weight: 500;
    color: var(--color-secondary);
  text-align: center;
  margin: 20px;

}

.section-filter a {
   color: var(--color-primary);
  text-decoration: none;
}

.section-filter a:hover {
  color: var(--color-secondary);
  text-decoration: none;
}

.section-filter .sep {
    color: #ccc;
  text-decoration: none;
}

.section-h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom:10px;
  color: #124265;
  text-align: left;
}



@media (max-width: 768px) {
  .section-title  {
    text-align: left;
    paddding:20px;

  }
}


/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about  {
   padding: 50px 0;
  overflow: hidden;
}

.about .content h3 {
  font-weight: 600;
  font-size: 26px;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-left: 28px;
  position: relative;
}

.about .content ul li+li {
  margin-top: 10px;
}

.about .content ul i {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 20px;
  color: #4B8235;
  line-height: 1;
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .btn-learn-more {
   font-family: var(--font-default);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 5px;
  transition: 0.3s;
  line-height: 1;
  color: #4B8235;
  animation-delay: 0.8s;
  margin-top: 6px;
  border: 2px solid #4B8235;
}

.about .content .btn-learn-more:hover {
  background: #4B8235;
  color: #fff;
  text-decoration: none;
}



/*--------------------------------------------------------------
# Video
--------------------------------------------------------------*/

video {
        max-width: 100%;
        height: auto;
        border: 1px solid #333;
       
    }


/*--------------------------------------------------------------
# Audio
--------------------------------------------------------------*/


.audio-player-container {
  max-width: 100%;

}

.audio-player-container audio {
  width: 100%;
  max-width: 400px; /* You can adjust this value */
  height: 40px;

}




/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.page-title {
  background-color: #000;
  min-height: 30px;
  margin-top: 20px;
}

@media (max-width: 992px) {
  .page-title {
    margin-top: 58px;
  }
}

.page-title .h1{
  font-size: 40px;
   font-weight: 500;
   color: #FFF;
   margin-bottom: 10px;
}



@media (max-width: 768px) {
  .page-title {
    visibility: hidden;
    margin-top: 0px;
    padding:0px;

  }
}




/*--------------------------------------------------------------
# Course 
--------------------------------------------------------------*/

.course h1 {
  font-size: 32px;
  font-weight: 500;
  margin-top: 60px;
  margin-bottom: 20px;
  padding-bottom: 0;
  color: #FFF;
  text-align: left;
}

.course h2 { 
  font-size: 28px;
  font-weight: 500;
  color: white
  text-align: left;
  margin-top: 20px;

}

.course h3 { 
  font-size: 22px;
  font-weight: 500;
  color: white;
  text-align: left;
  margin-top: 20px;
}


.course h4 { 
  font-size: 16px;
  font-weight: 600;
  color: white;
  text-align: left;
  margin-top: 20px;
}


.course-body p  {
  font-family: var(--font-default);
   font-size: 16px;  
}


.course-body ul li {
 font-family: var(--font-default);
   font-size: 16px;   
  padding: 5px;
  color: #FFF;
}

.course-body ol li {
font-family: var(--font-default);
   font-size: 16px;   
  padding: 5px;
  color: #FFF;
}







.course .icon-box .icon i {
  font-size: 36px;
  transition: 0.5s;
  position: relative;
}

.course .icon-box .icon svg {
  position: absolute;
  top: 0;
  left: 0;
}

.course .icon-box .icon svg path {
  transition: 0.5s;
  fill: #f0f6ed;
}

.course .icon-box h3 {
  font-weight: 600;
  margin: 10px 0 15px 0;
  font-size: 24px;
   color: #000;

}

.course .icon-box h3 a:hover {
  color: #4B8235;
  transition: ease-in-out 0.3s;
  text-decoration: none;

}


.course .icon-box h3 a {
  color: #1a5d6d;
  transition: ease-in-out 0.3s;
  text-decoration: none;

}



.course .icon-box p {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 0;
  text-align: center;

}

.course .icon-box a { 
color: #1a5d6d;
  text-decoration: none;
}

.course .icon-box a:hover { 
color: #4B8235;
  transition: ease-in-out 0.3s;
  text-decoration: none;
}





#course .btn-get-started {
   font-family: var(--font-default);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 14px 50px;
  border-radius: 5px;
  transition: 0.5s;
  margin-bottom: 20px;
  color: #fff;
  background: #4B8235;
}

#course .btn-get-started:hover {
  background: #3194db;
}





/*--------------------------------------------------------------
# Details, Accordion 
--------------------------------------------------------------*/


details {
   font-family: var(--font-default);
  background-color: #000;

  > div,
  > p {
    font-family: var(--font-default);
   font-size: 16px;   
    margin: 20px;
    padding-bottom: 20px;
    color: #fff;
    background-color:#000;
  }

  > ul li {
    font-family: var(--font-default);
   font-size: 16px;   
   list-style: disc;
   margin-left: 40px;
   margin-top: 0px;
}
 a {
  font-weight: 500;
  cursor: p

  ointer;
}





  &:not(:last-child) {
    margin-bottom: 10px;
  }
}
*/

details[open] summary {
  margin-bottom: 14px;

}

summary {
  font-family: var(--font-default);   
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  transition: all 150ms ease-in-out;
  padding: 22px;
  color: #000;
  background-color: #8fc8cd;
   border-radius: 8px;
}











/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/


.footer {
  font-size: 13px;
  background: url(../../assets/img/FE-graphic-footer.svg) no-repeat; 
  background-position: right;
  background-color: #393939;
  padding: 50px 0;
  color: white;
}

@media (min-width: 375px) and (max-width: 1024px) {
   .footer { 
    background-image: none !important; 
  }
}




.footer .footer-info p {
  font-size: 13px;
  font-family: var(--font-primary);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.0);
  font-size: 16px;
  color: #fff;
  margin-right: 40px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.8);

}


.footer .footer-links {
  margin-bottom: 30px;
}

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

.footer .footer-links ul i {
  padding-right: 2px;
  color: rgba(0, 131, 116, 0.8);
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer a {
  color: #fff;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

.footer a:hover {
  color: #fff;
}

.footer .footer-contact p {
  line-height: 26px;
}

.footer .copyright {
  text-align: left;
}

.footer .credits {
  padding-top: 4px;
  text-align: left;
  font-size: 13px;
  line-height: 2;
  max-width: 600px;
}

.footer .credits a {
  color: #fff;
}






/*--------------------------------------------------------------
# HS Image Hotspot 
--------------------------------------------------------------*/

/* --- Hotspot Wrapper --- */
.HS__Wrapper {
  position: relative;
}

/* --- Modal Layer Wrapper --- */
.HS__Modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

/* --- Modal Content --- */
.HS__Modal__Content {
   font-family: var(--font-default);
  position: absolute;
  background: #1F1F1F;
  border-radius: 8px;
  padding: 1rem;
  z-index: 10;
  max-width: 400px;
  min-width: 350px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.HS__Modal__Content[hidden] {
  display: none;
}

/* --- Content Inside Modal --- */
.Content__Wrapper {
  position: relative;
}

/* --- Hotspot Button --- */
.HS__Label {
  position: absolute;
  background-color: #393939;
  color: white;
  width: 24px;           /* Slightly larger for better accessibility */
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
    font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;        /* Controls icon size */
  padding: 0;
}



.HS__Label i {
  pointer-events: none;   /* Prevent clicks interfering with icon */
}

/* --- Close Button --- */
.HS__Close {
  position: absolute;
  top: -12px; /* fixed typo */
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  border: none;
  cursor: pointer;
  z-index: 20;
  font-size: 14px; /* Adjust icon size if needed */
  padding: 0;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: center;
}

.HS__Close:focus {
  outline: 3px solid #e95524;
  outline-offset: 2px;
}

/* --- Paragraph Styling --- */
.HS__Modal__Content p {
   font-family: var(--font-default);
  font-size: 14px;
  margin: 10px;
  padding-bottom: 10px;
  color:#fff;

}

.HS__Title {
   font-family: var(--font-default);
  font-size: 20px;
margin: 10px;
  color:#fff;

}

/* --- Optional: Modal Blur Background --- */
.HS__Modal__Overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 5;
}

/* --- Responsive Modal Centering --- */
@media (max-width: 768px) {
  .HS__Modal__Content {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}




/*--------------------------------------------------------------
# Modal Image Gallery 
--------------------------------------------------------------*/


.modal-open{
  overflow:hidden
}

.modal-open .modal{
  overflow-x:hidden;
  overflow-y:auto
}

.modal{
  position:fixed;
  top:0;
  left:0;
  z-index:1050;
  display:none;
  width:100%;
  height:100%;
  overflow:hidden;
  outline:0;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-dialog{
  position:relative;
  width:auto;
  margin:.5rem;
  pointer-events:none;

}

.modal.fade .modal-dialog{
  transition:-webkit-transform .3s ease-out;
  transition:transform .3s ease-out;
  transition:transform .3s ease-out,-webkit-transform .3s ease-out;
  -webkit-transform:translate(0,-50px);
  transform:translate(0,-50px)
}

@media (prefers-reduced-motion:reduce){
  .modal.fade .modal-dialog{transition:none}}

  .modal.show .modal-dialog{
    -webkit-transform:none;
    transform:none
  }

  .modal-dialog-scrollable{
    display:-ms-flexbox;
    display:flex;
    max-height:calc(100% - 1rem)}

    .modal-dialog-scrollable .modal-content{
      max-height:calc(100vh - 1rem);
      overflow:hidden
    }

    .modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header{
      -ms-flex-negative:0;flex-shrink:0
    }

    .modal-dialog-scrollable .modal-body{
      overflow-y:auto
    }

    .modal-dialog-centered{
      display:-ms-flexbox;
      display:flex;-ms-
      flex-align:center;
      align-items:center;
      min-height:calc(100% - 1rem)
    }

    .modal-dialog-centered::before{
      display:block;
      height:calc(100vh - 1rem);
      content:""
    }

    .modal-dialog-centered.modal-dialog-scrollable{
      -ms-flex-direction:column;
      flex-direction:column;
      -ms-flex-pack:center;
      justify-content:center;
      height:100%
    }

      .modal-dialog-centered.modal-dialog-scrollable .modal-content{
        max-height:none
      }

      .modal-dialog-centered.modal-dialog-scrollable::before{
        content:none
      }

      .modal-content{
        position:relative;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-direction:column;
        flex-direction:column;
        width:100%;
        font-family: var(--font-default);
        pointer-events:auto;
        background-color:#000;
        background-clip:padding-box;
        border:1px solid rgba(0,0,0,.2);
        border-radius:.3rem;
        outline:0;
      }

      .modal-backdrop{
        position:fixed;
        top:0;
        left:0;
        z-index:1040;
        width:100vw;
        height:100vh;
        background-color:#000
      }

      .modal-backdrop.fade{
        opacity:0
      }

      .modal-backdrop.show{
        opacity:.5
      }
      .modal-header{
        display:-ms-flexbox;
        display:flex;
        -ms-flex-align:start;
        align-items:flex-start;
        -ms-flex-pack:justify;
        justify-content:space-between;
        padding:1rem 1rem;
        border-bottom:none;
        border-top-left-radius:.3rem;
        border-top-right-radius:.3rem;
      
      }

      .modal-header .close{
      
        margin-top:8px;

      }

      .modal-title {
 
        line-height:3;
         font-family: var(--font-primary);
        color: #F7F7F7;
        font-size: 26px;
        font-weight: 500;

      }

      .modal-body{
        position:relative;

      }

      .modal-footer{
        display:-ms-flexbox;
        display:flex;
        -ms-flex-align:center;
        align-items:center;
        -ms-flex-pack:end;
        justify-content:flex-end;
        padding:1rem;
        border-top:1px solid #dee2e6;
        border-bottom-right-radius:.3rem;
        border-bottom-left-radius:.3rem
      }

      .modal-footer>:not(:first-child){
        margin-left:.25rem
      }

      .modal-footer>:not(:last-child){
        margin-right:.25rem
      }

      .modal-scrollbar-measure{
        position:absolute;
        top:-9999px;
        width:50px;
        height:50px;
        overflow:scroll
      }

      @media (min-width:576px){
        .modal-dialog{max-width:500px;margin:1.75rem auto}

        .modal-dialog-scrollable{
          max-height:calc(100% - 3.5rem)
        }

        .modal-dialog-scrollable .modal-content{
          max-height:calc(100vh - 3.5rem)
        }

        .modal-dialog-centered{
          min-height:calc(100% - 3.5rem)
        }

        .modal-dialog-centered::before{
          height:calc(100vh - 3.5rem)
        }
        .modal-sm{max-width:300px}}
        @media (min-width:992px){
        .modal-lg,.modal-xl{max-width:800px}}

        @media (min-width:1200px){
          .modal-xl{max-width:1140px}}
          .tooltip{
            position:absolute;
            z-index:1070;
            display:block;
            margin:0;
            font-family: var(--font-default);
            font-style:normal;
            font-weight:400;
            line-height:1.5;
            text-align:left;
            text-align:start;
            text-decoration:none;
            text-shadow:none;
            text-transform:none;
            letter-spacing:normal;
            word-break:normal;
            word-spacing:normal;
            white-space:normal;
            line-break:auto;
            font-size:.875rem;
            word-wrap:break-word;
            opacity:0
          }


           /* The Close Button */
          .close {
            position: absolute;
            right: 10px;
             color: var(--color-secondary);
            font-size: 50px;
            font-weight: 300;
            transition: 0.3s;
            background-color: #000;
            border:none;
          }

          .close:hover,
          .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
          }

             /* Thumbnail */

               .thumbnail {
                cursor: pointer;
                margin: 6px;
              }



               /* Thumbnail Hover Text */


            .thumbnail-wrapper {
              position: relative;
              display: inline-block;
            }

            .caption-overlay {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: rgba(0, 0, 0, 0.7); /* semi-transparent black */
              color: #fff;
              margin-bottom: 10px;
              padding: 5px;
              font-family: var(--font-default);
              font-size: 14pt;
              text-align: center;
              opacity: 0;
              transition: opacity 0.3s ease;
              border-bottom-left-radius: 4px;
              border-bottom-right-radius: 4px;
            }

            .thumbnail-wrapper:hover .caption-overlay,
            .thumbnail-wrapper:focus-within .caption-overlay {
              opacity: 1;
            }