.ph {
       vertical-align: -0.125em;
       /* This nudges the icon up slightly to match the text baseline */
       line-height: 1;
       transform: translateY(-2px);
       /* Manually nudge up by 2 pixels */
   }

   body {
       font-family: 'Inter', sans-serif;
       background-color: #080808;
       /* Very dark, almost pitch black */
       color: #f8fafc;
       /* Light text for dark mode */
       scroll-behavior: smooth;
       /* Add padding to body to prevent content from hiding under fixed navbar */
   }

   .container {
       display: flex;
       flex-direction: column;
       align-content: center;
       align-items: center;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: 'Poppins', sans-serif;
       /* Confident font for headings */
   }

   /* Custom scrollbar for better aesthetics */
   ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }

   ::-webkit-scrollbar-track {
       background: #2d3748;
       /* Darker scrollbar track */
       border-radius: 10px;
   }

   ::-webkit-scrollbar-thumb {
       background: #64748b;
       /* Medium gray thumb */
       border-radius: 10px;
   }

   ::-webkit-scrollbar-thumb:hover {
       background: #475569;
       /* Darker gray on hover */
   }

   /* Animated Background - updated styles for main background */
   #animated-background {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 120vh;
       z-index: -1;
       overflow: hidden;
       /* Crucial to prevent content overflow from moving elements */
       background: linear-gradient(135deg, #080808, #121212, #080808);
       /* Darker gradient for background */
       background-size: 300% 300%;
       /* Larger background for animation */
       animation: gradientShift 15s ease infinite;
       /* Slow, continuous animation */
   }

   @keyframes gradientShift {
       0% {
           background-position: 0% 50%;
       }

       50% {
           background-position: 100% 50%;
       }

       100% {
           background-position: 0% 50%;
       }
   }

   .bg-element {
       position: absolute;
       pointer-events: none;
       /* Ensure it doesn't interfere with clicks */
       user-select: none;
       /* Prevent text selection */
   }

   .planet-emoji {
       font-size: clamp(250px, 40vw, 500px);
       /* Much larger, responsive sizing for the globe */
       opacity: 0.15;
       /* Slightly more visible */
       animation: planetDrift var(--drift-duration) linear infinite alternate,
           planetRotate var(--rotate-duration) linear infinite;
       will-change: transform, opacity;
   }

   /* Minimalistic CSS stars */
   .css-star {
       width: 2px;
       height: 2px;
       background-color: #e2e8f0;
       /* Off-white for stars */
       border-radius: 50%;
       opacity: 0;
       /* Start hidden for twinkling */
       animation: minimalisticTwinkle var(--twinkle-duration) ease-in-out infinite alternate;
       will-change: opacity, transform;
       filter: blur(0.5px);
       /* Gentle blur for a softer look */
   }

   /* Keyframes for background animations (main) */
   @keyframes planetDrift {
       0% {
           transform: translate(0, 0);
       }

       100% {
           transform: translate(var(--drift-x), var(--drift-y));
       }

       /* Will be set by JS */
   }

   @keyframes planetRotate {
       0% {
           transform: rotate(0deg);
       }

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

   @keyframes minimalisticTwinkle {

       /* Longer periods of invisibility to make twinkling less frequent */
       0%,
       45%,
       55%,
       100% {
           opacity: 0;
           transform: scale(0.8);
       }

       50% {
           opacity: 0.5;
           transform: scale(1);
       }

       /* Gentle sparkle when visible */
   }

   /* Hero section specific background styles */
   #hero {
       background: linear-gradient(135deg, #080808, #121212, #080808);
       /* Darker gradient for hero background */
       background-size: 300% 300%;
       /* Larger background for animation */
       animation: gradientShift 15s ease infinite;
       /* Slow, continuous animation */
       position: relative;
       /* Crucial for absolute positioning of children */
       overflow: hidden;
       /* To contain animated elements */
       transition: opacity 0.8s ease-out;
       /* Smooth transition for hero, removed transform */

       /* Gradient mask for fading bottom */
       -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
       mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
       min-height: 50vh;
       /* Make hero take up half the viewport height */
       display: flex;
       /* Use flexbox to center content */
       align-items: center;
       /* Vertically center content */
       justify-content: center;
       /* Horizontally center content */
       flex-direction: column;
       /* Stack content vertically */
   }

   /* Class for hero animation on scroll */
   #hero.hero-scrolled-effect {
       opacity: 0;
       /* Only fades out */
   }

   /* Base style for elements within hero background */
   .hero-bg-element {
       position: absolute;
       pointer-events: none;
       user-select: none;
       will-change: transform, opacity;
   }

   .hero-planet-emoji {
       font-size: clamp(200px, 35vw, 450px);
       /* Slightly smaller than main page globe */
       opacity: 0.1;
       /* Very subtle */
       animation: heroPlanetDrift var(--drift-duration) linear infinite alternate,
           heroPlanetRotate var(--rotate-duration) linear infinite;
   }

   @keyframes heroPlanetDrift {
       0% {
           transform: translate(0, 0);
       }

       100% {
           transform: translate(var(--drift-x), var(--drift-y));
       }
   }

   @keyframes heroPlanetRotate {
       0% {
           transform: rotate(0deg);
       }

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

   .hero-css-star {
       width: 1.5px;
       /* Slightly smaller stars for hero */
       height: 1.5px;
       background-color: #cbd5e1;
       /* Lighter off-white */
       border-radius: 50%;
       opacity: 0;
       animation: minimalisticTwinkleHero var(--twinkle-duration) ease-in-out infinite alternate;
       filter: blur(0.4px);
   }

   @keyframes minimalisticTwinkleHero {

       0%,
       40%,
       60%,
       100% {
           opacity: 0;
           transform: scale(0.7);
       }

       50% {
           opacity: 0.4;
           transform: scale(1);
       }
   }


   /* Promotion Section Animation */
   .promotion-glow {
       animation: pulseGlow 2s infinite alternate;
       border: 2px solid transparent;
       /* Ensure border exists for animation */
   }

   @keyframes pulseGlow {
       0% {
           box-shadow: 0 0 5px rgba(239, 68, 68, 0.4);
           border-color: rgba(239, 68, 68, 0.2);
       }

       100% {
           box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
           border-color: rgba(239, 68, 68, 0.8);
       }
   }

   /* Floating Contact Button and Speech Bubble */
   .contact-button-container {
       position: fixed;
       bottom: 2rem;
       right: 2rem;
       z-index: 1000;
       display: flex;
       /* Changed to flex for stacking */
       flex-direction: column-reverse;
       /* Stacks items vertically, button at bottom */
       align-items: flex-end;
       /* Aligns items to the right */
       gap: 1rem;
       /* Space between bubble and button */
   }

   .speech-bubble {
       background-color: #3b82f6;
       /* Blue for the bubble */
       color: white;
       padding: 0.75rem 1rem;
       border-radius: 0.75rem;
       /* rounded-xl */
       font-size: 0.9rem;
       font-weight: 500;
       position: relative;
       /* Make it relative to itself for arrow positioning */
       opacity: 1;
       /* Always visible unless explicitly hidden or transparent by scroll */
       transition: opacity 0.3s ease-out;
       /* Only opacity transition needed */
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
       white-space: nowrap;
       /* Keep text on one line */
   }

   .speech-bubble.transparent {
       opacity: 0.2;
       /* More transparent when scrolling */
   }

   /* Speech bubble "tail" - adjusted for new position */
   .speech-bubble::after {
       content: '';
       position: absolute;
       top: 100%;
       /* Position at the very bottom of the speech bubble */
       right: 1rem;
       /* Adjust this to align the arrow nicely with the button below */
       width: 0;
       height: 0;
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
       border-top: 8px solid #3b82f6;
       /* Arrow pointing down */
   }


   /* Contact Dialog & Popup Modal Styling */
   .modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.75);
       /* Darker overlay */
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 1001;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.3s ease, visibility 0.3s ease;
   }

   .modal-overlay.active {
       opacity: 1;
       visibility: visible;
   }

   .modal-content {
       background-color: #1f2937;
       /* Even brighter modal background */
       padding: 2.5rem;
       border-radius: 1rem;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
       /* Stronger shadow for dark mode */
       position: relative;
       max-height: 70%;
       max-width: 90%;
       width: 400px;
       transform: translateY(20px);
       opacity: 0;
       transition: transform 0.3s ease, opacity 0.3s ease;
       color: #e2e8f0;
       display: flex;
       flex-direction: column;
       overflow-y: scroll;
       /* Light text for modal */
   }

   .modal-overlay.active .modal-content {
       transform: translateY(0);
       opacity: 1;
   }

   /* About Modal Specific Styling */
   #aboutDialog .modal-content {
       width: 90%;
       /* Take up most of the width */
       max-width: 800px;
       /* Max width for larger screens */
       height: 80%;
       /* Take up most of the height */
       max-height: 600px;
       /* Max height for larger screens */
       overflow-y: auto;
       /* Enable scrolling if content overflows */
   }


   .modal-close-button {
       position: absolute;
       top: 1rem;
       right: 1rem;
       background: none;
       border: none;
       font-size: 1.5rem;
       cursor: pointer;
       color: #94a3b8;
       /* Lighter close button icon */
       transition: color 0.2s ease;
   }

   .modal-close-button:hover {
       color: #f8fafc;
       /* White on hover */
   }

   /* Iframe scroll animation (simplified for cross-origin) */
   .portfolio-iframe-container {
       transition: transform 0.8s ease-out, opacity 0.8s ease-out;
       transform: translateY(0);
       /* Default state */
   }

   .portfolio-iframe-container.scrolled-effect {
       /* Example effect: slightly scale down and fade out on scroll */
       transform: scale(0.95) translateY(-50px);
       opacity: 0.8;
   }

   .dismissible-section {
       transition: opacity 0.5s ease-out, max-height 0.5s ease-out;
       overflow: hidden;
       opacity: 1;
       max-height: 1000px;
       /* Large enough to show content */
   }

   .dismissible-section.hidden {
       opacity: 0;
       max-height: 0;
       padding: 0;
       margin: 0;
   }

   /* Breadcrumbs Styling - now visible again */
   .breadcrumbs-nav {
       position: fixed;
       right: 1rem;
       /* Positioned to the left */
       top: 50%;
       transform: translateY(-50%);
       z-index: 999;
       background-color: rgba(45, 55, 72, 0.9);
       /* Semi-transparent dark background */
       border-radius: 0.75rem;
       /* rounded-lg */
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
       padding: 0.75rem;
       display: block;
       /* Make it visible again */
   }

   .breadcrumb-item {
       display: block;
       padding: 0.5rem 0.75rem;
       border-radius: 0.5rem;
       color: #94a3b8;
       /* Light gray text */
       transition: background-color 0.2s ease, color 0.2s ease;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .breadcrumb-item:hover {
       background-color: #475569;
       /* Darker gray on hover */
       color: #f8fafc;
       /* Lighter text on hover */
   }

   .breadcrumb-item.active {
       background-color: #3b82f6;
       /* Blue background for active state */
       color: #ffffff;
       /* White text for active state */
       font-weight: 600;
   }

   /* Button styling */
   .btn-primary {
       @apply bg-blue-600 text-white font-medium py-3 px-6 rounded-lg shadow-md hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105;
       border: 2px solid #9cb359;
       border-radius: 10px;
       padding: 10px;
       margin: 5px;
   }

   .btn-secondary {
       @apply bg-gray-700 text-gray-200 font-medium py-3 px-6 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out;
       border: 2px solid #ffffff;
       border-radius: 10px;
       padding: 10px;
       margin: 5px;
   }

   /* New style for the outlined white button */
   .btn-outline-white {
       background-color: transparent;
       color: #f8fafc;
       /* Light text */
       border: 2px solid #f8fafc;
       /* White border */
       /* Using @apply for Tailwind utility classes */
       @apply font-medium py-4 px-8 rounded-full shadow-md transition duration-300 ease-in-out transform hover:scale-105;
       box-shadow: 0 0 10px rgba(248, 250, 252, 0.3);
       /* Subtle glow */
       border-radius: 10px;
       padding: 10px;
   }

   .btn-outline-white:hover {
       background-color: rgba(248, 250, 252, 0.1);
       /* Slight fill on hover */
       box-shadow: 0 0 15px rgba(248, 250, 252, 0.5);
       /* More prominent glow on hover */
   }

   /* New style for South African Flag Text */
   .sa-flag-text {
       background: linear-gradient(to right,
               #000000,
               /* Black */
               #000000 15%,
               #007A5E 15%,
               #007A5E 35%,
               #FBC720 35%,
               #FBC720 55%,
               #002395 55%,
               #002395 75%,
               #DE3831 75%);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       /* Makes the text transparent so the background gradient shows through */
       display: inline-block;
       /* Essential for background-clip to work */
   }

   /* Glass Navbar Redesign */
   .glass-navbar {
       position: fixed;
       top: 1rem;
       left: 50%;
       transform: translateX(-50%);
       width: 95%;
       max-width: 1200px;
       z-index: 1000;
       background-color: rgba(15, 23, 42, 0.8);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 1rem;
       box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
       padding: 0.5rem 1rem;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .glass-navbar .container {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       width: 100%;
       max-width: none;
       margin: 0;
       padding: 0;
   }

   .nav-brand {
       font-family: 'Poppins', sans-serif;
       font-weight: 700;
       font-size: 1.25rem;
       color: #f8fafc;
       display: flex;
       align-items: center;
       gap: 0.5rem;
       white-space: nowrap;
   }

   .nav-links {
       display: flex;
       align-items: center;
       gap: 0.25rem;
       overflow-x: auto;
       scrollbar-width: none;
       /* Firefox */
       -ms-overflow-style: none;
       /* IE and Edge */
   }

   .nav-links::-webkit-scrollbar {
       display: none;
       /* Chrome, Safari and Opera */
   }

   .glass-navbar-item {
       @apply text-gray-400 px-3 py-2 rounded-lg transition-all duration-200 text-sm font-medium;
       white-space: nowrap;
       border: 1px solid transparent;
   }

   .glass-navbar-item:hover {
       @apply text-white bg-white/10;
   }

   .glass-navbar-item.active {
       @apply text-blue-400 bg-blue-500/10 border-blue-500/20;
   }

   @media (max-width: 1024px) {
       .nav-links {
           display: none;
           /* Simplified for now, or could use a burger menu */
       }

       .glass-navbar-item.mobile-visible {
           display: flex;
       }

       .nav-links.active {
           display: flex;
           position: absolute;
           top: calc(100% + 0.5rem);
           left: 0;
           right: 0;
           flex-direction: column;
           background-color: rgba(15, 23, 42, 0.95);
           backdrop-filter: blur(16px);
           padding: 1rem;
           border-radius: 1rem;
           border: 1px solid rgba(255, 255, 255, 0.1);
           gap: 0.5rem;
       }
   }

   .height-bars {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-image: repeating-linear-gradient(to bottom, transparent, transparent 39px, rgba(74, 85, 104, 0.5) 40px, rgba(74, 85, 104, 0.5) 41px);
       /* Adjusted spacing for 5 lines */
       background-size: 100% 41px;
       /* Repeat every 41px (40px line + 1px bar) */
       z-index: 5;
       /* Behind the picture */
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       /* Distribute numbers vertically */
       align-items: flex-start;
       /* Align numbers to the left */
       padding-left: 5px;
       /* Small padding from the edge */
   }

   .height-bars span {
       color: rgba(255, 255, 255, 0.6);
       /* Slightly transparent white */
       font-size: 0.8rem;
       font-weight: bold;
       line-height: 1;
       /* Prevent extra space */
       transform: translateY(-50%);
       /* Adjust to center number on the line */
       margin-top: -1px;
       /* Fine-tune vertical position */
   }


   .prison-bars {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.4) 0px, rgba(0, 0, 0, 0.4) 4px, transparent 4px, transparent 25px);
       z-index: 15;
       /* In front of the picture */
       pointer-events: none;
       /* Allow clicks through bars */
   }

   .prison-number-container {
       position: absolute;
       bottom: 1rem;
       /* Adjust based on container height */
       z-index: 20;
       /* Ensure it's on top */
       display: flex;
       align-items: center;
       background-color: rgba(0, 0, 0, 0.7);
       padding: 0.25rem 0.5rem;
       border-radius: 0.25rem;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
       transform: translateY(25px);
       /* Lift it up slightly over the hands */
   }

   .prison-hands {
       font-size: 2.5rem;
       /* Larger hands emoji */
       line-height: 1;
       /* Align emoji better */
       margin-right: 0.5rem;
   }

   .prison-number {
       font-family: 'monospace', monospace;
       font-size: 1.25rem;
       color: #f8fafc;
       font-weight: bold;
   }

   /* Trusted By Band (No background, just transparent padding) */
   #trustedByBand {
       position: relative;
       padding: 4rem 1.5rem;
       /* Adjust padding as needed */
       margin-bottom: 3rem;
       /* Consistent spacing */
       border-radius: 1rem;
       /* rounded-xl */
       box-shadow: none;
       /* Removed shadow */
       background-color: transparent;
       /* Removed background color */
       backdrop-filter: none;
       /* Removed blur effect */
       -webkit-backdrop-filter: none;
       /* For Safari */
       border: none;
       /* Removed border */
       overflow: hidden;
       /* Hide overflowing marquee content */
   }

   #trustedByBand .container {
       position: relative;
       z-index: 10;
       /* Ensure content is above any potential pseudo-element background */
   }

   /* Marquee Specific CSS */
   .trusted-by-marquee-container {
       width: 100%;
       overflow: hidden;
       /* Hide the overflowing content */
       position: relative;
       padding: 1rem 0;
       /* Vertical padding for the scrolling band content */
   }

   .trusted-by-marquee-inner {
       display: flex;
       /* Removed white-space: nowrap; controlled by JS now */
       flex-wrap: nowrap;
       /* Ensure items stay on one line */
       will-change: transform;
       /* Optimize for animation */
   }

   .marquee-item {
       display: flex;
       /* Use flex to center content */
       flex-direction: column;
       align-items: center;
       /* Horizontally center content */
       justify-content: center;
       /* Vertically center content */
       flex-shrink: 0;
       /* Prevent shrinking */
       width: 180px;
       /* Fixed width for each item to ensure consistent scrolling */
       height: 150px;
       /* Fixed height for each item */
       margin-right: 2rem;
       /* Consistent horizontal spacing between items */
       background-color: transparent;
       /* Removed background for individual items */
       border-radius: 0.75rem;
       /* rounded-xl */

       transform: translateY(-5px);
       /* Lift effect on hover */
   }

   .marquee-item a {
       text-decoration: none;
       /* Remove underline from links */
   }

   .img-logo-wrapper {
       position: relative;
       width: 100%;
       /* Take full width of parent marquee-item */
       overflow: hidden;
       background-color: transparent;
       /* Removed background for img area */
       border-radius: 0.5rem;
       /* rounded-lg */
       display: flex;
       /* Use flexbox to center content */
       align-items: center;
       /* Vertically center emoji */
       justify-content: center;
       /* Horizontally center emoji */
       height: 100%;
       /* Full height of parent marquee-item */
   }

   .img-logo {
       position: absolute;
       top: 50%;
       /* Center vertically */
       left: 50%;
       /* Center horizontally */
       width: 100%;
       height: 100%;
       object-fit: contain;
       /* Ensures the image fits within the bounds without clipping */
       border: none;
       overflow: hidden;
       /* Scale down content to fit better as a logo within the smaller img container */
       transform: translate(-50%, -50%) scale(0.6);
       /* Reduced scale for more zoom out */
       transform-origin: center center;
       /* Ensure scaling is from center */
   }

   .emoji-logo {
       font-size: 3rem;
       /* Make emoji large enough to be seen as a logo */
       line-height: 1;
       /* Adjust line height to prevent extra space around emoji */
       text-align: center;
   }

   footer {
       text-align: center;
       padding: 30px 20px;
       font-size: 0.9em;
       width: 100%;
   }

   /* Icon Helper */
   .ph {
       vertical-align: middle;
       display: inline-block;
   }