html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* Full viewport width */
        height: 100vh; /* Full viewport height */
        background-image: url('/img/light/AustinWide.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 0.03; /* Apply opacity only to the watermark */
        z-index: -1; /* Ensure the watermark stays behind all content */
    }

h1 {
    font-size: 2rem; /* Adjust this to the size you prefer */
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.875rem;
}

.responsive-video {
    width: 100%;
    max-width: 800px;
    display: block;
    margin-top: 30px;
    margin-bottom: 20px; /* Keeps spacing below */
    background-color: #f8f9fa; /* Light gray or any preferred color */
    border-radius: 8px; /* Optional - rounded corners */
    padding: 5px; /* Optional - Adds space around the video */
}

/* Adjust margins when stacked on mobile */
@media (max-width: 768px) {
    .responsive-video {
        margin-left: auto; /* Centers video */
        margin-right: auto; /* Ensures it's centered */
    }
}

.video-container {
    display: flex;
    align-items: flex-start; /* Aligns text and video at the top */
    gap: 20px; /* Adds spacing between text and video */
}

    /* Allow text to take up remaining space */
    .video-container .text-content {
        flex: 1;
    }

    /* Keep video from shrinking too much */
    .video-container .video-wrapper {
        flex-shrink: 0;
        max-width: 400px; /* Adjust based on your preferred size */
    }

/* Stack video below text on small screens */
@media (max-width: 768px) {
    .video-container {
        flex-direction: column;
    }

    .video-wrapper {
        max-width: 100%; /* Let it be full width */
    }
}