*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.inter{
   font-family: "Inter", sans-serif; 
}
.bebas{
    font-family: "Bebas Neue", sans-serif;
}
.raleway{
    font-family: "Raleway", sans-serif;
}

/* navbar */
.glow-box {
  box-shadow: 0px 4px 22px 0px #4EFBFA;
}
.shadow-glow{
     box-shadow: 0px 4px 32px 0px rgba(0, 255, 254, 0.27);
}

.neon-cyan{
   color: #00FFFE; 
}
/* navbar and banner start*/
 /* Hero Section Container */
        .hero-section {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Overlay Gradient */
        .hero-overlay {
            background: linear-gradient(to right, rgba(2, 6, 23, 0.95) 0%, rgba(2, 6, 23, 0.85) 45%, rgba(2, 6, 23, 0.2) 100%);
        }

        /* Curved Underline Style */
        .curved-underline {
            position: relative;
            display: inline-block;
        }
        .curved-underline::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 100%;
            height: 8px;
            background: url("data:image/svg+xml,%3Csvg width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2C30 10 70 10 98 2' stroke='%2322d3ee' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom;
            background-size: 100% 100%;
        }

        /* Neon Button Style */
        .neon-btn {
            box-shadow: 0 0 15px #06b6d4;
            transition: all 0.3s ease;
        }
        .neon-btn:hover {
            box-shadow: 0 0 25px #22d3ee;
            transform: translateY(-2px);
        }

        /* Animations */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        .floating-img { animation: float 6s ease-in-out infinite; }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-text { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }

        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(100px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .animate-slide-in { opacity: 0; animation: slideInRight 1s ease-out forwards 0.5s; }

        /* Navbar Blur Effect */
        .nav-scrolled {
            background-color: rgba(2, 6, 23, 0.9);
            backdrop-filter: blur(12px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
            padding-top: 1rem !important;
            padding-bottom: 1rem !important;
        }
        #navbar { transition: all 0.4s ease; }

        /* Mobile Menu Transitions */
        .mobile-menu-overlay {
            transition: opacity 0.3s ease-in-out, visibility 0.3s;
        }
        .mobile-menu-content {
            transition: transform 0.3s ease-in-out;
        }
/* navbar and banner end */

 /* --- BORDER LOGIC START --- */
        
        .tech-grid {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .tech-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            transition: background-color 0.3s ease;
        }
        
        .tech-item:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }

        /* Responsive Border Removal Logic */
        
        /* Mobile (2 Columns): Every 2nd item has no right border */
        .tech-item:nth-child(2n) {
            border-right: none;
        }

        /* Desktop (4 Columns): Reset 2nd item border, remove 4th item border */
        @media (min-width: 768px) {
            .tech-item:nth-child(2n) {
                border-right: 1px solid rgba(255, 255, 255, 0.1); 
            }
            .tech-item:nth-child(4n) {
                border-right: none; 
            }
        }

        /* --- BORDER LOGIC END --- */

        .vue-color { color: #42b883; }
        .node-color { color: #6cc24a; } 
        .js-color { color: #f7df1e; }
        .show-less-bg { background-color: rgba(40, 5, 10, 0.5); }

 /*portolio  */
         dialog::backdrop {
            background: rgba(0, 0, 0, 0.9); /* Dark semi-transparent background */
            backdrop-filter: blur(4px); /* Optional blur effect */
        }
/* GROWTH */
  /* Background Grid Pattern */
        .bg-grid-pattern {
            background-image: 
                linear-gradient(to right, rgba(128, 0, 128, 0.2) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(128, 0, 128, 0.2) 1px, transparent 1px);
            background-size: 40px 40px;
            mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
        }
/* footer */
.text-neon {
    color: #00FFFE;
}