@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .portfolio-item:hover .portfolio-image {
    filter: blur(8px) brightness(0.5);
    transform: scale(1.1);
  }

  .portfolio-item:hover .overlay {
    opacity: 1;
  }
}

.display-none {
    @apply hidden;
 }
 /* Dropdown hidden by default */
#dropdown {
    display: none;
}

/* Show dropdown when parent is hovered */
li:hover #dropdown {
    display: block;
}

/* Additional styles for better presentation */
.relative {
    position: relative;
}

@keyframes beat {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }

  .beat-animation {
    animation: beat 1s infinite;
    animation-timing-function: ease-in-out;
  }

  body{
    scroll-behavior: smooth;
  }
 
        @keyframes beat {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2);
            }
        }

        .beat-animation {
            animation: beat 1s infinite;
            animation-timing-function: ease-in-out;
        }

        .dark .filter {
            border: 1.5px solid hsl(275, 89%, 48%, .5);
        }

        .dark .filter:hover {
            border: 1.5px solid hsla(275, 92%, 48%, 0.889);
            transform: scale(1.015);
        }

        .dark .pricing1 {
            box-shadow: 0 4px 6px -3px rgba(59, 130, 246);
        }

        .dark .pricing:hover {
            border: 1px solid #3b82f6;
        }

        .image:hover {
            transform: scale(1.1);
        }

        .dark .prt {
            border: 1px solid hsl(0, 0%, 87%, .2);
        }

        .dark .prt:hover {
            border-bottom: #3b82f6 1.5px solid;
        }

        .dark .work {
            box-shadow: 0 12px 12px -5px rgba(59, 130, 246);
        }

        .dark .work:hover {
            border: 1px solid #3b82f6;
        }

        .dark .bg-custom {
            background-image: url('./images/dark1.avif');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dark .bg-custom2 {
            background-image: url('./images/gradient-blue-background.avif');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dark .bg-custom3 {
            background-image: url('./images/bluewall.avif');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dark .bg-custom4 {
            background-image: url('./images/solid-navy-blue.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dark .bg-custom5 {
            background-image: url('./images/dark.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dark .bg-custom6 {
            background-image: url('./images/bg-desktop.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dark .bg-custom7 {
            background-image: url('./images/dark-green-blue-g.avif');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dark .bg-custom8 {
            background-image: url('./images/HD-wallpaper-plain-black-black.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dark .bg-custom9 {
            background-image: url('./images/black-background.avif');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dark .bg-custom10 {
            background-image: url('./images/background.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .dark .bg-custom11 {
            background-image: url('./images/dark-green-blue-g.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    

        .cta-button {
            background: linear-gradient(90deg, rgba(0, 128, 255, 1) 0%, rgba(127, 0, 255, 1) 100%);
            box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.39);
            transition: background .3s, box-shadow .3s;
        }

        .cta-button:hover {
            background: linear-gradient(90deg, rgba(0, 118, 255, 1) 0%, rgba(117, 0, 245, 1) 100%);
            box-shadow: 0 6px 20px 0 rgba(0, 118, 255, 0.45);
        }



        @media (min-width: 1024px) {
            .nav-link {
                position: relative;
            }

            .nav-link::after {
                content: '';
                display: block;
                width: 0;
                height: 2px;
                background: #7c3aed;
                transition: width .3s;
                position: absolute;
                bottom: -4px;
                left: 0;
            }

            .nav-link:hover::after {
                width: 100%;
            }

        }