body { 
      font-family: theme('fontFamily.body'); 
      background-color: theme('colors.bgLight'); 
      color: theme('colors.textBody'); 
      /* Add subtle repeating background pattern for depth with colors */
      background-image: radial-gradient(circle, theme('colors.vibrantYellow') 1px, transparent 1px);
      background-size: 20px 20px;
      overflow-x: hidden; /* Prevent horizontal scroll from subtle animations */
    }
    h1 { font-family: theme('fontFamily.title'); }
    h2, h3 { font-family: theme('fontFamily.heading'); }
    
    /* Custom button styles with more colors */
    .btn-primary {
      background: linear-gradient(to right, theme('colors.primary'), theme('colors.vibrantPurple'));
      color: white;
      transition: all 0.2s ease-in-out;
      box-shadow: theme('boxShadow.colorful-glow');
    }
    .btn-primary:hover {
      background: linear-gradient(to right, theme('colors.primaryDark'), theme('colors.vibrantPink'));
      box-shadow: 0 8px 15px rgba(theme('colors.primaryDark'), 0.3), 0 0 20px rgba(theme('colors.primaryDark'), 0.2) inset;
      transform: translateY(-2px); /* Slight lift */
    }
    .btn-outline {
      border: 2px solid theme('colors.accent');
      color: theme('colors.accent');
      transition: all 0.2s ease-in-out;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
    .btn-outline:hover {
      background: linear-gradient(to right, theme('colors.accent'), theme('colors.vibrantYellow'));
      color: white;
      box-shadow: 0 8px 15px rgba(theme('colors.accent'), 0.2), 0 0 20px rgba(theme('colors.accent'), 0.1) inset;
      transform: translateY(-2px); /* Slight lift */
    }

    /* Card 3D lift effect on hover with colorful shadows */
    .card-3d-lift {
        transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
        transform-style: preserve-3d; /* Enable 3D transforms on children */
    }
    .card-3d-lift:hover {
        transform: translateY(-8px) translateZ(20px) rotateX(2deg); /* Lift and subtle rotation */
        box-shadow: 0 15px 30px rgba(255, 140, 0, 0.25); /* Colorful shadow */
    }

    /* Subtle image hover effect for depth with color */
    .image-3d-hover:hover {
        transform: scale(1.02) translateZ(10px);
        box-shadow: 0 10px 25px rgba(239, 68, 68, 0.2); /* Reddish glow */
    }

    /* Generic section background with subtle 3D and colorful gradient */
    .section-bg-3d {
      background: linear-gradient(to bottom right, theme('colors.bgCard'), theme('colors.vibrantGreen') 0.1);
      border-radius: theme('borderRadius.3xl');
      box-shadow: theme('boxShadow.3d-md');
      position: relative;
      overflow: hidden; /* To contain shadows */
    }
    /* Add a subtle pseudo-element for perceived depth with color */
    .section-bg-3d::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 10% 10%, rgba(255, 159, 64, 0.2) 0%, transparent 50%);
        pointer-events: none;
        z-index: 1;
    }

    /* Enhanced Navigation styles for super attractiveness */
    .nav-link-3d {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem; /* Increased padding */
        transition: all 0.3s ease-out;
        transform-style: preserve-3d;
        z-index: 2;
        border-radius: theme('borderRadius.lg');
        background: linear-gradient(to right, theme('colors.vibrantPurple'), theme('colors.vibrantPink'));
        color: theme('colors.textHeading') !important;
        box-shadow: theme('boxShadow.nav-glow');
    }
    .nav-link-3d:hover {
        color: theme('colors.vibrantYellow') !important;
        transform: translateY(-3px) translateZ(10px) scale(1.05);
        box-shadow: 0 5px 15px rgba(236, 72, 153, 0.5);
        background: linear-gradient(to right, theme('colors.vibrantPink'), theme('colors.vibrantRed'));
    }
    .nav-link-3d.active {
        transform: translateY(2px) translateZ(-10px);
        box-shadow: theme('boxShadow.nav-active');
        color: theme('colors.vibrantGreen') !important;
        background: linear-gradient(to right, theme('colors.vibrantGreen'), theme('colors.vibrantBlue'));
    }
    /* Mobile nav links enhanced */
    .mobile-nav-link-3d {
        padding: 0.5rem 1rem;
        border-radius: theme('borderRadius.full');
        transition: all 0.3s ease-out;
        box-shadow: theme('boxShadow.nav-glow');
        background: linear-gradient(to right, theme('colors.vibrantPurple'), theme('colors.vibrantPink'));
        color: theme('colors.textHeading') !important;
    }
    .mobile-nav-link-3d:hover {
        color: theme('colors.vibrantYellow') !important;
        transform: translateY(-3px) scale(1.1);
        background: linear-gradient(to right, theme('colors.vibrantPink'), theme('colors.vibrantRed'));
    }

    /* Custom styles for Heroicons with colors */
    .heroicon {
      display: inline-block;
      width: 64px; /* Equivalent to h-16 w-16 */
      height: 64px; /* Equivalent to h-16 w-16 */
      stroke-width: 1.5; /* Adjust stroke thickness */
      stroke: currentColor; /* Inherit color from parent */
      fill: none; /* No fill by default */
    }

    /* Typewriter effect for a welcoming message with colorful cursor */
    .typewriter-text {
      overflow: hidden; /* Ensures the content is not revealed until the animation */
      border-right: .15em solid theme('colors.vibrantYellow'); /* The typewriter cursor */
      white-space: nowrap; /* Keeps the content on a single line */
      margin: 0 auto; /* Gives that scrolling effect as the typing happens */
      animation: 
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
    }

    /* The typing animation */
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }

    /* The typewriter cursor effect with color change */
    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: theme('colors.vibrantRed'); }
    }

    /* Background particles/dots effect with colorful gradients */
    .particles-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      background-image: radial-gradient(circle, rgba(255, 159, 64, 0.4) 1px, transparent 1px);
      background-size: 40px 40px;
      animation: panBackground 60s linear infinite; /* Slow pan for subtle movement */
    }

    @keyframes panBackground {
      0% { background-position: 0% 0%; }
      100% { background-position: 100% 100%; }
    }

    /* New style for colorful text gradients */
    .text-gradient-red {
      background: linear-gradient(to right, theme('colors.vibrantRed'), theme('colors.vibrantYellow'));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .text-gradient-green {
      background: linear-gradient(to right, theme('colors.vibrantGreen'), theme('colors.vibrantBlue'));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .text-gradient-purple {
      background: linear-gradient(to right, theme('colors.vibrantPurple'), theme('colors.vibrantPink'));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .hero-section-padding-bottom {
      padding-bottom: 200px;
    }
    
    @media (min-width: 1024px) {
      .lg\:ml-\[20\%\] {
          margin-left: 20%;
      }
    }