:root {
    --primary: #1e293b;
    --secondary: #3b82f6;
    --accent: #06b6d4;
    --dark: #0f172a;
    --light: #f8fafc;
    --text: #1e293b;
    --gray: #64748b;
}

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

html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--dark);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text);
    overflow-x: hidden;
}

/* Reveal animations base */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

.reveal-group .reveal:nth-child(1) { transition-delay: 0.05s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.15s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.2s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.25s; }
.reveal-group .reveal:nth-child(6) { transition-delay: 0.3s; }

/* Tilt performance */
.tilt {
    will-change: transform;
    transition: transform 0.2s ease;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0d47a1 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 500;
    padding: 20px;
}

/* Animated Background Stars */
.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(59, 130, 246, 0.4);
    border-radius: 50%;
    box-shadow: 
        100px 100px rgba(59, 130, 246, 0.3),
        200px 50px rgba(6, 182, 212, 0.35),
        300px 150px rgba(59, 130, 246, 0.25),
        400px 80px rgba(6, 182, 212, 0.4),
        500px 200px rgba(59, 130, 246, 0.3),
        600px 100px rgba(6, 182, 212, 0.35),
        700px 250px rgba(59, 130, 246, 0.25),
        800px 120px rgba(6, 182, 212, 0.4),
        900px 180px rgba(59, 130, 246, 0.3),
        150px 300px rgba(6, 182, 212, 0.35),
        250px 400px rgba(59, 130, 246, 0.25),
        350px 350px rgba(6, 182, 212, 0.4),
        450px 500px rgba(59, 130, 246, 0.3),
        550px 250px rgba(6, 182, 212, 0.35),
        650px 400px rgba(59, 130, 246, 0.25),
        750px 300px rgba(6, 182, 212, 0.4),
        850px 450px rgba(59, 130, 246, 0.3);
    animation: twinkle 3s infinite;
}

.stars::after {
    animation-delay: 1.5s;
    box-shadow: 
        50px 150px rgba(59, 130, 246, 0.4),
        180px 100px rgba(6, 182, 212, 0.3),
        280px 200px rgba(59, 130, 246, 0.35),
        380px 120px rgba(6, 182, 212, 0.25),
        480px 250px rgba(59, 130, 246, 0.4),
        580px 150px rgba(6, 182, 212, 0.3),
        680px 300px rgba(59, 130, 246, 0.35),
        780px 180px rgba(6, 182, 212, 0.25),
        880px 230px rgba(59, 130, 246, 0.4),
        120px 350px rgba(6, 182, 212, 0.3),
        220px 450px rgba(59, 130, 246, 0.35),
        320px 300px rgba(6, 182, 212, 0.25),
        420px 550px rgba(59, 130, 246, 0.4),
        520px 280px rgba(6, 182, 212, 0.3),
        620px 430px rgba(59, 130, 246, 0.35),
        720px 350px rgba(6, 182, 212, 0.25),
        820px 480px rgba(59, 130, 246, 0.4);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* Animated Background Blobs */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.15);
}

.hero::before {
    width: 400px;
    height: 400px;
    top: -50px;
    right: -100px;
    animation: float 6s ease-in-out infinite;
}

.hero::after {
    width: 300px;
    height: 300px;
    bottom: -50px;
    left: -50px;
    animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, 30px); }
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    animation: fadeInUp 1s ease-out;
}

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

/* Hero Badge */
.hero-badge {
    display: inline-block;
    background: rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(6, 182, 212, 0.4);
    padding: 12px 24px;
    border-radius: 50px;
    color: #06b6d4;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    animation: slideInDown 1s ease-out;
    margin-bottom: 1.5rem !important;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Title */
.hero-title {
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    color: #ffffff;
    font-weight: 900;
    letter-spacing: clamp(1px, 2vw, 4px);
    text-shadow: 0 8px 32px rgba(6, 182, 212, 0.3);
    animation: slideInUp 1s ease-out 0.2s both;
    line-height: 1.1;
    margin-bottom: 1.5rem !important;
    word-break: break-word;
}

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

/* Hero Subtitle */
.hero-subtitle {
    background: linear-gradient(to right, #06b6d4, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    animation: slideInUp 1s ease-out 0.4s both;
    font-size: clamp(1.25rem, 5vw, 2rem);
    margin-bottom: 0.5rem !important;
}

/* Hero Description */
.hero-description {
    font-size: clamp(0.95rem, 3vw, 1.2rem);
    color: #e0f2fe;
    animation: slideInUp 1s ease-out 0.6s both;
    margin-bottom: 2rem !important;
}

/* Hero Buttons */
.hero-buttons {
    animation: slideInUp 1s ease-out 0.8s both;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.hero-buttons .btn {
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.2);
    border: 2px solid #06b6d4;
    font-size: clamp(0.875rem, 2vw, 1rem);
    padding: 0.75rem 2rem;
    white-space: nowrap;
    min-width: 160px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.hero-buttons .btn-light {
    background: #06b6d4;
    color: #0f172a;
    border-color: #06b6d4;
}

.hero-buttons .btn-light:hover {
    background: #22d3ee;
    border-color: #22d3ee;
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(6, 182, 212, 0.4);
}

.hero-buttons .btn-outline-light {
    color: #06b6d4;
    border-color: #06b6d4;
    background: transparent;
}

.hero-buttons .btn-outline-light:hover {
    background: #06b6d4;
    color: #0f172a;
    border-color: #06b6d4;
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(6, 182, 212, 0.3);
}

/* Scroll Indicator */
.hero-scroll {
    margin-top: clamp(2rem, 5vw, 3.75rem);
    animation: slideInUp 1s ease-out 1s both;
}

.scroll-text {
    display: block;
    color: #06b6d4;
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    letter-spacing: 1px;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.scroll-down {
    width: 30px;
    height: 50px;
    border: 2px solid #06b6d4;
    border-radius: 15px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding-top: 8px;
    opacity: 0.7;
}

.scroll-down span {
    display: block;
    width: 2px;
    height: 10px;
    background: #06b6d4;
    border-radius: 2px;
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Main Content Sections */
.main-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0d47a1 100%);
    overflow: hidden;
}

/* Animated Background Circles/Blobs */
.main-content::before,
.main-content::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.15);
    z-index: 0;
    pointer-events: none;
}

.main-content::before {
    width: 500px;
    height: 500px;
    top: 120vh;
    right: -150px;
    animation: float 8s ease-in-out infinite;
}

.main-content::after {
    width: 400px;
    height: 400px;
    bottom: 0;
    left: -100px;
    animation: float 10s ease-in-out infinite reverse;
}

/* Content Stars Background */
.content-stars {
    position: fixed;
    top: 100vh;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.content-stars::before,
.content-stars::after {
    content: '';
    position: fixed;
    width: 2px;
    height: 2px;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    top: 100vh;
    left: 0;
    box-shadow: 
        100px 100px rgba(59, 130, 246, 0.25),
        200px 50px rgba(6, 182, 212, 0.3),
        300px 150px rgba(59, 130, 246, 0.2),
        400px 80px rgba(6, 182, 212, 0.25),
        500px 200px rgba(59, 130, 246, 0.3),
        600px 100px rgba(6, 182, 212, 0.2),
        700px 250px rgba(59, 130, 246, 0.25),
        800px 120px rgba(6, 182, 212, 0.3),
        900px 180px rgba(59, 130, 246, 0.2),
        150px 300px rgba(6, 182, 212, 0.25),
        250px 400px rgba(59, 130, 246, 0.2),
        350px 350px rgba(6, 182, 212, 0.3),
        450px 500px rgba(59, 130, 246, 0.25),
        550px 250px rgba(6, 182, 212, 0.2),
        650px 400px rgba(59, 130, 246, 0.25),
        750px 300px rgba(6, 182, 212, 0.3),
        850px 450px rgba(59, 130, 246, 0.2),
        1000px 600px rgba(6, 182, 212, 0.25),
        1100px 350px rgba(59, 130, 246, 0.2),
        1200px 500px rgba(6, 182, 212, 0.3);
    animation: twinkle-content 4s infinite;
}

.content-stars::after {
    animation-delay: 2s;
    background: rgba(6, 182, 212, 0.3);
    box-shadow: 
        50px 150px rgba(59, 130, 246, 0.3),
        180px 100px rgba(6, 182, 212, 0.25),
        280px 200px rgba(59, 130, 246, 0.2),
        380px 120px rgba(6, 182, 212, 0.3),
        480px 250px rgba(59, 130, 246, 0.25),
        580px 150px rgba(6, 182, 212, 0.2),
        680px 300px rgba(59, 130, 246, 0.3),
        780px 180px rgba(6, 182, 212, 0.25),
        880px 230px rgba(59, 130, 246, 0.2),
        120px 350px rgba(59, 130, 246, 0.3),
        220px 450px rgba(6, 182, 212, 0.25),
        320px 300px rgba(59, 130, 246, 0.2),
        420px 550px rgba(59, 130, 246, 0.3),
        520px 280px rgba(6, 182, 212, 0.25),
        620px 430px rgba(59, 130, 246, 0.2),
        720px 350px rgba(6, 182, 212, 0.3),
        820px 480px rgba(6, 182, 212, 0.25),
        950px 520px rgba(59, 130, 246, 0.2),
        1050px 400px rgba(6, 182, 212, 0.3),
        1150px 550px rgba(59, 130, 246, 0.25);
}

@keyframes twinkle-content {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.section {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.section-header {
    margin-bottom: 60px;
    position: relative;
    text-align: center;
}

.section-header h2 {
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.header-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, #06b6d4, #3b82f6);
    margin: 20px auto;
    border-radius: 2px;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

/* About Section */
.about-section {
    background: linear-gradient(to bottom, #0f172a 0%, #1e293b 50%, #0d47a1 100%);
}

.about-image {
    position: relative;
}

.image-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 2px solid rgba(6, 182, 212, 0.3);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: rgba(6, 182, 212, 0.4);
    transition: all 0.3s ease;
}

.about-image:hover .image-placeholder {
    border-color: #06b6d4;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
    transform: translateY(-5px);
}

.about-text {
    font-size: 1.1rem;
    color: #cffafe;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.text-accent {
    color: #06b6d4;
    font-weight: 600;
}

/* Skills Section */
.skills-section {
    margin-top: 2rem;
}

.skills-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.skill-badge {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #cffafe;
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.skill-badge i {
    font-size: 1.8rem;
    color: #06b6d4;
}

.skill-badge span {
    font-size: 0.95rem;
    font-weight: 600;
}

.skill-badge:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(59, 130, 246, 0.25) 100%);
    border-color: #06b6d4;
    color: #06b6d4;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.2);
}

/* Tech Badge Styles */
.tech-badge {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #cffafe;
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tech-badge .tech-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.tech-badge .tech-name {
    font-size: 0.95rem;
    font-weight: 600;
}

.tech-badge:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(59, 130, 246, 0.25) 100%);
    border-color: #06b6d4;
    color: #06b6d4;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.2);
}

.tech-badge:hover .tech-icon img {
    transform: scale(1.1);
}

/* Portfolio Section */
.portfolio-section {
    background: linear-gradient(to bottom, #0f172a 0%, rgba(15,23,42,0.85) 40%, rgba(14, 38, 92, 0.85) 100%);
}

/* Tabs */
.portfolio-tabs {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.portfolio-tabs .tab {
    background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(6,182,212,0.12) 100%);
    border: 1px solid rgba(6,182,212,0.35);
    color: #c7d2fe;
    padding: 0.9rem 1.4rem;
    border-radius: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.portfolio-tabs .tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.portfolio-tabs .tab:hover::before {
    left: 100%;
}

.portfolio-tabs .tab:hover {
    transform: translateY(-4px);
    border-color: #06b6d4;
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.25);
}

.portfolio-tabs .tab.active {
    background: linear-gradient(135deg, rgba(99,102,241,0.3) 0%, rgba(6,182,212,0.25) 100%);
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.18);
    transform: scale(1.05);
}

/* Grid */
.portfolio-grid {
    position: relative;
    z-index: 2;
}

/* Card v2 */
.portfolio-card {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.12);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    border-color: #06b6d4;
    box-shadow: 0 16px 40px rgba(6, 182, 212, 0.25);
}

.portfolio-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: rgba(2,6,23,0.35);
    border-bottom: 1px solid rgba(6, 182, 212, 0.3);
}

.preview-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #06b6d4;
    font-size: 2rem;
    background: radial-gradient(120% 120% at 50% 0%, rgba(6, 182, 212, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%);
}

.portfolio-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.portfolio-preview:hover img {
    transform: scale(1.05);
}

.portfolio-body {
    padding: 1.25rem 1.25rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.portfolio-body h5 {
    color: #ffffff;
    font-weight: 800;
    margin: 0;
}

.portfolio-desc {
    color: #a5f3fc;
    font-size: 0.98rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-actions .link-demo {
    color: #8cf3ff;
    font-weight: 600;
    text-decoration: none;
}
.card-actions .link-demo:hover { text-decoration: underline; }

.btn-details {
    background: rgba(6,182,212,0.2);
    border: 1px solid rgba(6,182,212,0.35);
    color: #e0f2fe;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
}
.btn-details:hover {
    background: #06b6d4;
    color: #0f172a;
    border-color: #06b6d4;
}


/* Contact Section */
.contact-section {
    background: linear-gradient(to bottom, rgba(14, 38, 92, 0.85) 0%, rgba(15,23,42,0.85) 100%);
    padding: 100px 20px;
}

.contact-wrapper {
    margin-top: 3rem;
}

/* Contact Info Grid */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin: 3rem 0;
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
    border: 1.5px solid rgba(6, 182, 212, 0.25);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent);
    transition: left 0.5s ease;
}

.contact-info-card:hover::before {
    left: 100%;
}

.contact-info-card:hover {
    border-color: #06b6d4;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%);
    box-shadow: 0 12px 40px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(6, 182, 212, 0.3);
    transform: translateY(-8px);
}

.card-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(34, 211, 238, 0.2) 100%);
    border: 2px solid rgba(6, 182, 212, 0.4);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.contact-info-card:hover .card-icon {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.4) 0%, rgba(34, 211, 238, 0.4) 100%);
    border-color: #06b6d4;
    transform: scale(1.1) rotate(5deg);
}

.card-icon i {
    font-size: 1.8rem;
    color: #06b6d4;
    transition: color 0.3s ease;
}

.contact-info-card:hover .card-icon i {
    color: #22d3ee;
}

.card-content {
    flex: 1;
}

.card-content h4 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.card-content p {
    color: #a5f3fc;
    font-size: 0.95rem;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.contact-link-text {
    display: inline-flex;
    align-items: center;
    color: #06b6d4;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-info-card:hover .contact-link-text {
    color: #22d3ee;
    gap: 8px;
}

.contact-info-card:hover .contact-link-text i {
    transform: translateX(4px);
}

/* Contact CTA Section */
.contact-cta {
    text-align: center;
    margin-top: 4rem;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 16px;
    animation: fadeInUp 0.8s ease-out;
}

.contact-cta p {
    color: #a5f3fc;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contact-cta .btn {
    padding: 12px 40px;
    font-weight: 600;
    transition: all 0.3s ease;
    animation: fadeInUp 0.9s ease-out;
}

.contact-cta .btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 35px rgba(255, 255, 255, 0.3), 0 0 20px rgba(0, 126, 252, 0.5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-info-card {
        padding: 24px;
    }

    .card-icon {
        width: 50px;
        height: 50px;
    }

    .card-icon i {
        font-size: 1.5rem;
    }

    .card-content h4 {
        font-size: 1.1rem;
    }

    .contact-cta {
        padding: 2rem;
    }

    .contact-cta p {
        font-size: 1rem;
    }
}

/* Scale-in animation */
.scale-in {
    opacity: 0;
    transform: scale(0.8);
    animation: scaleIn 0.6s ease-out forwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }

@keyframes scaleIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== NEW ANIMATION KEYFRAMES ===== */

/* Fade In animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Navbar animations */
.navbar {
    animation: slideInDown 0.6s ease-out;
}

.navbar-brand {
    animation: fadeInLeft 0.7s ease-out;
}

.navbar-nav .nav-item {
    animation: fadeInDown 0.6s ease-out forwards;
    opacity: 0;
}

.navbar-nav .nav-item:nth-child(1) {
    animation-delay: 0.1s;
}

.navbar-nav .nav-item:nth-child(2) {
    animation-delay: 0.2s;
}

.navbar-nav .nav-item:nth-child(3) {
    animation-delay: 0.3s;
}

.navbar-nav .nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #06b6d4;
    transition: width 0.3s ease;
}

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

/* Hero section enhancements */
.hero-badge {
    animation: slideInDown 0.8s ease-out 0.1s both;
}

.hero-title {
    animation: slideInUp 1s ease-out 0.3s both;
}

.hero-subtitle {
    animation: fadeInUp 0.9s ease-out 0.4s both;
    color: #06b6d4;
    font-size: 1.3rem;
    font-weight: 600;
}

.hero-description {
    animation: fadeInUp 1s ease-out 0.5s both;
}

.hero-buttons .btn {
    animation: scaleIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}

.hero-scroll {
    animation: fadeInUp 1.2s ease-out 0.8s both;
}

/* Section animations */
.section-header h2 {
    animation: fadeInUp 0.8s ease-out;
}

.section-header .portfolio-desc {
    animation: fadeInUp 0.8s ease-out 0.1s both;
}

.section-header .header-line {
    animation: scaleX 0.6s ease-out 0.2s both;
    transform-origin: left;
}

@keyframes scaleX {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* About section animations */
.about-image {
    animation: fadeInLeft 0.9s ease-out;
}

.about-photo-card {
    animation: fadeInLeft 0.9s ease-out 0.1s both;
}

.col-lg-6 h2 {
    animation: fadeInRight 0.9s ease-out 0.1s both;
}

.about-text {
    animation: fadeInRight 0.9s ease-out 0.2s both;
}

.about-actions {
    animation: fadeInRight 0.9s ease-out 0.3s both;
}

.about-actions .btn {
    transition: all 0.3s ease;
    animation: fadeInUp 0.7s ease-out forwards;
    opacity: 0;
}

.about-actions .btn:nth-child(1) {
    animation-delay: 0.4s;
}

.about-actions .btn:nth-child(2) {
    animation-delay: 0.5s;
}

.about-actions .btn:hover {
    transform: translateY(-3px);
}

/* Portfolio items animations */
.portfolio-tabs .tab {
    animation: fadeInUp 0.7s ease-out forwards;
    opacity: 0;
}

.portfolio-tabs .tab:nth-child(1) {
    animation-delay: 0.1s;
}

.portfolio-tabs .tab:nth-child(2) {
    animation-delay: 0.2s;
}

.portfolio-tabs .tab:nth-child(3) {
    animation-delay: 0.3s;
}

.portfolio-card,
.cert-card,
.tech-badge {
    animation: fadeInUp 0.7s ease-out forwards;
    opacity: 0;
}

.portfolio-item:nth-child(1) .reveal {
    animation-delay: 0.1s;
    opacity: 0;
}

.portfolio-item:nth-child(2) .reveal {
    animation-delay: 0.2s;
    opacity: 0;
}

.portfolio-item:nth-child(3) .reveal {
    animation-delay: 0.3s;
    opacity: 0;
}

.portfolio-item:nth-child(4) .reveal {
    animation-delay: 0.4s;
    opacity: 0;
}

.portfolio-item:nth-child(5) .reveal {
    animation-delay: 0.5s;
    opacity: 0;
}

.portfolio-item:nth-child(6) .reveal {
    animation-delay: 0.6s;
    opacity: 0;
}

/* Contact section animations */
.contact-info-card {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.contact-info-grid .contact-info-card:nth-child(1) {
    animation-delay: 0.1s;
}

.contact-info-grid .contact-info-card:nth-child(2) {
    animation-delay: 0.2s;
}

.contact-info-grid .contact-info-card:nth-child(3) {
    animation-delay: 0.3s;
}

.contact-cta {
    animation: fadeInUp 0.9s ease-out 0.4s both;
}

/* Smooth scroll animations - fade in on scroll */
.reveal {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* Footer animations */
.footer {
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.8) 0%, rgba(2, 6, 23, 1) 100%);
    border-top: 1px solid rgba(6, 182, 212, 0.25);
    color: #a5f3fc;
    animation: fadeIn 0.8s ease-out;
}

.footer p {
    animation: fadeInUp 0.9s ease-out 0.2s both;
}

.footer .social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin: 0 6px;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    transition: all 0.25s ease;
    animation: fadeInUp 0.7s ease-out forwards;
    opacity: 0;
}

.footer .social a:nth-child(1) {
    animation-delay: 0.3s;
}

.footer .social a:nth-child(2) {
    animation-delay: 0.4s;
}

.footer .social a:nth-child(3) {
    animation-delay: 0.5s;
}

.footer .social a:hover {
    transform: translateY(-3px);
    color: #0f172a;
    background: #06b6d4;
    border-color: #06b6d4;
}

/* Navbar Styles */
.navbar {
    transition: all 0.3s ease;
}

.navbar.hidden {
    display: none;
}

.transparent-navbar {
    background-color: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
}

.navbar-brand {
    color: #06b6d4 !important;
    font-weight: 700;
    font-size: 1.5rem;
}

.navbar-brand:hover {
    color: #22d3ee !important;
}

.navbar-nav .nav-link {
    color: #e0f2fe !important;
    font-weight: 600;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #06b6d4 !important;
}

.navbar-toggler {
    border: none;
    color: #06b6d4;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%286, 182, 212, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Responsive Design */
/* Certificate Card Styles */
.cert-card {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.12);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cert-card:hover {
    transform: translateY(-6px);
    border-color: #06b6d4;
    box-shadow: 0 16px 40px rgba(6, 182, 212, 0.25);
}

.cert-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-bottom: 1px solid rgba(6, 182, 212, 0.3);
}

.cert-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cert-preview:hover img {
    transform: scale(1.05);
}

.cert-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cert-preview:hover .cert-overlay {
    opacity: 1;
}

.cert-preview {
    cursor: pointer;
}

/* Certificate Modal */
.cert-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

.cert-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 70%;
    max-height: 70%;
    animation: modalFadeIn 0.3s ease-out;
}

.cert-modal-content img,
.cert-modal-content video {
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

.cert-modal-content video {
    max-width: 90%;
    max-height: 80vh;
}

.cert-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.cert-modal-close:hover,
.cert-modal-close:focus {
    color: #06b6d4;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Tech Badge Background Classes */
.bg-html { background: linear-gradient(135deg, #e34f26 0%, #f06529 100%) !important; }
.bg-css { background: linear-gradient(135deg, #1572b6 0%, #33a9dc 100%) !important; }
.bg-js { background: linear-gradient(135deg, #f7df1e 0%, #f0db4f 100%) !important; }
.bg-react { background: linear-gradient(135deg, #61dafb 0%, #21a3c4 100%) !important; }
.bg-node { background: linear-gradient(135deg, #339933 0%, #68a063 100%) !important; }
.bg-bootstrap { background: linear-gradient(135deg, #7952b3 0%, #563d7c 100%) !important; }
.bg-tailwind { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important; }
.bg-firebase { background: linear-gradient(135deg, #ffca28 0%, #ffa000 100%) !important; }
.bg-mui { background: linear-gradient(135deg, #0081cb 0%, #005b9f 100%) !important; }
.bg-vite { background: linear-gradient(135deg, #646cff 0%, #4f46e5 100%) !important; }
.bg-vercel { background: linear-gradient(135deg, #000000 0%, #333333 100%) !important; }
.bg-swal { background: linear-gradient(135deg, #f8bb2d 0%, #e6a800 100%) !important; }

@media (max-width: 992px) {
    .preview-placeholder { height: 160px; }
}

@media (max-width: 768px) {
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-header h2 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .skills-grid {
        grid-template-columns: 1fr;
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    .about-text {
        font-size: 1rem;
    }

    .skills-title {
        font-size: 1.2rem;
    }

    .preview-placeholder { height: 140px; }
}