/* Modern Circular Preloader Styles */
        .ip_preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }

        .ip_preloader-content {
            text-align: center;
            max-width: 300px;
            width: 90%;
        }

        .ip_preloader-logo-container {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto 30px;
        }

        .ip_preloader-logo {
            width: 100%;
            height: 100%;
            object-fit: contain;
            animation: pulse 2s infinite ease-in-out;
            border-radius: 50%;
            box-shadow: 0 10px 30px rgba(34, 166, 30, 0.2);
            padding: 15px;
            background: white;
            border: 3px solid rgba(34, 166, 30, 0.1);
        }

        .ip_loading-circle {
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 3px solid transparent;
            border-top-color: #22A61E;
            border-radius: 50%;
            animation: spin 1.5s linear infinite;
        }

        .ip_loading-circle:nth-child(2) {
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            border-top-color: rgba(34, 166, 30, 0.5);
            animation: spinReverse 2s linear infinite;
        }

        .ip_loading-text {
            color: #22A61E;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 1px;
            margin-top: 20px;
            text-transform: uppercase;
            position: relative;
            display: inline-block;
        }

        .ip_loading-text::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #22A61E;
            transform: scaleX(0);
            transform-origin: right;
            animation: loadingLine 2s infinite ease-in-out;
        }

        /* Animations */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes spinReverse {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-360deg); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(0.95); opacity: 0.8; }
        }

        @keyframes loadingLine {
            0% { transform: scaleX(0); transform-origin: right; }
            50% { transform: scaleX(1); transform-origin: right; }
            51% { transform: scaleX(1); transform-origin: left; }
            100% { transform: scaleX(0); transform-origin: left; }
        }

        /* When page is loaded */
        .ip_preloader.loaded {
            opacity: 0;
            visibility: hidden;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .ip_preloader-logo-container {
                width: 120px;
                height: 120px;
            }
            
            .ip_loading-text {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .ip_preloader-logo-container {
                width: 100px;
                height: 100px;
            }
            
            .ip_loading-text {
                font-size: 12px;
            }
        }

/* scrollbar styles */
/* Modern Green Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #22A61E; /* Your brand green color */
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background: #1d8c1a; /* Slightly darker green on hover */
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #22A61E #f1f1f1;
}