.bg-hero { background: transparent; background: linear-gradient( 0deg, rgba(254, 254, 254, 0) 0%, rgba(240, 245, 246, 1) 1%, rgba(255, 255, 255, 0.9164040616246498) 19%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100% ); } .nav-scroller { position: relative; z-index: 2; overflow-y: hidden; } .nav-scroller .nav { display: flex; flex-wrap: nowrap; overflow-x: auto; text-align: center; white-space: nowrap; -webkit-overflow-scrolling: touch; } .hover-text-decoration-underline:hover { text-decoration: underline !important; } /* lqip start */ img { transition: opacity 0.5s ease; } img.lqip-blur { opacity: 1; /* or any value less than 1 to make it slightly transparent */ } img.lqip-blur { filter: blur(20px); -webkit-filter: blur(20px); } /* lqip end */ a.link-body-emphasis { text-decoration: none; &:hover { text-decoration: none; } } .bg-globe { position: absolute; top: calc(50% - 150px); left: calc(50% - 150px); width: 300px; height: 300px; border-radius: 50%; box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff, 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff; } /* Custom illuminated button style */ .illuminated { position: relative; overflow: hidden; z-index: 1; animation: shimmer 2s infinite linear; /* Apply the animation to the button */ } /* Shimmer gradient */ .illuminated::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( -45deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 75% ); background-size: 400% 400%; z-index: -1; animation: shimmer 3s infinite; /* Apply the animation to the gradient */ } /* Define the shimmer effect using keyframes */ @keyframes shimmer { 0% { background-position: 0 0; } 100% { background-position: -400% 0; } } .word-wrap-break-word { word-wrap: break-word; overflow-wrap: break-word; }