body {
            font-family: 'Open Sans', sans-serif;
            background-color: #FFF1E6;
            color: #1A1A1A;
            overflow-x: hidden;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .font-heading {
            font-family: 'Montserrat', sans-serif;
        }

        /* Smooth scrolling */
        html {
            scroll-behavior: smooth;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #FFF1E6;
        }

        ::-webkit-scrollbar-thumb {
            background: #DDB892;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #2D6A4F;
        }

        /* Blinking Urgency Animation */
        .blink-urgent {
            animation: blinker 1.5s linear infinite;
            color: #dc2626;
            font-weight: bold;
        }

        @keyframes blinker {
            50% {
                opacity: 0.5;
            }
        }

        /* Hero Image Overlay */
        .hero-bg {
            background-image: linear-gradient(rgba(26, 26, 26, 0.6), rgba(45, 106, 79, 0.7)), url('https://images.unsplash.com/photo-1600596542815-e32c8cc22bc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
        }

        /* Hide sections for SPA feel */
        .page-section {
            animation: fadeIn 0.5s ease-in-out;
        }

        .page-section.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Loader */
        .loader {
            border-top-color: #2D6A4F;
            -webkit-animation: spinner 1.5s linear infinite;
            animation: spinner 1.5s linear infinite;
        }

        @keyframes spinner {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }


 /* ================= SEO SECTION STYLES ================= */

/* 1. Custom Scrollbar (Webkit browsers like Chrome/Safari/Edge) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #333333; /* Dark track to match footer */
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #DDB892; /* Secondary color (Beige) */
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #2D6A4F; /* Primary color (Green) on hover */
}

/* 2. Keyword Tag Styling */
/* If you are not using Tailwind, use this class for the <a> tags */
.keyword-tag {
    display: inline-block;
    background-color: #1f2937; /* Dark Gray */
    border: 1px solid #374151; /* Border Gray */
    color: #9ca3af;            /* Text Light Gray */
    font-size: 0.75rem;        /* 12px */
    padding: 0.375rem 0.75rem; /* Vertical & Horizontal Padding */
    border-radius: 0.25rem;    /* Rounded corners */
    text-decoration: none;
    white-space: nowrap;       /* Prevent text wrapping */
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;     /* Spacing if they wrap */
    cursor: pointer;
}

/* Hover State for Keyword Tags */
.keyword-tag:hover {
    background-color: #DDB892; /* Brand Secondary */
    color: #FFFFFF;            /* White text */
    border-color: #DDB892;
    transform: translateY(-1px); /* Slight lift effect */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}