/* Smooth transition for mobile sidebar */
        .mobile-sidebar {
            transition: transform 0.3s ease-in-out;
            transform: translateX(-100%);
        }
        .mobile-sidebar.open {
            transform: translateX(0);
        }
        
        /* Smooth height adjustment for mobile dropdown */
        .mobile-dropdown {
            transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            padding-top: 0;
            padding-bottom: 0;
        }
        .mobile-dropdown.open {
            max-height: 1500px; /* arbitrary high value that fits nested content */
            opacity: 1;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        /* Desktop dropdown visibility */
        .desktop-dropdown {
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px);
            transition: visibility 0s 0.2s, opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
        }
        .group:hover .desktop-dropdown {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
        }

        /* Fixed Header Wrapper */
        .header-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 50;
            transition: transform 0.3s ease-in-out;
        }

        /* Custom Scrollbar for Sticky Sidebar */
        .custom-scrollbar::-webkit-scrollbar {
            width: 5px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1; 
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #d1d5db; 
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #9ca3af; 
        }

        .bg-hero{
			mix-blend-mode: multiply;
           } 

        /* Owl Carousel Custom Navigation */
        .hero-slider .owl-nav button.owl-prev,
        .hero-slider .owl-nav button.owl-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.8) !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            color: #1e3a8a !important;
            font-size: 24px !important;
            font-weight: bold;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        .hero-slider .owl-nav button.owl-prev:hover,
        .hero-slider .owl-nav button.owl-next:hover {
            background: #ffffff !important;
            color: #1d4ed8 !important;
            transform: translateY(-50%) scale(1.1);
        }
        .hero-slider .owl-nav button.owl-prev {
            left: 20px;
        }
        .hero-slider .owl-nav button.owl-next {
            right: 20px;
        }
        /* Hide dots if not needed or style them */
        .hero-slider .owl-dots {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
        }
        .hero-slider .owl-dot span {
            width: 10px !important;
            height: 10px !important;
            background: rgba(255, 255, 255, 0.5) !important;
        }
        .hero-slider .owl-dot.active span {
            background: #ffffff !important;
            width: 20px !important;
        }

        .owl-carousel .owl-stage{
            padding: 20px 0;
        }

        /* Typography fixes for WP Content (.prose) */
        .prose {
            color: #4b5563; /* text-gray-600 */
            max-width: 100%;
        }
        .prose p {
            margin-top: 1.25em;
            margin-bottom: 1.25em;
            line-height: 1.75;
        }
        .prose ul {
            list-style-type: disc;
            padding-left: 1.625em;
            margin-top: 1.25em;
            margin-bottom: 1.25em;
        }
        .prose ol {
            list-style-type: decimal;
            padding-left: 1.625em;
            margin-top: 1.25em;
            margin-bottom: 1.25em;
        }
        .prose li {
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            padding-left: 0.375em;
        }
        .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
            color: #111827; /* text-gray-900 */
            font-weight: 800;
            margin-top: 2em;
            margin-bottom: 1em;
            line-height: 1.3;
        }
        .prose h2 { font-size: 1.875rem; }
        .prose h3 { font-size: 1.5rem; }
        .prose h4 { font-size: 1.25rem; }
        
        .prose img {
            margin-top: 2em;
            margin-bottom: 2em;
            border-radius: 0.75rem;
            max-width: 100%;
            height: auto;
        }
        .prose blockquote {
            font-weight: 500;
            font-style: italic;
            color: #111827;
            border-left: 4px solid #d1d5db;
            padding-left: 1em;
            margin-top: 1.6em;
            margin-bottom: 1.6em;
        }
        .prose a {
            color: #007e68; /* primary green */
            text-decoration: underline;
            font-weight: 500;
        }
        .prose a:hover {
            color: #005646; /* darker green */
        }
        .prose strong {
            font-weight: 700;
            color: #111827;
        }

        .prose table {
            width: 100%;
            margin-top: 2em;
            margin-bottom: 2em;
            text-align: left;
            border-collapse: collapse;
            font-size: 14px;
        }
        .prose th, .prose td {
            border: 1px solid #111827;
            padding: 10px;
        }
        .prose th {
            color: #111827;
            font-weight: 700;
            background-color: transparent;
        }
        .prose td {
            color: #4b5563;
        }


@media only screen and (max-width: 768px){
   .prose h2 {
    font-size: 16px !important;
	line-height: 1.5 !important;   
} 
	
	table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table tbody {
    width: 100%;
}
	       .bg-hero {
			 background-repeat: no-repeat;
             background-size: cover;
             background-position: center;
             mix-blend-mode: lighten !important;
             mask-image: linear-gradient(to right, transparent 0%, black 40%);
             -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
}
}