/* Brand Colors */
        :root {
            --light-brown: #dac4b3;
            --dark-brown: #4e393e;
            --teal-blue: #71b5c3;
            --darker-teal-blue: #5396a4;
            --dark-pink: #b95185;
        }
        
        /* Typography */
        h1, h2, h3, h4, h5, h6, .heading {
            font-family: 'Arial Black', Arial, sans-serif;
            font-weight: 900;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: var(--dark-brown);
        }
        
        /* Accessibility and Contrast */
        .bg-light-brown {
            background-color: var(--light-brown);
            color: var(--dark-brown);
        }
        
        .bg-dark-brown {
            background-color: var(--dark-brown);
            color: #ffffff;
        }
        
        .bg-teal-blue {
            background-color: var(--teal-blue);
            color: var(--dark-brown);
        }
        
        .bg-darker-teal-blue {
            background-color: var(--darker-teal-blue);
            color: #ffffff;
        }
        
        .bg-dark-pink {
            background-color: var(--dark-pink);
            color: #ffffff;
        }
        
        /* Button Styles */
        .btn-annual , .teal {
            background-color: var(--darker-teal-blue);
            color: #ffffff;
            border: none;
            font-weight: 600;
        }
        
        .btn-annual:hover , .teal:hover {
            background-color: var(--teal-blue);
            color: var(--dark-brown);
        }
        
        .btn-monthly, .pink {
            background-color: var(--dark-pink);
            color: #ffffff;
            border: none;
            font-weight: 600;
        }
        
        .btn-monthly:hover ,.pink:hover {
            background-color: #d16aa1;
            color: #ffffff;
        }
        /* Additional custom styles if needed */
.btn-dark-brown {
  background-color: #4e393e;
  color: #ffffff;
  border: none;
  font-weight: 600;
}

.btn-dark-brown:hover {
  background-color: #5f4a4f;
  color: #ffffff;
}

        /* Section Spacing */
        section {
            padding: 4rem 0;
        }
        
        /* Image Styles */
        .section-image {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 8px;
        }
        
        .profile-image {
            width: 100%;
            max-width: 300px;
            height: auto;
            border-radius: 50%;
            margin: 0 auto;
            display: block;
        }
        
        /* Header/Navigation */
        .navbar {
            background-color: var(--dark-brown);
        }
        
        .navbar-brand {
            font-family: 'Arial Black', Arial, sans-serif;
            color: #ffffff !important;
            font-size: 1.5rem;
        }
        
        /* Video Styles */
        .video-container {
            width: 100%;
            max-width: 100%;
            margin: 3rem 0;
        }
        
        .video-container video {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* Modal Styles */
        .modal-header .btn-close {
            font-size: 2rem;
            padding: 1rem;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark-brown);
            color: #ffffff;
            padding: 3rem 0 1rem;
        }
        
        footer a {
            color: white;
            text-decoration: none;
        }
        
        footer a:hover {
            color: var(--teal-blue);
        }
        
        /* Form Styles */
        .embed-form {
            max-width: 100%;
            margin: 2rem 0;
        }
        
        /* Alternating Layout Helper */
        .content-left .row {
            flex-direction: row;
        }
        
        .content-right .row {
            flex-direction: row-reverse;
        }

        .inhe {color:inherit; text-decoration:none ;}
        a {color:inherit; font-weight:bold;}
        
        @media (max-width: 768px) {
            .content-right .row {
                flex-direction: column;
            }
        }