/*
=================================
CSS Table of Contents
=================================
1.  CSS Variables (Theme Ki Settings)
2.  Reset & Buniyadi Styles
3.  Custom Cursor (Mouse Ka Pointer)
4.  Background Effects (Peeche Ke Effects)
5.  Navigation (Menu Bar)
6.  Hero Section (Top Ka Banner)
7.  Portfolio & Typography
8.  Project Showcase (Portfolio Gallery)
9.  MASTER RESPONSIVE GRID
10. Modals & Lightbox (Image Popup)
11. About Section
12. Contact Section
13. Testimonials (Customer Reviews)
14. Footers (Saare Versions)
15. Floating Elements (WhatsApp)
16. Reveal Animations (Scroll Par Animation)
17. General Media Queries (MOBILE VIEW KI SETTINGS)
    - Mobile Header Adjustments
    - Mobile Content Spacing
    - General Mobile Layout
=================================
*/

/* =================================
   1. CSS Variables (Theme Ki Settings)
   ================================= */

:root {
    /* Dark Mode Ke Rang (Default) */
    --bg-primary: #0a0a0f;
    --bg-secondary: #13131a;
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --accent-color: #6366f1;
    --accent-hover: #818cf8;
    
    /* Glass Effect Ki Variables */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.3);
    
    /* Chamak Wale Rang */
    --glow-1: rgba(99, 102, 241, 0.3);
    --glow-2: rgba(168, 85, 247, 0.3);
    --glow-3: rgba(236, 72, 153, 0.3);
    
    /* Fonts Ki Settings */
    --font-primary: 'Space Grotesk', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    
    /* Animation Ki Speed */
    --transition-smooth: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode Ke Liye Alag Styles */
body.light-mode {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --text-primary: #1a1a1f;
    --text-secondary: #6b7280;
    --accent-color: #6366f1;
    --accent-hover: #4f46e5;
    
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.1);
    
    --glow-1: rgba(99, 102, 241, 0.15);
    --glow-2: rgba(168, 85, 247, 0.15);
    --glow-3: rgba(236, 72, 153, 0.15);
}

/* =================================
   2. Reset & Buniyadi Styles
   ================================= */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* Page ko horizontal scroll hone se rokta hai */
}

body {
    font-family: var(--font-secondary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
    cursor: none; /* Custom cursor ke liye default cursor hide kiya hai */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

h1, h2, h3 {
    letter-spacing: -0.02em;
}

/* Container (Website Ka Main Layout) */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px; /* Desktop par header ko andar laane ke liye padding */
    position: relative;
    z-index: 1;
    width: 100%;
}

/* =================================
   3. Custom Cursor (Mouse Ka Pointer)
   ================================= */

.custom-cursor {
    width: 20px;
    height: 20px;
    background: rgba(99, 102, 241, 0.3);
    border: 2px solid #6366f1;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    transition: transform 0.15s ease-out, background 0.3s ease, width 0.3s ease, height 0.3s ease;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(2px);
}

.custom-cursor.cursor-hover {
    width: 60px;
    height: 60px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%) scale(1.2);
}

/* =================================
   4. Background Effects (Peeche Ke Effects)
   ================================= */

.noise-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E");
}

.bg-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0; /* Content ke peeche dikhega */
    will-change: transform;
    animation: float 20s ease-in-out infinite;
}

.glow-1 { width: 500px; height: 500px; background: var(--glow-1); top: 10%; left: -10%; }
.glow-2 { width: 400px; height: 400px; background: var(--glow-2); top: 50%; right: -5%; }
.glow-3 { width: 600px; height: 600px; background: var(--glow-3); bottom: 10%; left: 30%; }

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(50px, -50px) scale(1.1); }
    66% { transform: translate(-30px, 30px) scale(0.9); }
}

.glass-morph, .glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--glass-shadow);
    transition: var(--transition-smooth);
}

/* =================================
   5. Navigation (Menu Bar)
   ================================= */

.navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    padding: 15px 0;
    z-index: 1000;
    transition: var(--transition-smooth);
}

.navbar.scrolled {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    padding: 15px 0;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 2px;
    font-weight: bold;
    font-size: 22px;
    color: inherit;
    transition: all 0.3s ease;
    cursor: pointer;
}

.logo-link:hover {
    opacity: 0.8;
    filter: blur(0.5px);
}

.nav-logo-img {
    height: 29px;
    width: auto;
    object-fit: contain;
}

.logo {
    font-family: var(--font-primary);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -1px;
}

.nav-links {
    display: flex;
    gap: 50px;
    list-style: none;
}

.nav-link {
    font-size: 17px;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

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

.nav-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Theme Toggle (Dark/Light Mode Button) */
.theme-toggle {
    width: 45px; height: 45px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
}

.theme-toggle i {
    position: absolute;
    font-size: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dark-mode .theme-toggle .fa-moon { opacity: 1; transform: rotate(0deg); }
.dark-mode .theme-toggle .fa-sun { opacity: 0; transform: rotate(180deg); }
.light-mode .theme-toggle .fa-moon { opacity: 0; transform: rotate(-180deg); }
.light-mode .theme-toggle .fa-sun { opacity: 1; transform: rotate(0deg); }

.theme-toggle:hover {
    transform: scale(1.1);
    border-color: var(--accent-color);
}

.btn-hire {
    padding: 12px 28px;
    background: var(--accent-color);
    color: white;
    border-radius: 25px;
    font-weight: 600;
    font-size: 17px;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-hire:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

/* Mobile Menu Toggle (Hamburger Icon) */
.mobile-menu-toggle {
    display: none; /* Sirf mobile par dikhega */
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 30px; height: 2px;
    background: var(--text-primary);
    transition: var(--transition-smooth);
}

/* =================================
   6. Hero Section (Top Ka Banner)
   ================================= */
/* --- Desktop Settings --- */

.hero-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* Default state: No glow or very subtle border */
.glowing-box {
    position: relative;
    width: 380px;  /* Circle ka size barha ya ghata sakte hain */
    height: 380px;
    background: #13131a;
    border-radius:9%; /* Perfect Circle */
    overflow: hidden;
    transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    margin-right: 70px; /* Right se left shift karne ke liye */
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-img {
    width: 100%;
    height: 100%;
    border-radius: 0%;
    
    /* --- ASLI JADU YAHAN HAI --- */
    object-fit: cover; 
    
    /* Pehli value: Left/Right (50% matlab center)
       Dosri value: Top/Bottom (Isay 0% se 100% ke darmiyan change karen)
       Agar aap image ko "Niche" lana chahte hain taake sar pura nazar aaye, 
       to isay 0% ya 10% karke check karen.
    */
    object-position: 50% 4%; 
}

/* Hover par Glow effect */
.glowing-box:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.7);
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
    .hero-wrapper {
        flex-direction: column; /* Text upar, Image niche */
        text-align: center;
    }
    .glowing-box {
        width: 250px;
        height: 250px;
        margin: 20px auto 0; /* Mobile par top se 20px niche */
    }
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0 60px;
}

.hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.hero-title {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -3px;
}

.gradient-text {
    background: linear-gradient(135deg, var(--accent-color), #a855f7, #ec4899);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--text-secondary);
    margin-bottom: 50px;
    font-weight: 400;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: var(--glass-bg);
    border: 2px solid var(--accent-color);
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
}

.btn-primary:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.btn-primary i {
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* =================================
   7. Portfolio & Typography
   ================================= */

.portfolio-title-section {
    padding: 100px 0;
    position: relative;
}

.portfolio-title-container {
    position: relative;
    padding: 90px 60px;
    border-radius: 30px;
    overflow: visible;
}

.massive-title {
    font-family: var(--font-primary);
    font-size: clamp(4rem, 15vw, 12rem);
    font-weight: 900;
    text-align: center;
    letter-spacing: -5px;
    color: transparent;
    -webkit-text-stroke: 1.4px var(--accent-color);
    opacity: 0.3;
    line-height: 1;
    z-index: 2;
    background: linear-gradient(to right, #6366f1, #a855f7, #ec4899, #6366f1);
    background-size: 300% auto;
    background-clip: text;
    -webkit-background-clip: text;
    animation: gradientFlow 4s linear infinite;
}

@keyframes gradientFlow {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

.floating-cta {
    position: absolute;
    padding: 15px 30px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 40px var(--glass-shadow);
    animation: float-subtle 3s ease-in-out infinite;
}

.cta-top-right { top: -20px; right: -20px; animation-delay: 0s; }
.cta-bottom-left { bottom: -20px; left: -20px; animation-delay: 1.5s; }

.status-dot {
    width: 10px; height: 10px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

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

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

/* =================================
   8. Project Showcase (Portfolio Gallery)
   ================================= */

.project-showcase { padding: 100px 0; }

.section-header { text-align: center; margin-bottom: 60px; width: 100%; }

.section-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -2px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 12px 30px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
}

.filter-btn:hover, .filter-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: translateY(-2px);
}

.project-card {
    border-radius: 20px;
    overflow: hidden;
    transition: var(--transition-smooth);
    opacity: 1;
    transform: scale(1);
}

.project-card.hidden { display: none; }

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3);
}

.project-image {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 4/5;
}

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

.project-card:hover .project-image img { transform: scale(1.1); }

.project-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.project-card:hover .project-overlay { transform: translateY(0); }

.project-title {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: white;
}

.project-category {
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 500;
}

/* ==========================================
   9. MASTER RESPONSIVE GRID (Sabse Zaroori)
   ========================================== */
/* Project gallery ka layout alag alag screens ke liye */

/* 1. Desktops & Laptops (1025px se zyada) - 3 Columns */
@media (min-width: 1025px) {
    .project-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 40px;
    }
}

/* 2. Small Laptops & Tablets (769px - 1024px) - 2 Columns */
@media (max-width: 1024px) {
    .container { padding: 0 30px; }
    
    .project-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        padding: 0 20px;
        margin-top: 40px;
    }
    
    .project-card { max-width: 100%; }
    .massive-title { font-size: clamp(3rem, 12vw, 8rem); }
}

/* 3. Mobile Phones (768px se kam) - 1 Column */
@media (max-width: 768px) {
    .project-grid {
        display: grid;
        grid-template-columns: 1fr !important; /* MOBILE KE LIYE 1 COLUMN */
        gap: 25px !important;
    }
    .project-content { padding: 12px !important; }
    
    .project-title { font-size: 1.2rem !important; }
    
    .project-card:hover { transform: scale(1.02) !important; } /* Mobile pe halka hover effect */
}

/* 4. Chhote Phones (400px se kam) */
@media (max-width: 400px) {
    .project-grid { gap: 20px !important; }
    .project-title { font-size: 1rem !important; }
}

/* =================================
   10. Modals & Lightbox (Image Popup)
   ================================= */

.project-modal {
    display: none; /* Default me chupa hua */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(20px);
    z-index: 100000;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    padding: 40px;
}

.modal-content {
    position: relative;
    max-width: 1100px;
    width: 375px;
    margin: 0 auto;
    padding: 20px;
    max-height: 85vh;
    padding: 20px;
    border-radius: 30px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
    width: 100%;
}

.gallery-grid img, #galleryGrid img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-grid img:hover { transform: scale(1.05); }

/* Modal khulne par animation */
.project-modal.active #galleryGrid img {
    transform: scale(1);
    opacity: 1;
}

#modalTitle {
    color: white;
    margin-top: 25px;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(to right, #fff, var(--accent-color, #6366f1));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.close-modal {
    position: absolute;
    top: 20px; right: 20px;
    width: 45px; height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: white;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.close-modal:hover {
    background: #ff4d4d;
    transform: rotate(90deg);
}

/* =================================
   11. About Section
   ================================= */

.about-section { padding: 100px 0; }

.about-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px;
    border-radius: 30px;
    text-align: center;
    width: 100%;
}

.about-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 50px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.skill-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 30px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    transition: var(--transition-smooth);
}

.skill-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.skill-item i { font-size: 2.5rem; color: var(--accent-color); }
.skill-item span { font-weight: 600; font-size: 1rem; }

/* =================================
   12. Contact Section
   ================================= */

.contact-section { padding: 100px 0 120px; }

.contact-form {
    max-width: 700px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 30px;
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group input, .form-group textarea {
    padding: 15px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    font-size: 16px;
    color: var(--text-primary);
    font-family: var(--font-secondary);
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
    width: 100%;
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.form-group textarea { resize: vertical; }

/* Custom Dropdown Ki Styling */
.select-wrapper { position: relative; width: 100%; }

.custom-select {
    width: 100%;
    padding: 12px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: var(--font-secondary);
    font-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: var(--transition-smooth);
}

.custom-select:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.1);
}

.custom-select option {
    background: #13131a;
    color: white;
    padding: 10px;
}

.select-arrow {
    position: absolute;
    right: 15px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 0.8rem;
    transition: var(--transition-smooth);
}

.select-wrapper:hover .select-arrow { color: var(--accent-color); }

/* Contact Categories (Checkboxes) */
.contact-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.cat-checkbox { cursor: pointer; display: block; }

.cat-checkbox input { display: none; }

.cat-box {
    display: block;
    padding: 8px 12px;
    background: #f5f5f5;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #444;
    text-align: center;
    transition: all 0.2s ease-in-out;
    font-weight: 600;
}

.cat-checkbox input:checked + .cat-box {
    background: #fff;
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: scale(0.98);
}

.dark-mode .cat-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    color: #bbb;
}

.dark-mode .cat-checkbox input:checked + .cat-box {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.cat-box:hover { border-color: var(--accent-color); }

.btn-submit {
    width: 100%;
    padding: 18px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

/* =================================
   13. Testimonials (Customer Reviews)
   ================================= */

.testimonials-section {
    padding: 100px 0;
    overflow: hidden;
    position: relative;
}

.testimonial-slider { margin-top: 50px; display: flex; width: 100%; }

.testimonial-track {
    display: flex;
    width: calc(350px * 12);
    animation: scrollSeamless 25s linear infinite;
}

.testimonial-track:hover { animation-play-state: paused; }

.testimonial-card {
    width: 320px;
    margin: 0 15px;
    padding: 30px;
    border-radius: 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.client-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.client-pic {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
}

.rating { color: #ffcc00; font-size: 0.8rem; }

.testimonial-card p {
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    color: var(--text-secondary);
    opacity: 0.9;
}

.client-info {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
}

.client-role {
    display: block;
    font-size: 0.75rem;
    color: var(--accent-color);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.client-name {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text-primary);
}

.category-tag {
    display: inline-block;
    font-size: 0.7rem;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 8px;
    color: #888;
}

@keyframes scrollSeamless {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-350px * 6)); }
}

/* =================================
   14. Footers (Saare Versions)
   ================================= */

/* --- Version 1: Standard Footer --- */
.footer {
    padding: 20px 0;
    border-top: 1px solid var(--glass-border);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content p { color: var(--text-secondary); font-size: 14px; }

/* --- Version 2: Premium Footer --- */
.new-premium-footer {
    background: var(--bg-secondary);
    padding: 80px 0 30px;
    border-top: 1px solid var(--glass-border);
    position: relative;
    z-index: 10;
}

.new-premium-footer .container { max-width: 1200px; }

.footer-brand-section {
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-brand-section .logo {
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.footer-brand-section p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.footer-section-title {
    font-family: var(--font-primary);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 25px;
}

.contact-list-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: var(--text-secondary);
    font-size: 1rem;
    transition: var(--transition-smooth);
}

.contact-list-item i {
    color: var(--accent-color);
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
}

.contact-list-item:hover {
    color: var(--text-primary);
    transform: translateX(5px);
}

.policy-footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.policy-footer-links a {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition-smooth);
}

.policy-footer-links a:hover {
    color: var(--accent-color);
    transform: translateX(5px);
}

.footer-bottom-section {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 40px;
    text-align: center;
}

.footer-copyright {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 25px;
    display: block;
}

.footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.footer-social-icons a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 1.1rem;
    transition: var(--transition-smooth);
}

.footer-social-icons a:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

/* --- Version 3: Main Layout Footer --- */
.footer-main-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 60px 5%;
    background-color: #0b0b0d;
    color: white;
    font-family: sans-serif;
}

.footer-section { flex: 1; }

.our-policies { padding-left: 50px; }

.footer-heading {
    color: #5d5dff;
    font-size: 22px;
    margin-bottom: 25px;
    font-weight: 600;
}

.contact-list, .policy-links { list-style: none; padding: 0; }

.contact-list li, .policy-links li {
    margin-bottom: 15px;
    color: #cccccc;
    display: flex;
    align-items: center;
}

.contact-list i { margin-right: 12px; color: #5d5dff; }

.clickable-link, .policy-links a {
    text-decoration: none;
    color: #cccccc;
    transition: 0.3s ease;
}

.clickable-link:hover, .policy-links a:hover { color: #5d5dff; }

/* Global Social Links (Jo kai footers mein use ho rahe hain) */
.social-links {
    display: flex;
    gap: 20px;
    padding-right: 80px;
}

.social-links a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    color: white;
}

.social-links a:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-3px);
    color: white;
}

/* =================================
   15. Floating Elements (WhatsApp)
   ================================= */

.whatsapp-float {
    position: fixed;
    bottom: 30px; right: 30px;
    width: 60px; height: 60px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-float::before {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background-color: #25d366;
    border-radius: 50%;
    z-index: -1;
    animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: translateY(-5px);
    color: white;
}

.tooltip-text {
    position: absolute;
    right: 75px;
    background-color: #333;
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    white-space: nowrap;
}

.whatsapp-float:hover .tooltip-text { opacity: 1; visibility: visible; }

/* =================================
   16. Reveal Animations (Scroll Par Animation)
   ================================= */

.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-up.revealed { opacity: 1; transform: translateY(0); }

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* =================================
   17. General Media Queries (MOBILE VIEW KI SETTINGS)
   ================================= */

@media (max-width: 768px) {
    body { cursor: auto; }
    .custom-cursor { display: none; } /* Mobile par custom cursor hata diya */

    /* --- Mobile Header Adjustments --- */
    .nav-logo-img {
        display: none; /* Sirf logo ki image hide hogi, text nahi */
    }

    .nav-actions {
        gap: 12px; /* Right side ke buttons (Theme, Hire, Menu) mein equal space ke liye */
    }
    
    /* --- MOBILE PADDING SYSTEM --- */
    .navbar,
    .hero,
    .portfolio-title-section,
    .project-showcase,
    .about-section,
    .contact-section,
    .testimonials-section,
    .footer {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .container {
        padding-left: clamp(20px, 5vw, 30px) !important;
        padding-right: clamp(20px, 5vw, 30px) !important;
        width: 100%;
        overflow-x: hidden;
    }

    /* --- NEW: Mobile Content Spacing --- */
    .portfolio-title-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .about-content, .contact-form {
        padding: 40px 25px !important; /* Content aur box ke beech space ke liye padding add ki gayi */
    }
    .footer-main-container {
        padding-left: clamp(20px, 5vw, 30px) !important;
        padding-right: clamp(20px, 5vw, 30px) !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        flex-direction: column;
    }
    
    /* --- MOBILE MODAL/LIGHTBOX (FIXED & VERIFIED) --- */
    .project-modal {
        padding: 10px;
        align-items: center;
    }
    
    .modal-content {
        max-height: 95vh;
        padding: 15px;
        overflow-y: hidden;
        justify-content: center;
        border-radius: 20px;
    }
    
    .project-modal .gallery-grid {
        display: flex;
        height: auto;
        overflow: hidden;
        justify-content: center;
        margin-top: 15px;
    }
    
    .project-modal .gallery-grid img {
        max-height: 70vh;
        width: auto;
        max-width: 100%;
        object-fit: contain;
        transform: none !important;
        opacity: 1;
    }
    
    /* --- Mobile Menu --- */
    .nav-links {
        position: fixed;
        top: 80px; left: -100%;
        width: 100%; height: calc(100vh - 80px);
        background: var(--bg-secondary);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        transition: left 0.3s ease;
    }
    
    .nav-links.active { left: 0; }
    
    .mobile-menu-toggle { display: flex; }
    
    .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
    .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }
    
    .hero { padding-top: 100px; padding-bottom: 40px; }
    .hero-title { font-size: clamp(2.5rem, 10vw, 4rem); }
    
    .massive-title { font-size: clamp(2.5rem, 15vw, 6rem); -webkit-text-stroke: 1px var(--accent-color); }
    
    .floating-cta {
        position: relative;
        top: auto; right: auto; bottom: auto; left: auto;
        margin: 20px auto;
        display: inline-flex;
    }
    
    .cta-top-right { margin-bottom: 40px; }
    
    .filter-tabs { gap: 10px; }
    .filter-btn { padding: 10px 20px; font-size: 14px; }
    
    .form-row { grid-template-columns: 1fr; gap: 15px; }
    
    .footer-content { flex-direction: column; gap: 20px; text-align: center; }
    
    .footer-brand-section { text-align: center; padding-bottom: 20px; margin-bottom: 30px; }
    .footer-brand-section p { margin-left: auto; margin-right: auto; }
    .footer-main-grid { grid-template-columns: 1fr; text-align: center; }
    .contact-list-item, .policy-footer-links a { justify-content: center; }
    
    .footer-section { margin-bottom: 30px; padding-left: 0; }
    
    .social-links {
        padding-right: 0;
        justify-content: center;
        display: flex;
        width: 100%;
    }
    
    .whatsapp-float {
        width: 50px; height: 50px;
        bottom: 20px; right: 20px;
        font-size: 30px;
    }
    
    .glow-1, .glow-2, .glow-3 { width: 300px; height: 300px; }
}

@media (max-width: 480px) {
    /* Chhote phones ke liye font size adjustments */
    .hero-title { font-size: 2.5rem; letter-spacing: -1px; }
    .section-title { font-size: 2rem; }
    .massive-title { font-size: 3rem; }
    
    .btn-primary { padding: 15px 30px; font-size: 16px; }
    .btn-hire { padding: 10px 20px; font-size: 14px; }
    
    .footer-brand-section .logo { font-size: 28px; }
    .footer-brand-section p { font-size: 0.95rem; }
    .footer-section-title { font-size: 1.4rem; }
    .contact-list-item, .policy-footer-links a { font-size: 0.9rem; }
    .footer-social-icons a { width: 35px; height: 35px; font-size: 1rem; }
}
/*
=================================
CSS Table of Contents
=================================
1.  CSS Variables & Buniyadi Styles
2.  Theme Effects (Cursor, Glow, Glass)
3.  Privacy Policy Page Styles
4.  Premium Footer Styles
5.  Floating WhatsApp Button Styles
6.  Responsive (Mobile View)
=================================

/* 3. Privacy Policy Page Styles */
.policy-container { padding: 50px 60px; border-radius: 24px; text-align: center; margin-bottom: 60px; }
.policy-container h1 { font-family: var(--font-primary); font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -2px; margin-bottom: 10px; }
.last-updated { color: var(--text-secondary); font-style: italic; margin-bottom: 40px; }
.policy-content { text-align: left; }
.policy-content h2 { font-family: var(--font-primary); color: var(--accent-color); font-size: 1.8rem; margin-top: 40px; margin-bottom: 15px; border-bottom: 1px solid var(--glass-border); padding-bottom: 10px; }
.policy-content p, .policy-content ul { color: var(--text-secondary); margin-bottom: 20px; line-height: 1.8; }
.policy-content ul { list-style-position: inside; padding-left: 10px; }
.policy-content li { margin-bottom: 10px; }
.button-wrapper { text-align: center; margin-top: 50px; }
.btn-back-home { display: inline-flex; align-items: center; gap: 12px; padding: 16px 35px; background: var(--accent-color); color: white; border: none; border-radius: 50px; font-size: 16px; font-weight: 600; box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.btn-back-home i { transition: transform 0.3s ease; }
.btn-back-home:hover { background: var(--accent-hover); transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4); }
.btn-back-home:hover i { transform: translateX(-5px); }

/* 4. Premium Footer Styles */
.new-premium-footer { background: var(--bg-secondary); padding: 80px 0 30px; border-top: 1px solid var(--glass-border); }
.new-premium-footer .container { max-width: 1200px; padding-top: 0; padding-bottom: 0; }
.footer-brand-section { text-align: center; margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.footer-brand-section .logo { font-family: var(--font-primary); font-size: 32px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.footer-brand-section p { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.6; max-width: 600px; margin: 0 auto; }
.footer-main-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 60px; }
.footer-heading { font-family: var(--font-primary); font-size: 1.6rem; font-weight: 600; color: var(--accent-color); margin-bottom: 25px; }
.contact-list, .policy-links { list-style: none; padding: 0; }
.contact-list li, .policy-links li { margin-bottom: 15px; color: var(--text-secondary); display: flex; align-items: center; gap: 12px; }
.clickable-link, .policy-links a { color: var(--text-secondary); transition: var(--transition-smooth); }
.clickable-link:hover, .policy-links a:hover { color: var(--accent-color); }
.social-links { display: flex; gap: 15px; }
.social-links a { width: 40px; height: 40px; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--text-primary); font-size: 1.1rem; transition: var(--transition-smooth); }
.social-links a:hover { background: var(--accent-color); border-color: var(--accent-color); transform: translateY(-5px); }
.footer-bottom-section { border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 30px; text-align: center; }
.footer-copyright { font-size: 0.9rem; color: var(--text-secondary); }

/* 5. Floating WhatsApp Button Styles */
.whatsapp-float { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 35px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 10000; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; }
.whatsapp-float::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: #25d366; border-radius: 50%; z-index: -1; animation: whatsapp-pulse 2s infinite; }
@keyframes whatsapp-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
.whatsapp-float:hover { background-color: #128c7e; transform: translateY(-5px); }
.tooltip-text { position: absolute; right: 75px; background-color: #333; color: #fff; padding: 5px 12px; border-radius: 5px; font-size: 14px; opacity: 0; visibility: hidden; transition: 0.3s; white-space: nowrap; }
.whatsapp-float:hover .tooltip-text { opacity: 1; visibility: visible; }

/* 6. Responsive (Mobile View) */
@media (max-width: 768px) {
    body { cursor: auto; }
    .custom-cursor { display: none; }
    .container { padding: 12px 12px; }
    .policy-container { padding: 29px 29px; margin-bottom: 40px; }
    .policy-content h2 { font-size: 1.5rem; }
    .footer-main-container { grid-template-columns: 1fr; text-align: center; }
    .contact-list li, .policy-links li { justify-content: center; }
    .social-links { justify-content: center; }
    .whatsapp-float { width: 50px; height: 50px; font-size: 30px; }
}