/**
* 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; */

   /* vertical-align: .5em; */
   /* font-size: xx-small; */

   vertical-align: text-top;
   font-size: 60%;
   top: 0.5em !important;
 }

 h2>sup {
   vertical-align: super;
   font-size: x-small;
   top: -0.5em !important;
 }

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

#lang-link {
  background-color: white;
  color: black;
}

#lang-link:hover {
  background: var(--color-secondary); 
  color: black;
}




 /*--------------------------------------------------------------
# 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;
     padding: 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;
 }