html {
		  scroll-behavior: smooth;
		  scroll-padding-top: 120px;
		}
        .nav-dots-thing {
            background-color: white;
            position: absolute;
            width: 353px;
            height: 402px;
            top: 68px;
            left: 75%;
            border-radius: 10px;
            border-color: #d2d2d2;
            border-width: 3px;
            border-style: solid;
        }
        .dots-color {
	        margin-left: 20px;
	        fill-opacity: 1;
	        fill: white;
        }
    
	    body::before {
	        content: "";
	        position: fixed;
	        top: 0;
	        left: 0;
	        width: 100vw;
	        height: 100vh;
	        background: url('/images/BSB-Web-Background.jpg') no-repeat center center fixed;
	        background-size: cover;
	        z-index: -1;
	        opacity: 1;
	    }
	    
	    /* Vertical navigation dots */
	    .vertical-nav {
	        position: fixed;
	        top: 50%;
	        right: 25px;
	        transform: translateY(-50%);
	        z-index: 1000;
	        display: flex;
	        flex-direction: column;
	        gap: 15px;
	    }
	    
	    .vertical-nav .dot {
	        width: 14px;
	        height: 14px;
	        border: 2px solid #ff0; /* yellow outline */
	        background-color: transparent;
	        border-radius: 50%;
	        transition: background-color 0.3s ease;
	    }
	    
	    .vertical-nav .dot.active {
	        background-color: #eaea71; /* filled yellow when active */
	    }
	    /* Base section layout */
		.section {
		  padding: 0px 40px;
		  display: flex;
		  justify-content: center;
		  min-height: 500px;
		  margin-top: 0px;
		}
		
		/* Special case: first hero section */
		.section.hero {
		  display: flex;
		  justify-content: flex-start;
		  align-items: center;
		  flex-wrap: wrap;
		  margin-top: 100px;
		  padding: 60px 40px;
		  min-height: 50vh;
		}
		
		/* Special case: final section */
		.section.final {
		  margin-top: 0px;
		  margin-bottom: 100px;
		  min-height: 500px;
		}
		
		/* Inner container */
		.section .container {
		  max-width: 1200px;
		  width: 100%;
		  display: flex;
		  align-items: center;
		  flex-wrap: wrap;
		  gap: 40px;
		}
		
		/* Reversed layout (image on right) */
		.section.row-reverse .container {
		  flex-direction: row-reverse;
		}
		
		/* Hover effect box */
		.hover-box {
		  flex: 1;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  min-width: 300px;
		  max-width: 500px;
		  margin: 0 auto;
		  transition: transform 0.3s ease, box-shadow 0.3s ease;
		  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
		  padding: 10px;
		}
		.hover-box:hover {
		  box-shadow: 0 0 25px rgba(0, 191, 255, 0.3);
		  transform: scale(1.02);
		}
		
		/* Smaller hover-box variant */
		.hover-box.small {
		  max-width: 400px;
		  padding: 20px;
		}
		
		/* Text content area */
		.section .text {
		  flex: 1;
		  min-width: 300px;
		  color: white;
		}
		.section .text h2 {
		  font-size: 2.3em;
		  margin-bottom: 20px;
		  color: #eaea71;
		}
		.section .text p {
		  font-size: 1.3em;
		}
		
		/* Image wrapper inside hero */
		.section.hero .image {
		  flex: 1;
		  text-align: left;
		  min-width: 300px;
		}
		.section.hero .image img {
		  width: 70%;
		  height: auto;
		}
		/* --- Small Phones (≤ 480px) --- */
		@media (max-width: 480px) {
		  .section {
		    padding: 0 20px;
		    flex-direction: column;
		  }
		  .section .container {
		    flex-direction: column;
		    gap: 20px;
		  }
		  .hover-box,
		  .hover-box.small {
		    max-width: 100%;
		    padding: 10px;
		  }
		  .section.hero .image img {
		    width: 100%;
		  }
		  .section .text h2 {
		    font-size: 1.6em;
		  }
		  .section .text p {
		    font-size: 1.1em;
		  }
		}
		
		/* --- Phones & Foldables (≤ 768px) --- */
		@media (max-width: 768px) {
		  .section {
		    padding: 0 30px;
		    flex-direction: column;
		  }
		  .section .container {
		    flex-direction: column;
		    text-align: center;
		  }
		  .section.hero .image img {
		    width: 90%;
		    margin: 0 auto;
		  }
		}
		
		/* --- Tablets (≤ 1024px) --- */
		@media (max-width: 1024px) {
		  .section .container {
		    gap: 30px;
		  }
		  .section .text h2 {
		    font-size: 2em;
		  }
		  .section .text p {
		    font-size: 1.2em;
		  }
		  .hover-box {
		    max-width: 90%;
		  }
		}
		
		/* --- Small Desktops (≤ 1280px) --- */
		@media (max-width: 1280px) {
		  .section {
		    padding: 0 50px;
		  }
		  .section.hero {
		    padding: 50px 50px;
		  }
		}
		
		/* --- Large Desktops (> 1280px) --- */
		@media (min-width: 1281px) {
		  .section {
		    padding: 0 80px;
		  }
		  .section.hero {
		    padding: 60px 80px;
		  }
		}
		.sr-only {
		  position: absolute;
		  width: 1px;
		  height: 1px;
		  margin: -1px;
		  overflow: hidden;
		  clip: rect(0, 0, 0, 0);
		  white-space: nowrap;
		  border: 0;
		}