:root {
    --dark-bg: #030d05;
 
    --primary: #c1ff72; /* Lime Color */
    --text-white: #ffffff;
    --text-gray: #a0a0a0;   
    --main-gradient: linear-gradient(135deg, #00D2FF 0%, #3A7BD5 100%);
    --accent: #00D2FF;
    --bg-dark: #020b15;
    --card-bg: #051221;
    --accent: #00b4ff;
          
       
}
html {
    scroll-behavior: smooth;
     overflow-x: hidden; 
    scroll-padding-top: 100px; 
}


[data-aos] {
    pointer-events: none;
}
.aos-animate {
    pointer-events: auto;
}
* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-white);
    overflow-x: hidden;
    
}

/* Navbar */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 25px 8%; position: sticky; top: 0; z-index: 1000;
    background: rgba(3, 13, 5, 0.9); backdrop-filter: blur(10px);
}
    
        
.btn-accent {
    background: var(--main-gradient);
    border: none;
    color: white;
}

/* 3. Text par Gradient (Heading ko chamkane ke liye) */
.hero-title span {
    background: var(--main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

        /* --- 1. Animated Border Card CSS --- */
        .ani-card {
            position: relative;
            background: var(--card-bg);
            border-radius: 20px;
            padding: 40px;
            overflow: hidden; /* Ghoomta hua border chupane ke liye */
            z-index: 1;
            height: 100%;
            border: 1px solid rgba(255,255,255,0.05);
            transition: transform 0.3s ease;
        }

        .ani-card:hover { transform: translateY(-10px); }

        .ani-card::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
           background: conic-gradient(from 0deg, transparent, var(--accent), var(--accent), transparent);
            top: -25%;
            left: -25%;
            animation: rotateBorder 4s linear infinite;
            z-index: -2;
            display: none; /* Sirf hover par dikhayenge */
        }

        .ani-card::before { display: block; }

        /* Card ka inner background jo border ke upar rahega */
        .ani-card::after {
            content: '';
            position: absolute;
            inset: 2px; /* Border thickness */
            background: var(--card-bg);
            border-radius: 18px;
            z-index: -1;
        }

        @keyframes rotateBorder {
            100% { transform: rotate(360deg); }
        }

        /* Navbar Custom */
        .navbar { background: rgba(2, 11, 21, 0.9); backdrop-filter: blur(10px); }
        .nav-link { color: white !important; font-weight: 500; margin: 0 10px; transition: 0.3s; }
        .nav-link:hover { color: var(--accent) !important; }

     .nav-link .active { color: var(--accent) !important; }

     
.hero-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #0f172a; /* Dark theme background */
    color: white;
}

#bubble-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.container {
    position: relative;
    z-index: 1;
}

.greeting {
    font-size: 1.5rem;
    color: #38bdf8;
    margin-bottom: 10px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
}

.typed-text {
    color: #38bdf8;
    text-decoration: underline;
}

/* Floating Image Animation */
.hero-img {
    max-width: 450px;
    width: 100%;
    filter: drop-shadow(0 10px 20px rgba(56, 189, 248, 0.3));
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Glow effect behind image */
.hero-img-skeleton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: rgba(56, 189, 248, 0.2);
    filter: blur(80px);
    border-radius: 50%;
    z-index: -1;
}
.navbar-nav .nav-link.active {
    color: #00b4ff !important;
}
/* Navbar Toggler Custom Color */
.custom-toggler.navbar-toggler {
    border-color: #0dcaf0; /* Theme info color */
}

.custom-toggler .navbar-toggler-icon {
    /* Isse hamburger lines ka color change ho jayega */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(13, 202, 240, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* Navbar background for visibility (optional) */
.navbar {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .text-section { text-align: center; margin-bottom: 50px; }
    .hero-img { max-width: 300px; }
}
        .hero-section { padding: 0px 0; text-align: center; background: radial-gradient(circle at center, #0a1f3d 0%, var(--bg-dark) 70%); }
        .hero-title { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 800; }
        .hero-title span { color: var(--accent); }
        .hero-img { max-width: 450px; filter: drop-shadow(0 0 30px rgba(0, 180, 255, 0.2)); }

        /* --- 2. About Section with Bubbles CSS --- */
    
.cursor-follower {
    position: fixed;
    width: 20px;
    height: 20px;
    background: var(--main-gradient);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    /* mix-blend-mode: difference; */
    transition: transform 0.1s ease-out;
    display: none; 
}

/* --- Liquid Morphing Image Shape & Border --- */
.morph-image-wrap {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 450px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.progress-bar {
    transition: width 1.5s ease-in-out;
}
#skill-section {
    min-height: 400px; /* Section ko pehle se hi thodi height de dein taake jump na kare */
}
.image-inner-box {
    position: relative;
    width: 90%;
    height: 90%;
    overflow: hidden;
    /* Yeh hai Liquid Shape */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    border: 2px solid rgba(0, 180, 255, 0.3);
}

.image-inner-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Morphing Border (Peeche wala glowing element) */
.morph-border {
    position: absolute;
    width: 105%;
    height: 105%;
    background: linear-gradient(45deg, var(--accent), #00ffcc, var(--accent));
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    z-index: 1;
    filter: blur(10px);
    opacity: 0.5;
    animation: morphAnim 8s ease-in-out infinite;
    transition: all 0.6s ease;
}

/* Hover Effects */
.morph-image-wrap:hover .image-inner-box {
    border-radius: 40% 60% 70% 30% / 40% 40% 60% 60%;
    box-shadow: 0 0 30px rgba(0, 180, 255, 0.5);
}

.morph-image-wrap:hover .morph-border {
    border-radius: 40% 60% 70% 30% / 40% 40% 60% 60%;
    opacity: 0.8;
    filter: blur(20px);
}

.morph-image-wrap:hover img {
    transform: scale(1.1);
}

/* Animation for Liquid Border */
@keyframes morphAnim {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* --- Text Reveal Animation --- */
.reveal-text {
    overflow: hidden;
    display: block;
}
.reveal-text span {
    display: inline-block;
    animation: revealUp 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    transform: translateY(100%);
}

@keyframes revealUp {
    to { transform: translateY(0); }
}
        #about-section {
            position: relative;
            padding: 100px 0;
            overflow: hidden;
        }
        #bubble-canvas {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 0;
            pointer-events: none;
        }
        .about-content { position: relative; z-index: 2; }

        /* Project Tabs */
        .filter-btn {
            background: transparent; color: white; border: 1px solid var(--accent);
            padding: 8px 25px; border-radius: 50px; margin: 5px; transition: 0.3s;
        }
        .filter-btn.active, .filter-btn:hover { background: var(--accent); color: black; font-weight: 700; }
        .portfolio-item { transition: 0.5s; }

        /* Portfolio Image */
     
.port-img-box {
    height: 250px; /* Aap height apni marzi se kam ya zyada kar sakte hain */
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    background-color: #f8f9fa;
}

.port-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Isse image stretch nahi hogi aur box fit ayegi */
    transition: transform 0.3s ease;
}

.portfolio-item:hover img {
    transform: scale(1.1); /* Hover effect */
}

.portfolio-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.portfolio-link:hover h5 {
    color: #0dcaf0; /* Hover par title ka color change hoga */
}
/* Contact Section Custom Styles */
#contact .ani-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

#contact .info-item {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

#contact .info-item i {
    font-size: 20px;
    color: #0dcaf0; /* Info Color */
    background: rgba(13, 202, 240, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 15px;
}

#contact .info-item h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
}

#contact .info-item p, #contact .info-item a {
    color: #adb5bd;
    margin: 0;
    text-decoration: none;
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    border-radius: 15px;
    margin-top: 20px;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

/* Form focus effect */
#contact .form-control:focus {
    background-color: #1a1d20 !important;
    border: 1px solid #0dcaf0 !important;
    box-shadow: none;
    color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
    .hero, .about, .contact-box { flex-direction: column; text-align: center; }
    .hero-text h1 { font-size: 45px; }
    .hero-img-container { order: -1; }
    .blob-shape { width: 300px; height: 320px; margin: 0 auto; }
}