/* 
========================================
SARVAR NADAF - PORTFOLIO WEBSITE STYLES
========================================

SECTION INDEX:
1. Root Variables & Global Styles
2. Hero Section
3. Skills Section
4. Experience Section (Desktop)
5. Experience Section (Mobile)
6. Certifications Section
7. Projects Section
8. Blogs Section
9. Services Section
10. Finale Section
11. Media Queries

========================================
*/

/* 
========================================
1. ROOT VARIABLES & GLOBAL STYLES
========================================
*/
:root {
    --primary-color: #00ffe7;
    --bg-dark: #0f0c29;
    --bg-gradient: linear-gradient(45deg, #0f0c29, #302b63, #24243e);

/* Performance optimizations */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
}
    --text-light: #f0f0f0;
}

/* 
========================================
2. HERO SECTION
========================================
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    height: 100%;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-gradient);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: auto;
    min-height: 100vh;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* Section Base Styles */
section {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem);
    text-align: center;
    background: var(--bg-gradient);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Desktop Hero Size Reduction - 20% smaller */
@media screen and (min-width: 769px) {
    .hero {
        min-height: 80vh !important;
        padding: clamp(0.8rem, 2.4vw, 1.6rem) !important;
    }
    
    .hero-content {
        max-width: 800px !important;
        padding: 0.8rem !important;
    }
    
    .profile-image {
        width: clamp(120px, 24vw, 160px) !important;
        height: clamp(120px, 24vw, 160px) !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero h1 {
        margin-bottom: 0.3rem !important;
    }
    
    .typed-container {
        height: 40px !important;
        margin-bottom: 0.5rem !important;
    }
    
    #typed-text {
        font-size: clamp(1.2rem, 2.4vw, 1.6rem) !important;
    }
    
    .hero-description {
        font-size: 0.9rem !important;
        max-width: 600px !important;
        margin: 0.5rem auto 0.3rem auto !important;
        line-height: 1.6 !important;
        text-align: justify !important;
    }
    
    .social-icons {
        margin-top: 0.3rem !important;
    }
    
    /* Certification Section - 5 per row */
    .certs-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 1rem !important;
        max-width: 1200px !important;
    }
    
    .cert-card {
        height: 280px !important;
    }
    
    .cert-front {
        padding: 1rem !important;
        font-size: 0.8rem !important;
    }
    
    .cert-front h3 {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .cert-back {
        padding: 1rem !important;
        font-size: 0.8rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    .cert-back h3 {
        font-size: 0.9rem !important;
        margin-bottom: 0.8rem !important;
        text-align: center !important;
        color: var(--primary-color) !important;
    }
    
    .cert-back .cert-details {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    .cert-back .cert-details p {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        color: var(--text-light) !important;
        text-align: center !important;
        font-weight: 500 !important;
    }
    
    .cert-back .cert-details ul {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .cert-back .cert-details li {
        font-size: 0.7rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.3 !important;
        padding-left: 0.8rem !important;
        position: relative !important;
        color: var(--text-light) !important;
    }
    
    .cert-back .cert-details li::before {
        content: "•" !important;
        color: var(--primary-color) !important;
        position: absolute !important;
        left: 0 !important;
        font-weight: bold !important;
    }
}
}
}

/* Neo Light Effect */
.hero::before,
.hero::after {
    top: 6px;
    height: 2px;
    background: #00ffe7;
    filter: blur(2px);
    opacity: 0.8;
    z-index: 9;
}

.hero::before {
    top: 0;
    height: 4px;
    background: #00ffe7;
    box-shadow:
        0 0 10px #00ffe7,
        0 0 20px #00ffe7,
        0 0 40px #00ffe7;
    opacity: 1;
    z-index: 10;
}

.hero::after {
    top: 6px;
    height: 2px;
    background: #00ffe7;
    filter: blur(2px);
    opacity: 0.8;
    z-index: 9;
}

@keyframes neonFlow {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.hero-content {
    max-width: 1000px;
    width: 100%;
    padding: 1rem;
}

/* Profile Section */
.profile-container {
    margin-bottom: clamp(1rem, 0.3vw, 1.5rem);
}

.profile-image {
    width: clamp(180px, 34vw, 270px);
    height: clamp(180px, 34vw, 270px);
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(0, 255, 231, 0.3);
    transition: transform 0.3s ease;
}

.profile-image:hover {
    transform: scale(1.05);
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Typography */
.hero h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    margin-bottom: 0rem;
}

.typed-container {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 0;
}

#typed-text {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--primary-color);
}

.hero-description {
    max-width: 800px;
    margin: 1rem auto;
    opacity: 0.9;
    font-size: clamp(1rem, 2vw, 1.1rem);
    padding: 0 1rem;
}

/* Social Icons */
.social-icons {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: 2rem;
}

.social-icons a {
    color: var(--text-light);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    transition: all 0.3s ease;
    padding: 0.5rem;
}

.social-icons a:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
}

/* Mobile Hero Section */

@media screen and (max-width: 768px) {
    .hero {
        padding: 2rem 1rem;
        min-height: 100vh;
        justify-content: flex-start;
        padding-top: 4rem;
    }

    .hero-content {
        padding: 0.5rem;
    }

    .profile-image {
        width: 160px !important;
        height: 160px !important;
        margin-bottom: 1rem;
    }

    .hero h1 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }

    .typed-container {
        height: 45px;
    }

    #typed-text {
        font-size: 1.3rem;
    }

    .hero-description {
        font-size: 1.07rem !important;
        padding: 0 0.5rem;
        margin: 0.1rem auto;
        line-height: 1.3;
        text-align: justify;
        hyphens: auto;
        word-spacing: -0.1em;
    }

    .social-icons {
        margin-top: 1rem;
        gap: 1rem;
    }

    .social-icons a {
        font-size: 1.5rem;
        padding: 0.4rem;
    }
}

@media screen and (max-width: 480px) {
    .hero {
        padding-top: 3rem;
    }

    .profile-image {
        width: 120px;
        height: 120px;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    #typed-text {
        font-size: 1rem;
    }

    .hero-description {
        font-size: 0.01rem;
        padding: 0;
    }

    .social-icons {
        gap: 0.8rem;
    }
}

/* 
========================================
3. SKILLS SECTION
========================================
*/
.skills-section {
    padding: 4rem 0;
    background: var(--bg-gradient);
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.skills-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.skills-section h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
}

.section-subtitle {
    text-align: center;
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 3rem;
    opacity: 0.8;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 2rem;
    justify-items: center;
    padding: 2rem 0;
}

.skill-box {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    position: relative;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
    transition: all 0.3s ease;
}

.skill-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 195, 255, 0.2);
    animation: skillGlow 1.5s ease-in-out infinite;
}

@keyframes skillGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 195, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 195, 255, 0.4);
    }
}

.skill-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    padding: 2px;
    background: linear-gradient(45deg, #00c3ff, #00eaff);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.skill-box:hover::before {
    opacity: 1;
}

.skill-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    position: relative;
    z-index: 2;
}

.skill-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.2));
}

.skill-box:hover .skill-icon {
    transform: scale(1.1);
}

.skill-content span {
    font-size: 0.9rem;
    color: var(--text-light);
    transition: color 0.3s ease;
}

.skill-box:hover .skill-content span {
    color: #00c3ff;
}

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

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.scroll-arrow {
    width: 30px;
    height: 30px;
    border-right: 2px solid #00c3ff;
    border-bottom: 2px solid #00c3ff;
    transform: rotate(45deg);
    animation: scrollIndicator 2s infinite;
    box-shadow: 0 0 10px rgba(0, 195, 255, 0.2);
}

@keyframes scrollIndicator {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 1.5rem;
    }

    .skill-box {
        width: 100px;
        height: 100px;
    }

    .skill-icon {
        width: 35px;
        height: 35px;
    }
}

@media screen and (max-width: 480px) {
    .skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 1rem;
    }

    .skill-box {
        width: 90px;
        height: 90px;
    }

    .skill-icon {
        width: 30px;
        height: 30px;
    }

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

/* Hide scroll indicator on desktop */
@media (min-width: 1024px) {
    .scroll-indicator {
        display: none;
    }
}

/* Touch Device Optimization */
@media (hover: none) {
    html {
        scroll-behavior: auto;
    }
    
    .skill-box::before {
        opacity: 0.3;
    }
}

/* Mobile skills Section Styles */
/* Skills Section */
@media screen and (max-width: 768px) {
    .skills-section {
        padding: 3rem 0; /* Reduced padding */
        min-height: auto; /* Allow content to determine height */
    }

    .skills-container {
        padding: 0 1rem; /* Reduced side padding */
    }

    .skills-section h2 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }

    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }

    .skills-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for tablets */
        gap: 1.25rem;
        padding: 1rem 0;
    }

    .skill-box {
        width: 100%; /* Full width of grid cell */
        height: auto; /* Auto height */
        aspect-ratio: 1/1; /* Maintain square shape */
        min-width: 85px;
        max-width: 100px;
    }

    .skill-content {
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .skill-icon {
        width: 32px;
        height: 32px;
    }

    .skill-content span {
        font-size: 0.8rem;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .skills-section {
        padding: 2.5rem 0;
    }

    .skills-section h2 {
        font-size: 1.75rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for phones */
        gap: 1rem;
        padding: 0.5rem;
    }

    .skill-box {
        min-width: 75px;
        max-width: 90px;
    }

    .skill-icon {
        width: 28px;
        height: 28px;
    }

    .skill-content span {
        font-size: 0.75rem;
    }

    /* Optimize scroll indicator for mobile */
    .scroll-indicator {
        bottom: 10px;
    }

    .scroll-arrow {
        width: 20px;
        height: 20px;
        border-width: 1.5px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .skill-box {
        /* Add subtle permanent highlight for touch devices */
        background: rgba(255, 255, 255, 0.05);
    }

    .skill-box::before {
        opacity: 0.2;
    }

    /* Active state for touch devices */
    .skill-box:active {
        transform: scale(0.95);
        transition: transform 0.2s ease;
    }

    /* Disable hover animations */
    .skill-box:hover {
        transform: none;
    }
}

/* Performance optimizations for mobile */
@media screen and (max-width: 768px) {
    .skill-box {
        backdrop-filter: none; /* Remove for better performance */
        -webkit-backdrop-filter: none;
    }

    /* Simplified animations for mobile */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}

/* 
========================================
4. EXPERIENCE SECTION (DESKTOP)
========================================
*/
/* Experience Section Styles */
/* General Section Styles */
.experience-section {
    padding: 6rem 0;
    background: var(--bg-gradient);
    position: relative;
    overflow: hidden;
}

.experience-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(0, 255, 231, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Section Headers */
.experience-section h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 255, 231, 0.3);
}

.section-subtitle {
    text-align: center;
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 4rem;
    opacity: 0.8;
}

/* Timeline Container */
.experience-timeline {
    position: relative;
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}

/* Timeline Center Line */
.experience-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--primary-color),
        var(--primary-color),
        transparent
    );
    filter: blur(1px);
    opacity: 0.7;
}

/* Timeline Items */
.timeline-item {
    position: relative;
    margin-bottom: 4rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Timeline Dot */
.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--primary-color);
    z-index: 2;
}

/* Experience Cards */
.experience-card {
    width: calc(50% - 70px);
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 231, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

/* Card Hover Effect */
.experience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 255, 231, 0.2);
}

/* Alternating Layout */
.timeline-item:nth-child(odd) .experience-card {
    margin-right: auto;
}

.timeline-item:nth-child(even) .experience-card {
    margin-left: auto;
}

/* Card Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.exp-duration {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 500;
    padding: 0.5rem 1rem;
    background: rgba(0, 255, 231, 0.1);
    border-radius: 20px;
}

.company-logo {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.company-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Role & Company */
.role {
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.company {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

/* Responsibilities */
.responsibility-list {
    list-style: none;
    margin-bottom: 1.5rem;
}

.responsibility-list li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
}

.responsibility-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* Tech Stack */
.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-stack span {
    padding: 0.3rem 0.8rem;
    background: rgba(0, 255, 231, 0.1);
    border-radius: 15px;
    font-size: 0.8rem;
    color: var(--primary-color);
}

/* 
========================================
5. EXPERIENCE SECTION (MOBILE)
========================================
*/
.experience-section-mobile {
    display: none;
}

/* Media Queries */
@media screen and (max-width: 992px) {
    .experience-timeline {
        position: relative;
        padding: 0 1rem;
    }

    .experience-timeline::before {
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            var(--primary-color) 15%,
            var(--primary-color) 85%,
            transparent 100%
        );
        filter: blur(1px);
        opacity: 0.7;
        box-shadow: 0 0 15px var(--primary-color);
    }

    .timeline-dot {
        left: 50%;
        transform: translateX(-50%);
        width: 15px;
        height: 15px;
        box-shadow: 0 0 15px var(--primary-color);
    }

    .experience-card {
        width: calc(100% - 2rem);
        margin: 0 auto !important;
        position: relative;
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(10px);
    }

    .timeline-item:nth-child(odd) .experience-card,
    .timeline-item:nth-child(even) .experience-card {
        margin: 0 auto !important;
    }

    /* Connecting line from dot to card */
    .timeline-item::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 30px;
        background: var(--primary-color);
        transform: translateX(-50%);
        opacity: 0.5;
    }
}

@media screen and (max-width: 768px) {
    .experience-section h2 {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 3rem;
    }

    .experience-card {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .role {
        font-size: 1.3rem;
    }

    .company {
        font-size: 1rem;
    }

    .responsibility-list li {
        font-size: 0.9rem;
    }

    /* Enhanced glow effect for mobile timeline */
    .experience-timeline::before {
        box-shadow: 0 0 20px var(--primary-color);
    }

    .timeline-dot {
        box-shadow: 0 0 25px var(--primary-color);
    }
}

@media screen and (max-width: 480px) {
    .experience-section {
        padding: 4rem 0;
    }

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

    .section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 2.5rem;
    }

    .experience-timeline {
        padding: 0 1rem;
    }

    .experience-card {
        width: calc(100% - 2rem);
        padding: 1rem;
        margin: 0 auto 3rem auto !important;
    }

    .card-header {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 1rem;
    }

    .company-logo {
        width: 40px;
        height: 40px;
    }

    .exp-duration {
        font-size: 0.8rem;
        padding: 0.3rem 0.8rem;
    }

    .role {
        font-size: 1.2rem;
    }

    .company {
        font-size: 0.9rem;
    }

    .responsibility-list li {
        font-size: 0.85rem;
        margin-bottom: 0.6rem;
    }

    .tech-stack span {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }

    /* Enhanced mobile timeline appearance */
    .timeline-dot {
        width: 12px;
        height: 12px;
        box-shadow: 0 0 25px var(--primary-color);
    }

    .experience-timeline::before {
        box-shadow: 0 0 25px var(--primary-color);
    }

    /* Adjust spacing between cards and timeline */
    .timeline-item {
        margin-bottom: 3rem;
    }

    /* Enhanced connecting line */
    .timeline-item::after {
        height: 20px;
        opacity: 0.7;
        box-shadow: 0 0 10px var(--primary-color);
    }
}

/* Animation Support */
[data-aos] {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced Glow Effects */
.timeline-dot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    filter: blur(5px);
    opacity: 0.5;
}

/* Timeline Glow Enhancement */
.experience-timeline::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: var(--primary-color);
    filter: blur(8px);
    opacity: 0.2;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Card Animation */
.experience-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.experience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 255, 231, 0.2);
}

/* Project Section */

/* Base Variables */
:root {
  --primary-color: #00ffe7;
  --secondary-color: #ff00ff;
  --bg-dark: #0f0c29;
  --bg-gradient: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
  --card-bg: rgba(255, 255, 255, 0.03);
  --text-light: #f0f0f0;
  --transition-smooth: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --shadow-glow: 0 0 20px rgba(0, 255, 231, 0.3);
}

/* 
========================================
7. PROJECTS SECTION
========================================
*/
.projects-section {
  padding: 6rem 0;
  background: var(--bg-gradient);
  position: relative;
  overflow: hidden;
}

.projects-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(0, 255, 231, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Section Header */
.projects-section h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  color: var(--primary-color);
  text-shadow: 0 0 10px rgba(0, 255, 231, 0.3);
}

.projects-section .section-subtitle {
  text-align: center;
  color: var(--text-light);
  font-size: 1.1rem;
  margin-bottom: 4rem;
  opacity: 0.8;
}

/* Projects Grid Layout */
.projects-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  justify-content: center;
}

/* Project Card */
.project-card {
  width: calc(50% - 1rem);
  min-width: 300px;
  max-width: 550px;
  flex-grow: 0;
  position: relative;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  overflow: hidden;
  transition: var(--transition-smooth);
}

/* Glow Effect */
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(
      45deg,
      transparent,
      var(--primary-color),
      transparent
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-glow);
}

.project-card:hover::before {
  opacity: 1;
}

/* Project Header */
.project-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.project-icon {
  width: 50px;
  height: 50px;
  background: rgba(0, 255, 231, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--primary-color);
  transition: transform 0.3s ease;
}

.project-badge {
  padding: 0.5rem 1rem;
  background: rgba(0, 255, 231, 0.1);
  border-radius: 20px;
  font-size: 0.9rem;
  color: var(--primary-color);
}

/* Project Content */
.project-content {
  position: relative;
  z-index: 1;
}

.project-card h3 {
  font-size: 1.5rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}

.project-card p {
  color: var(--text-light);
  opacity: 0.8;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Tech Stack */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tech-stack span {
  padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  font-size: 0.8rem;
  color: var(--text-light);
  transition: all 0.3s ease;
}

/* Project Links */
.project-links {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.project-links a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
}

.guide-link {
  color: var(--primary-color);
}

.repo-link {
  color: var(--text-light);
}

.project-links a:hover {
  transform: translateX(5px);
  background: rgba(0, 255, 231, 0.1);
}

.project-links a i {
  transition: transform 0.3s ease;
}

.project-links a:hover i {
  transform: translateX(3px);
}

/* Animation Classes */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media screen and (min-width: 1400px) {
  .projects-wrapper {
      max-width: 1400px;
  }
}

@media screen and (max-width: 1200px) {
  .projects-wrapper {
      padding: 0 1.5rem;
  }
}

@media screen and (max-width: 992px) {
  .project-card {
      width: 100%;
      max-width: 600px;
  }
}

@media screen and (max-width: 768px) {
  .projects-section {
      padding: 4rem 0;
  }

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

  .section-subtitle {
      font-size: 1rem;
      margin-bottom: 3rem;
  }

  .project-card {
      padding: 1.5rem;
  }

  .project-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.8rem;
  }

  .project-icon {
      width: 40px;
      height: 40px;
      font-size: 1.2rem;
  }

  .project-card h3 {
      font-size: 1.3rem;
  }

  .tech-stack span {
      font-size: 0.75rem;
      padding: 0.3rem 0.6rem;
  }

  .project-links {
      flex-direction: column;
  }

  .project-links a {
      padding: 0.6rem 1rem;
      font-size: 0.9rem;
  }
}

@media screen and (max-width: 480px) {
  .projects-wrapper {
      padding: 0 1rem;
  }

  .project-card {
      padding: 1.2rem;
      min-width: 250px;
  }

  .project-badge {
      font-size: 0.8rem;
      padding: 0.4rem 0.8rem;
  }

  .project-card p {
      font-size: 0.9rem;
  }
}

/* Print Styles */
@media print {
  .projects-section {
      background: none;
      padding: 2rem 0;
  }

  .project-card {
      break-inside: avoid;
      page-break-inside: avoid;
      background: none;
      border: 1px solid #ccc;
  }

  .project-links {
      display: none;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .project-card {
      border: 2px solid var(--primary-color);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-links a,
  .tech-stack span {
      transition: none;
  }
}

/* Mobile Project Section */
/* Base Variables with Mobile Considerations */
@media screen and (max-width: 768px) {
    :root {
        --card-padding: 1.25rem;
        --section-padding: 3rem;
        --mobile-text-scale: 0.9;
    }
}

/* Projects Section Mobile Optimizations */
@media screen and (max-width: 768px) {
    .projects-section {
        padding: var(--section-padding) 0;
    }

    .projects-section h2 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }

    .projects-section .section-subtitle {
        font-size: 1rem;
        margin-bottom: 2.5rem;
        padding: 0 1rem;
    }

    /* Projects Grid Layout */
    .projects-wrapper {
        gap: 1.5rem;
        padding: 0 1rem;
    }

    /* Project Card */
    .project-card {
        width: 100%;
        min-width: unset;
        padding: var(--card-padding);
        backdrop-filter: none; /* Better performance */
    }

    .project-card:hover {
        transform: translateY(-5px); /* Reduced movement */
    }

    /* Project Header */
    .project-header {
        margin-bottom: 1rem;
        gap: 0.75rem;
    }

    .project-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .project-badge {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }

    /* Project Content */
    .project-content {
        font-size: calc(1rem * var(--mobile-text-scale));
    }

    .project-card h3 {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .project-card p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    /* Tech Stack */
    .tech-stack {
        gap: 0.4rem;
        margin-bottom: 1rem;
    }

    .tech-stack span {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    /* Project Links */
    .project-links {
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.25rem;
    }

    .project-links a {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* Small Mobile Devices */
@media screen and (max-width: 375px) {
    .projects-section h2 {
        font-size: 1.75rem;
    }

    .project-card {
        padding: 1rem;
    }

    .project-icon {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
    }

    .project-card h3 {
        font-size: 1.2rem;
    }

    .tech-stack span {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
}

/* Touch Device Optimizations */
@media (hover: none) {
    .project-card {
        transform: none !important;
    }

    .project-card:active {
        transform: scale(0.98) !important;
    }

    .project-links a:active {
        background: rgba(0, 255, 231, 0.15);
        transform: scale(0.98);
    }

    /* Remove hover effects */
    .project-card::before {
        display: none;
    }
}

/* Performance Optimizations */
@media screen and (max-width: 768px) {
    /* Simplified animations */
    .fade-in {
        transition: opacity 0.3s ease;
    }

    /* Reduce paint operations */
    .project-card {
        will-change: transform;
    }

    /* Optimize background effects */
    .projects-section::before {
        opacity: 0.5;
    }
}

/* Loading State */
@media screen and (max-width: 768px) {
    .project-card.loading {
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Safe Area Insets */
@supports (padding: max(0px)) {
    .projects-wrapper {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}
/* 
========================================
6. CERTIFICATIONS SECTION
========================================
*/

.certifications-section {
  padding: 6rem 0;
  background: var(--bg-gradient);
  position: relative;
  overflow: hidden;
}

.certifications-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(0, 255, 231, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Section Header */
.certifications-section h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  color: var(--primary-color);
  text-shadow: 0 0 10px rgba(0, 255, 231, 0.3);
}

.section-subtitle {
  text-align: center;
  color: var(--text-light);
  font-size: 1.1rem;
  margin-bottom: 4rem;
  opacity: 0.8;
}

/* Certificates Grid - 5 per row */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Certificate Card */
.cert-card {
  perspective: 1000px;
  height: 320px;
}

.cert-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cert-card:hover .cert-card-inner {
  transform: rotateY(180deg);
}

.cert-front,
.cert-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Front Side */
.cert-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cert-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.cert-front h3 {
  font-size: 1.1rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.cert-provider {
  font-size: 0.9rem;
  color: var(--text-light);
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.cert-date {
  font-size: 0.8rem;
  color: var(--primary-color);
}

/* Back Side */
.cert-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cert-back h3 {
  font-size: 1rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
  text-align: center;
}

.cert-details {
  flex-grow: 1;
}

.cert-details ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.cert-details li {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  padding-left: 1.2rem;
  position: relative;
}

.cert-details li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--primary-color);
}

.verify-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  background: var(--primary-color);
  color: var(--bg-dark);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.verify-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 255, 231, 0.3);
}

/* Responsive Design */
@media screen and (max-width: 1400px) {
  .certs-grid {
      grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 1200px) {
  .certs-grid {
      grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .certs-grid {
      grid-template-columns: repeat(2, 1fr);
      padding: 0 1rem;
      gap: 1rem;
  }

  .cert-card {
      height: 300px;
  }

  .cert-logo {
      width: 80px;
      height: 80px;
  }
}

@media screen and (max-width: 480px) {
  .certs-grid {
      grid-template-columns: 1fr;
  }
}

/* Certificate Mobile Section */
/* Mobile Responsive Design */
@media screen and (max-width: 768px) {
    .certifications-section {
        padding: 3rem 0;
    }

    .certifications-section h2 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    /* Grid layout - 2 per row */
    .certs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 1rem;
    }

    .cert-card {
        height: 260px;
        perspective: 1000px;
    }

    /* Front side adjustments */
    .cert-front {
        padding: 1rem;
    }

    .cert-logo {
        width: 60px;
        height: 60px;
        margin-bottom: 0.5rem;
    }

    .cert-front h3 {
        font-size: 0.9rem;
        line-height: 1.3;
        margin-bottom: 0.3rem;
    }

    .cert-provider {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }

    .cert-date {
        font-size: 0.75rem;
    }

    /* Back side adjustments */
    .cert-back {
        padding: 0.8rem;
    }

    .cert-back h3 {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .cert-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-bottom: 0.5rem;
    }

    .cert-details p {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }

    .cert-details ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .cert-details li {
        font-size: 0.75rem;
        margin-bottom: 0.2rem;
        padding-left: 0.8rem;
        line-height: 1.2;
    }

    .verify-btn {
        margin-top: auto;
        padding: 0.5rem;
        font-size: 0.75rem;
    }
}

/* Smallest screens */
@media screen and (max-width: 480px) {
    .cert-card {
        height: 240px;
    }

    .cert-details li {
        font-size: 0.7rem;
        margin-bottom: 0.2rem;
    }

    .verify-btn {
        padding: 0.5rem;
        font-size: 0.7rem;
    }
}

/* Touch device interaction */
@media (hover: none) {
    .cert-card.touch-flip .cert-card-inner {
        transform: rotateY(180deg);
    }
}

/* 
========================================
8. BLOGS SECTION
========================================
*/
.blogs-section {
  padding: 6rem 0;
  background: var(--bg-gradient);
  position: relative;
  overflow: hidden;
}

.blogs-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(0, 255, 231, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Section Header */
.blogs-section h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  color: var(--primary-color);
  text-shadow: 0 0 10px rgba(0, 255, 231, 0.3);
}

.section-subtitle {
  text-align: center;
  color: var(--text-light);
  font-size: 1.1rem;
  margin-bottom: 4rem;
  opacity: 0.8;
}

/* Blog Rows */
.blogs-container {
  position: relative;
  overflow: hidden;
  padding: 2rem 0;
}

.blog-row {
  display: flex;
  gap: 0;
  margin-bottom: 3rem;
  position: relative;
  animation: slideLeft 90s linear infinite;
}

.blog-row.reverse {
  animation: slideRight 60s linear infinite;
}

/* Blog Card */
.blog-card {
    min-width: 300px;
    margin-right: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 255, 231, 0.2);
}

/* Featured Articles Row */
.featured-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 4rem;
    padding: 2rem 0;
}

.featured-row .blog-card {
    max-width: 350px;
}

/* Featured Articles */
.blog-card.featured {
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(0, 255, 231, 0.3);
}

.blog-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--primary-color);
    color: var(--bg-dark);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    z-index: 2;
}

.blog-image {
    width: 100%;
    /* Calculate height based on aspect ratio (420/1000 = 0.42) */
    padding-top: 42%; /* This maintains the 1000×420 aspect ratio */
    position: relative;
    overflow: hidden;
}

.blog-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the image covers the area without distortion */
    transition: transform 0.3s ease;
}

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

.blog-content {
  padding: 1.5rem;
}

.blog-content h3 {
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-date {
  font-size: 0.8rem;
  color: var(--primary-color);
}

/* Modal Styles */
.article-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 12, 41, 0.95);
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  margin: 2rem auto;
  background: var(--bg-dark);
  border-radius: 20px;
  overflow: hidden;
  animation: modalFadeIn 0.3s ease;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 2rem;
  cursor: pointer;
  z-index: 1;
}

.modal-body {
  padding: 2rem;
}

.modal-image {
    width: 100%;
    aspect-ratio: 1000/420; /* Explicitly set the aspect ratio */
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.read-full-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: var(--primary-color);
  color: var(--bg-dark);
  text-decoration: none;
  border-radius: 25px;
  margin-top: 1.5rem;
  transition: all 0.3s ease;
}

.read-full-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 255, 231, 0.3);
}

/* Animations */
@keyframes slideLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes slideRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

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

/* Pause animation on hover */
.blog-row:hover {
  animation-play-state: paused;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .blog-card {
      min-width: 250px;
  }
  
  .modal-content {
      width: 95%;
      margin: 1rem auto;
  }
}

/* Mobile Blog Section */
/* Mobile-specific styles for Blog Section */
@media screen and (max-width: 768px) {
    /* Section Basic Styling */
    .blogs-section {
        padding: 3rem 0;
        margin-top: 0;
    }

    .container {
        padding: 0 15px;
        max-width: 100%;
    }

    /* Section Header */
    .blogs-section h2 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
        padding: 0 10px;
    }

    .section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 2rem;
        padding: 0 15px;
        line-height: 1.4;
    }

    /* Featured Articles Row - Mobile */
    .featured-row {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 2rem;
        padding: 1rem;
        flex-wrap: nowrap;
    }

    .featured-row .blog-card {
        width: calc(50% - 0.25rem);
        min-width: 150px;
        max-width: 180px;
        flex-shrink: 1;
    }

    /* Blog Container and Rows */
    .blogs-container {
        padding: 1rem 0;
        margin: 0 -15px;
        overflow-x: hidden;
    }

    .blog-row {
        gap: 0;
        margin-bottom: 1.5rem;
        padding: 0 10px;
        animation: slideLeft 20s linear infinite;
    }

    .blog-row.reverse {
        animation: slideRight 20s linear infinite;
    }

    /* Blog Cards */
    .blog-card {
        min-width: 220px;
        max-width: 280px;
        margin-right: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        margin-right: 15px;
    }

    .blog-image {
        width: 100%;
        padding-top: 42%; /* Maintains 1000×420 aspect ratio */
        position: relative;
        border-radius: 12px 12px 0 0;
        overflow: hidden;
    }

    .blog-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    }

    .blog-content {
        padding: 12px;
    }

    .blog-content h3 {
        font-size: 0.9rem;
        line-height: 1.3;
        margin-bottom: 0.3rem;
        -webkit-line-clamp: 2;
        color: var(--text-light);
    }

    .blog-date {
        font-size: 0.75rem;
        color: var(--primary-color);
        opacity: 0.9;
    }

    /* Card Hover Effects */
    .blog-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 255, 231, 0.15);
    }

    .blog-card:active {
        transform: scale(0.98);
    }

    /* Modal Styles */
    .article-modal {
        padding: 10px;
    }

    .modal-content {
        width: 95%;
        margin: 50px auto;
        max-height: 85vh;
        border-radius: 15px;
    }

    .modal-body {
        padding: 15px;
    }

    .modal-image {
        width: 100%;
        aspect-ratio: 1000/420;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 1rem;
        height: auto; /* Remove fixed height */
    }

    .modal-close {
        top: 10px;
        right: 10px;
        font-size: 1.5rem;
        padding: 5px;
    }

    .modal-text h3 {
        font-size: 1.1rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }

    .modal-date {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    /* Read More Button */
    .read-full-btn {
        width: 100%;
        padding: 0.8rem;
        font-size: 0.9rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        border-radius: 8px;
        margin-top: 1rem;
    }

    /* Animations */
    @keyframes slideLeft {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }

    @keyframes slideRight {
        from { transform: translateX(-50%); }
        to { transform: translateX(0); }
    }

    /* Touch Interactions */
    .blog-card {
        -webkit-tap-highlight-color: transparent;
        touch-action: pan-x pan-y;
    }

    /* Scrollbar Styling */
    .modal-body::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

    /* Performance Optimizations */
    .blog-row {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
    }

    /* Loading State */
    .blogs-container.loading {
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Error State */
    .blogs-container.error {
        text-align: center;
        padding: 2rem;
        color: var(--text-light);
    }


/* Smaller Mobile Devices (under 375px) */
@media screen and (max-width: 375px) {
    .blog-card {
        min-width: 200px;
        max-width: 240px;
    }

    .blog-image {
        width: 100%;
        padding-top: 42%; /* Maintain aspect ratio */
    }

    .blog-content h3 {
        font-size: 0.85rem;
    }

    .blog-date {
        font-size: 0.7rem;
    }

    .modal-content {
        margin: 30px auto;
    }

    .modal-image {
        width: 100%;
        aspect-ratio: 1000/420;
        height: auto;
    }
}


/* Landscape Mode */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .blogs-section {
        padding: 2rem 0;
    }

    .modal-content {
        max-height: 90vh;
        margin: 20px auto;
    }

    .modal-image {
        width: 100%;
        aspect-ratio: 1000/420;
        height: auto;
    }
}


/* Medium-sized devices (tablets) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .blog-card {
        min-width: 260px;
        max-width: 300px;
    }

    .blog-image {
        width: 100%;
        padding-top: 42%; /* Maintain aspect ratio */
    }
}

/* High-DPI Mobile Screens */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), 
       screen and (max-width: 768px) and (min-resolution: 192dpi) {
    .blog-image img {
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* 
========================================
10. FINALE SECTION
========================================
*/
.finale-section {
  padding: 6rem 0 0;
  background: var(--bg-gradient);
  position: relative;
  overflow: hidden;
}

.finale-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(0, 255, 231, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* 
========================================
9. SERVICES SECTION
========================================
*/
.skills-section {
    padding: 4rem 0;
    background: var(--bg-gradient);
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.skills-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.skills-section h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
}

.section-subtitle {
    text-align: center;
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 3rem;
    opacity: 0.8;
}

/* Services Grid Styles */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

.service-box {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.service-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    padding: 2px;
    background: linear-gradient(45deg, #00c3ff, #00eaff);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 195, 255, 0.1);
}

.service-box:hover::before {
    opacity: 1;
}

.service-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.service-icon {
    font-size: 2.5rem;
    color: #00c3ff;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.2));
}

.service-box:hover .service-icon {
    transform: scale(1.1);
}

.service-content h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
}

.service-content p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.8;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .service-box {
        padding: 1.75rem;
    }
}

@media screen and (max-width: 768px) {
    .skills-section h2 {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

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

    .service-box {
        padding: 1.25rem;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.03);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .service-icon {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .service-content h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .service-content p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}

@media screen and (max-width: 480px) {
    .skills-section {
        padding: 3rem 0;
    }

    .skills-container {
        padding: 0 1rem;
    }

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

    .service-box {
        padding: 1rem;
        background: rgba(255, 255, 255, 0.01);
        border: 1px solid rgba(255, 255, 255, 0.02);
        min-height: 140px;
    }

    .service-icon {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .service-content h3 {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }

    .service-content p {
        font-size: 0.8rem;
        line-height: 1.3;
        opacity: 0.7;
    }
}

/* Touch Device Optimizations */
@media (hover: none) {
    .service-box {
        transform: none !important;
        transition: opacity 0.3s ease;
    }

    .service-box:active {
        opacity: 0.8;
    }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    .service-box,
    .service-icon {
        transition: none !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .service-box {
        border: 2px solid var(--primary-color);
    }

    .service-content h3 {
        text-shadow: none;
    }
}

/* Dark Mode Optimization */
@media (prefers-color-scheme: dark) {
    .service-box {
        background: rgba(255, 255, 255, 0.03);
    }
}

/* Improve touch target sizes for mobile */
@media (max-width: 768px) {
    .service-box {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Ensure proper display on ultra-wide screens */
@media screen and (min-width: 1920px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1600px;
    }
}

/* Prevent content overflow */
.service-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Scrollbar Customization */
.skills-section::-webkit-scrollbar {
    width: 8px;
}

.skills-section::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.skills-section::-webkit-scrollbar-thumb {
    background: rgba(0, 195, 255, 0.2);
    border-radius: 4px;
}

/* Optimize for Safari */
@supports (-webkit-touch-callout: none) {
    .service-box {
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Add these animations to your existing CSS file */
@keyframes touchPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

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

/* Update the service-box styles with these additional properties */
.service-box {
    /* Keep existing styles */
    transform: translateZ(0);
    will-change: transform;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Add touch animation for mobile devices */
@media (max-width: 768px) {
    .service-box {
        transition: transform 0.3s ease;
    }

    .service-box.touch-animation {
        animation: touchPop 0.4s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
    }

    /* Remove hover effects on mobile */
    .service-box:hover {
        transform: none;
    }
}

/* Optional: Add floating animation for desktop */
@media (min-width: 769px) {
    .service-box:hover {
        animation: floatAnimation 2s ease-in-out infinite;
    }
}

/* Final Section */
.stats-container {
  text-align: center;
  margin-bottom: 4rem;
}

.visitor-counter {
  display: inline-block;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.counter-box {
  position: relative;
}

.counter-value {
  font-size: 3.5rem;
  color: var(--primary-color);
  font-weight: bold;
  text-shadow: 0 0 20px rgba(0, 255, 231, 0.5);
  margin-bottom: 0.5rem;
}

.counter-label {
  font-size: 1.1rem;
  color: var(--text-light);
  opacity: 0.8;
}

/* Connect Container */
.connect-container {
  text-align: center;
  margin-bottom: 4rem;
}

.connect-container h2 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(0, 255, 231, 0.3);
}

.connect-text {
  font-size: 1.2rem;
  color: var(--text-light);
  opacity: 0.8;
  margin-bottom: 3rem;
}

/* Contact Form Styles */
.contact-form-container {
  max-width: 600px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.contact-form {
  padding: 2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-group {
  position: relative;
  margin-bottom: 2rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem 0 0.5rem 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-light);
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.form-group label {
  position: absolute;
  top: 1rem;
  left: 0;
  color: rgba(240, 240, 240, 0.6);
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-group input:focus + label,
.form-group input:valid + label,
.form-group textarea:focus + label,
.form-group textarea:valid + label {
  top: -0.5rem;
  font-size: 0.8rem;
  color: var(--primary-color);
}

.form-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(240, 240, 240, 0.2);
  transition: all 0.3s ease;
}

.form-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), #00d4ff);
  transition: width 0.3s ease;
}

.form-group input:focus ~ .form-line::after,
.form-group textarea:focus ~ .form-line::after {
  width: 100%;
}

.form-submit-btn {
  position: relative;
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(45deg, var(--primary-color), #00d4ff);
  border: none;
  border-radius: 50px;
  color: #0f0c29;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.form-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 255, 231, 0.3);
}

.btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.form-submit-btn:hover .btn-glow {
  left: 100%;
}

.btn-text {
  position: relative;
  z-index: 1;
}

/* Social Grid */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Hide desktop-only items on mobile */
.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .social-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 0 2rem;
  }
  
  .social-grid .social-item {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 1.5rem !important;
  }
  
  .social-info h3 {
    margin-bottom: 0.3rem;
  }
  
  /* First row: Email, LinkedIn, GitHub, WhatsApp */
  .social-grid .social-item:nth-child(1) { grid-column: 1; grid-row: 1; }
  .social-grid .social-item:nth-child(2) { grid-column: 2; grid-row: 1; }
  .social-grid .social-item:nth-child(3) { grid-column: 3; grid-row: 1; }
  .social-grid .social-item:nth-child(4) { grid-column: 4; grid-row: 1; }
  
  /* Second row: Dev.to and Medium centered */
  .social-grid .social-item:nth-child(5) { grid-column: 2; grid-row: 2; }
  .social-grid .social-item:nth-child(6) { grid-column: 3; grid-row: 2; }
  
  /* Show desktop-only items on desktop */
  .desktop-only {
    display: flex;
  }
}

.social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-item:hover {
  transform: translateY(-5px);
  background: rgba(0, 255, 231, 0.1);
  border-color: var(--primary-color);
}

.social-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 231, 0.1);
  border-radius: 12px;
  font-size: 1.5rem;
  color: var(--primary-color);
}

.social-info h3 {
  color: var(--text-light);
  font-size: 1.1rem;
  margin: 0;
}

.social-info p {
  color: var(--primary-color);
  font-size: 0.9rem;
  margin: 0;
}

/* Footer */
.footer {
  background: rgba(15, 12, 41, 0.95);
  padding: 4rem 2rem 2rem;
  margin-top: 4rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.footer-brand {
  margin-bottom: 2rem;
}

.brand-name {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.brand-title {
  color: var(--text-light);
  opacity: 0.8;
}

.footer-quote {
  font-style: italic;
  color: var(--text-light);
  opacity: 0.7;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-light);
  opacity: 0.8;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .counter-value {
      font-size: 2.5rem;
  }

  .connect-container h2 {
      font-size: 2rem;
  }



  .footer {
      padding: 3rem 1rem 1.5rem;
  }

  .footer-bottom {
      flex-direction: column;
      gap: 1rem;
  }
}

:root {
  --mobile-padding: 1rem;
  --mobile-font-size-large: 1.8rem;
  --mobile-font-size-medium: 1.2rem;
  --mobile-font-size-small: 0.9rem;
  --vh: 1vh; /* fallback */
}

@media screen and (max-width: 768px) {
  body {
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
  }

  .container {
      padding: 0 var(--mobile-padding);
  }

  .hero {
      min-height: calc(var(--vh, 1vh) * 100);
      padding: 2rem var(--mobile-padding);
  }

  .hero h1 {
      font-size: var(--mobile-font-size-large);
  }

  .hero-description,
  #typed-text {
      font-size: var(--mobile-font-size-medium);
  }

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

  .blog-card,
  .project-card {
      width: 100%;
      margin-bottom: 1rem;
  }

  .skill-box,
  .profile-image {
      aspect-ratio: 1;
  }
}

@media screen and (max-width: 375px) {
  .hero h1 {
      font-size: 1.6rem;
  }
  #typed-text {
      font-size: 1.1rem;
  }
}

@media (hover: none) {
  .blog-card:active,
  .project-card:active {
      transform: translateY(-5px);
  }
}

/* Mobile final Sectiom */
/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
    /* Stats Container */
    .stats-container {
        margin-bottom: 3rem;
        padding: 0 1rem;
    }

    .visitor-counter {
        padding: 1.5rem;
        width: 100%;
        max-width: 300px;
        backdrop-filter: none; /* Better performance on mobile */
    }

    .counter-value {
        font-size: 2.5rem;
        margin-bottom: 0.3rem;
    }

    .counter-label {
        font-size: 1rem;
    }

    /* Connect Container */
    .connect-container {
        margin-bottom: 3rem;
        padding: 0 1rem;
    }

    .connect-container h2 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }

    .connect-text {
        font-size: 1rem;
        margin-bottom: 2rem;
        padding: 0 0.5rem;
    }



    .social-item {
        padding: 1rem;
        gap: 1rem;
    }

    .social-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .social-info h3 {
        font-size: 1rem;
    }

    .social-info p {
        font-size: 0.85rem;
    }

    /* Footer */
    .footer {
        padding: 2.5rem 1rem 1.5rem;
        margin-top: 2rem;
    }

    .footer-content {
        padding: 0 0.5rem;
    }

    .brand-name {
        font-size: 1.75rem;
    }

    .brand-title {
        font-size: 0.9rem;
    }

    .footer-quote {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
        padding: 0 1rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        padding-top: 1.5rem;
    }

    .location {
        font-size: 0.9rem;
    }
}

/* Small Mobile Devices */
@media screen and (max-width: 375px) {
    .visitor-counter {
        padding: 1.25rem;
    }

    .counter-value {
        font-size: 2rem;
    }

    .counter-label {
        font-size: 0.9rem;
    }

    .connect-container h2 {
        font-size: 1.75rem;
    }

    .connect-text {
        font-size: 0.9rem;
    }

    .social-item {
        padding: 0.875rem;
    }

    .social-icon {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
    }

    .brand-name {
        font-size: 1.5rem;
    }

    .footer-quote {
        font-size: 0.85rem;
    }
}

/* Touch Device Optimizations */
@media (hover: none) {
    .social-item {
        transition: transform 0.2s ease;
    }

    .social-item:active {
        transform: scale(0.98);
        background: rgba(0, 255, 231, 0.08);
    }

    /* Remove hover effects */
    .social-item:hover {
        transform: none;
    }
}

/* Performance Optimizations */
@media screen and (max-width: 768px) {
    .social-item,
    .visitor-counter {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.05);
    }

    /* Reduce animation complexity */
    .social-item {
        transition: transform 0.2s ease;
    }
}

/* Safe Area Insets for Modern Mobile Devices */
@supports (padding: max(0px)) {
    .footer {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}


/* Neo Light Effect - S3 Match */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ffe7, #00ffe7, #00ffe7, transparent);
    background-size: 200% 100%;
    animation: neonFlow 8s linear infinite;
}

.hero::before {
    top: 0;
    box-shadow: 0 0 10px #00ffe7, 0 0 20px #00ffe7, 0 0 40px #00ffe7;
    opacity: 0.7;
    z-index: 10;
}

.hero::after {
    top: 4px;
    filter: blur(2px);
    opacity: 0.3;
    z-index: 9;
}

@keyframes neonFlow {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}