/* e:\protfolio\framer_clone\custom.css */

/* Hide Made in Framer Badge */
#__framer-badge-container,
[id^="__framer-badge"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide Blogs Nav Link - All pages (home, project detail, about, etc.) */
a[href="./blogs"],
a[href="../blogs"],
a[href="/blogs"],
a[href*="blogs"] { display: none !important; }

/* Hide Blog Section */
#blog { display: none !important; }

/* Disable internal project detail page links - no cursor change, no navigation */
a[href*="./projects/"],
a[href*="/projects/"] {
    cursor: default !important;
}

/* ======= FIX: SSR Variant Overlap on SPA Navigation ======= */
@media (min-width: 1200px) {
    .hidden-72rtr7  { display: none !important; }
    .hidden-egmbj8  { display: none !important; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
    .hidden-15fhgrh { display: none !important; }
    .hidden-160pjv0 { display: none !important; }
}
@media (max-width: 809.98px) {
    .hidden-1g0zrk7 { display: none !important; }
    .hidden-1gmdhm4 { display: none !important; }
}

/* ======== FORCE LIGHT THEME ======== */
body {
    --token-a9f688eb-778b-4a71-929e-ebf8a014b4cf: #111111 !important; /* text main */
    --token-54672876-03f0-4dca-8fdb-32c421a5c4d1: #5e67e6 !important; /* accent */
    --token-861b2ae9-dee3-4143-a255-6faa9a39d943: #ffffff !important;
    --token-4795dafb-4261-43d3-aa0c-b3831681376e: #ffffff !important; /* background */
    --token-a228d207-519c-4c30-ace3-fe8c17413ec0: #dadada !important;
    --token-7d1fd828-621c-47fc-b270-6f2c2fff9ca2: #666666 !important; /* text secondary */
    --token-63c1aa9b-b60d-46e8-b1c7-6d9c05a923bd: #ff2244 !important;
    --token-dd08076e-6859-4f97-84b7-c05dcc1e773f: #ffffffe6 !important;
    --token-621c2752-e263-492f-8440-f4105a55d3f1: #dadada !important;
    --token-4baed98b-3751-4e60-b570-600a506f091e: #0bde66 !important;
    --token-cb6b9558-1df0-4f97-98cb-2fe80cc3b90c: #f5f5f5 !important;
    --token-37ca97ef-81c7-4731-ba05-2bafe1f2a4f5: #000000 !important;
    --token-1e4a4a22-afd8-42f6-ae69-95001aaf48ae: #8f8f8f !important;
    --token-a3859f8f-41d4-4be1-a56e-27b66efaa3e1: #ffffff00 !important;
    --token-ffb0ff11-cab3-40ad-af6c-69f4ede46c1e: #000000 !important;
    --token-39a5a1be-d79a-43ee-a7a4-d32ef142beed: #ffffff !important;
    background-color: #ffffff !important;
}

#main,
.framer-wcFAk.framer-egmbj8,
.framer-40ama.framer-72rtr7,
.framer-1wntvpv-container,
.framer-1u3awzp {
    background-color: #ffffff !important;
}

/* Hide the noise overlay in light theme */
.framer-192yo0e {
    display: none !important;
}

/* Hide the toggle switch */
.framer-180qzzk,
[data-framer-name="Toggle Button"],
.framer-fidmwm,
[data-framer-name="Switch"] {
    display: none !important;
}

/* ======= CONTACT SECTION - Profile Image ======= */
.framer-19x0bz9 .framer-5cjz9e,
.framer-19x0bz9 .framer-1y3f9q6,
.framer-19x0bz9 .framer-174865s,
.framer-19x0bz9 .framer-1526o8l {
    overflow: visible !important;
}

.framer-19x0bz9 .framer-5cjz9e {
    border-radius: 20px !important;
    background-image: url('profile.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
}
.framer-19x0bz9 .framer-5cjz9e img,
.framer-19x0bz9 .framer-5cjz9e [data-framer-background-image-wrapper] {
    display: none !important;
}

/* ======= PROFESSIONAL DYNAMIC TOP-GLOW BACKGROUND ======= */
.mesh-gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-color: #fafafa;
    overflow: hidden;
}

/* Subtle top glow that moves left and right */
.mesh-gradient-bg::before {
    content: '';
    position: absolute;
    top: -30vh;
    left: 0;
    width: 60vw;
    height: 60vh;
    border-radius: 50%;
    /* Soft cool blue/lavender glow */
    background: radial-gradient(ellipse at center, rgba(138, 180, 248, 0.25) 0%, rgba(250, 250, 250, 0) 70%);
    filter: blur(80px);
    animation: topGlowMove 15s ease-in-out infinite alternate;
    z-index: -1;
}

.mesh-gradient-bg::after {
    content: '';
    position: absolute;
    top: -20vh;
    right: 0;
    width: 50vw;
    height: 50vh;
    border-radius: 50%;
    /* Soft warm peach/pink glow */
    background: radial-gradient(ellipse at center, rgba(240, 195, 236, 0.3) 0%, rgba(250, 250, 250, 0) 70%);
    filter: blur(80px);
    animation: topGlowMove2 18s ease-in-out infinite alternate;
    z-index: -1;
}

@keyframes topGlowMove {
    0% { transform: translateX(-10vw) scale(1); }
    100% { transform: translateX(40vw) scale(1.1); }
}

@keyframes topGlowMove2 {
    0% { transform: translateX(10vw) scale(1); }
    100% { transform: translateX(-30vw) scale(1.2); }
}

/* ======= CIRCULAR PROFILE IMAGE ======= */
/* Targeting by image path and various Framer navbar classes */
img[src*="profile.jpg"],
[data-framer-name="Navbar"] img,
.framer-19x0bz9 img,
.framer-5cjz9e img {
    border-radius: 24px !important;
    object-fit: cover !important;
    overflow: hidden !important;
}

/* Removed incorrect wrapper circular rule that was clipping the contact section */

/* ======= BACKGROUND VISIBILITY FIX ======= */
/* ONLY make the structural containers transparent */
html, body, #main, 
.framer-wcFAk.framer-egmbj8, 
.framer-40ama.framer-72rtr7,
.framer-1wntvpv-container,
.framer-1u3awzp,
.framer-1d8qfhh,
.framer-1demp92-container {
    background-color: transparent !important;
}

/* Restore Navbar and Card Backgrounds */
[data-framer-name="Navbar"], 
[data-framer-name="Card"],
.framer-ensd48, 
.framer-j3v7uw {
    background-color: #ffffff !important;
    border-radius: 12px;
}

/* Force background image replacement if any */
[style*="qrxY8NagVO40NBrdhFEGgFR3PYY.jpg"] {
    background-image: url("./profile.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 24px !important;
}

/* Force About Page Image Replacement */
.framer-zm9lgs img {
    content: url("./profile.jpg") !important;
    object-fit: cover !important;
}

/* ======= MOBILE IMAGE OVERRIDE - Project 1 ======= */
@media (max-width: 809.98px) {
    #featured-project-1 img[src*="kanak.png"] {
        content: url("mobile_kanak.png") !important;
    }
}

/* ======= OPTION K: STICKY SPLIT-SCREEN SCROLL ======= */
#custom-projects-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px 120px;
    box-sizing: border-box;
    font-family: 'Inter', 'Outfit', sans-serif;
}

.csp-header {
    margin-bottom: 64px;
}

.csp-main-title {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
    color: #111111;
    letter-spacing: -1.5px;
    margin: 0 0 12px 0;
    line-height: 1.1;
}

.csp-main-sub {
    font-size: 16px;
    color: #666666;
    margin: 0;
    max-width: 480px;
    line-height: 1.6;
}

/* Body: two columns */
.csp-body {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* LEFT: sticky panel */
.csp-left {
    position: sticky;
    top: 100px;
    width: 42%;
    flex-shrink: 0;
    align-self: flex-start;
    min-height: 300px;
}

/* Each info panel — hidden by default, fades in when active */
.csp-info-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

.csp-info-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}

.csp-num {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #5e67e6;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.csp-cat {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #5e67e6;
    background: rgba(94, 103, 230, 0.1);
    border-radius: 99px;
    padding: 4px 14px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.csp-title {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 700;
    color: #111111;
    margin: 0 0 16px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.csp-desc {
    font-size: 15px;
    color: #555555;
    line-height: 1.7;
    margin: 0 0 32px 0;
}

.csp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    text-decoration: none;
    border-bottom: 2px solid #5e67e6;
    padding-bottom: 2px;
    transition: color 0.2s, gap 0.2s;
}

.csp-btn:hover {
    color: #5e67e6;
    gap: 12px;
}

/* RIGHT: scrollable images */
.csp-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.csp-right-item {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.csp-right-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.csp-right-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px !important;
    aspect-ratio: unset !important;
    object-fit: cover;
}

/* Mobile responsive */
@media (max-width: 809px) {
    #custom-projects-section {
        padding: 60px 20px 80px;
    }

    .csp-body {
        flex-direction: column;
        gap: 32px;
    }

    .csp-left {
        position: relative;
        top: unset;
        width: 100%;
        min-height: unset;
    }

    .csp-info-panel {
        position: relative;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        display: none;
    }

    .csp-info-panel.active {
        display: block;
    }

    .csp-right {
        gap: 24px;
    }
}


/* ======= BENTO BOX LAYOUT - ABOUT PAGE ======= */
.bento-container {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

.bento-item {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}

.bento-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Specific Grid Areas */
.bento-bio {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f9f9ff 100%);
}

.bento-bio img {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    object-fit: cover;
    flex-shrink: 0;
}

.bento-bio-text h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #111;
}

.bento-bio-text p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.bento-skills {
    grid-column: span 2;
    background: rgba(94, 103, 230, 0.03);
}

.bento-skills h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #5e67e6;
}

.bento-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bento-skill-tag {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 500;
    color: #444;
}

.bento-education {
    grid-column: span 1;
    background: #ffffff;
}

.bento-education h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin: 0 0 12px 0;
}

.bento-education p {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin: 0;
}

.bento-learning {
    grid-column: span 1;
    background: #111;
    color: #fff;
}

.bento-learning h3 {
    font-size: 13px;
    color: #888;
    margin: 0 0 10px 0;
}

.bento-learning p {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.bento-learning .badge {
    display: inline-block;
    background: #5e67e6;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.bento-interests {
    grid-column: span 1;
}

.bento-interests h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.bento-interest-icons {
    display: flex;
    gap: 15px;
    font-size: 20px;
}

.bento-social {
    grid-column: span 1;
    background: #5e67e6;
    color: #fff;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.bento-social h3 {
    font-size: 18px;
    margin: 0;
    font-weight: 700;
}

.bento-social span {
    font-size: 12px;
    opacity: 0.8;
}


/* Mobile Responsive Bento */
@media (max-width: 809px) {
    .bento-container {
        grid-template-columns: 1fr;
        padding: 10px;
    }
    .bento-bio, .bento-skills, .bento-education, .bento-learning, .bento-interests, .bento-social {
        grid-column: span 1;
    }
    .bento-bio {
        flex-direction: column;
        text-align: center;
    }
    .bento-bio img {
        width: 100px;
        height: 100px;
    }
}


/* ======= FIXED HERO TEXT ======= */
#dynamic-word-1, #dynamic-word-2 {
    display: inline-block;
}


/* ======= INTERACTIVE SPOTLIGHT ======= */
.spotlight-section {
    position: relative;
    width: 100%;
    height: 60vh;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 80px 0;
    border-radius: 40px;
}

.spotlight-text {
    font-family: 'Inter', sans-serif;
    font-size: clamp(32px, 6vw, 80px);
    font-weight: 800;
    text-align: center;
    color: rgba(255, 255, 255, 0.05); /* Very faint text */
    padding: 0 10%;
    line-height: 1.1;
    letter-spacing: -2px;
    pointer-events: none;
    transition: color 0.5s ease;
}

.spotlight-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: clamp(32px, 6vw, 80px);
    font-weight: 800;
    text-align: center;
    padding: 0 10%;
    line-height: 1.1;
    letter-spacing: -2px;
    pointer-events: none;
    /* The core spotlight effect */
    mask-image: radial-gradient(circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);
}

/* ======= PREMIUM CONTACT FORM STYLING ======= */
.premium-form-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.premium-heading {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    color: #111111;
    margin-bottom: 12px;
    letter-spacing: -1.5px;
    line-height: 1.1;
    text-transform: uppercase;
}

.premium-subtext {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 20px;
}

.premium-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.premium-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 600px) {
    .premium-input-row {
        grid-template-columns: 1fr;
    }
}

.premium-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.premium-label {
    font-size: 13px;
    font-weight: 700;
    color: #5e67e6;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.premium-input, 
.premium-select, 
.premium-textarea {
    width: 100%;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #111111;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.premium-input:focus, 
.premium-select:focus, 
.premium-textarea:focus {
    outline: none;
    border-color: #5e67e6;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(94, 103, 230, 0.1);
    transform: translateY(-2px);
}

.premium-textarea {
    min-height: 150px;
    resize: vertical;
}

.premium-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    background: #111111;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

.premium-submit-btn::after {
    content: '→';
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.premium-submit-btn:hover {
    background: #5e67e6;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(94, 103, 230, 0.25);
}

.premium-submit-btn:hover::after {
    transform: translateX(5px);
}

.premium-submit-btn:active {
    transform: translateY(-1px);
}

/* Success State (Minimal) */
.form-success-msg {
    color: #0bde66;
    font-weight: 600;
    margin-top: 15px;
    display: none;
}