#snackbar {
          visibility: hidden;
          min-width: 250px;
          margin-left: -125px;
          background-color: #f05b5b;
          color: #fff;
          text-align: center;
          border-radius: 2px;
          padding: 16px;
          position: fixed;
          z-index: 1;
          left: 50%;
          bottom: 330px;
          font-size: 17px;
        }

        #snackbar.show {
          visibility: visible;
          -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
          animation: fadein 0.5s, fadeout 0.5s 2.5s;
        }

        @-webkit-keyframes fadein {
          from {bottom: 0; opacity: 0;} 
          to {bottom: 330px; opacity: 1;}
        }

        @keyframes fadein {
          from {bottom: 0; opacity: 0;}
          to {bottom: 330px; opacity: 1;}
        }

        @-webkit-keyframes fadeout {
          from {bottom: 30px; opacity: 1;} 
          to {bottom: 0; opacity: 0;}
        }

	        @keyframes fadeout {
	          from {bottom: 330px; opacity: 1;}
	          to {bottom: 0; opacity: 0;}
	        }

        :root {
          /* Always define this so var(--color-secondary-alt) never becomes invalid. */
          --color-secondary-alt: var(--color-secondary);
          /* Text color to use on top of BG Secondary (secondary-alt). */
          --color-secondary-alt-text: var(--color-white);
        }

        :is(.fhsg-category-tabs, .lms-category-tabs) {
          display: flex;
          gap: 10px;
          justify-content: center;
          flex-wrap: wrap;
        }

        :is(.fhsg-category-tab, .lms-category-tab) {
          appearance: none;
          border: 1px solid rgba(15, 23, 42, 0.14);
          background: rgba(255, 255, 255, 0.9);
          color: var(--color-heading);
          padding: 10px 16px;
          border-radius: 14px;
          font-size: 16px;
          font-weight: 700;
          line-height: 1;
          transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
        }

        :is(.fhsg-category-tab, .lms-category-tab):hover {
          border-color: var(--color-primary);
          color: var(--color-primary);
        }

        :is(.fhsg-category-tab, .lms-category-tab).is-active {
          background: var(--color-primary);
          border-color: var(--color-primary);
          color: var(--color-white);
        }

        @media (max-width: 575.98px) {
          :is(.fhsg-category-tabs, .lms-category-tabs) {
            justify-content: flex-start;
            overflow-x: auto;
            flex-wrap: nowrap;
            padding-bottom: 6px;
            -webkit-overflow-scrolling: touch;
          }
          :is(.fhsg-category-tab, .lms-category-tab) {
            white-space: nowrap;
          }
        }

	        /* Root secondary-alt overrides usage */
	        a.edu-btn:hover,
	        button.edu-btn:hover,
          a.rn-btn.edu-btn:hover,
          button.rn-btn.edu-btn:hover {
	          background: var(--color-secondary-alt, var(--color-secondary)) !important;
	          color: var(--color-secondary-alt-text, var(--color-white)) !important;
	        }
	        a.edu-btn:hover i,
	        button.edu-btn:hover i,
          a.rn-btn.edu-btn:hover i,
          button.rn-btn.edu-btn:hover i {
	          color: inherit !important;
	        }

	        .feature-style-5 .edu-feature-list .icon {
	          background: var(--color-secondary-alt, var(--color-secondary)) !important;
	        }
	        .feature-style-5 .edu-feature-list .icon i {
	          color: var(--color-secondary-alt-text, var(--color-white)) !important;
	        }

	        /* Bootstrap pagination used by Programs */
	        .pagination {
            --bs-pagination-color: var(--color-heading);
            --bs-pagination-hover-color: var(--color-secondary-alt-text, var(--color-white));
            --bs-pagination-hover-bg: var(--color-secondary-alt, var(--color-secondary));
            --bs-pagination-hover-border-color: var(--color-secondary-alt, var(--color-secondary));
            --bs-pagination-focus-color: var(--color-heading);
            --bs-pagination-focus-bg: var(--color-secondary-alt, var(--color-secondary));
            --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.08);
            --bs-pagination-active-color: var(--color-secondary-alt-text, var(--color-white));
            --bs-pagination-active-bg: var(--color-secondary-alt, var(--color-secondary));
            --bs-pagination-active-border-color: var(--color-secondary-alt, var(--color-secondary));
          }
	        .pagination .page-link {
	          color: var(--color-heading) !important;
	        }
	        .pagination .page-link:hover,
	        .pagination .page-link:focus {
	          background-color: var(--color-secondary-alt, var(--color-secondary)) !important;
	          border-color: var(--color-secondary-alt, var(--color-secondary)) !important;
	          color: var(--color-secondary-alt-text, var(--color-white)) !important;
	        }
	        .pagination .page-item.active .page-link {
	          background-color: var(--color-secondary-alt, var(--color-secondary)) !important;
	          border-color: var(--color-secondary-alt, var(--color-secondary)) !important;
	          color: var(--color-secondary-alt-text, var(--color-white)) !important;
	        }
	        .pagination .page-item.disabled .page-link {
	          opacity: 0.6;
	        }

	        /* Inquiry email wrapping */
	        .contact-address-card-1 .inner .content p,
	        .contact-address-card-1 .inner .content p a,
          .contact-address-card-1 .inner .content p span {
		          overflow-wrap: anywhere;
		          word-break: break-word;
            max-width: 100%;
	        }
          .contact-address-card-1 .inner .content p a,
          .contact-address-card-1 .inner .content p span {
            display: inline-block;
          }

          /* Landing header logo: keep aspect ratio (avoid width stretching). */
          .edu-header .logo a img.fhsg-header-logo,
          .popup-mobile-menu .inner .header-top .logo a img.fhsg-header-logo {
            width: auto !important;
            height: auto !important;
            max-width: 100%;
            object-fit: contain;
          }

          /* Inquiry cards hover uses Theme → Secondary BG */
          .contact-address-card-1:hover {
            background: var(--color-secondary-alt, var(--color-secondary)) !important;
          }
          .contact-address-card-1:hover .inner .icon i {
            color: var(--color-secondary-alt, var(--color-secondary)) !important;
          }
          .contact-address-card-1 .inner .content p a:hover {
            color: var(--color-secondary-alt, var(--color-primary)) !important;
          }