/* ======================================================================
   css-updatedv1.css — bundled scoped page CSS (generated; edit HTML + rebuild)
   Each block is scoped with body.page-* so all pages can share this file.
   ====================================================================== */

/* ---------- index page CSS start ---------- */


        body.page-index, body.page-index *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body.page-index img{
            max-width: 100%;
            height: auto;
        }

        /* ===== BODY STYLING ===== */
        /* Main body styling that applies to the entire page */
        /* Update: Logo-Matching Green Background */
        /* What it does: Changes background color to match the vibrant green from the logo infinity symbol */
        /* How it works: Uses #7CFC00 (LawnGreen) as primary color with #66bb6a (green) gradient */
        /* User benefit: Better readability and professional color coordination with logo branding */
        body.page-index{
            font-family: "Inter", sans-serif;                              /* Modern, clean font for better readability */
            line-height: 1.6;                                             /* Comfortable line spacing for reading */
            color: #333;                                                  /* Dark gray text color for good contrast */
            background: linear-gradient(135deg, #7CFC00 0%, #66bb6a 100%); /* Green gradient background */
            min-height: 100vh;                                           /* Ensure body takes full viewport height */
        }

        /* ===== CONTAINER STYLING ===== */
        /* Wrapper that centers content and sets maximum width */
        body.page-index .index-container-css{
            max-width: 1200px;                                            /* Maximum width for content */
            margin: 0 auto;                                               /* Center the container horizontally */
            padding: 0 20px;                                             /* Horizontal padding for mobile spacing */
        }

        /* ===== HEADER STYLING ===== */
        /* Navigation bar at the top of the page */
        body.page-index .index-header-css{
            background: rgba(102, 126, 234, 0.8);                       /* More opaque blue background */
            backdrop-filter: blur(20px);                                  /* Blur effect for modern glass look */
            border-bottom: 1px solid rgba(102, 126, 234, 0.9);          /* Stronger blue border at bottom */
            position: sticky;                                            /* Sticky positioning so header stays at top */
            top: 0;                                                     /* Stick to top of viewport */
            z-index: 100;                                                /* High z-index so it appears above content */
            padding: 1rem 0;                                            /* Vertical padding for header height */
        }

        /* ===== HEADER CONTENT LAYOUT ===== */
        /* Flexbox layout for header elements */
        body.page-index .index-header-content-css{
            display: flex;                                               /* Flexbox for horizontal layout */
            justify-content: space-between;                              /* Space elements apart (logo left, nav right) */
            align-items: center;                                         /* Center align all elements vertically */
        }

        /* ===== LOGO STYLING ===== */
        /* Logo link and image styling */
        body.page-index .index-logo-css{
            display: flex;                                               /* Flexbox for logo alignment */
            align-items: center;                                         /* Center logo vertically */
            text-decoration: none;                                      /* Remove underline from link */
        }

        /* Logo image sizing and effects */
        body.page-index .index-logo-css img{
            height: 50px;                                                /* Fixed height for consistent sizing */
            width: auto;                                                 /* Maintain aspect ratio */
            transition: transform 0.3s ease;                            /* Smooth scaling animation */
        }

        /* Hover effect for logo */
        body.page-index .index-logo-css img:hover{
            transform: scale(1.05);                                       /* Slight scale up on hover for interactivity */
        }

        @media (max-width: 768px) {body.page-index .index-logo-css img{
                height: 40px;
            }}

        @media (max-width: 480px) {body.page-index .index-logo-css img{
                height: 35px;
            }}

        /* ===== NAVIGATION STYLING ===== */
        /* Main navigation menu styling */
        body.page-index .index-nav-links-css{
            display: flex;                                               /* Flexbox for horizontal navigation */
            list-style: none;                                            /* Remove bullet points */
            gap: 2rem;                                                   /* Space between navigation items */
        }

        /* Navigation link styling */
        body.page-index .index-nav-links-css a{
            color: white;                                               /* White text for contrast */
            text-decoration: none;                                      /* Remove underlines */
            font-weight: 500;                                           /* Medium font weight */
            padding: 0.5rem 1rem;                                       /* Padding for clickable area */
            border-radius: 25px;                                         /* Rounded corners for modern look */
            transition: all 0.3s ease;                                   /* Smooth transitions for all properties */
        }

        /* Hover effect for navigation links */
        body.page-index .index-nav-links-css a:hover{
            background: rgba(255, 255, 255, 0.1);                      /* Semi-transparent white background */
        }

        /* ===== AIR QUALITY LINK STYLING ===== */
        /* Special styling for the air quality link to make it stand out */
        /* Match inner pages (site-redesign.css): blue/teal pill, not legacy green */
        body.page-index .index-air-quality-link-css{
            background: linear-gradient(135deg, #2563eb, #0f9f9a);
            color: white !important;
        }

        /* ===== HAMBURGER MENU TOGGLE BUTTON ===== */
        /* This creates the 3-line hamburger menu button that appears on mobile */
        body.page-index .index-mobile-menu-toggle-css{
            display: none;              /* Hidden by default - only shows on mobile */
            flex-direction: column;     /* Stack the 3 lines vertically */
            cursor: pointer;            /* Show it's clickable */
            padding: 0.5rem;           /* Space around the button for easier tapping */
        }

        /* Style each of the 3 lines in the hamburger menu */
        body.page-index .index-mobile-menu-toggle-css span{
            width: 25px;               /* Width of each line */
            height: 3px;               /* Height of each line */
            background: #333;          /* Dark color for the lines */
            margin: 3px 0;             /* Space between each line */
            transition: 0.3s;          /* Smooth animation when transforming */
            border-radius: 2px;        /* Slightly rounded corners */
        }

        /* Animation: When menu is open, transform top line into X shape */
        body.page-index .index-mobile-menu-toggle-css.index-is-active-css span:nth-child(1){
            transform: rotate(-45deg) translate(-5px, 6px);  /* Rotate and move to form top part of X */
        }

        /* Animation: Hide the middle line when menu is open */
        body.page-index .index-mobile-menu-toggle-css.index-is-active-css span:nth-child(2){
            opacity: 0;               /* Make middle line invisible */
        }

        /* Animation: When menu is open, transform bottom line into X shape */
        body.page-index .index-mobile-menu-toggle-css.index-is-active-css span:nth-child(3){
            transform: rotate(45deg) translate(-5px, -6px);   /* Rotate and move to form bottom part of X */
        }

        /* ===== MOBILE NAVIGATION MENU ===== */
        /* This is the slide-out menu that appears when you tap the hamburger button */
        body.page-index .index-mobile-nav-css{
            display: block;                                    /* Always present in DOM */
            position: fixed;                                   /* Fixed position so it stays in place */
            top: 0;                                           /* Start from top of screen */
            left: 0;                                          /* Start from left edge */
            width: 280px;                                     /* Width of the menu panel */
            height: 100vh;                                    /* Full height of screen */
            background: linear-gradient(135deg, #667eea, #764ba2);  /* Purple gradient background */
            backdrop-filter: blur(20px);                      /* Blur effect behind the menu */
            border-right: 1px solid rgba(255, 255, 255, 0.2);     /* Subtle white border on right */
            box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);      /* Shadow to make menu stand out */
            z-index: 1000;                                    /* High z-index so it appears above everything */
            transform: translateX(-100%);                     /* Start hidden off-screen to the left */
            transition: transform 0.3s ease-in-out;           /* Smooth slide animation */
            padding-top: 20px;                               /* Space at top of menu */
        }

        body.page-index .index-mobile-nav-header-css{
            padding: 1rem 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 1rem;
        }

        body.page-index .index-mobile-logo-css{
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        body.page-index .index-mobile-logo-img-css{
            height: 35px;
            width: auto;
        }

        body.page-index .index-mobile-nav-css.index-is-active-css{
            transform: translateX(0);
        }

        /* Backdrop overlay for mobile menu */
        body.page-index .index-mobile-nav-backdrop-css{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            pointer-events: none;
        }

        body.page-index .index-mobile-nav-backdrop-css.index-is-active-css{
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        body.page-index .index-mobile-nav-css ul{
            list-style: none;
            padding: 1rem 0;
            margin: 0;
        }

        body.page-index .index-mobile-nav-css li{
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        body.page-index .index-mobile-nav-css li:last-child{
            border-bottom: none;
        }

        body.page-index .index-mobile-nav-css a{
            display: block;
            padding: 1rem 2rem;
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: background-color 0.3s ease;
        }

        body.page-index .index-mobile-nav-css a:hover{
            background-color: rgba(255, 255, 255, 0.1);
        }

        body.page-index .index-mobile-nav-css .index-air-quality-link-css{
            background: linear-gradient(135deg, #2563eb, #0f9f9a);
            color: white !important;
            margin: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            text-align: center;
        }

        body.page-index .index-mobile-nav-css .index-air-quality-link-css:hover{
            background: linear-gradient(135deg, #0f9f9a, #2563eb);
            color: white !important;
        }

        /* Air Quality Widget Styles */
        body.page-index .index-air-quality-widget-css{
            background: #FFD750;
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1rem 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            max-width: 300px;
            position: relative;
        }

        body.page-index .index-air-quality-widget-css::after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(0, 0, 0, 0.1);
        }

        body.page-index .index-aqi-section-css{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        body.page-index .index-aqi-box-css{
            background: #F0BE3C;
            border-radius: 8px;
            padding: 0.8rem 1rem;
            text-align: center;
            min-width: 60px;
        }

        body.page-index .index-aqi-number-css{
            font-size: 1.5rem;
            font-weight: 700;
            color: #333;
            display: block;
            line-height: 1;
        }

        body.page-index .index-aqi-label-css{
            font-size: 0.6rem;
            color: #333;
            margin-top: 0.2rem;
        }

        body.page-index .index-aqi-status-css{
            font-size: 0.8rem;
            font-weight: 600;
            color: #333;
            margin-left: 1rem;
        }

        body.page-index .index-aqi-face-icon-css{
            font-size: 1.2rem;
            color: #333;
        }

        body.page-index .index-pollutant-info-css{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-top: 0.5rem;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        body.page-index .index-pollutant-label-css{
            font-size: 0.7rem;
            color: #333;
            font-weight: 500;
        }

        body.page-index .index-pollutant-value-css{
            font-size: 0.7rem;
            color: #333;
            font-weight: 600;
        }

        body.page-index .index-weather-section-css{
            background: white;
            border-radius: 8px;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        body.page-index .index-weather-item-css{
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        body.page-index .index-weather-icon-css{
            font-size: 1rem;
            color: #666;
        }

        body.page-index .index-weather-value-css{
            font-size: 0.7rem;
            color: #333;
            font-weight: 600;
        }

        body.page-index .index-temperature-icon-css::before{
            content: "☁️";
        }

        body.page-index .index-wind-icon-css::before{
            content: "↗️";
        }

        body.page-index .index-humidity-icon-css::before{
            content: "💧";
        }

        body.page-index .index-data-source-css{
            text-align: center;
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        body.page-index .index-data-source-css a{
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.6rem;
        }

        body.page-index .index-data-source-css a:hover{
            text-decoration: underline;
        }

        @media (max-width: 768px) {body.page-index .index-aqi-section-css{
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }body.page-index .index-weather-section-css{
                flex-direction: column;
                gap: 0.8rem;
                align-items: flex-start;
            }body.page-index .index-weather-item-css{
                width: 100%;
                justify-content: space-between;
            }}

        /* ===== HERO SECTION STYLING ===== */
        /* Main banner section at the top of the page */
        body.page-index .index-hero-css{
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));  /* Purple gradient with transparency */
            color: white;                                               /* White text for contrast */
            text-align: center;                                         /* Center align all text */
            padding: 4rem 0;                                            /* Vertical padding for section height */
        }

        /* ===== HERO LOGO STYLING ===== */
        /* Logo container in hero section */
        body.page-index .index-hero-logo-css{
            margin-bottom: 2rem;                                        /* Space below logo */
        }

        /* Hero logo image styling */
        body.page-index .index-hero-logo-img-css{
            height: 120px;                                              /* Large logo size for hero */
            width: auto;                                                /* Maintain aspect ratio */
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));         /* Drop shadow for depth */
            transition: transform 0.3s ease;                            /* Smooth scaling animation */
        }

        /* Hover effect for hero logo */
        body.page-index .index-hero-logo-img-css:hover{
            transform: scale(1.05);                                       /* Slight scale up on hover */
        }

        @media (max-width: 768px) {body.page-index .index-hero-logo-img-css{
                height: 100px;
            }}

        @media (max-width: 480px) {body.page-index .index-hero-logo-img-css{
                height: 80px;
            }}

        /* ===== HERO TEXT STYLING ===== */
        /* Main heading in hero section */
        body.page-index .index-heading1-css{
            font-size: 3.5rem;                                          /* Large font size for impact */
            font-weight: 700;                                           /* Bold font weight */
            margin-bottom: 1rem;                                        /* Space below heading */
        }

        /* Hero paragraph text */
        body.page-index .index-hero-tagline-css{
            font-size: 1.3rem;                                          /* Large readable font size */
            font-weight: 300;                                           /* Light font weight for elegance */
            max-width: 600px;                                           /* Limit width for readability */
            margin: 0 auto;                                             /* Center the paragraph */
        }

        /* Update: Remove Launch Countdown styles */
        /* Issue: Countdown no longer needed */
        /* Solution: Removed countdown HTML/CSS/JS blocks */
        /* Result: Cleaner hero section without timer */

        /* Update: Main Content Green Background */
        /* What it does: Changes main content section background from white to green gradient */
        /* How it works: Uses same green gradient as body background for consistency */
        /* User benefit: Eliminates white backgrounds for cohesive green theme */
        body.page-index .index-main-content-css{
            background: white;                                         /* White background for main content */
            padding: 4rem 0;
        }

        body.page-index .index-content-section-css{
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        body.page-index .index-heading2-css{
            font-size: 2.5rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 2rem;
        }

        body.page-index .index-content-section-css p{
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
            line-height: 1.8;
        }

        body.page-index .index-highlight-text-css{
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 600;
        }

        body.page-index .index-contact-section-css, body.page-index .index-contact-section2-css{
            background: #f8f9fa;
            padding: 4rem 0;
        }

        body.page-index .index-contact-section-css p, body.page-index .index-contact-section2-css p{
            font-size: 1.1rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }

        body.page-index .index-contact-email-css{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
        }

        body.page-index .index-contact-email-css:hover{
            text-decoration: underline;
        }

        /* Footer */
        body.page-index .index-footer-css{
            background: #333;
            color: white;
            text-align: center;
            padding: 2rem 0;
        }

        body.page-index .index-footer-links-css{
            margin-bottom: 1rem;
        }

        body.page-index .index-footer-links-css a{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            margin-right: 1rem;
        }

        body.page-index .index-footer-links-css a:hover{
            text-decoration: underline;
        }

        /* Standardize social link button sizes like other pages */
        body.page-index .index-social-links-css{
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin: 2rem 0;
            flex-wrap: wrap;
        }

        body.page-index .index-social-link-css{
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1.5rem 2rem;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            font-size: 1.1rem;
            min-width: 200px;
            justify-content: center;
        }

        body.page-index .index-social-link-css:hover{
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
            text-decoration: none;
            color: white;
        }

        body.page-index .index-social-icon-css{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            font-size: 18px;
            line-height: 1;
            vertical-align: middle;
        }

        /* Variant styles for specific social buttons */

        body.page-index .index-features-css{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        body.page-index .index-feature-card-css{
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }

        body.page-index .index-feature-card-css:hover{
            transform: translateY(-5px);
        }

        body.page-index .index-air-quality-card-css{
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        body.page-index .index-air-quality-card-css .index-air-quality-widget-css{
            margin: 0;
            max-width: 100%;
            width: 100%;
        }

        body.page-index .index-air-quality-title-css{
            color: #333;
            margin-bottom: 1rem;
            font-size: 1.1rem;
            font-weight: 600;
            text-align: center;
        }

        body.page-index .index-air-quality-location-css{
            color: #666;
            font-size: 1.2rem;
            font-weight: 400;
            margin-top: 0.2rem;
            margin-bottom: 0.5rem;
        }

        body.page-index .index-copd-message-css{
            color: #e67e22;
            font-size: 0.9rem;
            font-weight: 600;
            margin-top: 0.3rem;
            margin-bottom: 0.6rem;
            text-align: center;
            background: rgba(230, 126, 34, 0.1);
            padding: 0.24rem 0.48rem;
            border-radius: 12px;
            border: 1px solid rgba(230, 126, 34, 0.3);
        }

        body.page-index .index-feature-icon-css{
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        body.page-index .index-feature-heading-css{
            color: #667eea;
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }

        /* ===== MOBILE RESPONSIVE STYLING ===== */
        /* This section makes the website look perfect on tablets and mobile devices */
        
        @media (max-width: 768px) {body.page-index .index-heading1-css{
                font-size: 2.5rem;
            }body.page-index .index-nav-links-css{
                display: none;
            }body.page-index .index-mobile-menu-toggle-css{
                display: flex;
            }body.page-index .header-social{
                display: none;
            }body.page-index .index-social-links-css{
                flex-direction: column;  /* Stack vertically */
                align-items: center;     /* Center align the buttons */
                gap: 1.5rem;            /* Space between buttons */
            }body.page-index .index-social-link-css{
                min-width: 250px;
            }}

        @media (max-width: 480px) {body.page-index .index-heading1-css{
                font-size: 2rem;
            }body.page-index .index-hero-css{
                padding: 2.5rem 0;
            }}

        /* Style Changer Button styles are now handled by style-changer.css */

        /* All style definitions are now handled by style-changer.css */
        body.page-index.style-2 .index-logo-css, body.page-index.style-2 .index-heading2-css, body.page-index.style-2 .story-title, body.page-index.style-2 .updates-header h2{
            color: #2e7d32 !important;
        }

        body.page-index.style-2 .index-air-quality-link-css, body.page-index.style-2 .index-social-link-css{
            background: linear-gradient(135deg, #2e7d32, #4caf50) !important;
        }

        body.page-index.style-2 .index-feature-card-css{
            background: #e8f5e8 !important;
        }

        body.page-index.style-2 .index-main-content-css{
            background: #f1f8e9 !important;
        }

        body.page-index.style-2 .index-contact-section-css, body.page-index.style-2 .index-contact-section2-css{
            background: #f1f8e9 !important;
        }

        body.page-index.style-2 .index-highlight-text-css{
            background: linear-gradient(135deg, #2e7d32, #4caf50);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.page-index.style-2 .index-contact-email-css{
            color: #2e7d32 !important;
        }

        /* Style 3: Healthcare Purple */
        body.page-index.style-3 .index-logo-css, body.page-index.style-3 .index-heading2-css, body.page-index.style-3 .story-title, body.page-index.style-3 .updates-header h2{
            color: #7b1fa2 !important;
        }

        body.page-index.style-3 .index-air-quality-link-css, body.page-index.style-3 .index-social-link-css{
            background: linear-gradient(135deg, #7b1fa2, #9c27b0) !important;
        }

        body.page-index.style-3 .index-feature-card-css{
            background: #f3e5f5 !important;
        }

        body.page-index.style-3 .index-main-content-css{
            background: #fce4ec !important;
        }

        body.page-index.style-3 .index-contact-section-css, body.page-index.style-3 .index-contact-section2-css{
            background: #fce4ec !important;
        }

        body.page-index.style-3 .index-highlight-text-css{
            background: linear-gradient(135deg, #7b1fa2, #9c27b0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.page-index.style-3 .index-contact-email-css{
            color: #7b1fa2 !important;
        }

        /* Style 4: Medical Orange */
        body.page-index.style-4 .index-logo-css, body.page-index.style-4 .index-heading2-css, body.page-index.style-4 .story-title, body.page-index.style-4 .updates-header h2{
            color: #f57c00 !important;
        }

        body.page-index.style-4 .index-air-quality-link-css, body.page-index.style-4 .index-social-link-css{
            background: linear-gradient(135deg, #f57c00, #ff9800) !important;
        }

        body.page-index.style-4 .index-feature-card-css{
            background: #ffe0b2 !important;
        }

        body.page-index.style-4 .index-main-content-css{
            background: #fff3e0 !important;
        }

        body.page-index.style-4 .index-contact-section-css, body.page-index.style-4 .index-contact-section2-css{
            background: #fff3e0 !important;
        }

        body.page-index.style-4 .index-highlight-text-css{
            background: linear-gradient(135deg, #f57c00, #ff9800);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.page-index.style-4 .index-contact-email-css{
            color: #f57c00 !important;
        }

        /* Style 5: Healthcare Teal */
        body.page-index.style-5 .index-logo-css, body.page-index.style-5 .index-heading2-css, body.page-index.style-5 .story-title, body.page-index.style-5 .updates-header h2{
            color: #00695c !important;
        }

        body.page-index.style-5 .index-air-quality-link-css, body.page-index.style-5 .index-social-link-css{
            background: linear-gradient(135deg, #00695c, #00897b) !important;
        }

        body.page-index.style-5 .index-feature-card-css{
            background: #b2dfdb !important;
        }

        body.page-index.style-5 .index-main-content-css{
            background: #e0f2f1 !important;
        }

        body.page-index.style-5 .index-contact-section-css, body.page-index.style-5 .index-contact-section2-css{
            background: #e0f2f1 !important;
        }

        body.page-index.style-5 .index-highlight-text-css{
            background: linear-gradient(135deg, #00695c, #00897b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.page-index.style-5 .index-contact-email-css{
            color: #00695c !important;
        }

        /* Style 6: Medical Red */
        body.page-index.style-6 .index-logo-css, body.page-index.style-6 .index-heading2-css, body.page-index.style-6 .story-title, body.page-index.style-6 .updates-header h2{
            color: #c62828 !important;
        }

        body.page-index.style-6 .index-air-quality-link-css, body.page-index.style-6 .index-social-link-css{
            background: linear-gradient(135deg, #c62828, #f44336) !important;
        }

        body.page-index.style-6 .index-feature-card-css{
            background: #ffcdd2 !important;
        }

        body.page-index.style-6 .index-main-content-css{
            background: #ffebee !important;
        }

        body.page-index.style-6 .index-contact-section-css, body.page-index.style-6 .index-contact-section2-css{
            background: #ffebee !important;
        }

        body.page-index.style-6 .index-highlight-text-css{
            background: linear-gradient(135deg, #c62828, #f44336);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.page-index.style-6 .index-contact-email-css{
            color: #c62828 !important;
        }

        /* Style 7: Healthcare Navy */
        body.page-index.style-7 .index-logo-css, body.page-index.style-7 .index-heading2-css, body.page-index.style-7 .story-title, body.page-index.style-7 .updates-header h2{
            color: #1a237e !important;
        }

        body.page-index.style-7 .index-air-quality-link-css, body.page-index.style-7 .index-social-link-css{
            background: linear-gradient(135deg, #1a237e, #3f51b5) !important;
        }

        body.page-index.style-7 .index-feature-card-css{
            background: #c5cae9 !important;
        }

        body.page-index.style-7 .index-main-content-css{
            background: #e8eaf6 !important;
        }

        body.page-index.style-7 .index-contact-section-css, body.page-index.style-7 .index-contact-section2-css{
            background: #e8eaf6 !important;
        }

        body.page-index.style-7 .index-highlight-text-css{
            background: linear-gradient(135deg, #1a237e, #3f51b5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.page-index.style-7 .index-contact-email-css{
            color: #1a237e !important;
        }

        /* Style 8: Medical Pink */
        body.page-index.style-8 .index-logo-css, body.page-index.style-8 .index-heading2-css, body.page-index.style-8 .story-title, body.page-index.style-8 .updates-header h2{
            color: #ad1457 !important;
        }

        body.page-index.style-8 .index-air-quality-link-css, body.page-index.style-8 .index-social-link-css{
            background: linear-gradient(135deg, #ad1457, #e91e63) !important;
        }

        body.page-index.style-8 .index-feature-card-css{
            background: #f8bbd9 !important;
        }

        body.page-index.style-8 .index-main-content-css{
            background: #fce4ec !important;
        }

        body.page-index.style-8 .index-contact-section-css, body.page-index.style-8 .index-contact-section2-css{
            background: #fce4ec !important;
        }

        body.page-index.style-8 .index-highlight-text-css{
            background: linear-gradient(135deg, #ad1457, #e91e63);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.page-index.style-8 .index-contact-email-css{
            color: #ad1457 !important;
        }

        /* Style 9: Healthcare Indigo */
        body.page-index.style-9 .index-logo-css, body.page-index.style-9 .index-heading2-css, body.page-index.style-9 .story-title, body.page-index.style-9 .updates-header h2{
            color: #283593 !important;
        }

        body.page-index.style-9 .index-air-quality-link-css, body.page-index.style-9 .index-social-link-css{
            background: linear-gradient(135deg, #283593, #5c6bc0) !important;
        }

        body.page-index.style-9 .index-feature-card-css{
            background: #c5cae9 !important;
        }

        body.page-index.style-9 .index-main-content-css{
            background: #e8eaf6 !important;
        }

        body.page-index.style-9 .index-contact-section-css, body.page-index.style-9 .index-contact-section2-css{
            background: #e8eaf6 !important;
        }

        body.page-index.style-9 .index-highlight-text-css{
            background: linear-gradient(135deg, #283593, #5c6bc0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.page-index.style-9 .index-contact-email-css{
            color: #283593 !important;
        }

        /* Style 10: Medical Brown */
        body.page-index.style-10 .index-logo-css, body.page-index.style-10 .index-heading2-css, body.page-index.style-10 .story-title, body.page-index.style-10 .updates-header h2{
            color: #5d4037 !important;
        }

        body.page-index.style-10 .index-air-quality-link-css, body.page-index.style-10 .index-social-link-css{
            background: linear-gradient(135deg, #5d4037, #8d6e63) !important;
        }

        body.page-index.style-10 .index-feature-card-css{
            background: #d7ccc8 !important;
        }

        body.page-index.style-10 .index-main-content-css{
            background: #efebe9 !important;
        }

        body.page-index.style-10 .index-contact-section-css, body.page-index.style-10 .index-contact-section2-css{
            background: #efebe9 !important;
        }

        body.page-index.style-10 .index-highlight-text-css{
            background: linear-gradient(135deg, #5d4037, #8d6e63);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.page-index.style-10 .index-contact-email-css{
            color: #5d4037 !important;
        }

        /* Hide background image when styles are applied */
        body.page-index.style-1 body::before, body.page-index.style-2 body::before, body.page-index.style-3 body::before, body.page-index.style-4 body::before, body.page-index.style-5 body::before, body.page-index.style-6 body::before, body.page-index.style-7 body::before, body.page-index.style-8 body::before, body.page-index.style-9 body::before, body.page-index.style-10 body::before{
            display: none !important;
        }

        /* Override body background for styled versions */
        body.page-index.style-1 body, body.page-index.style-2 body, body.page-index.style-3 body, body.page-index.style-4 body, body.page-index.style-5 body, body.page-index.style-6 body, body.page-index.style-7 body, body.page-index.style-8 body, body.page-index.style-9 body, body.page-index.style-10 body{
            background: var(--bg-color) !important;
            background-attachment: initial !important;
        }

        /* Fix header transparency for styled versions */
        body.page-index.style-1 header, body.page-index.style-2 header, body.page-index.style-3 header, body.page-index.style-4 header, body.page-index.style-5 header, body.page-index.style-6 header, body.page-index.style-7 header, body.page-index.style-8 header, body.page-index.style-9 header, body.page-index.style-10 header{
            background: rgba(255, 255, 255, 0.98) !important;
            backdrop-filter: none !important;
        }

        /* Fix hero section for styled versions */
        body.page-index.style-1 .index-hero-css, body.page-index.style-2 .index-hero-css, body.page-index.style-3 .index-hero-css, body.page-index.style-4 .index-hero-css, body.page-index.style-5 .index-hero-css, body.page-index.style-6 .index-hero-css, body.page-index.style-7 .index-hero-css, body.page-index.style-8 .index-hero-css, body.page-index.style-9 .index-hero-css, body.page-index.style-10 .index-hero-css{
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
            color: white !important;
        }
    



        body.page-index .index-heading3-css{
            color: #667eea;
            margin-bottom: 2rem;
            font-size: 2rem;
        }
/* ---------- index page CSS end ---------- */

/* ---------- free-resources page CSS start ---------- */


        body.page-free-resources, body.page-free-resources *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Update: Logo-Matching Green Background */
        /* What it does: Changes background color to match the vibrant green from the logo infinity symbol */
        /* How it works: Uses #7CFC00 (LawnGreen) as primary color with #66bb6a (green) gradient */
        /* User benefit: Better readability and professional color coordination with logo branding */
        body.page-free-resources{
            font-family: "Inter", sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #7CFC00 0%, #66bb6a 100%);
            min-height: 100vh;
        }

        body.page-free-resources .free-resources-container-css{
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Update: Header Lighter Blue Background */
        /* What it does: Changes header background from green to lighter blue */
        /* How it works: Uses rgba blue color with transparency for subtle blue background */
        /* User benefit: Better color coordination and professional appearance */
        body.page-free-resources .free-resources-header-css{
            background: rgba(102, 126, 234, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(102, 126, 234, 0.9);
            position: sticky;
            top: 0;
            z-index: 100;
            padding: 1rem 0;
        }

        body.page-free-resources .free-resources-header-content-css{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        body.page-free-resources .free-resources-logo-css{
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        body.page-free-resources .free-resources-logo-css img{
            height: 50px;
            width: auto;
            transition: transform 0.3s ease;
        }

        body.page-free-resources .free-resources-logo-css img:hover{
            transform: scale(1.05);
        }

        @media (max-width: 768px) {body.page-free-resources .free-resources-logo-css img{
                height: 40px;
            }}

        @media (max-width: 480px) {body.page-free-resources .free-resources-logo-css img{
                height: 35px;
            }}

        body.page-free-resources .free-resources-nav-links-css{
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        body.page-free-resources .free-resources-nav-links-css a{
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            transition: all 0.3s ease;
        }

        body.page-free-resources .free-resources-nav-links-css a:hover{
            background: rgba(255, 255, 255, 0.1);
        }

        body.page-free-resources .free-resources-air-quality-link-css{
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white !important;
        }

        body.page-free-resources .free-resources-mobile-menu-toggle-css{
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 0.5rem;
        }

        body.page-free-resources .free-resources-mobile-menu-toggle-css span{
            width: 25px;
            height: 3px;
            background: #333;
            margin: 3px 0;
            transition: 0.3s;
            border-radius: 2px;
        }

        body.page-free-resources .free-resources-mobile-menu-toggle-css.free-resources-is-active-css span:nth-child(1){
            transform: rotate(-45deg) translate(-5px, 6px);
        }

        body.page-free-resources .free-resources-mobile-menu-toggle-css.free-resources-is-active-css span:nth-child(2){
            opacity: 0;
        }

        body.page-free-resources .free-resources-mobile-menu-toggle-css.free-resources-is-active-css span:nth-child(3){
            transform: rotate(45deg) translate(-5px, -6px);
        }

        body.page-free-resources .free-resources-mobile-nav-css{
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 280px;
            height: 100vh;
            background: linear-gradient(135deg, #667eea, #764ba2);
            backdrop-filter: blur(20px);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
            padding-top: 20px;
        }

        body.page-free-resources .free-resources-mobile-nav-header-css{
            padding: 1rem 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 1rem;
        }

        body.page-free-resources .free-resources-mobile-logo-css{
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        body.page-free-resources .free-resources-mobile-logo-img-css{
            height: 35px;
            width: auto;
        }

        body.page-free-resources .free-resources-mobile-nav-css.free-resources-is-active-css{
            transform: translateX(0);
        }

        /* Backdrop overlay for mobile menu */
        body.page-free-resources .free-resources-mobile-nav-backdrop-css{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            pointer-events: none;
        }

        body.page-free-resources .free-resources-mobile-nav-backdrop-css.free-resources-is-active-css{
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        body.page-free-resources .free-resources-mobile-nav-css ul{
            list-style: none;
            padding: 1rem 0;
            margin: 0;
        }

        body.page-free-resources .free-resources-mobile-nav-css li{
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        body.page-free-resources .free-resources-mobile-nav-css li:last-child{
            border-bottom: none;
        }

        body.page-free-resources .free-resources-mobile-nav-css a{
            display: block;
            padding: 1rem 2rem;
            text-decoration: none;
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        body.page-free-resources .free-resources-mobile-nav-css a:hover{
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        body.page-free-resources .free-resources-mobile-nav-css .free-resources-air-quality-link-css{
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white !important;
            margin: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            text-align: center;
        }

        body.page-free-resources .free-resources-mobile-nav-css .free-resources-air-quality-link-css:hover{
            background: linear-gradient(135deg, #45a049, #4CAF50);
            color: white !important;
        }

        body.page-free-resources .free-resources-hero-css{
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
            color: white;
            text-align: center;
            padding: 4rem 0;
        }

        body.page-free-resources .free-resources-hero-logo-css{
            margin-bottom: 2rem;
        }

        body.page-free-resources .free-resources-hero-logo-img-css{
            height: 120px;
            width: auto;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
            transition: transform 0.3s ease;
        }

        body.page-free-resources .free-resources-hero-logo-img-css:hover{
            transform: scale(1.05);
        }

        @media (max-width: 768px) {body.page-free-resources .free-resources-hero-logo-img-css{
                height: 100px;
            }}

        @media (max-width: 480px) {body.page-free-resources .free-resources-hero-logo-img-css{
                height: 80px;
            }}

        body.page-free-resources .free-resources-heading1-css{
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        body.page-free-resources .free-resources-hero-tagline-css{
            font-size: 1.3rem;
            font-weight: 300;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Update: Main Content Green Background */
        /* What it does: Changes main content section background from white to green gradient */
        /* How it works: Uses same green gradient as body background for consistency */
        /* User benefit: Eliminates white backgrounds for cohesive green theme */
        body.page-free-resources .free-resources-main-content-css{
            background: white;                                         /* White background for main content */
            padding: 4rem 0;
        }

        body.page-free-resources .free-resources-content-section-css{
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        body.page-free-resources .free-resources-heading2-css{
            font-size: 2.5rem;
            color: #667eea;
            margin-bottom: 2rem;
            font-weight: 600;
        }

        body.page-free-resources .free-resources-content-section-css p{
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
            line-height: 1.8;
        }

        body.page-free-resources .free-resources-highlight-text-css{
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 600;
        }

        body.page-free-resources .free-resources-grid-css{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        body.page-free-resources .free-resources-resource-card-css{
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
            border: 2px solid transparent;
        }

        body.page-free-resources .free-resources-resource-card-css:hover{
            transform: translateY(-5px);
            border-color: #667eea;
        }

        body.page-free-resources .free-resources-resource-icon-css{
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        body.page-free-resources .free-resources-resource-heading-css{
            color: #667eea;
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }

        body.page-free-resources .free-resources-resource-card-css p{
            color: #666;
            margin-bottom: 1.5rem;
            font-size: 1rem;
        }

        body.page-free-resources .free-resources-download-link-css{
            display: inline-block;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 12px 24px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-top: 1rem;
        }

        body.page-free-resources .free-resources-download-link-css:hover{
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        body.page-free-resources .free-resources-back-link-css{
            display: inline-block;
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            margin-bottom: 2rem;
            padding: 10px 20px;
            border: 2px solid #667eea;
            border-radius: 25px;
            transition: all 0.3s ease;
        }

        body.page-free-resources .free-resources-back-link-css:hover{
            background: #667eea;
            color: white;
        }

        body.page-free-resources .free-resources-contact-section-css{
            background: #f8f9fa;
            padding: 3rem 0;
            text-align: center;
        }

        body.page-free-resources .free-resources-contact-section-css p{
            font-size: 1.1rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }

        body.page-free-resources .free-resources-contact-email-css{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
        }

        body.page-free-resources .free-resources-contact-email-css:hover{
            text-decoration: underline;
        }

        /* Footer */
        body.page-free-resources .free-resources-footer-css{
            background: #333;
            color: white;
            text-align: center;
            padding: 2rem 0;
        }

        body.page-free-resources .free-resources-footer-links-css{
            margin-bottom: 1rem;
        }

        body.page-free-resources .free-resources-footer-links-css a{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            margin-right: 1rem;
        }

        body.page-free-resources .free-resources-footer-links-css a:hover{
            text-decoration: underline;
        }

        body.page-free-resources .free-resources-social-links-css{
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin: 2rem 0;
        }

        body.page-free-resources .free-resources-social-link-css{
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1.5rem 2rem;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            font-size: 1.1rem;
            min-width: 200px;
            justify-content: center;
        }

        /* Ensure consistent icon size inside social buttons */
        body.page-free-resources .free-resources-social-link-css .free-resources-social-icon-css{
            width: 24px;
            height: 24px;
            font-size: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        body.page-free-resources .free-resources-social-link-css:hover{
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
            text-decoration: none;
            color: white;
        }


        body.page-free-resources .free-resources-social-icon-css{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            font-size: 18px;
            line-height: 1;
            vertical-align: middle;
        }

        body.page-free-resources .header-social{
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        body.page-free-resources .header-social .free-resources-social-link-css{
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {body.page-free-resources .header-social{
                display: none;
            }body.page-free-resources .free-resources-social-links-css{
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }}

        @media (max-width: 768px) {body.page-free-resources .free-resources-heading1-css{
                font-size: 2.5rem;
            }body.page-free-resources .free-resources-nav-links-css{
                display: none;
            }body.page-free-resources .free-resources-mobile-menu-toggle-css{
                display: flex;
            }body.page-free-resources .header-social{
                display: none;
            }body.page-free-resources .free-resources-social-links-css{
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
            }body.page-free-resources .free-resources-social-link-css{
                min-width: 250px;
            }body.page-free-resources .free-resources-grid-css{
                grid-template-columns: 1fr;
            }}
    



        body.page-free-resources .free-resources-heading3-css{
            color: #667eea;
            margin-bottom: 2rem;
            font-size: 2rem;
        }

        body.page-free-resources .free-resources-extra-block-css{
            margin-top: 3rem;
            padding: 2rem;
            background: #f8f9fa;
            border-radius: 15px;
        }

        body.page-free-resources .free-resources-heading4-css{
            color: #667eea;
            margin-bottom: 1rem;
        }
/* ---------- free-resources page CSS end ---------- */

/* ---------- contact page CSS start ---------- */


        /* CSS Reset - Removes default browser styling for consistent appearance */
        body.page-contact, body.page-contact *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Update: Logo-Matching Green Background */
        /* What it does: Changes background color to match the vibrant green from the logo infinity symbol */
        /* How it works: Uses #7CFC00 (LawnGreen) as primary color with #66bb6a (green) gradient */
        /* User benefit: Better readability and professional color coordination with logo branding */
        body.page-contact{
            font-family: "Inter", sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #7CFC00 0%, #66bb6a 100%);
            min-height: 100vh;
        }

        body.page-contact .contact-container-css{
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Update: Header Lighter Blue Background */
        /* What it does: Changes header background from green to lighter blue */
        /* How it works: Uses rgba blue color with transparency for subtle blue background */
        /* User benefit: Better color coordination and professional appearance */
        body.page-contact .contact-header-css{
            background: rgba(102, 126, 234, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(102, 126, 234, 0.9);
            position: sticky;
            top: 0;
            z-index: 100;
            padding: 1rem 0;
        }

        body.page-contact .contact-header-content-css{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        body.page-contact .contact-logo-css{
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        body.page-contact .contact-logo-css img{
            height: 50px;
            width: auto;
            transition: transform 0.3s ease;
        }

        body.page-contact .contact-logo-css img:hover{
            transform: scale(1.05);
        }

        @media (max-width: 768px) {body.page-contact .contact-logo-css img{
                height: 40px;
            }}

        @media (max-width: 480px) {body.page-contact .contact-logo-css img{
                height: 35px;
            }}

        body.page-contact .contact-nav-links-css{
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        body.page-contact .contact-nav-links-css a{
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            transition: all 0.3s ease;
        }

        body.page-contact .contact-nav-links-css a:hover{
            background: rgba(255, 255, 255, 0.1);
        }

        body.page-contact .contact-air-quality-link-css{
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white !important;
        }

        /* ===== HAMBURGER MENU TOGGLE BUTTON ===== */
        /* This creates the 3-line hamburger menu button that appears on mobile */
        body.page-contact .contact-mobile-menu-toggle-css{
            display: none;              /* Hidden by default - only shows on mobile */
            flex-direction: column;     /* Stack the 3 lines vertically */
            cursor: pointer;            /* Show it's clickable */
            padding: 0.5rem;           /* Space around the button for easier tapping */
        }

        /* Style each of the 3 lines in the hamburger menu */
        body.page-contact .contact-mobile-menu-toggle-css span{
            width: 25px;               /* Width of each line */
            height: 3px;               /* Height of each line */
            background: #333;          /* Dark color for the lines */
            margin: 3px 0;             /* Space between each line */
            transition: 0.3s;          /* Smooth animation when transforming */
            border-radius: 2px;        /* Slightly rounded corners */
        }

        /* Animation: When menu is open, transform top line into X shape */
        body.page-contact .contact-mobile-menu-toggle-css.contact-is-active-css span:nth-child(1){
            transform: rotate(-45deg) translate(-5px, 6px);  /* Rotate and move to form top part of X */
        }

        /* Animation: Hide the middle line when menu is open */
        body.page-contact .contact-mobile-menu-toggle-css.contact-is-active-css span:nth-child(2){
            opacity: 0;               /* Make middle line invisible */
        }

        /* Animation: When menu is open, transform bottom line into X shape */
        body.page-contact .contact-mobile-menu-toggle-css.contact-is-active-css span:nth-child(3){
            transform: rotate(45deg) translate(-5px, -6px);   /* Rotate and move to form bottom part of X */
        }

        /* ===== MOBILE NAVIGATION MENU ===== */
        /* This is the slide-out menu that appears when you tap the hamburger button */
        body.page-contact .contact-mobile-nav-css{
            display: block;                                    /* Always present in DOM */
            position: fixed;                                   /* Fixed position so it stays in place */
            top: 0;                                           /* Start from top of screen */
            left: 0;                                          /* Start from left edge */
            width: 280px;                                     /* Width of the menu panel */
            height: 100vh;                                    /* Full height of screen */
            background: linear-gradient(135deg, #667eea, #764ba2);  /* Purple gradient background */
            backdrop-filter: blur(20px);                      /* Blur effect behind the menu */
            border-right: 1px solid rgba(255, 255, 255, 0.2);     /* Subtle white border on right */
            box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);      /* Shadow to make menu stand out */
            z-index: 1000;                                    /* High z-index so it appears above everything */
            transform: translateX(-100%);                     /* Start hidden off-screen to the left */
            transition: transform 0.3s ease-in-out;           /* Smooth slide animation */
            padding-top: 20px;                               /* Space at top of menu */
        }

        body.page-contact .contact-mobile-nav-header-css{
            padding: 1rem 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 1rem;
        }

        body.page-contact .contact-mobile-logo-css{
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        body.page-contact .contact-mobile-logo-img-css{
            height: 35px;
            width: auto;
        }

        body.page-contact .contact-mobile-nav-css.contact-is-active-css{
            transform: translateX(0);
        }

        /* Backdrop overlay for mobile menu */
        body.page-contact .contact-mobile-nav-backdrop-css{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            pointer-events: none;
        }

        body.page-contact .contact-mobile-nav-backdrop-css.contact-is-active-css{
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        body.page-contact .contact-mobile-nav-css ul{
            list-style: none;
            padding: 1rem 0;
            margin: 0;
        }

        body.page-contact .contact-mobile-nav-css li{
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        body.page-contact .contact-mobile-nav-css li:last-child{
            border-bottom: none;
        }

        body.page-contact .contact-mobile-nav-css a{
            display: block;
            padding: 1rem 2rem;
            text-decoration: none;
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        body.page-contact .contact-mobile-nav-css a:hover{
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        body.page-contact .contact-mobile-nav-css .contact-air-quality-link-css{
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white !important;
            margin: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            text-align: center;
        }

        body.page-contact .contact-mobile-nav-css .contact-air-quality-link-css:hover{
            background: linear-gradient(135deg, #45a049, #4CAF50);
            color: white !important;
        }

        body.page-contact .contact-hero-css{
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
            color: white;
            text-align: center;
            padding: 4rem 0;
        }

        body.page-contact .contact-hero-logo-css{
            margin-bottom: 2rem;
        }

        body.page-contact .contact-hero-logo-img-css{
            height: 120px;
            width: auto;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
            transition: transform 0.3s ease;
        }

        body.page-contact .contact-hero-logo-img-css:hover{
            transform: scale(1.05);
        }

        @media (max-width: 768px) {body.page-contact .contact-hero-logo-img-css{
                height: 100px;
            }}

        @media (max-width: 480px) {body.page-contact .contact-hero-logo-img-css{
                height: 80px;
            }}

        body.page-contact .contact-heading1-css{
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        body.page-contact .contact-hero-tagline-css{
            font-size: 1.3rem;
            font-weight: 300;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Update: Main Content Green Background */
        /* What it does: Changes main content section background from white to green gradient */
        /* How it works: Uses same green gradient as body background for consistency */
        /* User benefit: Eliminates white backgrounds for cohesive green theme */
        body.page-contact .contact-main-content-css{
            background: white;                                         /* White background for main content */
            padding: 4rem 0;
        }

        body.page-contact .contact-content-section-css{
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        body.page-contact .contact-heading2-css{
            font-size: 2.5rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 2rem;
        }

        body.page-contact .contact-content-section-css p{
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
            line-height: 1.8;
        }

        body.page-contact .contact-highlight-text-css{
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 600;
        }

        body.page-contact .contact-body2-css{
            background: #f8f9fa;
            padding: 4rem 0;
        }

        body.page-contact .contact-body2-css p{
            font-size: 1.1rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }

        body.page-contact .contact-email-link-css{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
        }

        body.page-contact .contact-email-link-css:hover{
            text-decoration: underline;
        }

        /* Footer */
        body.page-contact .contact-footer-css{
            background: #333;
            color: white;
            text-align: center;
            padding: 2rem 0;
        }

        body.page-contact .contact-footer-links-css{
            margin-bottom: 1rem;
        }

        body.page-contact .contact-footer-links-css a{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            margin-right: 1rem;
        }

        body.page-contact .contact-footer-links-css a:hover{
            text-decoration: underline;
        }

        body.page-contact .contact-social-links-css{
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin: 3rem 0;
            flex-wrap: wrap;
        }

        body.page-contact .contact-social-link-css{
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1.5rem 2rem;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            font-size: 1.1rem;
            min-width: 200px;
            justify-content: center;
        }

        body.page-contact .contact-social-link-css:hover{
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
            text-decoration: none;
            color: white;
        }

        body.page-contact .contact-social-icon-css{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            font-size: 18px;
            line-height: 1;
            vertical-align: middle;
        }


        body.page-contact .header-social{
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        body.page-contact .header-social .contact-social-link-css{
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
            min-width: auto;
        }

        /* Ensure consistent icon size inside social buttons */
        body.page-contact .contact-social-link-css .contact-social-icon-css{
            width: 24px;
            height: 24px;
            font-size: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Update: Contact Info Card Green Background */
        /* What it does: Changes contact info card background from white to green with transparency */
        /* How it works: Uses rgba green color with transparency for subtle green background */
        /* User benefit: Consistent green theme throughout the page */
        body.page-contact .contact-body-css{
            background: rgba(124, 252, 0, 0.2);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 2rem;
            margin: 2rem auto;
            max-width: 600px;
            border: 2px solid rgba(124, 252, 0, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        body.page-contact .contact-body-heading-css{
            font-size: 1.8rem;
            margin-bottom: 1rem;
            font-weight: 700;
            color: #ffd700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        body.page-contact .contact-body-css p{
            font-size: 1.1rem;
            margin-bottom: 1rem;
            font-weight: 500;
            opacity: 0.9;
        }

        /* ===== MOBILE RESPONSIVE STYLING ===== */
        /* This section makes the website look perfect on tablets and mobile devices */
        
        @media (max-width: 768px) {body.page-contact .contact-heading1-css{
                font-size: 2.5rem;
            }body.page-contact .contact-nav-links-css{
                display: none;
            }body.page-contact .contact-mobile-menu-toggle-css{
                display: flex;
            }body.page-contact .header-social{
                display: none;
            }body.page-contact .contact-social-links-css{
                flex-direction: column;  /* Stack vertically */
                align-items: center;     /* Center align the buttons */
                gap: 1.5rem;            /* Space between buttons */
            }body.page-contact .contact-social-link-css{
                min-width: 250px;
            }}
    



        body.page-contact .contact-heading3-css{
            color: #667eea;
            margin-bottom: 2rem;
            font-size: 2rem;
        }
/* ---------- contact page CSS end ---------- */

/* ---------- support page CSS start ---------- */


        /* CSS Reset - Removes default browser styling for consistent appearance */
        body.page-support, body.page-support *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Main body styling with Liverpool skyline background (matches other pages) */
        /* Update: Logo-Matching Green Background */
        /* What it does: Changes background color to match the vibrant green from the logo infinity symbol */
        /* How it works: Uses #7CFC00 (LawnGreen) as primary color with #66bb6a (green) gradient */
        /* User benefit: Better readability and professional color coordination with logo branding */
        body.page-support{
            font-family: "Inter", sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #7CFC00 0%, #66bb6a 100%);
            min-height: 100vh;
        }

        /* Container - Centers content with max-width and responsive padding */
        body.page-support .support-container-css{
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Update: Header Lighter Blue Background */
        /* What it does: Changes header background from green to lighter blue */
        /* How it works: Uses rgba blue color with transparency for subtle blue background */
        /* User benefit: Better color coordination and professional appearance */
        body.page-support .support-header-css{
            background: rgba(102, 126, 234, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(102, 126, 234, 0.9);
            position: sticky;
            top: 0;
            z-index: 100;
            padding: 1rem 0;
        }

        body.page-support .support-header-content-css{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        body.page-support .support-logo-css{
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        body.page-support .support-logo-css img{
            height: 50px;
            width: auto;
            transition: transform 0.3s ease;
        }

        body.page-support .support-logo-css img:hover{
            transform: scale(1.05);
        }

        @media (max-width: 768px) {body.page-support .support-logo-css img{
                height: 40px;
            }}

        @media (max-width: 480px) {body.page-support .support-logo-css img{
                height: 35px;
            }}

        body.page-support .support-nav-links-css{
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        body.page-support .support-nav-links-css a{
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            transition: all 0.3s ease;
        }

        body.page-support .support-nav-links-css a:hover{
            background: rgba(255, 255, 255, 0.1);
        }

        body.page-support .support-air-quality-link-css{
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white !important;
        }

        body.page-support .support-mobile-menu-toggle-css{
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 0.5rem;
        }

        body.page-support .support-mobile-menu-toggle-css span{
            width: 25px;
            height: 3px;
            background: #333;
            margin: 3px 0;
            transition: 0.3s;
            border-radius: 2px;
        }

        body.page-support .support-mobile-menu-toggle-css.support-is-active-css span:nth-child(1){
            transform: rotate(-45deg) translate(-5px, 6px);
        }

        body.page-support .support-mobile-menu-toggle-css.support-is-active-css span:nth-child(2){
            opacity: 0;
        }

        body.page-support .support-mobile-menu-toggle-css.support-is-active-css span:nth-child(3){
            transform: rotate(45deg) translate(-5px, -6px);
        }

        body.page-support .support-mobile-nav-css{
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 280px;
            height: 100vh;
            background: linear-gradient(135deg, #667eea, #764ba2);
            backdrop-filter: blur(20px);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
            padding-top: 20px;
        }

        body.page-support .support-mobile-nav-header-css{
            padding: 1rem 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 1rem;
        }

        body.page-support .support-mobile-logo-css{
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        body.page-support .support-mobile-logo-img-css{
            height: 35px;
            width: auto;
        }

        body.page-support .support-mobile-nav-css.support-is-active-css{
            transform: translateX(0);
        }

        /* Backdrop overlay for mobile menu */
        body.page-support .support-mobile-nav-backdrop-css{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            pointer-events: none;
        }

        body.page-support .support-mobile-nav-backdrop-css.support-is-active-css{
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        body.page-support .support-mobile-nav-css ul{
            list-style: none;
            padding: 1rem 0;
            margin: 0;
        }

        body.page-support .support-mobile-nav-css li{
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        body.page-support .support-mobile-nav-css li:last-child{
            border-bottom: none;
        }

        body.page-support .support-mobile-nav-css a{
            display: block;
            padding: 1rem 2rem;
            text-decoration: none;
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        body.page-support .support-mobile-nav-css a:hover{
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        body.page-support .support-mobile-nav-css .support-air-quality-link-css{
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white !important;
            margin: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            text-align: center;
        }

        body.page-support .support-mobile-nav-css .support-air-quality-link-css:hover{
            background: linear-gradient(135deg, #45a049, #4CAF50);
            color: white !important;
        }

        body.page-support .support-hero-css{
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
            color: white;
            text-align: center;
            padding: 4rem 0;
        }

        body.page-support .support-hero-logo-css{
            margin-bottom: 2rem;
        }

        body.page-support .support-hero-logo-img-css{
            height: 120px;
            width: auto;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
            transition: transform 0.3s ease;
        }

        body.page-support .support-hero-logo-img-css:hover{
            transform: scale(1.05);
        }

        @media (max-width: 768px) {body.page-support .support-hero-logo-img-css{
                height: 100px;
            }}

        @media (max-width: 480px) {body.page-support .support-hero-logo-img-css{
                height: 80px;
            }}

        body.page-support .support-heading1-css{
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        body.page-support .support-hero-tagline-css{
            font-size: 1.3rem;
            font-weight: 300;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Update: Main Content Green Background */
        /* What it does: Changes main content section background from white to green gradient */
        /* How it works: Uses same green gradient as body background for consistency */
        /* User benefit: Eliminates white backgrounds for cohesive green theme */
        body.page-support .support-main-content-css{
            background: white;                                         /* White background for main content */
            padding: 4rem 0;
        }

        body.page-support .support-content-section-css{
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        body.page-support .support-heading2-css{
            font-size: 2.5rem;
            color: #667eea;
            margin-bottom: 2rem;
            font-weight: 600;
        }

        body.page-support .support-content-section-css p{
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
            line-height: 1.8;
        }

        body.page-support .support-highlight-text-css{
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 600;
        }

        body.page-support .support-body2-css{
            background: #f8f9fa;
            padding: 3rem 0;
            text-align: center;
        }

        body.page-support .support-body2-text-css{
            font-size: 1.1rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }

        body.page-support .support-email-link-css{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
        }

        body.page-support .support-email-link-css:hover{
            text-decoration: underline;
        }

        /* Footer */
        body.page-support .support-footer-css{
            background: #333;
            color: white;
            text-align: center;
            padding: 2rem 0;
        }

        body.page-support .support-footer-links-css{
            margin-bottom: 1rem;
        }

        body.page-support .support-footer-links-css a{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            margin-right: 1rem;
        }

        body.page-support .support-footer-links-css a:hover{
            text-decoration: underline;
        }

        body.page-support .support-social-links-css{
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin: 3rem 0;
            flex-wrap: wrap;
        }

        body.page-support .support-social-link-css{
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1.5rem 2rem;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            font-size: 1.1rem;
            min-width: 200px;
            justify-content: center;
        }

        body.page-support .support-social-link-css:hover{
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
            text-decoration: none;
            color: white;
        }

        body.page-support .support-social-icon-css{
            font-size: 2rem;
        }


        body.page-support .support-header-social-css{
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        body.page-support .support-header-social-css .support-social-link-css{
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
            min-width: auto;
        }

        body.page-support .support-callout-css{
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 2rem;
            margin: 2rem auto;
            max-width: 600px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        body.page-support .support-callout-heading-css{
            font-size: 1.8rem;
            margin-bottom: 1rem;
            font-weight: 700;
            color: #ffd700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        body.page-support .support-callout-css p{
            font-size: 1.1rem;
            margin-bottom: 1rem;
            font-weight: 500;
            opacity: 0.9;
        }

        /* Inspirational quote section */
        body.page-support .support-wise-voice-css{
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 3rem;
            margin: 3rem auto;
            max-width: 800px;
            border: 2px solid rgba(102, 126, 234, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            scroll-margin-top: 100px; /* Add space above when anchor link is clicked */
        }

        body.page-support .support-wise-voice-heading-css{
            font-size: 2rem;
            margin-bottom: 1.5rem;
            margin-top: 0;
            padding-top: 1rem; /* Add empty line above heading */
            font-weight: 700;
            color: #667eea;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        body.page-support .support-wise-voice-css .support-quote-body-css{
            font-size: 1.1rem;
            line-height: 1.9;
            color: #333;
            text-align: left;
            margin-bottom: 0;
        }

        body.page-support .support-wise-voice-css .support-quote-body-css p{
            margin-bottom: 1.5rem;
        }

        body.page-support .support-wise-voice-css .support-quote-body-css p:last-child{
            margin-bottom: 0;
        }

        body.page-support .support-wise-voice-css .support-quote-body-css strong{
            color: #667eea;
            font-weight: 600;
        }

        @media (max-width: 768px) {body.page-support .support-wise-voice-css{
                padding: 2rem 1.5rem;
                margin: 2rem auto;
            }body.page-support .support-wise-voice-heading-css{
                font-size: 1.5rem;
            }body.page-support .support-wise-voice-css .support-quote-body-css{
                font-size: 1rem;
                line-height: 1.7;
            }}

        @media (max-width: 768px) {body.page-support .support-heading1-css{
                font-size: 2.5rem;
            }body.page-support .support-nav-links-css{
                display: none;
            }body.page-support .support-mobile-menu-toggle-css{
                display: flex;
            }body.page-support .support-header-social-css{
                display: none;
            }body.page-support .support-social-links-css{
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
            }body.page-support .support-social-link-css{
                min-width: 250px;
            }}
    



        body.page-support .support-rescue-section-css{
            background: #f8f9fa;
            padding: 4rem 0;
        }

        body.page-support .support-rescue-body-css{
            font-size: 1.2rem;
            line-height: 1.8;
            color: #555;
            margin-bottom: 2rem;
        }

        body.page-support .support-heading3-css{
            color: #667eea;
            margin-bottom: 2rem;
            font-size: 2rem;
        }
/* ---------- support page CSS end ---------- */

/* ---------- newsfeeds page CSS start ---------- */


        /* Basic CSS Reset */
        body.page-newsfeeds, body.page-newsfeeds *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* ===== BODY STYLING ===== */
        /* Main body styling that applies to the entire page */
        /* Update: Logo-Matching Green Background */
        /* What it does: Changes background color to match the vibrant green from the logo infinity symbol */
        /* How it works: Uses #7CFC00 (LawnGreen) as primary color with #66bb6a (green) gradient */
        /* User benefit: Better readability and professional color coordination with logo branding */
        html:has(> body.page-newsfeeds){
            scroll-behavior: smooth;                                       /* Smooth scrolling for anchor links */
        }

        body.page-newsfeeds{
            font-family: "Inter", sans-serif;                              /* Modern, clean font for better readability */
            line-height: 1.6;                                             /* Comfortable line spacing for reading */
            color: #333;                                                  /* Dark gray text color for good contrast */
            background: linear-gradient(135deg, #7CFC00 0%, #66bb6a 100%); /* Green gradient background */
            min-height: 100vh;                                           /* Ensure body takes full viewport height */
        }

        /* ===== CONTAINER STYLING ===== */
        /* Wrapper that centers content and sets maximum width */
        body.page-newsfeeds .newsfeeds-container-css{
            max-width: 1200px;                                            /* Maximum width for content */
            margin: 0 auto;                                               /* Center the container horizontally */
            padding: 0 20px;                                             /* Horizontal padding for mobile spacing */
        }

        /* ===== HEADER STYLING ===== */
        /* Navigation bar at the top of the page */
        body.page-newsfeeds .newsfeeds-header-css{
            background: rgba(102, 126, 234, 0.8);                       /* More opaque blue background */
            backdrop-filter: blur(20px);                                  /* Blur effect for modern glass look */
            border-bottom: 1px solid rgba(102, 126, 234, 0.9);          /* Stronger blue border at bottom */
            position: sticky;                                            /* Sticky positioning so header stays at top */
            top: 0;                                                     /* Stick to top of viewport */
            z-index: 100;                                                /* High z-index so it appears above content */
            padding: 1rem 0;                                            /* Vertical padding for header height */
        }

        /* ===== HEADER CONTENT LAYOUT ===== */
        /* Flexbox layout for header elements */
        body.page-newsfeeds .newsfeeds-header-content-css{
            display: flex;                                               /* Flexbox for horizontal layout */
            justify-content: space-between;                              /* Space elements apart (logo left, nav right) */
            align-items: center;                                         /* Center align all elements vertically */
        }

        /* ===== LOGO STYLING ===== */
        /* Logo link and image styling */
        body.page-newsfeeds .newsfeeds-logo-css{
            display: flex;                                               /* Flexbox for logo alignment */
            align-items: center;                                         /* Center logo vertically */
            text-decoration: none;                                      /* Remove underline from link */
        }

        /* Logo image sizing and effects */
        body.page-newsfeeds .newsfeeds-logo-css img{
            height: 50px;                                                /* Fixed height for consistent sizing */
            width: auto;                                                 /* Maintain aspect ratio */
            transition: transform 0.3s ease;                            /* Smooth scaling animation */
        }

        /* Hover effect for logo */
        body.page-newsfeeds .newsfeeds-logo-css img:hover{
            transform: scale(1.05);                                       /* Slight scale up on hover for interactivity */
        }

        /* ===== TABLET RESPONSIVE STYLING ===== */
        /* Adjustments for tablets and smaller screens (768px and below) */
        @media (max-width: 768px) {body.page-newsfeeds .newsfeeds-logo-css img{
                height: 40px;                               /* Smaller logo for tablet screens */
            }}

        /* ===== SMALL MOBILE RESPONSIVE STYLING ===== */
        /* Adjustments for small mobile devices (480px and below) */
        @media (max-width: 480px) {body.page-newsfeeds .newsfeeds-logo-css img{
                height: 35px;                               /* Even smaller logo for small phones */
            }}

        /* ===== NAVIGATION STYLING ===== */
        /* Main navigation menu styling */
        body.page-newsfeeds nav ul{
            display: flex;                                               /* Flexbox for horizontal navigation */
            list-style: none;                                            /* Remove bullet points */
            gap: 2rem;                                                   /* Space between navigation items */
            overflow: visible;                                          /* Allow dropdown to extend beyond nav */
        }

        body.page-newsfeeds nav{
            overflow: visible;                                           /* Allow dropdown to extend beyond nav */
        }

        /* Navigation link styling */
        body.page-newsfeeds nav a{
            color: white;                                               /* White text for contrast */
            text-decoration: none;                                      /* Remove underlines */
            font-weight: 500;                                           /* Medium font weight */
            padding: 0.5rem 1rem;                                       /* Padding for clickable area */
            border-radius: 25px;                                         /* Rounded corners for modern look */
            transition: all 0.3s ease;                                   /* Smooth transitions for all properties */
        }

        /* Hover effect for navigation links */
        body.page-newsfeeds nav a:hover{
            background: rgba(255, 255, 255, 0.1);                      /* Semi-transparent white background */
        }

        /* ===== DROPDOWN MENU STYLING ===== */
        /* Update: About Page Dropdown Menu */
        /* What it does: Creates a dropdown menu for the About navigation link */
        /* How it works: Shows dropdown items on hover/focus of the About link */
        /* User benefit: Easy navigation to specific sections of the About page */
        body.page-newsfeeds .newsfeeds-dropdown-css{
            position: relative;                                         /* Position relative for absolute dropdown */
        }

        body.page-newsfeeds .newsfeeds-dropdown-menu-css{
            display: none;                                             /* Hidden by default */
            position: absolute;                                         /* Absolute positioning */
            top: calc(100% + 5px);                                      /* Position below the parent link with small gap */
            left: 50%;                                                 /* Center horizontally */
            transform: translateX(-50%);                               /* Offset by half width to center */
            background: rgba(102, 126, 234, 0.95);                     /* Semi-transparent purple background */
            backdrop-filter: blur(20px);                               /* Blur effect for modern look */
            border-radius: 10px;                                       /* Rounded corners */
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);                 /* Shadow for depth */
            list-style: none;                                          /* Remove bullet points */
            padding: 0.5rem 0;                                          /* Vertical padding */
            margin: 0;                                                 /* No margin to eliminate gap */
            width: 360px;                                              /* Fixed width to ensure all text is fully visible */
            z-index: 1000;                                             /* High z-index to appear above content */
        }

        /* Bridge the gap between button and dropdown to keep it visible */
        body.page-newsfeeds .newsfeeds-dropdown-css::before{
            content: "";                                               /* Empty content for pseudo-element */
            position: absolute;                                         /* Absolute positioning */
            top: 100%;                                                 /* Start below the button */
            left: 0;                                                   /* Align with left edge */
            width: 100%;                                               /* Full width of button */
            height: 5px;                                               /* Small height to bridge gap */
            background: transparent;                                    /* Transparent background */
            z-index: 1001;                                             /* Above dropdown menu */
        }

        body.page-newsfeeds .newsfeeds-dropdown-css:hover .newsfeeds-dropdown-menu-css, body.page-newsfeeds .newsfeeds-dropdown-css:focus-within .newsfeeds-dropdown-menu-css, body.page-newsfeeds .newsfeeds-dropdown-menu-css:hover{
            display: block;                                            /* Show dropdown on hover or focus */
        }

        body.page-newsfeeds .newsfeeds-dropdown-menu-css li{
            margin: 0;                                                 /* Remove default margin */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);        /* Subtle border between items */
        }

        body.page-newsfeeds .newsfeeds-dropdown-menu-css li:last-child{
            border-bottom: none;                                       /* Remove border from last item */
        }

        body.page-newsfeeds .newsfeeds-dropdown-menu-css a{
            display: block;                                            /* Make links fill the width */
            padding: 0.75rem 1.5rem;                                   /* Padding for clickable area */
            color: white;                                              /* White text */
            text-decoration: none;                                     /* Remove underlines */
            font-weight: 500;                                          /* Medium font weight */
            transition: all 0.3s ease;                                 /* Smooth transitions */
            border-radius: 0;                                          /* No border radius on items */
            white-space: nowrap;                                       /* Prevent text wrapping */
            overflow: visible;                                         /* Ensure text is fully visible */
            width: 100%;                                               /* Links fill dropdown width */
            box-sizing: border-box;                                    /* Include padding in width calculation */
        }

        body.page-newsfeeds .newsfeeds-dropdown-menu-css a:hover{
            background: rgba(255, 255, 255, 0.2);                     /* Light white overlay on hover */
            padding-left: 1.75rem;                                      /* Slight indent on hover */
        }

        /* Mobile dropdown menu styling */
        /* Update: Mobile Dropdown Scrollable Menu */
        /* What it does: Creates a scrollable dropdown menu that appears below About button on mobile */
        /* How it works: Uses nested list display within mobile navigation */
        /* User benefit: All dropdown items are accessible on mobile devices */
        body.page-newsfeeds .newsfeeds-mobile-dropdown-css{
            position: relative;                                        /* Position relative for nested menu */
        }

        body.page-newsfeeds .newsfeeds-mobile-dropdown-menu-css{
            display: none;                                             /* Hidden by default */
            list-style: none;                                          /* Remove bullet points */
            padding: 0;                                                /* Remove default padding */
            margin: 0;                                                 /* Remove default margin */
            background: rgba(0, 0, 0, 0.2);                           /* Darker background for nested items */
            border-left: 3px solid rgba(255, 255, 255, 0.3);          /* Left border for visual separation */
        }

        body.page-newsfeeds .newsfeeds-mobile-dropdown-css.newsfeeds-is-active-css .newsfeeds-mobile-dropdown-menu-css{
            display: block;                                            /* Show when parent is active */
        }

        body.page-newsfeeds .newsfeeds-mobile-dropdown-menu-css li{
            border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);      /* Thinner border between items */
            margin: 0;                                                 /* Remove any default margin */
        }

        body.page-newsfeeds .newsfeeds-mobile-dropdown-menu-css li:last-child{
            border-bottom: none;                                       /* Remove border from last item */
        }

        body.page-newsfeeds .newsfeeds-mobile-dropdown-menu-css a{
            display: block;                                            /* Make links fill the width */
            padding: 0.1rem 0.5rem 0 2.5rem;                          /* Reduced padding */
            color: white;                                              /* White text */
            text-decoration: none;                                     /* Remove underlines */
            font-weight: 500;                                          /* Medium font weight */
            font-size: 0.8rem;                                        /* Even smaller font size */
            white-space: normal;                                      /* Allow text to wrap if needed */
            word-wrap: break-word;                                     /* Break long words if necessary */
            transition: background-color 0.3s ease;                    /* Smooth hover transition */
            line-height: 0.9;                                          /* Reduced line height */
        }

        body.page-newsfeeds .newsfeeds-mobile-dropdown-menu-css a:hover{
            background: rgba(255, 255, 255, 0.15);                     /* Light white overlay on hover */
        }

        /* ===== AIR QUALITY LINK STYLING ===== */
        /* Special styling for the air quality link to make it stand out */
        body.page-newsfeeds .newsfeeds-air-quality-link-css{
            background: linear-gradient(135deg, #4CAF50, #45a049);      /* Green gradient background */
            color: white !important;                                    /* White text with important to override other styles */
        }

        /* Mobile menu */
        /* ===== HAMBURGER MENU TOGGLE BUTTON ===== */
        /* This creates the 3-line hamburger menu button that appears on mobile */
        body.page-newsfeeds .newsfeeds-mobile-menu-toggle-css{
            display: none;              /* Hidden by default - only shows on mobile */
            flex-direction: column;     /* Stack the 3 lines vertically */
            cursor: pointer;            /* Show it's clickable */
            padding: 0.5rem;           /* Space around the button for easier tapping */
        }

        /* Style each of the 3 lines in the hamburger menu */
        body.page-newsfeeds .newsfeeds-mobile-menu-toggle-css span{
            width: 25px;               /* Width of each line */
            height: 3px;               /* Height of each line */
            background: #333;          /* Dark color for the lines */
            margin: 3px 0;             /* Space between each line */
            transition: 0.3s;          /* Smooth animation when transforming */
            border-radius: 2px;        /* Slightly rounded corners */
        }

        /* ===== MOBILE NAVIGATION MENU ===== */
        /* This is the slide-out menu that appears when you tap the hamburger button */
        body.page-newsfeeds .newsfeeds-mobile-nav-css{
            display: block;                                    /* Always present in DOM */
            position: fixed;                                   /* Fixed position so it stays in place */
            top: 0;                                           /* Start from top of screen */
            left: 0;                                          /* Start from left edge */
            width: 280px;                                     /* Width of the menu panel */
            height: 100vh;                                    /* Full height of screen */
            background: linear-gradient(135deg, #667eea, #764ba2);  /* Purple gradient background */
            backdrop-filter: blur(20px);                      /* Blur effect behind the menu */
            border-right: 1px solid rgba(255, 255, 255, 0.2);     /* Subtle white border on right */
            box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);      /* Shadow to make menu stand out */
            z-index: 1000;                                    /* High z-index so it appears above everything */
            transform: translateX(-100%);                     /* Start hidden off-screen to the left */
            transition: transform 0.3s ease-in-out;           /* Smooth slide animation */
            padding-top: 20px;                               /* Space at top of menu */
            overflow: visible;                                /* Allow dropdown to extend beyond nav */
        }

        /* ===== MOBILE NAVIGATION HEADER ===== */
        /* Header section at top of mobile menu with logo */
        body.page-newsfeeds .newsfeeds-mobile-nav-header-css{
            padding: 1rem 2rem;                              /* Space around header content */
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);  /* Subtle white line under header */
            margin-bottom: 1rem;                             /* Space below header */
        }

        /* Logo link in mobile menu header */
        body.page-newsfeeds .newsfeeds-mobile-logo-css{
            display: flex;                                    /* Flexbox for logo alignment */
            align-items: center;                             /* Center logo vertically */
            text-decoration: none;                           /* Remove underline from link */
        }

        /* Logo image size in mobile menu */
        body.page-newsfeeds .newsfeeds-mobile-logo-img-css{
            height: 35px;                                     /* Smaller logo for mobile menu */
            width: auto;                                      /* Maintain aspect ratio */
        }

        /* ===== MOBILE NAVIGATION ACTIVE STATE ===== */
        /* When menu is open, slide it into view */
        body.page-newsfeeds .newsfeeds-mobile-nav-css.newsfeeds-is-active-css{
            transform: translateX(0);                         /* Move menu from off-screen to visible */
        }

        /* ===== MOBILE NAVIGATION MENU LINKS ===== */
        /* Remove default list styling */
        body.page-newsfeeds .newsfeeds-mobile-nav-css ul{
            list-style: none;                               /* Remove bullet points */
            padding: 0;                                      /* Remove default padding */
            margin: 0;                                       /* Remove default margin */
            overflow: visible;                              /* Allow dropdown to extend beyond list */
        }

        /* Style each menu item */
        body.page-newsfeeds .newsfeeds-mobile-nav-css li{
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);  /* Subtle line between menu items */
            overflow: visible;                                    /* Allow dropdown to extend beyond item */
        }

        /* Style the navigation links */
        body.page-newsfeeds .newsfeeds-mobile-nav-css a{
            display: block;                                  /* Make links fill the full width */
            padding: 1rem 2rem;                             /* Space around text for easy tapping */
            color: white;                                    /* White text on purple background */
            text-decoration: none;                           /* Remove underlines */
            font-weight: 500;                                /* Medium font weight */
            transition: background-color 0.3s ease;          /* Smooth color change on hover */
        }

        /* Hover effect for navigation links */
        body.page-newsfeeds .newsfeeds-mobile-nav-css a:hover{
            background-color: rgba(255, 255, 255, 0.1);      /* Light white overlay on hover */
        }

        /* ===== MOBILE NAVIGATION BACKDROP ===== */
        /* Dark overlay that appears behind the mobile menu */
        body.page-newsfeeds .newsfeeds-mobile-nav-backdrop-css{
            position: fixed;                               /* Fixed position covers entire screen */
            top: 0;                                        /* Start from top of screen */
            left: 0;                                       /* Start from left edge */
            width: 100%;                                   /* Full width of screen */
            height: 100%;                                  /* Full height of screen */
            background: rgba(0, 0, 0, 0.5);                /* Semi-transparent black overlay */
            z-index: 999;                                 /* High z-index but below menu (1000) */
            opacity: 0;                                    /* Start invisible */
            visibility: hidden;                            /* Start hidden */
            transition: all 0.3s ease;                     /* Smooth fade animation */
        }

        /* When backdrop is active (menu is open) */
        body.page-newsfeeds .newsfeeds-mobile-nav-backdrop-css.newsfeeds-is-active-css{
            opacity: 1;                                    /* Make backdrop visible */
            visibility: visible;                           /* Show the backdrop */
        }

        /* ===== HERO SECTION STYLING ===== */
        /* Main banner section at the top of the page */
        body.page-newsfeeds .newsfeeds-hero-css{
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));  /* Purple gradient with transparency */
            color: white;                                               /* White text for contrast */
            text-align: center;                                         /* Center align all text */
            padding: 4rem 0;                                            /* Vertical padding for section height */
        }

        /* ===== HEADER LOGIN LINK STYLING ===== */
        /* Update: Header Login Link Styling */
        /* What it does: Creates a professional login link in the header navigation */
        /* How it works: Uses modern button styling that matches the header design */
        /* User benefit: Easy access to login from any page in the header */
        body.page-newsfeeds .newsfeeds-header-content-css .newsfeeds-login-link-css{
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            display: inline-block;
            margin-right: 1rem;
            border: 2px solid transparent;
        }

        body.page-newsfeeds .newsfeeds-header-content-css .newsfeeds-login-link-css:hover{
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
            border-color: rgba(255, 255, 255, 0.2);
        }

        body.page-newsfeeds .newsfeeds-header-content-css .newsfeeds-login-link-css:active{
            transform: translateY(0);
        }

        /* ===== HERO LOGO STYLING ===== */
        /* Logo container in hero section */
        body.page-newsfeeds .newsfeeds-hero-logo-css{
            margin-bottom: 2rem;                                        /* Space below logo */
        }

        /* Hero logo image styling */
        body.page-newsfeeds .newsfeeds-hero-logo-img-css{
            height: 120px;                                              /* Large logo size for hero */
            width: auto;                                                /* Maintain aspect ratio */
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));         /* Drop shadow for depth */
            transition: transform 0.3s ease;                            /* Smooth scaling animation */
        }

        /* Hover effect for hero logo */
        body.page-newsfeeds .newsfeeds-hero-logo-img-css:hover{
            transform: scale(1.05);                                       /* Slight scale up on hover */
        }

        /* ===== HERO SECTION RESPONSIVE STYLING ===== */
        /* Adjust hero logo size for tablets */
        @media (max-width: 768px) {body.page-newsfeeds .newsfeeds-hero-logo-img-css{
                height: 100px;                               /* Medium logo size for tablets */
            }}

        /* Adjust hero logo size for small mobile devices */
        @media (max-width: 480px) {body.page-newsfeeds .newsfeeds-hero-logo-img-css{
                height: 80px;                                /* Smaller logo for small phones */
            }body.page-newsfeeds .newsfeeds-header-content-css .newsfeeds-login-link-css{
                font-size: 0.7rem;
                padding: 4px 8px;
                margin-right: 0.25rem;
            }}

        /* ===== HERO TEXT STYLING ===== */
        /* Main heading in hero section */
        body.page-newsfeeds .newsfeeds-heading1-css{
            font-size: 3.5rem;                                          /* Large font size for impact */
            font-weight: 700;                                           /* Bold font weight */
            margin-bottom: 1rem;                                        /* Space below heading */
        }

        /* Hero paragraph text */
        body.page-newsfeeds .newsfeeds-hero-tagline-css{
            font-size: 1.3rem;                                          /* Large readable font size */
            font-weight: 300;                                           /* Light font weight for elegance */
            max-width: 600px;                                           /* Limit width for readability */
            margin: 0 auto;                                             /* Center the paragraph */
        }

        /* Main content */
        /* ===== MAIN CONTENT STYLING ===== */
        /* Main content area styling */
        /* Update: Main Content Green Background */
        /* What it does: Changes main content section background from white to green gradient */
        /* How it works: Uses same green gradient as body background for consistency */
        /* User benefit: Eliminates white backgrounds for cohesive green theme */
        body.page-newsfeeds .newsfeeds-main-content-css{
            background: white;                                         /* White background for main content */
            padding: 4rem 0;                                            /* Vertical padding for section spacing */
        }

        /* Content section container */
        body.page-newsfeeds .newsfeeds-content-section-css{
            text-align: center;                                         /* Center align content */
            max-width: 800px;                                           /* Limit width for readability */
            margin: 0 auto;                                             /* Center the content section */
        }

        body.page-newsfeeds .newsfeeds-content-section-css h2{
            font-size: 2.5rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 2rem;
        }

        body.page-newsfeeds .newsfeeds-content-section-css p{
            font-size: 1.2rem;
            line-height: 1.8;
            color: #666;
            margin-bottom: 2rem;
        }

        body.page-newsfeeds .newsfeeds-highlight-text-css{
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 600;
        }

        /* Story section */
        body.page-newsfeeds .newsfeeds-story-section-css{
            background: #f8f9fa;
            padding: 4rem 0;
        }

        body.page-newsfeeds .newsfeeds-story-container-css{
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
        }

        body.page-newsfeeds .newsfeeds-story-title-css{
            font-size: 2.5rem;
            font-weight: 700;
            color: #333;
            text-align: center;
            margin-bottom: 3rem;
        }

        body.page-newsfeeds .newsfeeds-story-content-css{
            background: white;
            padding: 3rem;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }

        body.page-newsfeeds .newsfeeds-story-paragraph-css{
            font-size: 1.1rem;
            line-height: 1.8;
            color: #555;
            margin-bottom: 1.5rem;
            text-align: justify;
        }

        body.page-newsfeeds .newsfeeds-story-paragraph-css:first-child{
            font-weight: 600;
            color: #333;
        }

        body.page-newsfeeds .newsfeeds-story-paragraph-css:last-child{
            font-weight: 600;
            color: #667eea;
        }

        /* Updates section */
        body.page-newsfeeds .newsfeeds-updates-section-css{
            background: white;
            padding: 4rem 0;
        }

        body.page-newsfeeds .newsfeeds-updates-header-css{
            text-align: center;
            margin-bottom: 3rem;
        }

        body.page-newsfeeds .newsfeeds-updates-header-css h2{
            font-size: 2.5rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 1rem;
        }

        body.page-newsfeeds .newsfeeds-updates-header-css p{
            font-size: 1.2rem;
            color: #666;
        }

        body.page-newsfeeds .newsfeeds-updates-container-css{
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
        }

        body.page-newsfeeds .newsfeeds-update-card-css{
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        body.page-newsfeeds .newsfeeds-update-card-css:hover{
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        body.page-newsfeeds .newsfeeds-update-date-css{
            font-size: 0.9rem;
            color: #667eea;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        body.page-newsfeeds .newsfeeds-update-content-css h3{
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.5rem;
        }

        body.page-newsfeeds .newsfeeds-update-content-css p{
            font-size: 1rem;
            color: #666;
            line-height: 1.6;
        }

        /* Article section */
        body.page-newsfeeds .newsfeeds-article-section-css{
            background: #f8f9fa;
            padding: 4rem 0;
        }

        body.page-newsfeeds .newsfeeds-article-container-css{
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
        }

        body.page-newsfeeds .newsfeeds-article-header-css{
            text-align: center;
            margin-bottom: 3rem;
        }

        body.page-newsfeeds .newsfeeds-article-title-css{
            font-size: 2.8rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 1rem;
            line-height: 1.3;
        }

        body.page-newsfeeds .newsfeeds-article-meta-css{
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        body.page-newsfeeds .newsfeeds-article-date-css, body.page-newsfeeds .newsfeeds-article-author-css{
            font-size: 1rem;
            color: #667eea;
            font-weight: 600;
            background: rgba(102, 126, 234, 0.1);
            padding: 0.5rem 1rem;
            border-radius: 20px;
        }

        body.page-newsfeeds .newsfeeds-article-content-css{
            background: white;
            padding: 3rem;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }

        body.page-newsfeeds .newsfeeds-article-lead-css{
            font-size: 1.3rem;
            line-height: 1.8;
            color: #333;
            font-weight: 500;
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-left: 4px solid #667eea;
            border-radius: 8px;
        }

        body.page-newsfeeds .newsfeeds-article-section-content-css{
            margin-bottom: 2.5rem;
        }

        body.page-newsfeeds .newsfeeds-article-subtitle-css{
            font-size: 1.8rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #667eea;
        }

        body.page-newsfeeds .newsfeeds-article-content-css p{
            font-size: 1.1rem;
            line-height: 1.8;
            color: #555;
            margin-bottom: 1.5rem;
            text-align: justify;
        }

        body.page-newsfeeds .newsfeeds-support-tip-css{
            background: #f8f9fa;
            padding: 2rem;
            border-radius: 10px;
            margin-bottom: 2rem;
            border-left: 4px solid #667eea;
        }

        body.page-newsfeeds .newsfeeds-tip-title-css{
            font-size: 1.4rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 1rem;
        }

        body.page-newsfeeds .newsfeeds-tip-list-css{
            margin: 1rem 0;
            padding-left: 1.5rem;
        }

        body.page-newsfeeds .newsfeeds-tip-list-css li{
            font-size: 1.1rem;
            line-height: 1.7;
            color: #555;
            margin-bottom: 1rem;
        }

        body.page-newsfeeds .newsfeeds-tip-list-css strong{
            color: #667eea;
            font-weight: 700;
        }

        body.page-newsfeeds .newsfeeds-tip-list-css em{
            color: #667eea;
            font-style: italic;
            font-weight: 600;
        }

        body.page-newsfeeds .newsfeeds-article-conclusion-css{
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 2rem;
            border-radius: 10px;
            margin: 2rem 0;
        }

        body.page-newsfeeds .newsfeeds-article-conclusion-css .newsfeeds-article-subtitle-css{
            color: white;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
        }

        body.page-newsfeeds .newsfeeds-article-conclusion-css p{
            color: white;
            font-size: 1.1rem;
            line-height: 1.8;
        }

        body.page-newsfeeds .newsfeeds-article-acknowledgment-css{
            background: #e8f5e8;
            padding: 2rem;
            border-radius: 10px;
            border-left: 4px solid #4CAF50;
            margin-top: 2rem;
        }

        body.page-newsfeeds .newsfeeds-article-acknowledgment-css p{
            font-size: 1rem;
            line-height: 1.7;
            color: #2e7d32;
            margin: 0;
        }

        /* Mobile responsive for article section */
        @media (max-width: 768px) {body.page-newsfeeds .newsfeeds-article-title-css{
                font-size: 2.2rem;
            }body.page-newsfeeds .newsfeeds-article-content-css{
                padding: 2rem;
            }body.page-newsfeeds .newsfeeds-article-meta-css{
                flex-direction: column;
                gap: 1rem;
            }body.page-newsfeeds .newsfeeds-support-tip-css{
                padding: 1.5rem;
            }body.page-newsfeeds .newsfeeds-citation-box-css{
                margin-top: 1.5rem !important;
                padding: 1rem !important;
            }body.page-newsfeeds .newsfeeds-citation-heading-css{
                font-size: 1rem !important;
                margin-bottom: 0.75rem !important;
            }body.page-newsfeeds .newsfeeds-citation-body-css{
                font-size: 0.85rem !important;
                line-height: 1.5 !important;
                word-wrap: break-word;
            }}
        
        /* Extra small mobile devices (480px and below) */
        @media (max-width: 480px) {body.page-newsfeeds .newsfeeds-article-title-css{
                font-size: 1.8rem;
            }body.page-newsfeeds .newsfeeds-article-content-css{
                padding: 1.5rem;
            }body.page-newsfeeds .newsfeeds-article-lead-css{
                font-size: 1.1rem;
            }body.page-newsfeeds .newsfeeds-article-subtitle-css{
                font-size: 1.5rem;
            }body.page-newsfeeds .newsfeeds-support-tip-css{
                padding: 1rem;
            }body.page-newsfeeds .newsfeeds-tip-title-css{
                font-size: 1.2rem;
            }body.page-newsfeeds .newsfeeds-citation-box-css{
                margin-top: 1rem !important;
                padding: 0.75rem !important;
            }body.page-newsfeeds .newsfeeds-citation-heading-css{
                font-size: 0.9rem !important;
                margin-bottom: 0.5rem !important;
            }body.page-newsfeeds .newsfeeds-citation-body-css{
                font-size: 0.8rem !important;
                line-height: 1.4 !important;
            }}

        /* Contact section */
        body.page-newsfeeds .newsfeeds-body2-css{
            background: #f8f9fa;
            padding: 4rem 0;
        }

        body.page-newsfeeds .newsfeeds-contact-container-css{
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        body.page-newsfeeds .newsfeeds-heading2-css{
            font-size: 2.5rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 2rem;
        }

        body.page-newsfeeds .newsfeeds-contact-container-css p{
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
        }

        body.page-newsfeeds .newsfeeds-social-links-css{
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        body.page-newsfeeds .newsfeeds-social-link-css{
            display: inline-block;
            padding: 0.8rem 1.5rem;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            min-width: 200px;
            text-align: center;
        }

        body.page-newsfeeds .newsfeeds-social-link-css:hover{
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }

        body.page-newsfeeds .newsfeeds-email-link-css{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
        }

        body.page-newsfeeds .newsfeeds-email-link-css:hover{
            text-decoration: underline;
        }

        /* Footer */
        body.page-newsfeeds .newsfeeds-footer-css{
            background: #333;
            color: white;
            text-align: center;
            padding: 2rem 0;
        }

        body.page-newsfeeds .newsfeeds-footer-links-css{
            margin-bottom: 1rem;
        }

        body.page-newsfeeds .newsfeeds-footer-links-css a{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            margin-right: 1rem;
        }

        body.page-newsfeeds .newsfeeds-footer-links-css a:hover{
            text-decoration: underline;
        }

        /* ===== MOBILE RESPONSIVE STYLING ===== */
        /* This section makes the website look perfect on tablets and mobile devices */
        
        @media (max-width: 768px) {body.page-newsfeeds .newsfeeds-heading1-css{
                font-size: 2.5rem;
            }body.page-newsfeeds .newsfeeds-header-content-css .newsfeeds-login-link-css{
                font-size: 0.8rem;
                padding: 6px 12px;
                margin-right: 0.5rem;
            }body.page-newsfeeds .newsfeeds-nav-links-css{
                display: none;
            }body.page-newsfeeds .newsfeeds-mobile-menu-toggle-css{
                display: flex;
            }body.page-newsfeeds .newsfeeds-header-social-css{
                display: none;
            }body.page-newsfeeds .newsfeeds-social-links-css{
                flex-direction: column;  /* Stack vertically */
                align-items: center;     /* Center align the buttons */
                gap: 1.5rem;            /* Space between buttons */
            }body.page-newsfeeds .newsfeeds-social-link-css{
                min-width: 250px;
            }body.page-newsfeeds .newsfeeds-story-content-css{
                padding: 2rem;
            }}
    



        body.page-newsfeeds .newsfeeds-citation-box-css{
            margin-top: 2rem;
            padding: 1.5rem;
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            border-radius: 5px;
        }

        body.page-newsfeeds .newsfeeds-citation-heading-css{
            color: #667eea;
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }

        body.page-newsfeeds .newsfeeds-citation-body-css{
            font-size: 0.95rem;
            color: #666;
            line-height: 1.6;
            margin: 0 0 1rem 0;
        }

        body.page-newsfeeds .newsfeeds-citation-body-css:last-child{
            margin-bottom: 0;
        }
/* ---------- newsfeeds page CSS end ---------- */

/* ---------- privacy page CSS start ---------- */


        body.page-privacy, body.page-privacy *{ margin: 0; padding: 0; box-sizing: border-box; }
        body.page-privacy{
            font-family: "Inter", sans-serif; line-height: 1.6; color: #333;
            background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 25%, #ff6b6b 50%, #4ecdc4 75%, #45b7d1 100%);
            background-attachment: fixed; min-height: 100vh; position: relative;
        }
        body.page-privacy::before{
            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-image:
                linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4) 100%),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff7e5f;stop-opacity:1' /%3E%3Cstop offset='25%25' style='stop-color:%23feb47b;stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:%23ff6b6b;stop-opacity:1' /%3E%3Cstop offset='75%25' style='stop-color:%234ecdc4;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%2345b7d1;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='400' fill='url(%23sky)'/%3E%3Cg fill='%23000' opacity='0.8'%3E%3Crect x='0' y='250' width='40' height='150'/%3E%3Crect x='50' y='200' width='35' height='200'/%3E%3Crect x='100' y='180' width='30' height='220'/%3E%3Crect x='150' y='220' width='25' height='180'/%3E%3Crect x='200' y='160' width='40' height='240'/%3E%3Crect x='260' y='190' width='30' height='210'/%3E%3Crect x='310' y='170' width='35' height='230'/%3E%3Crect x='360' y='200' width='25' height='200'/%3E%3Crect x='400' y='150' width='45' height='250'/%3E%3Crect x='460' y='180' width='30' height='220'/%3E%3Crect x='510' y='160' width='35' height='240'/%3E%3Crect x='560' y='190' width='25' height='210'/%3E%3Crect x='600' y='170' width='40' height='230'/%3E%3Crect x='660' y='200' width='30' height='200'/%3E%3Crect x='710' y='180' width='35' height='220'/%3E%3Crect x='760' y='160' width='25' height='240'/%3E%3Crect x='800' y='220' width='80' height='180'/%3E%3Crect x='820' y='200' width='15' height='200'/%3E%3Crect x='840' y='180' width='15' height='220'/%3E%3Crect x='860' y='200' width='15' height='200'/%3E%3Crect x='880' y='180' width='15' height='220'/%3E%3C/g%3E%3C/svg%3E");
            background-size: cover; background-position: bottom center; background-repeat: no-repeat; z-index: -1;
        }
        body.page-privacy .privacy-container-css{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        body.page-privacy .privacy-header-css{ background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 1rem 0; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 100; }
        body.page-privacy .privacy-header-content-css{ display: flex; justify-content: space-between; align-items: center; }
        body.page-privacy .privacy-logo-css{ font-size: 2rem; font-weight: 700; color: #667eea; text-decoration: none; }
        body.page-privacy .privacy-nav-links-css{ display: flex; list-style: none; gap: 2rem; }
        body.page-privacy .privacy-nav-links-css a{ text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s ease; }
        body.page-privacy .privacy-nav-links-css a:hover{ color: #667eea; }
        body.page-privacy .privacy-air-quality-link-css{ background: linear-gradient(135deg, #FFD750, #F0BE3C); color: #333 !important; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
        body.page-privacy .privacy-air-quality-link-css:hover{ background: linear-gradient(135deg, #F0BE3C, #FFD750); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); color: #333 !important; }
        body.page-privacy .privacy-mobile-menu-toggle-css{ display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; }
        body.page-privacy .privacy-mobile-menu-toggle-css span{ width: 25px; height: 3px; background: #333; margin: 3px 0; transition: 0.3s; border-radius: 2px; }
        body.page-privacy .privacy-mobile-menu-toggle-css.privacy-is-active-css span:nth-child(1){ transform: rotate(-45deg) translate(-5px, 6px); }
        body.page-privacy .privacy-mobile-menu-toggle-css.privacy-is-active-css span:nth-child(2){ opacity: 0; }
        body.page-privacy .privacy-mobile-menu-toggle-css.privacy-is-active-css span:nth-child(3){ transform: rotate(45deg) translate(-5px, -6px); }
        body.page-privacy .privacy-mobile-nav-css{ display: block; position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); border-right: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1); z-index: 1000; transform: translateX(-100%); transition: transform 0.3s ease-in-out; padding-top: 80px; }
        body.page-privacy .privacy-mobile-nav-css.privacy-is-active-css{ transform: translateX(0); }
        body.page-privacy .privacy-mobile-nav-backdrop-css{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; pointer-events: none; }
        body.page-privacy .privacy-mobile-nav-backdrop-css.privacy-is-active-css{ opacity: 1; visibility: visible; pointer-events: auto; }
        body.page-privacy .privacy-mobile-nav-css ul{ list-style: none; padding: 1rem 0; margin: 0; }
        body.page-privacy .privacy-mobile-nav-css li{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
        body.page-privacy .privacy-mobile-nav-css li:last-child{ border-bottom: none; }
        body.page-privacy .privacy-mobile-nav-css a{ display: block; padding: 1rem 2rem; text-decoration: none; color: #333; font-weight: 500; transition: all 0.3s ease; }
        body.page-privacy .privacy-mobile-nav-css a:hover{ background: rgba(102, 126, 234, 0.1); color: #667eea; }
        body.page-privacy .privacy-mobile-nav-css .privacy-air-quality-link-css{ background: linear-gradient(135deg, #FFD750, #F0BE3C); color: #333 !important; margin: 0.5rem 1rem; border-radius: 20px; font-weight: 600; text-align: center; }
        body.page-privacy .privacy-mobile-nav-css .privacy-air-quality-link-css:hover{ background: linear-gradient(135deg, #F0BE3C, #FFD750); color: #333 !important; }
        body.page-privacy .privacy-hero-css{ padding: 4rem 0; text-align: center; color: white; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); }
        body.page-privacy .privacy-heading1-css{ font-size: 3.0rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7); }
        body.page-privacy .privacy-main-content-css{ background: white; padding: 3rem 0; }
        body.page-privacy .privacy-body-css{ max-width: 900px; margin: 0 auto; }
        body.page-privacy .privacy-body-css h2{ color: #667eea; margin: 2rem 0 1rem; font-size: 1.8rem; }
        body.page-privacy .privacy-body-css p{ color: #555; margin-bottom: 1rem; }
        body.page-privacy .privacy-body-css ul{ margin: 0 0 1rem 1.2rem; }
        body.page-privacy .privacy-body-css li{ margin-bottom: 0.5rem; }
        @media (max-width: 768px) {body.page-privacy .privacy-nav-links-css{ display: none; }body.page-privacy .privacy-mobile-menu-toggle-css{ display: flex; }body.page-privacy .privacy-heading1-css{ font-size: 2.2rem; }}
    



        body.page-privacy .privacy-body2-css{
            background: #f8f9fa;
            padding: 3rem 0;
            text-align: center;
        }

        body.page-privacy .privacy-email-link-css{
            color: #667eea;
            font-weight: 600;
            text-decoration: none;
        }

        body.page-privacy .privacy-footer-css{
            background: #ffffff;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            padding: 1rem 0;
            text-align: center;
        }

        body.page-privacy .privacy-footer-inner-css{
            font-size: 0.95rem;
        }

        body.page-privacy .privacy-footer-link-css{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            margin-right: 1rem;
        }

        body.page-privacy .privacy-footer-note-css{
            margin-top: 1rem;
            color: #666;
        }
/* ---------- privacy page CSS end ---------- */

/* ---------- cookies page CSS start ---------- */


        body.page-cookies, body.page-cookies *{ margin: 0; padding: 0; box-sizing: border-box; }
        body.page-cookies{
            font-family: "Inter", sans-serif; line-height: 1.6; color: #333;
            background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 25%, #ff6b6b 50%, #4ecdc4 75%, #45b7d1 100%);
            background-attachment: fixed; min-height: 100vh; position: relative;
        }
        body.page-cookies::before{
            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-image:
                linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4) 100%),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff7e5f;stop-opacity:1' /%3E%3Cstop offset='25%25' style='stop-color:%23feb47b;stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:%23ff6b6b;stop-opacity:1' /%3E%3Cstop offset='75%25' style='stop-color:%234ecdc4;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%2345b7d1;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='400' fill='url(%23sky)'/%3E%3Cg fill='%23000' opacity='0.8'%3E%3Crect x='0' y='250' width='40' height='150'/%3E%3Crect x='50' y='200' width='35' height='200'/%3E%3Crect x='100' y='180' width='30' height='220'/%3E%3Crect x='150' y='220' width='25' height='180'/%3E%3Crect x='200' y='160' width='40' height='240'/%3E%3Crect x='260' y='190' width='30' height='210'/%3E%3Crect x='310' y='170' width='35' height='230'/%3E%3Crect x='360' y='200' width='25' height='200'/%3E%3Crect x='400' y='150' width='45' height='250'/%3E%3Crect x='460' y='180' width='30' height='220'/%3E%3Crect x='510' y='160' width='35' height='240'/%3E%3Crect x='560' y='190' width='25' height='210'/%3E%3Crect x='600' y='170' width='40' height='230'/%3E%3Crect x='660' y='200' width='30' height='200'/%3E%3Crect x='710' y='180' width='35' height='220'/%3E%3Crect x='760' y='160' width='25' height='240'/%3E%3Crect x='800' y='220' width='80' height='180'/%3E%3Crect x='820' y='200' width='15' height='200'/%3E%3Crect x='840' y='180' width='15' height='220'/%3E%3Crect x='860' y='200' width='15' height='200'/%3E%3Crect x='880' y='180' width='15' height='220'/%3E%3C/g%3E%3C/svg%3E");
            background-size: cover; background-position: bottom center; background-repeat: no-repeat; z-index: -1;
        }
        body.page-cookies .cookies-container-css{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        body.page-cookies .cookies-header-css{ background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 1rem 0; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 100; }
        body.page-cookies .cookies-header-content-css{ display: flex; justify-content: space-between; align-items: center; }
        body.page-cookies .cookies-logo-css{ font-size: 2rem; font-weight: 700; color: #667eea; text-decoration: none; }
        body.page-cookies .cookies-nav-links-css{ display: flex; list-style: none; gap: 2rem; }
        body.page-cookies .cookies-nav-links-css a{ text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s ease; }
        body.page-cookies .cookies-nav-links-css a:hover{ color: #667eea; }
        body.page-cookies .cookies-air-quality-link-css{ background: linear-gradient(135deg, #FFD750, #F0BE3C); color: #333 !important; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
        body.page-cookies .cookies-air-quality-link-css:hover{ background: linear-gradient(135deg, #F0BE3C, #FFD750); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); color: #333 !important; }
        body.page-cookies .cookies-mobile-menu-toggle-css{ display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; }
        body.page-cookies .cookies-mobile-menu-toggle-css span{ width: 25px; height: 3px; background: #333; margin: 3px 0; transition: 0.3s; border-radius: 2px; }
        body.page-cookies .cookies-mobile-menu-toggle-css.cookies-is-active-css span:nth-child(1){ transform: rotate(-45deg) translate(-5px, 6px); }
        body.page-cookies .cookies-mobile-menu-toggle-css.cookies-is-active-css span:nth-child(2){ opacity: 0; }
        body.page-cookies .cookies-mobile-menu-toggle-css.cookies-is-active-css span:nth-child(3){ transform: rotate(45deg) translate(-5px, -6px); }
        body.page-cookies .cookies-mobile-nav-css{ display: block; position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); border-right: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1); z-index: 1000; transform: translateX(-100%); transition: transform 0.3s ease-in-out; padding-top: 80px; }
        body.page-cookies .cookies-mobile-nav-css.cookies-is-active-css{ transform: translateX(0); }
        body.page-cookies .cookies-mobile-nav-backdrop-css{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; pointer-events: none; }
        body.page-cookies .cookies-mobile-nav-backdrop-css.cookies-is-active-css{ opacity: 1; visibility: visible; pointer-events: auto; }
        body.page-cookies .cookies-mobile-nav-css ul{ list-style: none; padding: 1rem 0; margin: 0; }
        body.page-cookies .cookies-mobile-nav-css li{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
        body.page-cookies .cookies-mobile-nav-css li:last-child{ border-bottom: none; }
        body.page-cookies .cookies-mobile-nav-css a{ display: block; padding: 1rem 2rem; text-decoration: none; color: #333; font-weight: 500; transition: all 0.3s ease; }
        body.page-cookies .cookies-mobile-nav-css a:hover{ background: rgba(102, 126, 234, 0.1); color: #667eea; }
        body.page-cookies .cookies-mobile-nav-css .cookies-air-quality-link-css{ background: linear-gradient(135deg, #FFD750, #F0BE3C); color: #333 !important; margin: 0.5rem 1rem; border-radius: 20px; font-weight: 600; text-align: center; }
        body.page-cookies .cookies-mobile-nav-css .cookies-air-quality-link-css:hover{ background: linear-gradient(135deg, #F0BE3C, #FFD750); color: #333 !important; }
        body.page-cookies .cookies-hero-css{ padding: 4rem 0; text-align: center; color: white; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); }
        body.page-cookies .cookies-heading1-css{ font-size: 3.0rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7); }
        body.page-cookies .cookies-main-content-css{ background: white; padding: 3rem 0; }
        body.page-cookies .cookies-body-css{ max-width: 900px; margin: 0 auto; }
        body.page-cookies .cookies-body-css h2{ color: #667eea; margin: 2rem 0 1rem; font-size: 1.8rem; }
        body.page-cookies .cookies-body-css p{ color: #555; margin-bottom: 1rem; }
        body.page-cookies .cookies-body-css ul{ margin: 0 0 1rem 1.2rem; }
        body.page-cookies .cookies-body-css li{ margin-bottom: 0.5rem; }
        @media (max-width: 768px) {body.page-cookies .cookies-nav-links-css{ display: none; }body.page-cookies .cookies-mobile-menu-toggle-css{ display: flex; }body.page-cookies .cookies-heading1-css{ font-size: 2.2rem; }}
    



        body.page-cookies .cookies-body2-css{
            background: #f8f9fa;
            padding: 3rem 0;
            text-align: center;
        }

        body.page-cookies .cookies-email-link-css{
            color: #667eea;
            font-weight: 600;
            text-decoration: none;
        }

        body.page-cookies .cookies-footer-css{
            background: #ffffff;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            padding: 1rem 0;
            text-align: center;
        }

        body.page-cookies .cookies-footer-inner-css{
            font-size: 0.95rem;
        }

        body.page-cookies .cookies-footer-link-css{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            margin-right: 1rem;
        }

        body.page-cookies .cookies-footer-note-css{
            margin-top: 1rem;
            color: #666;
        }
/* ---------- cookies page CSS end ---------- */

/* ---------- sitemap page CSS start ---------- */


        body.page-sitemap, body.page-sitemap *{ margin: 0; padding: 0; box-sizing: border-box; }
        body.page-sitemap{
            font-family: "Inter", sans-serif; line-height: 1.6; color: #333;
            background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 25%, #ff6b6b 50%, #4ecdc4 75%, #45b7d1 100%);
            background-attachment: fixed; min-height: 100vh; position: relative;
        }
        body.page-sitemap::before{
            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-image:
                linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4) 100%),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff7e5f;stop-opacity:1' /%3E%3Cstop offset='25%25' style='stop-color:%23feb47b;stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:%23ff6b6b;stop-opacity:1' /%3E%3Cstop offset='75%25' style='stop-color:%234ecdc4;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%2345b7d1;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='400' fill='url(%23sky)'/%3E%3Cg fill='%23000' opacity='0.8'%3E%3Crect x='0' y='250' width='40' height='150'/%3E%3Crect x='50' y='200' width='35' height='200'/%3E%3Crect x='100' y='180' width='30' height='220'/%3E%3Crect x='150' y='220' width='25' height='180'/%3E%3Crect x='200' y='160' width='40' height='240'/%3E%3Crect x='260' y='190' width='30' height='210'/%3E%3Crect x='310' y='170' width='35' height='230'/%3E%3Crect x='360' y='200' width='25' height='200'/%3E%3Crect x='400' y='150' width='45' height='250'/%3E%3Crect x='460' y='180' width='30' height='220'/%3E%3Crect x='510' y='160' width='35' height='240'/%3E%3Crect x='560' y='190' width='25' height='210'/%3E%3Crect x='600' y='170' width='40' height='230'/%3E%3Crect x='660' y='200' width='30' height='200'/%3E%3Crect x='710' y='180' width='35' height='220'/%3E%3Crect x='760' y='160' width='25' height='240'/%3E%3Crect x='800' y='220' width='80' height='180'/%3E%3Crect x='820' y='200' width='15' height='200'/%3E%3Crect x='840' y='180' width='15' height='220'/%3E%3Crect x='860' y='200' width='15' height='200'/%3E%3Crect x='880' y='180' width='15' height='220'/%3E%3C/g%3E%3C/svg%3E");
            background-size: cover; background-position: bottom center; background-repeat: no-repeat; z-index: -1;
        }
        body.page-sitemap .sitemap-container-css{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        body.page-sitemap .sitemap-header-css{ background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 1rem 0; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 100; }
        body.page-sitemap .sitemap-header-content-css{ display: flex; justify-content: space-between; align-items: center; }
        body.page-sitemap .sitemap-logo-css{ font-size: 2rem; font-weight: 700; color: #667eea; text-decoration: none; }
        body.page-sitemap .sitemap-nav-links-css{ display: flex; list-style: none; gap: 2rem; }
        body.page-sitemap .sitemap-nav-links-css a{ text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s ease; }
        body.page-sitemap .sitemap-nav-links-css a:hover{ color: #667eea; }
        body.page-sitemap .sitemap-mobile-menu-toggle-css{ display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; }
        body.page-sitemap .sitemap-mobile-menu-toggle-css span{ width: 25px; height: 3px; background: #333; margin: 3px 0; transition: 0.3s; border-radius: 2px; }
        body.page-sitemap .sitemap-mobile-menu-toggle-css.sitemap-is-active-css span:nth-child(1){ transform: rotate(-45deg) translate(-5px, 6px); }
        body.page-sitemap .sitemap-mobile-menu-toggle-css.sitemap-is-active-css span:nth-child(2){ opacity: 0; }
        body.page-sitemap .sitemap-mobile-menu-toggle-css.sitemap-is-active-css span:nth-child(3){ transform: rotate(45deg) translate(-5px, -6px); }
        body.page-sitemap .sitemap-mobile-nav-css{ display: block; position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); border-right: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1); z-index: 1000; transform: translateX(-100%); transition: transform 0.3s ease-in-out; padding-top: 80px; }
        body.page-sitemap .sitemap-mobile-nav-css.sitemap-is-active-css{ transform: translateX(0); }
        body.page-sitemap .sitemap-mobile-nav-backdrop-css{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; pointer-events: none; }
        body.page-sitemap .sitemap-mobile-nav-backdrop-css.sitemap-is-active-css{ opacity: 1; visibility: visible; pointer-events: auto; }
        body.page-sitemap .sitemap-mobile-nav-css ul{ list-style: none; padding: 1rem 0; margin: 0; }
        body.page-sitemap .sitemap-mobile-nav-css li{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
        body.page-sitemap .sitemap-mobile-nav-css li:last-child{ border-bottom: none; }
        body.page-sitemap .sitemap-mobile-nav-css a{ display: block; padding: 1rem 2rem; text-decoration: none; color: #333; font-weight: 500; transition: all 0.3s ease; }
        body.page-sitemap .sitemap-mobile-nav-css a:hover{ background: rgba(102, 126, 234, 0.1); color: #667eea; }
        body.page-sitemap .sitemap-hero-css{ padding: 4rem 0; text-align: center; color: white; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); }
        body.page-sitemap .sitemap-heading1-css{ font-size: 3.0rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7); }
        body.page-sitemap .sitemap-main-content-css{ background: white; padding: 3rem 0; }
        body.page-sitemap .sitemap-body-css{ max-width: 900px; margin: 0 auto; }
        body.page-sitemap .sitemap-body-css h2{ color: #667eea; margin: 2rem 0 1rem; font-size: 1.8rem; border-bottom: 2px solid #667eea; padding-bottom: 0.5rem; }
        body.page-sitemap .sitemap-body-css h3{ color: #333; margin: 1.5rem 0 1rem; font-size: 1.4rem; }
        body.page-sitemap .sitemap-body-css p{ color: #555; margin-bottom: 1rem; }
        body.page-sitemap .sitemap-body-css ul{ margin: 0 0 1rem 1.2rem; }
        body.page-sitemap .sitemap-body-css li{ margin-bottom: 0.5rem; }
        body.page-sitemap .sitemap-body-css a{ color: #667eea; text-decoration: none; font-weight: 500; transition: color 0.3s ease; }
        body.page-sitemap .sitemap-body-css a:hover{ color: #4a5bb8; text-decoration: underline; }
        body.page-sitemap .sitemap-section-css{ margin-bottom: 3rem; }
        body.page-sitemap .sitemap-section-css:last-child{ margin-bottom: 0; }
        body.page-sitemap .sitemap-breadcrumb-css{ background: rgba(255, 255, 255, 0.9); padding: 1rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
        body.page-sitemap .sitemap-breadcrumb-css a{ color: #667eea; text-decoration: none; font-weight: 500; }
        body.page-sitemap .sitemap-breadcrumb-css a:hover{ text-decoration: underline; }
        body.page-sitemap .sitemap-breadcrumb-css span{ color: #666; margin: 0 0.5rem; }
        @media (max-width: 768px) {body.page-sitemap .sitemap-nav-links-css{ display: none; }body.page-sitemap .sitemap-mobile-menu-toggle-css{ display: flex; }body.page-sitemap .sitemap-heading1-css{ font-size: 2.2rem; }body.page-sitemap .sitemap-body-css h2{ font-size: 1.5rem; }body.page-sitemap .sitemap-body-css h3{ font-size: 1.2rem; }}
    



        body.page-sitemap .sitemap-body2-css{
            background: #f8f9fa;
            padding: 3rem 0;
            text-align: center;
        }

        body.page-sitemap .sitemap-email-link-css{
            color: #667eea;
            font-weight: 600;
            text-decoration: none;
        }

        body.page-sitemap .sitemap-footer-css{
            background: #ffffff;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            padding: 1rem 0;
            text-align: center;
        }

        body.page-sitemap .sitemap-footer-inner-css{
            font-size: 0.95rem;
        }

        body.page-sitemap .sitemap-footer-link-css{
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            margin-right: 1rem;
        }

        body.page-sitemap .sitemap-footer-note-css{
            margin-top: 1rem;
            color: #666;
        }
/* ---------- sitemap page CSS end ---------- */