/* Root CSS Variables for Theming */
/* Enhanced Dark Mode Implementation with smooth transitions and improved contrast */
:root {
    /* Light Mode Colors (Analyst's Clarity) */
    --primary-accent: #007bff;
    --secondary-accent: #6c757d;
    --background-color: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #495057;
    --border-color: #dee2e6;
    --card-background: #ffffff; /* Assuming cards are white in light mode */
    --footer-background: #111; /* Keeping original for now, can be themed */

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

/* Dark Mode Overrides */
body.dark-mode {
    --primary-accent: #64b5f6;
    --secondary-accent: #adb5bd;
    --background-color: #1a1a1a;
    --text-primary: #f5f5f5;
    --text-secondary: #b0b0b0;
    --border-color: #404040;
    --card-background: #2d2d2d; /* Darker cards for dark mode with better contrast */
    --footer-background: #0f0f0f; /* Slightly darker footer */
}

/* General Body and Text Styles */
body {
    background: var(--background-color);
    color: var(--text-primary);
    font-family: var(--font-body); /* Apply new body font */
    transition: background-color 0.3s ease, color 0.3s ease;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    transition-property: background-color, border-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Disable transitions for animations to prevent conflicts */
.animate-on-scroll,
.animated,
[class*="animation"] {
    transition: none !important;
}

html{
    scroll-behavior: smooth;
}

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

/* Fade in from bottom */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Slide in from left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale in */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Skill bar fill animation */
@keyframes fillBar {
    from {
        width: 0;
    }
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================ */

/* Base state for animated elements */
.animate-on-scroll {
    opacity: 0;
}

.animate-on-scroll.animated {
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Section titles */
section .title {
    opacity: 0;
}

section .title.animated {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* navbar styling */
.navbar{
    position: fixed;
    z-index:999 ;
    width: 100%;
    padding: 30px 0;
    font-family: var(--font-heading); /* Apply new heading font */
    transition: all 0.3s ease, background-color 0.3s ease;
}
.navbar.sticky {
    padding: 15px 0;
    background: var(--background-color); /* Use background color for sticky nav */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Modern shadow */
}
.navbar .max-width{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.max-width{
    max-width: 1300px;
    padding: 0 80px;
    margin: auto;
}
.navbar .logo a{
    color: var(--text-primary); /* Logo text color */
    font-size: 35px;
    font-weight: 600;
}
.navbar .logo a span{
    color: var(--primary-accent); /* Logo accent color */
}
.navbar.sticky .logo a span{
    color: var(--primary-accent); /* Sticky logo accent color */
    transition: all 0.3s ease;
}

.navbar .menu li{
    list-style: none;
    display: inline-block;
}
.navbar .menu li a{
    display: block;
    color: var(--text-primary); /* Menu item color */
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.navbar .menu li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-accent);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar .menu li a:hover{
    color: var(--primary-accent); /* Menu item hover color */
}
.navbar .menu li a:hover::after {
    width: 100%;
}
.navbar.sticky .menu li a:hover{
    color: var(--primary-accent); /* Sticky menu item hover color */
}
/* meny btn styling */
.menu-btn{
    color: var(--text-primary); /* Menu button color */
    font-size: 23px;
    cursor: pointer;
    display: none;

}
.scroll-up-btn{
    position: fixed;
    height: 45px;
    width: 42px;
    background: var(--primary-accent);
    right:30px;
    bottom: 10px;
    text-align: center;
    line-height: 45px;
    color: var(--background-color); /* Text color should contrast with accent */
    z-index: 999;
    font-size: 30px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-up-btn.show{
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
    animation: fadeInUp 0.5s ease;
}
.scroll-up-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

/* home Section Style */

.home {
    background: linear-gradient(-45deg, #CAF0F8, #FFEDF4, #B3EBFF, #C9FFF2);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
    font-family: var(--font-heading); /* Apply new heading font */
    transition: background 0.5s ease;
}

/* Dark mode home gradient */
body.dark-mode .home {
    background: linear-gradient(-45deg, #1a2332, #2d1b2e, #1e2836, #1d2d2d);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Animated Background Gradients for Project/Blog Cards */
@keyframes dataFlow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes cloudFloat {
	0% {
		background-position: 0% 0%;
	}
	50% {
		background-position: 100% 100%;
	}
	100% {
		background-position: 0% 0%;
	}
}

@keyframes aiPulse {
	0%, 100% {
		background-position: 0% 50%;
		filter: hue-rotate(0deg);
	}
	50% {
		background-position: 100% 50%;
		filter: hue-rotate(15deg);
	}
}




.home .max-width{
    margin: auto 0 auto 40px;
  
}

#profile_pic{
    position:absolute; 
    top:250px; 
    left:470px; 
    width:300px; 
    height:300px; 
    border:none;

}
.home .home-content .text-2{
    font-size: 75px;
    font-weight: 600;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
    position: absolute;
    align-content: center;
    white-space: normal;
    color: var(--text-primary); /* Ensure home text uses primary text color */
   
}
.home .home-content .text-3{
    font-size: 40px;
    margin: 5px 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
    position: absolute;
    align-content: center;
    white-space: normal;
    color: var(--text-primary); /* Ensure home text uses primary text color */

}
.home .home-content .text-3 span{
    color: var(--primary-accent); /* Home accent color */
    font-weight: 500;
}

/* Similar Code Content */
.about, .services, .skills, .projects, .contact, footer{
    font-family: var(--font-body); /* Apply new body font */
}
.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
section{
    padding: 100px 0;
}
section .title{
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 60px;
    padding-bottom: 20px;
    font-family: var(--font-heading); /* Apply new heading font */
    color: var(--text-primary); /* Section titles use primary text color */
    transition: color 0.3s ease;
}
section .title::before {
    background: var(--text-primary); /* Title underline color */
}

.about .about-content .left{
    width: 45%;
    opacity: 0;
}

.about .about-content .left.animated {
    animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.about .about-content .left img{
    height: 410px;
    width: 410px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 6px 0 rgba(34, 60, 80, .16);
    transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;

}
.about .about-content .left img:hover{
    box-shadow: 0 10px 14px 0 rgba(34, 60, 80, .16);
    transform: scale(1.05) rotate(2deg);
}
.about .about-content .right{
    width:55%;
    opacity: 0;
}

.about .about-content .right.animated {
    animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.2s;
}
.about .about-content .right .text{
    font-size: 25px;
    font-weight:600;
    margin-bottom: 10px;
}
.about .about-content .right .text span{
    color: var(--primary-accent); /* About section accent */
}
.about .about-content .right  p{
    text-align: justify;
    font-size: 20px;
}
.about .about-content .right  a{
    display: inline-block;
    background: var(--primary-accent);
    color: var(--background-color); /* Button text color */
    font-size: 20px;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid var(--primary-accent);
    transition: all 0.3s ease;
}

.about .about-content .right  a:hover{
    color: var(--primary-accent);
    background: none;
}

/* Stats Container */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 50px;
    padding: 40px 0;
}

.stat-box {
    background: var(--card-background);
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    opacity: 0;
}

.stat-box.animated {
    animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stat-box:nth-child(1).animated {
    animation-delay: 0.1s;
}

.stat-box:nth-child(2).animated {
    animation-delay: 0.2s;
}

.stat-box:nth-child(3).animated {
    animation-delay: 0.3s;
}

.stat-box:nth-child(4).animated {
    animation-delay: 0.4s;
}

.stat-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.stat-box i {
    font-size: 40px;
    color: var(--primary-accent);
    margin-bottom: 15px;
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 10px 0;
    font-family: var(--font-heading);
}

.stat-label {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Services Section */
.services, .projects{
    color: var(--text-primary); /* Text color for these sections */
    background: var(--background-color); /* Background color for these sections */
}
.services .title::before,
.projects .title::before{
    background: var(--text-primary); /* Title underline color */
}

.services .serv-content .card{
    width: calc(33% - 20px);
    background: var(--card-background); /* Card background */
    text-align: center;
    border-radius: 6px;
    padding: 20px 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Subtle card shadow */
    opacity: 0;
}

.services .serv-content .card.animated {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.services .serv-content .card:nth-child(1) {
    animation-delay: 0.1s;
}

.services .serv-content .card:nth-child(2) {
    animation-delay: 0.2s;
}

.services .serv-content .card:nth-child(3) {
    animation-delay: 0.3s;
}

.services .serv-content .card:hover{
    background: var(--primary-accent);
    color: var(--background-color); /* Text color on hover */
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 123, 255, 0.2);
}
.services .serv-content .card .box{
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.services .serv-content .card:hover .box{
    transform: scale(1.05);
}
.services .serv-content .card i{
    font-size: 50px;
    color: var(--primary-accent);
    transition: all 0.3s ease;
}
.services .serv-content .card:hover i{
    color: var(--background-color); /* Icon color on hover */
}
.services .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin:10px 0 7px 0;
}
/* Skills Section */

.skills .skills-content .column{
    width: calc(50% - 30px);
}
.skills .skills-content .left .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.work-1 {
    font-size: 15px;
    font-weight: 600;
}


.skills .skills-content .left p{
    text-align: justify;
}
.skills .skills-content .left a{
    display: inline-block;
    background: var(--primary-accent);
    color: var(--background-color); /* Button text color */
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid var(--primary-accent);
    transition: all 0.3s ease;
}
.skills .skills-content .left a:hover{
    color: var(--primary-accent);
    background: none;
}
.skills .skills-content .right .bars{
    margin-bottom: 15px;
}
.skills .skills-content .right .info{
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}
.skills .skills-content .right span{
    font-weight: 500;
    font-size: 18px;
}
.skills .skills-content .right .line{
    height: 5px;
    width: 100%;
    background: var(--border-color); /* Skill bar background */
    position: relative;
    border-radius: 3px;
    overflow: hidden;
}
.skills .skills-content .right .line::before{
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--primary-accent); /* Skill bar fill color */
    width: 0;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 3px;
}

.skills .skills-content .right .bars.animated .python::before{
    width: 95%;
}
.skills .skills-content .right .bars.animated .aws::before{
    width: 90%;
    transition-delay: 0.1s;
}
.skills .skills-content .right .bars.animated .sql::before{
    width: 95%;
    transition-delay: 0.2s;
}
.skills .skills-content .right .bars.animated .databricks::before{
    width: 85%;
    transition-delay: 0.3s;
}
.skills .skills-content .right .bars.animated .terraform::before{
    width: 80%;
    transition-delay: 0.4s;
}

/* Skill section content animations */
.skills .skills-content .left {
    opacity: 0;
}

.skills .skills-content .left.animated {
    animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.skills .skills-content .right {
    opacity: 0;
}

.skills .skills-content .right.animated {
    animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.2s;
}


/* Project Filter Buttons */
.project-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 25px;
    border: 2px solid var(--primary-accent);
    background: transparent;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--primary-accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.project-card {
    background: var(--card-background);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    opacity: 0;
}

.project-card.animated {
    animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.project-image {
    position: relative;
    overflow: hidden;
    height: 220px;
}

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

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

/* Animated Background Classes */
.animated-bg {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.project-card:hover .animated-bg,
.blog-card:hover .animated-bg {
    transform: scale(1.1);
}

/* Data Engineering - Circuit board pattern */
.data-engineering-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.data-engineering-bg::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(255,255,255,0.1) 40px, rgba(255,255,255,0.1) 42px),
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,255,255,0.1) 40px, rgba(255,255,255,0.1) 42px);
    animation: moveGrid 20s linear infinite;
}

.data-engineering-bg::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255,255,255,0.15) 0%, transparent 50%);
}

/* Cloud - Floating geometric shapes */
.cloud-bg {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.cloud-bg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.2) 2%, transparent 2%),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.15) 3%, transparent 3%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 1.5%, transparent 1.5%);
    background-size: 80px 80px;
    animation: floatPattern 15s linear infinite;
}

.cloud-bg::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    top: -50px;
    right: -50px;
    animation: pulse 4s ease-in-out infinite;
}

/* AI/ML - Neural network pattern */
.aiml-bg {
    background: linear-gradient(135deg, #fa709a 0%, #c471ed 100%);
}

.aiml-bg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(30deg, transparent 40%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.1) 60%, transparent 60%),
        linear-gradient(60deg, transparent 40%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.05) 60%, transparent 60%);
    background-size: 60px 60px;
    animation: movePattern 10s linear infinite;
}

.aiml-bg::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2) 1px, transparent 1px),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,0.2) 1px, transparent 1px),
        radial-gradient(circle at 50% 80%, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Career - Hexagon pattern */
.career-bg {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.career-bg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(30deg, transparent 73%, rgba(255,255,255,0.1) 75%, transparent 77%),
        linear-gradient(150deg, transparent 73%, rgba(255,255,255,0.1) 75%, transparent 77%);
    background-size: 50px 87px;
}

.career-bg::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.08);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    bottom: -30px;
    left: -30px;
    animation: rotate 20s linear infinite;
}

/* Tutorial - Code/Matrix pattern */
.tutorial-bg {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.tutorial-bg::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(255,255,255,0.08) 20px, rgba(255,255,255,0.08) 21px),
        repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(255,255,255,0.08) 20px, rgba(255,255,255,0.08) 21px);
    animation: moveGrid 25s linear infinite;
}

.tutorial-bg::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.05) 50%);
    background-size: 40px 40px;
}

/* Mixed categories - Data flow visualization */
.cloud-data-bg {
    background: linear-gradient(135deg, #4facfe 0%, #667eea 100%);
}

.cloud-data-bg::before {
    content: '';
    position: absolute;
    width: 300%;
    height: 100%;
    background-image:
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,0.1) 50px, rgba(255,255,255,0.1) 100px, transparent 100px, transparent 150px);
    animation: dataStream 20s linear infinite;
}

.cloud-data-bg::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 2px, transparent 2px),
        radial-gradient(circle at 60% 70%, rgba(255,255,255,0.1) 2px, transparent 2px),
        radial-gradient(circle at 80% 40%, rgba(255,255,255,0.08) 2px, transparent 2px);
    background-size: 70px 70px;
}

/* Animations for patterns */
@keyframes moveGrid {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

@keyframes floatPattern {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-80px, -80px); }
}

@keyframes movePattern {
    0% { transform: translateX(0); }
    100% { transform: translateX(60px); }
}

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

@keyframes dataStream {
    0% { transform: translateX(0); }
    100% { transform: translateX(-150px); }
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 123, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.project-links {
    display: flex;
    gap: 20px;
}

.project-link {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-accent);
    font-size: 20px;
    transition: all 0.3s ease;
}

.project-link:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.project-info {
    padding: 25px;
}

.project-info h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    font-family: var(--font-heading);
}

.project-info p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 15px;
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.tech-badge {
    padding: 6px 14px;
    background: var(--primary-accent);
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.tech-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.3);
}
.owl-dots{
    text-align: center;
    margin-top: 20px;
}
.owl-dot{
    height: 13px;
    width: 13px;
    margin:0 5px;
    outline: none !important;
    border-radius: 50%;
    border: 2px solid var(--primary-accent) !important;
    transition: all 0.3s ease;
}
.owl-dot.active{
    width: 35px;
    border-radius: 14px;
}
.owl-dot.active,
.owl-dot:hover{
    background: var(--primary-accent) !important;
}

/* ============================================
   BLOG SECTION
   ============================================ */

.blog {
    color: var(--text-primary);
    background: var(--background-color);
}

.blog .title::before {
    background: var(--text-primary);
}

/* Blog Filter Buttons */
.blog-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.blog-filter-btn {
    padding: 10px 25px;
    border: 2px solid var(--primary-accent);
    background: transparent;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
}

.blog-filter-btn:hover,
.blog-filter-btn.active {
    background: var(--primary-accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.blog-card {
    background: var(--card-background);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    opacity: 0;
    display: flex;
    flex-direction: column;
}

.blog-card.animated {
    animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.blog-card.hide {
    display: none;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Blog Image with Date Badge */
.blog-image {
    position: relative;
    overflow: hidden;
    height: 240px;
}

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

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

.blog-date {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--primary-accent);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.blog-date .day {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    font-family: var(--font-heading);
}

.blog-date .month {
    display: block;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Blog Content */
.blog-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    color: white;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.blog-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.5s ease;
}

.blog-category:hover::before {
    left: 100%;
}

.blog-category i {
    font-size: 16px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

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

/* Data Engineering - Blue to Purple gradient */
.blog-category.data-engineering-cat {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.blog-category.data-engineering-cat:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

/* Cloud - Sky blue gradient */
.blog-category.cloud-cat {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
}

.blog-category.cloud-cat:hover {
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(79, 172, 254, 0.5);
}

/* Career - Warm orange to pink gradient */
.blog-category.career-cat {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
}

.blog-category.career-cat:hover {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(245, 87, 108, 0.5);
}

/* Tutorial - Green to teal gradient */
.blog-category.tutorial-cat {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    box-shadow: 0 4px 12px rgba(67, 233, 123, 0.4);
}

.blog-category.tutorial-cat:hover {
    background: linear-gradient(135deg, #38f9d7 0%, #43e97b 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(67, 233, 123, 0.5);
}

.read-time {
    color: var(--text-secondary);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.read-time i {
    font-size: 14px;
}

.blog-content h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    font-family: var(--font-heading);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-content h3 {
    color: var(--primary-accent);
}

.blog-content p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-accent);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.read-more:hover {
    gap: 12px;
}

.read-more i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.read-more:hover i {
    transform: translateX(5px);
}

/* Blog Section Animations */
.blog .blog-filters {
    opacity: 0;
}

.blog .blog-filters.animated {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.2s;
}

/* Staggered animation for blog cards */
.blog-card:nth-child(1).animated {
    animation-delay: 0.1s;
}

.blog-card:nth-child(2).animated {
    animation-delay: 0.2s;
}

.blog-card:nth-child(3).animated {
    animation-delay: 0.3s;
}

.blog-card:nth-child(4).animated {
    animation-delay: 0.4s;
}

.blog-card:nth-child(5).animated {
    animation-delay: 0.5s;
}

.blog-card:nth-child(6).animated {
    animation-delay: 0.6s;
}

/* contact section */

.contact .contact-content .column{
    width: calc(50% - 30px);
}
.contact .contact-content .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;

}
.contact .contact-content .left p{
    text-align: justify;
}
.contact .contact-content .left .icons{
    margin:10px 0;
}
.contact .contact-content .row{
    display: flex;
    height: 65px;
    align-items: center;
}
.contact .contact-content .row .info{
    margin-left: 25px;
}
.contact .contact-content .row i{
    font-size: 25px;
    color: var(--primary-accent);
}
.contact .contact-content .info .head{
    font-weight: 500;
}
.contact .contact-content .info .sub-title{
    color: var(--text-secondary); /* Subtitle color */
}

/* Contact Section Social Links */
.social-links-inline {
    display: flex;
    gap: 12px;
    margin-top: 5px;
}

.contact-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 123, 255, 0.1);
    color: var(--primary-accent);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    font-size: 16px;
}

.contact-social-link:hover {
    background: var(--primary-accent);
    color: white;
    transform: translateY(-2px) scale(1.1);
    border-color: var(--primary-accent);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Dark mode contact social links */
body.dark-mode .contact-social-link {
    background: rgba(100, 181, 246, 0.15);
    color: #64b5f6;
}

body.dark-mode .contact-social-link:hover {
    background: #64b5f6;
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(100, 181, 246, 0.4);
}
.contact .right form .fields{
    display: flex;
}
.contact .right form .field,
.contact .right form .fields .field{
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
}
.contact .right form .textarea{
    height: 80px;
    width: 100%;
}
.contact .right form .name{
    margin-right: 10px;
}
.contact .right form .email{
    margin-left: 10px;
}
.contact .right form .field input,
.contact .right form .textarea textarea{
    height: 100%;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    outline: none;
    padding: 0 15px;
    font-size: 17px;
    font-family: var(--font-body); /* Input font */
    background: var(--card-background); /* Input background */
    color: var(--text-primary); /* Input text color */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease;
}

.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus{
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    transform: translateY(-2px);
}

.contact .right form .textarea textarea{
    padding-top: 10px;
    resize: none;
}

/* Contact section content animations */
.contact .contact-content .left {
    opacity: 0;
}

.contact .contact-content .left.animated {
    animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.contact .contact-content .right {
    opacity: 0;
}

.contact .contact-content .right.animated {
    animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.2s;
}
.contact .right form .button{
    height: 47px;
    width: 30%;
}
.contact .right form .button button{
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary-accent) ;
    background: var(--primary-accent);
    color: var(--background-color); /* Button text color */
    font-size: 20px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.contact .right form .button button:hover{
    color: var(--primary-accent);
    background: none;
}

/* Contact form button disabled state */
.contact .right form .button button:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

/* Form notification styles */
.form-notification {
    margin-top: 20px;
    padding: 15px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    display: none;
}

.form-notification.show {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

.form-notification.success {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
    border: 2px solid #4caf50;
}

.form-notification.error {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
    border: 2px solid #f44336;
}

/* Dark mode notification adjustments */
body.dark-mode .form-notification.success {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
    border-color: #81c784;
}

body.dark-mode .form-notification.error {
    background: rgba(244, 67, 54, 0.15);
    color: #e57373;
    border-color: #e57373;
}

/* footer section */

footer{
    background: var(--footer-background);
    padding:20px 23px;
    color: var(--text-primary); /* Footer text color */
    font-family: var(--font-body); /* Footer font */
}
footer span a{
    color: var(--primary-accent);
    text-decoration: none;
}
footer span a:hover{
    text-decoration: underline;
}

/* Footer Content Layout */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 80px;
}

.footer-left {
    flex: 1;
}

.footer-social {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Footer Social Links */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 123, 255, 0.1);
    color: var(--primary-accent);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    font-size: 18px;
}

.social-link:hover {
    background: var(--primary-accent);
    color: white;
    transform: translateY(-3px) scale(1.05);
    border-color: var(--primary-accent);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
}

/* Dark mode social links */
body.dark-mode .social-link {
    background: rgba(100, 181, 246, 0.15);
    color: #64b5f6;
}

body.dark-mode .social-link:hover {
    background: #64b5f6;
    color: #1a1a1a;
    box-shadow: 0 5px 15px rgba(100, 181, 246, 0.4);
}


/* responsive media query */
@media (max-width: 1642px){
    #profile_pic{
        display: none;
    }
}

/* Theme Toggle Button Styling */
.theme-toggle-btn {
    background: var(--primary-accent);
    color: var(--background-color);
    border: 2px solid var(--primary-accent);
    width: 40px; /* Make it a square button */
    height: 40px;
    border-radius: 50%; /* Make it round */
    cursor: pointer;
    font-size: 18px; /* Icon size */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 25px; /* Align with menu items */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    position: relative;
    overflow: hidden;
}

.theme-toggle-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.theme-toggle-btn:active::before {
    width: 100px;
    height: 100px;
}

.theme-toggle-btn:hover {
    background: transparent;
    color: var(--primary-accent);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    transform: scale(1.15);
}

.theme-toggle-btn i {
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    z-index: 1;
}

body.dark-mode .theme-toggle-btn i {
    transform: rotate(180deg);
}

/* Visually hide screen reader text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Adjust navbar menu for button */
.navbar .menu li .theme-toggle-btn {
    margin-top: 0; /* Reset margin for button in menu */
    margin-bottom: 0;
}

/* Responsive adjustments for the toggle button */
@media (max-width: 947px) {
    .navbar .menu li .theme-toggle-btn {
        display: flex; /* Ensure button is visible and centered in mobile menu */
        margin: 20px auto; /* Center in mobile menu */
    }
}
@media (max-width: 1300px){
    .home .max-width{
        margin-left: 0px;
    }
}
@media (max-width: 1104px){
    .about .about-content .left img{
        height: 350px;
        width: 350px;
    }
    .home{
        background-color: var(--background-color); /* Use variable */
    }

}
@media (max-width: 991px){
    .max-width {
        padding: 0 50px;
    }

}
    

@media (max-width: 947px){
    .max-width{
        padding: 0 50px;
    }
    .menu-btn{
        display: block;
        z-index: 999;
    }
    .menu-btn i.active:before{
        content: "\f00d";
    }
    .navbar .menu{
        position: fixed;
        background: var(--primary-accent); /* Use variable */
        height:100vh;
        width: 100%;
        right: -100%;
        top: 0;
        text-align: center;
        padding-top: 80px;
        clip-path: circle(100px at 90% 10%);
        -webkit-clip-path:circle(100px at 90% 10%);
        transition: all 0.3s ease-out;
    }
    .navbar .menu.open {
        clip-path: circle(1300px at 90% -10%);
        -webkit-clip-path:circle(1300px at 90% -10%);
    }
    .navbar .menu.active {
        left:0 ;
    }
    .navbar .menu li {
        display: block;
    }
    .navbar .menu li a {
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
    }
    .home .home-content .text-2{
        font-size: 45px;
    }
    .home .home-content .text-3{
        font-size: 30px;   
    }
    .home .home-content a{
        font-size: 23px;
        padding: 10px 30px;
    }
    .max-width{
        max-width: 800px;
      
    }
    .about .about-content .column{
        width: 100%;
    }
    .about .about-content .left{
        display:flex;
        justify-content: center;
        margin: 0 auto 60px;
    }
    .about .about-content .right{
        flex: 100%;
    }
    .services .serv-content .card{
        width: calc(50% - 10px);
        margin-bottom: 20px;
        grid-template-columns: 1fr 1fr;
        height: auto;
        grid-template-rows: auto;
    }
    .skills .skills-content .column,
    .contact .contact-content .column{
        width: 100%;
        margin-bottom: 35px;
    }
  
    
}
@media (max-width: 690px){
    .home .max-width{
        margin-left: 0 23px;
    }
    .home .home-content .text-1{
        font-size: 25px;
    }
    .home .home-content .text-2{
        font-size: 40px;
    }
    .home .home-content .text-3{
        font-size: 30px;   
    }
    .home .home-content a{
        font-size: 20px;
    }
    .services .serv-content .card{
        width: 100%;
    }

    
}
@media (max-width: 500px){
    .home .home-content .text-1{
        font-size: 20px;
    }
    .home .home-content .text-2{
        font-size: 35px;
    }
    .home .home-content .text-3{
        font-size: 15px;
    }
    section .title::after{
        font-size: 14px;
    }
}

/* Responsive styles for new components */
@media (max-width: 947px){
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 30px 0;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .project-filters {
        gap: 10px;
    }

    .filter-btn {
        padding: 8px 20px;
        font-size: 14px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .blog-filters {
        gap: 10px;
    }

    .blog-filter-btn {
        padding: 8px 20px;
        font-size: 14px;
    }
}

@media (max-width: 690px){
    .stats-container {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .stat-box {
        padding: 25px 15px;
    }

    .stat-number {
        font-size: 32px;
    }

    .stat-label {
        font-size: 14px;
    }

    .project-info h3 {
        font-size: 20px;
    }

    .project-info p {
        font-size: 14px;
    }

    .tech-badge {
        font-size: 12px;
        padding: 5px 12px;
    }

    .blog-content h3 {
        font-size: 20px;
    }

    .blog-content p {
        font-size: 14px;
    }

    .blog-category {
        font-size: 12px;
        padding: 5px 12px;
    }

    .read-time {
        font-size: 13px;
    }

    /* Footer responsive */
    .footer-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 0 20px;
    }

    .footer-left {
        order: 2;
    }

    .footer-social {
        order: 1;
        justify-content: center;
    }

    /* Contact social links responsive */
    .social-links-inline {
        justify-content: flex-start;
    }
}

/* Additional responsive breakpoint for footer */
@media (max-width: 500px) {
    .social-link {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .contact-social-link {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}