:root {
    --lightning-blue: #0066ff;
    --electric-blue: #00ccff;
    --deep-blue: #003366;
    --navy: #001a33;
    --light-gray: #f5f8fa;
    --dark-text: #333333;
    --light-text: #ffffff;
    --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --shadow: 0 8px 30px rgba(0, 102, 255, 0.15);
}

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

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, var(--light-gray) 0%, #e6f2ff 100%);
    color: var(--dark-text);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Navigation */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 102, 255, 0.1);
    padding: 20px 0;
    transition: var(--transition);
}

header.scrolled {
    padding: 15px 0;
    box-shadow: 0 5px 20px rgba(0, 102, 255, 0.1);
}

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

.logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--lightning-blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.3s ease; /* Added for hover effect */
}

.logo:hover {
    color: var(--electric-blue); /* Logo hover color */
}

.logo i {
    margin-right: 10px;
    color: var(--electric-blue);
    animation: pulse 2s infinite;
}

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

.nav-links li {
    margin-left: 30px;
}

.nav-links a {
    color: var(--navy);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    position: relative;
    padding: 5px 0;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--lightning-blue);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--electric-blue);
    transition: var(--transition);
}

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

.menu-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--deep-blue);
    cursor: pointer;
}

.menu-toggle i {
    transition: transform 0.3s ease; /* Transition for icon animation */
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 128px 0 96px; /* Adjusted padding */
    background-color: var(--navy); /* Set a solid dark background */
    position: relative; /* Ensure stacking context */
    overflow: hidden; /* Already there, good */
}

.hero::before {
    /* This light radial gradient might conflict with dark trails.
       Consider removing it or ensuring it's behind the canvas if trails are dark.
       For now, let's comment it out or ensure its z-index is lower than canvas.
       If we set hero background to navy, this ::before might not be needed or desired.
    */
    display: none; /* Simplest way to hide it for now to ensure dark bg */
}

#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Above hero background, below content */
}

.hero-content {
    max-width: 650px;
    animation: fadeUp 1s ease-out;
    position: relative; /* Ensure it has its own stacking context if not already */
    z-index: 2; /* Above canvas */
}

.hero h1 {
    font-size: 3.25rem; /* Slightly adjusted font size */
    margin-bottom: 24px; /* Adjusted margin */
    color: #fff;
    line-height: 1.15; /* Adjusted line-height for readability */
}

.hero h1 span {
    color: var(--lightning-blue);
    position: relative;
}

.hero h1 span::after {
    content: '';
    position: absolute;
    bottom: 4px; /* Adjusted bottom position */
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(0, 204, 255, 0.2); /* Adjusted background color */
    z-index: -1;
    border-radius: 2px; /* Added border-radius */
}

.hero p {
    font-size: 1.25rem; /* Slightly adjusted font size */
    margin-bottom: 32px; /* Adjusted margin */
    color: #bcbcbc;
    max-width: 550px;
}

.btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--lightning-blue) 0%, var(--electric-blue) 100%);
    color: white;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 102, 255, 0.25);
}

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--electric-blue) 0%, var(--lightning-blue) 100%);
    opacity: 0;
    transition: var(--transition);
    z-index: -1;
}

.btn:hover::after {
    opacity: 1;
}

/* Sections */
section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 64px; /* Adjusted margin */
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--navy);
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--electric-blue);
    border-radius: 2px;
}

.section-header p {
    max-width: 700px;
    margin: 20px auto 0;
    font-size: 1.2rem;
    color: var(--deep-blue);
}

/* About Section */
.about-content {
    display: flex;
    align-items: center;
    gap: 64px; /* Adjusted gap */
}

.about-text {
    flex: 1;
}

.about-text h3 {
    font-size: 1.875rem; /* Adjusted font-size (e.g., 30px if base is 16px) */
    color: var(--navy);
    margin-bottom: 16px; /* Adjusted margin */
}

.about-text p {
    margin-bottom: 16px; /* Adjusted margin */
    font-size: 1.0625rem; /* Adjusted font-size (e.g., 17px) */
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Adjusted gap */
    margin-top: 24px; /* Adjusted margin */
}

.skill {
    background: rgba(0, 102, 255, 0.1);
    color: var(--lightning-blue);
    padding: 10px 24px; /* Adjusted padding */
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease-out; /* Refined transition */
}

.skill:hover{
    transform: translateY(-5px); /* Reduced translateY */
    background-color: var(--lightning-blue);
    color: white; /* Ensure text color is white for contrast */
    cursor: pointer;
}

.about-image {
    flex: 1;
    position: relative;
}

.profile-card {
    background: white;
    border-radius: 20px;
    padding: 32px; /* Adjusted padding */
    box-shadow: var(--shadow);
    text-align: center;
    max-width: 350px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-out; /* Refined transition */
}

.profile-card:hover{
    transform: translateY(-5px); /* Reduced translateY */
    /* transition: 0.5s ease-in-out; cursor: pointer; */ /* Removed as combined above */
}

.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, var(--lightning-blue), var(--electric-blue));
}

.profile-card .social-links { /* Moved inline style to CSS */
    justify-content: center;
    margin-top: 24px; /* Adjusted margin */
    gap: 15px; /* Added gap for consistency if not already via global .social-links */
}

.profile-card .social-link {
    background: rgba(0, 102, 255, 0.08); /* Base background for profile card links */
    color: var(--deep-blue); /* Default icon color */
    width: 40px; /* Slightly smaller if desired */
    height: 40px;
    border-radius: 20px;
    transition: 0.5s ease-in-out;
}
.profile-card .fab{
    font-size: 25px;
    margin-top: 6px;
}

.profile-card .social-link:hover {
    background: var(--electric-blue);
    color: white;
    transform: translateY(-3px);
    transition: 0.5s ease-in-out;
}


.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 32px; /* Adjusted margin */
    overflow: hidden;
    position: relative;
    border: 5px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

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

/* .fab color is handled by .profile-card .social-link now if specific context is needed */
/* Removed general .fab rule if it was conflicting */


.profile-img::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lightning-blue), var(--electric-blue));
    z-index: -1;
}

/* Services Section */
.services {
    padding: 96px 0; /* Adjusted section padding */
    background: var(--light-gray);
    position: relative;
    overflow: hidden;
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2300ccff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.services-slider {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: 700px;
}

.services-container {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
}

.service-card {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px;
    border-radius: 20px;
    box-sizing: border-box;
    opacity: 0; /* Default opacity */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transition */
    transform: translateX(20px) scale(0.98); /* Initial transform */
}

.service-card.slide-is-active {
    opacity: 1; /* Active opacity */
    transform: translateX(0) scale(1); /* Active transform */
}

.service-card.slide-is-leaving {
    opacity: 0; /* Leaving opacity */
    transform: translateX(-20px) scale(0.98); /* Leaving transform */
}

.service-content {
    background: white;
    border-radius: 20px;
    padding: 50px;
    box-shadow: var(--shadow);
    text-align: center;
    max-width: 900px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.service-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, var(--lightning-blue), var(--electric-blue));
}

/* Initial states for elements within .service-content */
.service-icon,
.service-title,
.service-description,
.feature,
.service-content .btn {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.service-icon {
    transform: scale(0.9); /* Specific initial transform for icon */
}

/* Active states for elements when .service-card.slide-is-active */
.slide-is-active .service-icon,
.slide-is-active .service-title,
.slide-is-active .service-description,
.slide-is-active .feature,
.slide-is-active .service-content .btn {
    opacity: 1;
    transform: translateY(0px);
}

.slide-is-active .service-icon {
    transform: scale(1); /* Specific active transform for icon */
}

/* Transition delays for staggered effect */
.slide-is-active .service-icon {
    transition-delay: 0.3s;
}
.slide-is-active .service-title {
    transition-delay: 0.4s;
}
.slide-is-active .service-description {
    transition-delay: 0.5s;
}
.slide-is-active .feature {
    transition-delay: 0.6s;
}
.slide-is-active .service-content .btn {
    transition-delay: 0.7s;
}

.service-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 102, 255, 0.1);
    border-radius: 50%;
    color: var(--lightning-blue);
    font-size: 2.5rem;
    /* Base transition is now set above, ensure it doesn't conflict if specific icon transitions are needed later */
}

.service-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--navy);
    /* Base transition is now set above */
}

.service-description {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: var(--deep-blue);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    /* Base transition is now set above */
}

.service-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.feature {
    background: rgba(0, 102, 255, 0.05);
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Combined transition: existing hover + new entry */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, background-color 0.3s ease, transform 0.3s ease;
}

.feature:hover {
    background: rgba(0, 102, 255, 0.1);
    transform: translateY(-3px); /* This will be overridden by entry animation if not active, which is fine */
}

.feature i {
    color: var(--electric-blue);
}

/* Ensure .service-content .btn also respects its own hover/active states if any, currently uses global .btn styles */
.service-content .btn {
    /* Base transition is now set above, global .btn hover/active will still apply */
}

.slider-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 102, 255, 0.3);
    cursor: pointer;
    border: 2px solid transparent; /* Added border */
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease; /* Refined transition */
}

.slider-dot:hover {
    transform: scale(1.1); /* Hover scale */
    border-color: var(--electric-blue); /* Hover border color */
}

.slider-dot.active {
    background-color: var(--lightning-blue); /* Active background */
    transform: scale(1.3); /* Active scale */
    border-color: var(--lightning-blue); /* Active border color */
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.5); /* Active box shadow */
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Refined transition */
    z-index: 10;
    color: var(--lightning-blue);
    font-size: 1.5rem;
}

.slider-btn i {
    transition: transform 0.2s ease; /* Transition for icon */
}

.slider-btn:hover {
    background: var(--lightning-blue);
    color: white;
    transform: translateY(-50%) scale(1.15); /* Modified hover transform */
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3); /* Enhanced hover box-shadow */
}

.prev-btn:hover i {
    transform: translateX(-2px); /* Icon animation on hover */
}

.next-btn:hover i {
    transform: translateX(2px); /* Icon animation on hover */
}

.slider-btn:active {
    transform: translateY(-50%) scale(1.05); /* Active transform */
    box-shadow: 0 4px 10px rgba(0, 102, 255, 0.2); /* Reduced active box-shadow */
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

/* Projects Section */
.projects {
    padding: 96px 0; /* Adjusted section padding */
    background: linear-gradient(135deg, var(--navy) 0%, var(--deep-blue) 100%);
    color: var(--light-text);
    position: relative;
    overflow: hidden;
}

.projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23003366' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.1;
}

.projects .section-header h2 {
    color: white;
}

.projects .section-header p {
    color: rgba(255, 255, 255, 0.8);
}

.project-comparison {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.comparison-container {
    position: relative;
    height: 500px;
    background: #000;
}

.before, .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.before {
    width: 50%;
    z-index: 2;
}

.before img, .after img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px; /* Slightly thinner slider line */
    height: 100%;
    background: white;
    z-index: 10;
    transform: translateX(-50%);
    cursor: ew-resize;
}

.slider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px; /* Reduced size */
    height: 50px; /* Reduced size */
    border-radius: 50%;
    background: var(--electric-blue); /* Changed background to electric blue */
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.4); /* Adjusted shadow for new bg */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added transition */
}

.slider:hover::before {
    transform: translate(-50%, -50%) scale(1.1); /* Hover effect */
    box-shadow: 0 0 20px rgba(0, 204, 255, 0.6); /* Enhanced shadow on hover */
}

.slider::after {
    content: '↔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Changed icon color to white */
    font-size: 1.25rem; /* Slightly adjusted font size */
    font-weight: bold;
}

.comparison-label {
    position: absolute;
    bottom: 20px;
    padding: 10px 16px; /* Adjusted padding */
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 30px;
    font-weight: 500;
    font-size: 0.9rem; /* Adjusted font-size */
    z-index: 5;
}

.before-label {
    left: 20px;
}

.after-label {
    right: 20px;
}

.project-details {
    max-width: 700px;
    margin: 32px auto 0; /* Adjusted margin-top */
    text-align: center;
}

.project-details h3 {
    font-size: 1.75rem; /* Adjusted font-size */
    margin-bottom: 12px; /* Adjusted margin-bottom */
}

.project-details p {
    opacity: 0.85; /* Adjusted opacity */
    font-size: 1.0625rem; /* Adjusted font-size */
}

/* Contact Section */
section.contact { /* Ensure section-specific padding is applied if not already global */
    padding: 96px 0; 
}

.contact-content {
    display: flex;
    gap: 64px; /* Adjusted gap */
}

.contact-info {
    flex: 1;
}

.contact-info h3 {
    font-size: 1.75rem; /* Adjusted font size */
    color: var(--navy);
    margin-bottom: 24px; /* Adjusted margin */
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px; /* Adjusted margin */
}

.contact-icon {
    width: 48px; /* Adjusted size */
    height: 48px; /* Adjusted size */
    background: rgba(0, 102, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px; /* Adjusted margin */
    color: var(--lightning-blue);
    font-size: 1.1rem; /* Adjusted icon size */
}

.contact-text h4 {
    font-size: 1.125rem; /* Adjusted font size (e.g., 18px) */
    margin-bottom: 4px; /* Adjusted margin */
    color: var(--deep-blue);
}

.contact-text p {
    font-size: 0.9375rem; /* Adjusted font size (e.g., 15px) */
}

.contact-form {
    flex: 1;
    background: white;
    padding: 48px; /* Adjusted padding */
    border-radius: 12px; /* Slightly adjusted border-radius */
    box-shadow: var(--shadow);
}

.form-group {
    margin-bottom: 24px; /* Adjusted margin */
}

.form-group label {
    display: block;
    margin-bottom: 6px; /* Adjusted margin */
    font-weight: 500;
    font-size: 0.9375rem; /* Adjusted font-size */
    color: var(--deep-blue);
}

.form-control {
    width: 100%;
    padding: 16px 20px; /* Adjusted padding */
    border: 1px solid #ced4da; /* Adjusted border */
    border-radius: 8px; /* Adjusted border-radius */
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Specific transition */
}

.form-control:focus {
    outline: none;
    border-color: var(--lightning-blue); /* Changed focus border color */
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15); /* Adjusted focus shadow */
}

.contact-form .btn {
    display: block; /* Make button full-width */
    width: 100%;
}

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

/* Footer */
footer {
    margin-top: 50px;
    background: var(--navy);
    color: var(--light-text);
    padding: 64px 0 32px; /* Adjusted padding */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 48px; /* Using gap for spacing */
    margin-bottom: 48px; /* Adjusted margin */
}

.footer-about {
    flex: 2;
    /* margin-right: 50px; */ /* Replaced by gap on parent */
}

.footer-about h3 {
    font-size: 1.75rem; /* Adjusted font-size */
    margin-bottom: 16px; /* Adjusted margin */
    color: white;
}

.footer-about p {
    opacity: 0.75; /* Adjusted opacity */
    margin-bottom: 16px; /* Adjusted margin */
    max-width: 400px;
    font-size: 0.9375rem; /* Adjusted font-size */
}

.social-links { /* This is a general class, ensure footer specific styles are targeted if needed */
    display: flex;
    gap: 12px; /* Adjusted gap */
}

.footer-about .social-link { /* Targeting social links within footer-about specifically */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; /* Adjusted size */
    height: 42px; /* Adjusted size */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.1rem; /* Adjusted icon size */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Refined transition */
}

.footer-about .social-link:hover {
    background: var(--electric-blue);
    transform: translateY(-3px); /* Reduced transform */
}

.footer-links {
    flex: 1;
}

.footer-links h4 {
    font-size: 1.25rem; /* Adjusted font-size */
    margin-bottom: 16px; /* Adjusted margin */
    color: white;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px; /* Adjusted margin */
}

.footer-links a {
    color: rgba(255, 255, 255, 0.75); /* Adjusted color opacity */
    text-decoration: none;
    font-size: 0.9375rem; /* Adjusted font-size */
    transition: color 0.3s ease; /* Refined transition */
}

.footer-links a:hover {
    color: var(--electric-blue);
    text-decoration: underline; /* Added underline on hover */
    /* padding-left: 5px; */ /* Removed padding shift */
}

.copyright {
    text-align: center;
    padding-top: 32px; /* Adjusted padding */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.55); /* Adjusted color opacity */
    font-size: 0.875rem; /* Adjusted font-size */
}

/* Blog Section Styles */
.blog {
    padding: 96px 0;
    background-color: var(--light-gray);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    margin-top: 48px; /* Space below section header, consistent with .section-header margin-bottom */
}

.blog-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.4s ease-out; /* Added opacity */
}

.blog-card-entering {
    opacity: 0;
    transform: translateY(30px) scale(0.98); /* Initial state: slightly down and smaller, and transparent */
}

.blog-card-visible {
    opacity: 1;
    transform: translateY(0) scale(1); /* Final state: normal position and size, and opaque */
}

.blog-card:hover {
    transform: translateY(-8px) scale(1.02); /* Slightly more pronounced lift and scale */
    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.25); /* More noticeable shadow */
}

.blog-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* Ensured this is present */
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.08); /* Slightly zoom the image more */
}

.blog-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-meta {
    font-size: 0.875rem; /* 14px */
    color: #777;
    margin-bottom: 8px;
}

.blog-meta span {
    margin-right: 5px; /* Spacing between date and read time if they were separate spans */
}

.blog-title { /* This is an h3 */
    font-size: 1.375rem; /* 22px */
    color: var(--navy);
    margin-bottom: 12px;
    line-height: 1.3;
}

.blog-title a {
    color: inherit;
    text-decoration: none;
}

.blog-title a:hover {
    color: var(--lightning-blue);
}

.blog-excerpt {
    font-size: 0.9375rem; /* 15px */
    color: var(--deep-blue);
    margin-bottom: 16px;
    line-height: 1.6;
    flex-grow: 1; 
}

.blog-tags {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-tags span {
    background-color: rgba(0, 102, 255, 0.1);
    color: var(--lightning-blue);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
}

.blog-read-more {
    padding: 10px 20px;
    font-size: 0.9375rem; /* 15px */
    align-self: flex-start;
}

.btn-secondary { /* General secondary button style if not already present */
    background: var(--deep-blue);
    color: white;
}
.btn-secondary:hover {
    background: var(--navy);
    box-shadow: 0 8px 25px rgba(0, 26, 51, 0.2);
}

.blog-read-more i {
    margin-left: 8px;
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .about-content, .contact-content {
        flex-direction: column;
        gap: 48px; /* Adjusted gap for column layout */
    }
    
    .about-image {
        margin-top: 48px; /* Adjusted margin */
    }
    
    .footer-content {
        flex-direction: column;
        gap: 32px; /* Adjusted gap for footer column layout */
    }
    
    .footer-about {
        margin-right: 0;
    }

    .service-card {
        padding: 0 20px;
    }

    .service-content {
        padding: 30px;
    }

    .blog-grid {
        gap: 24px; /* Optional: reduce gap on tablets */
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 80px;
        right: -100%;
        flex-direction: column;
        background: white;
        width: 80%;
        height: calc(100vh - 80px);
        padding: 50px 40px; /* Increased padding */
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Refined transition */
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        /* Ensure transform is used for slide-in, not just right property */
        transform: translateX(100%); 
        right: 0; /* Keep right at 0, use transform for animation */
    }
    
    .nav-links.active {
        transform: translateX(0); /* Slide in to 0 */
    }
    
    .nav-links li {
        margin: 0; /* Reset margin for mobile */
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    }

    .nav-links.active li {
        opacity: 1;
        transform: translateX(0);
    }
    
    .nav-links.active li:nth-child(1) { transition-delay: 0.1s; }
    .nav-links.active li:nth-child(2) { transition-delay: 0.15s; }
    .nav-links.active li:nth-child(3) { transition-delay: 0.2s; }
    .nav-links.active li:nth-child(4) { transition-delay: 0.25s; }
    .nav-links.active li:nth-child(5) { transition-delay: 0.3s; }
    .nav-links.active li:nth-child(6) { transition-delay: 0.35s; } /* New rule for the 6th item (Blog) */

    .nav-links.active a {
        font-size: 1.2rem; /* Larger font for mobile */
        padding: 15px 0; /* Padding for touch target */
        display: block; /* Make links block for full-width touch */
        border-bottom: 1px solid #eee; /* Separator */
    }

    .nav-links.active li:last-child a {
        border-bottom: none; /* Remove border for last item */
    }

    .nav-links.active a::after {
        display: none; /* Remove desktop underline effect */
    }

    .nav-links.active a:hover {
        background-color: rgba(0, 102, 255, 0.05); /* Mobile link hover/active */
        color: var(--lightning-blue); /* Ensure hover color is consistent */
    }
    
    .menu-toggle {
        display: block;
    }
    
    .hero h1 {
        font-size: 2.8rem; /* No change, seems proportional */
    }
    
    .section-header h2 {
        font-size: 2.2rem; /* Existing, seems fine */
    }

    .project-details h3 { /* Added responsive style */
        font-size: 1.6rem;
    }
    .project-details p { /* Added responsive style */
        font-size: 1rem;
    }

    .blog-grid { /* Allow slightly smaller cards before stacking */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px; 
    }
    .blog-title { 
        font-size: 1.25rem; 
    }
    .blog-excerpt {
        font-size: 0.9rem; 
    }
    .blog-card-image {
        height: 180px; 
    }

    .service-title {
        font-size: 1.8rem; /* Existing, seems fine */
    }

    .service-features {
        flex-direction: column;
        align-items: center;
    }

    .slider-btn {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 2.3rem; /* No change, seems proportional */
        text-align: center;
        padding: 0 15px;
    }
    
    .hero p {
        font-size: 1.1rem; /* No change, seems proportional */
        text-align: center;
        padding: 0 15px;
    }
    
    .project-details h3 { /* Added responsive style */
        font-size: 1.375rem;
    }
    .project-details p { /* Added responsive style */
        font-size: 0.9375rem;
    }

    .blog-grid {
        grid-template-columns: 1fr; /* Single column for mobile */
        gap: 24px; 
    }
    .blog-card-content {
        padding: 20px; 
    }
    .blog-title { 
        font-size: 1.15rem; 
    }
    .blog-excerpt {
        font-size: 0.875rem;
    }
    .blog-tags span {
        padding: 5px 10px; 
        font-size: 0.75rem;
    }
    .blog-read-more {
        padding: 8px 16px;
        font-size: 0.875rem;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .project-comparison {
        border-radius: 10px;
    }
    
    .comparison-container {
        height: 400px;
    }

    .service-content {
        padding: 25px;
    }

    .service-title {
        font-size: 1.6rem;
    }

    .service-description {
        font-size: 1rem;
    }

    .service-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}

/* Article Page Specific Styles */
.article-page { /* This class is on the <main> element in article HTMLs */
    background-color: var(--light-gray); /* Match body or a slightly different shade if desired */
    padding-top: 100px; /* Space for fixed header */
    padding-bottom: 60px;
}

.article-content.container { /* Styles for the container within .article-page if needed, but .article-full-content will be primary */
    /* Basic container properties are already defined */
}

.article-full-content {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px; /* Increased padding */
    background-color: #ffffff;
    border-radius: 12px; /* Slightly larger radius */
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* Softer shadow */
    border-top: 5px solid var(--lightning-blue); /* Accent border */
}

.article-full-content h1 {
    font-size: 2.5rem; /* Larger for article title */
    color: var(--navy);
    margin-bottom: 15px;
    line-height: 1.25;
}

.article-full-content h2 {
    font-size: 1.8rem;
    color: var(--navy);
    margin-top: 30px;
    margin-bottom: 15px;
    line-height: 1.3;
}

.article-full-content h3 {
    font-size: 1.5rem;
    color: var(--navy);
    margin-top: 25px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.article-full-content p {
    font-size: 1.05rem; /* Slightly smaller than prompt for balance */
    color: var(--dark-text);
    line-height: 1.75; /* Increased line height for readability */
    margin-bottom: 25px;
}

.article-full-content p.article-meta {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 30px; /* More space after meta */
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.article-full-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 10px; /* Space above image if it follows text */
    margin-bottom: 30px; /* More space after image */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.article-full-content .article-tags {
    margin-top: 30px; /* Space before tags */
    margin-bottom: 30px; /* Space after tags */
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Slightly larger gap */
}

.article-full-content .article-tags span {
    background-color: rgba(0, 102, 255, 0.08); /* Lighter than blog tags */
    color: var(--lightning-blue);
    padding: 8px 15px; /* Slightly larger padding */
    border-radius: 50px;
    font-size: 0.875rem; /* Slightly larger font */
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.article-full-content .article-tags span:hover {
    background-color: var(--lightning-blue);
    color: white;
}

.article-full-content .back-to-blog-link {
    display: inline-block;
    margin-top: 30px;
    font-size: 1rem;
    color: var(--lightning-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.article-full-content .back-to-blog-link:hover {
    color: var(--electric-blue);
    text-decoration: underline;
}

/* Adjustments within existing media queries for article content */
@media (max-width: 992px) {
    .article-full-content {
        margin: 30px auto;
        padding: 30px;
    }
    .article-full-content h1 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .article-full-content {
        margin: 20px auto;
        padding: 20px;
    }
    .article-full-content h1 {
        font-size: 2rem;
    }
    .article-full-content h2 {
        font-size: 1.6rem;
    }
    .article-full-content h3 {
        font-size: 1.3rem;
    }
    .article-full-content p {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .article-full-content {
        margin: 15px auto; /* Further reduce margin for very small screens */
        padding: 15px;    /* Further reduce padding */
    }
    .article-full-content h1 {
        font-size: 1.8rem; /* Adjust title size */
    }
    .article-full-content p.article-meta {
        font-size: 0.85rem;
    }
    .article-full-content .article-tags span {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* Blog Listing Page Specific Adjustments */
#blog-listing-page .section-header {
    padding-top: 120px; /* Space for fixed header */
    margin-bottom: 48px; /* Consistent margin with other section headers */
}

/* Tag Filter Styles */
.tag-filters-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px; /* Added via HTML, but good to have here too if that's removed */
}

.tag-filter-btn {
    background-color: #f0f0f0;
    color: var(--deep-blue);
    border: 1px solid #ddd;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.tag-filter-btn:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}

.tag-filter-btn.active {
    background-color: var(--lightning-blue);
    color: white;
    border-color: var(--lightning-blue);
    box-shadow: 0 2px 5px rgba(0, 102, 255, 0.2);
}

/* Blog Search Input Styles */
.blog-search-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

#blog-search-input {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 20px; /* Match tag buttons */
    width: 100%;
    max-width: 400px;
    font-size: 0.9rem;
    box-sizing: border-box;
}

#blog-search-input:focus {
    outline: none;
    border-color: var(--lightning-blue);
    box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.15);
}