/##=====================================================================================#/
/#                                DESKTOP WIDGETS Layout                                #/
/#======================================================================================#/
/* Main container */
#information-widgets {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Top row container */
#widgets-wrap {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Logo */
.information-widget-logo {
    width: 250px !important;
    margin-left: -40px !important;  /* Increased left shift */
}

.information-widget-logo img {
    width: 250px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Center metrics */
.information-widget-glances {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    margin-left: -70px !important;  /* Shift metrics left */
}

/* Bottom row */
#information-widgets-right {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Search - multiple selectors to increase specificity */
.information-widget-search,
.information-widget-search.information-widget-form,
form.information-widget-search,
#information-widgets-right .information-widget-search {
    width: 350px !important;
    max-width: 350px !important;
    flex: 0 0 350px !important;
}

.information-widget-search input,
.information-widget-search .flex-col {
    width: 350px !important;
    max-width: 350px !important;
}

.information-widget-search input {
    height: 2rem !important;
    border-radius: 0.375rem !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/##=====================================================================================#/
/#                                MOBILE WIDGETS Layout                                 #/
/#======================================================================================#/
#information-widgets {
    @apply grid grid-cols-1 md:grid-cols-[auto_1fr] w-full m-0 p-0;
}
#widgets-wrap {
    @apply grid grid-cols-1 md:grid-cols-[auto_1fr] gap-2;
}
.information-widget-logo {
    @apply m-2; / Add thin margins /
}
.information-widget-logo img {
    @apply w-40 md:w-80; / Increase logo size /
}
.information-widget-glances {
    @apply m-0 p-0 gap-2;
}
#information-widgets-right {
    @apply flex flex-col md:flex-row w-full gap-2;
}
#information-widgets-right > div:first-child {
    @apply flex flex-col md:flex-row justify-between items-center w-full order-first;
}
.information-widget-search {
    @apply w-full;
}
.information-widget-search input {
    @apply w-full;
}
.widget-container {
    @apply mb-2;
}
.information-widget-resource {
    @apply mb-1;
}
.my-4, .py-4 {
    @apply m-0 p-0;
}

/##=====================================================================================#/
/#                            ARTIFACT Glass Effect CODE                                #/
/#======================================================================================#/

/* Apply glass effect to cards */
.card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: all 0.3s ease !important;
}


/* Search bar glass effect */
.information-widget-search input {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Hover effects */
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow), 0 10px 40px 0 rgba(31, 38, 135, 0.2) !important;
}

/* Service icons container */
.services-group {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}



import React, { useEffect, useState } from 'react';

const CometBackground = () => {
  const [comets, setComets] = useState([]);

  useEffect(() => {
    const createComet = () => {
      const startX = Math.random() * window.innerWidth;
      return {
        id: Math.random(),
        startX,
        startY: -20,
        speed: 2 + Math.random() * 3,
        size: 2 + Math.random() * 3,
        opacity: 0.3 + Math.random() * 0.5
      };
    };

    const animateComets = () => {
      setComets(prevComets => {
        // Remove comets that have moved off screen
        const filtered = prevComets.filter(comet => comet.startY < window.innerHeight);
        
        // Add new comets randomly
        if (Math.random() < 0.1 && filtered.length < 20) {
          filtered.push(createComet());
        }

        // Update positions
        return filtered.map(comet => ({
          ...comet,
          startY: comet.startY + comet.speed
        }));
      });
    };

    const intervalId = setInterval(animateComets, 50);
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div className="fixed inset-0 overflow-hidden pointer-events-none bg-gradient-to-b from-gray-900 to-gray-800">
      {comets.map(comet => (
        <div
          key={comet.id}
          className="absolute"
          style={{
            left: `${comet.startX}px`,
            top: `${comet.startY}px`,
            transform: 'rotate(45deg)',
          }}
        >
          <div
            className="relative"
            style={{
              width: `${comet.size * 3}px`,
              height: `${comet.size * 40}px`,
            }}
          >
            {/* Comet head */}
            <div
              className="absolute top-0 rounded-full bg-blue-400"
              style={{
                width: `${comet.size}px`,
                height: `${comet.size}px`,
                opacity: comet.opacity,
                boxShadow: `0 0 ${comet.size * 2}px ${comet.size}px rgba(96, 165, 250, 0.5)`
              }}
            />
            {/* Comet tail */}
            <div
              className="absolute top-0 w-full bg-gradient-to-b from-blue-400"
              style={{
                height: '100%',
                opacity: comet.opacity * 0.3
              }}
            />
          </div>
        </div>
      ))}
    </div>
  );
};

export default CometBackground;