:root {
    --primary-color: #0077B5;
    --secondary-color: #00A0DC;
    --text-color: #333;
    --bg-color: #fff;
    --accent-color: #E10098;
    --section-bg: #f8f9fa;
}

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

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
}

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

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--bg-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

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

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
}

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

/* Hero Section */
.hero {
    min-height: calc(100vh - 72px); /* Adjusted for fixed navbar height (assuming navbar is 72px) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--section-bg) 100%);
    padding-top: 60px;
}

.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Ensure content within can be centered effectively */
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease;
    text-align: center; /* Added to center the name */
}

.hero h2 {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease 0.2s;
    animation-fill-mode: both;
    text-align: center; /* Added to center the titles */
}

.social-links {
    display: flex;
    justify-content: center; /* Added to center social links */
    gap: 1.5rem;
    animation: fadeInUp 1s ease 0.4s;
    animation-fill-mode: both;
}

.social-links a {
    color: var(--text-color);
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--primary-color);
}

/* About Section */

.video-container {
    position: relative;
    padding-bottom: 70%; /* Adjusted for taller video, aiming for ~2 card rows height */
    height: 0;
    overflow: hidden;
    max-width: 800px; /* Max width of the video */
    margin: 2rem auto; /* Center the video container */
    border-radius: 8px; /* Optional: adds rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Remove default iframe border */
}

.what-i-do h3 {
    margin-top: 2.5rem; /* Added space above 'What I Do' heading */
    margin-bottom: 1.5rem; /* Optional: ensure space below heading too */
}

.about {
    padding: 4rem 0;
    background-color: var(--section-bg);
}

.about h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

.about p {
    max-width: 800px;
    margin: 0 auto 3rem;
    text-align: center;
}

.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

@media (min-width: 1024px) {
    .services {
        grid-template-columns: repeat(2, 1fr);
    }
}

.service-card {
    perspective: 1000px;
    height: 300px;
    width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.service-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

@media (hover: hover) {
    .service-card:hover .service-card-inner {
        transform: rotateY(180deg);
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .service-card:hover i {
        transform: scale(1.1);
    }
}

.service-card-front, .service-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding: 2rem;
    border-radius: 10px;
    background: var(--card-bg, #ffffff);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, #eee, #a777e3);
    color: white;
}

.service-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.service-card h4 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.service-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .services {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .service-card {
        height: 250px;
    }

    .service-card-front, .service-card-back {
        padding: 1.5rem;
    }

    .service-card-front h4, .service-card-back h4 {
        font-size: 1.2rem;
        margin-bottom: 0.8rem;
    }

    .service-card-front p, .service-card-back p {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .service-card-front i {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }
}

/* Skills Section */
.tech-item i {
    margin-right: 8px; /* Adjust spacing as needed */
    color: var(--primary-color); /* Optional: Match icon color to primary theme color */
}
.skills {
    padding: 4rem 0;
}

.skills h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

.tech-category {
    margin-bottom: 2rem;
}

.tech-category h3 {
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.tech-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.tech-item {
    background-color: var(--section-bg);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.tech-item:hover {
    transform: translateY(-2px);
    background-color: var(--primary-color);
    color: var(--bg-color);
}

.tech-item:hover i {
    color: var(--bg-color); /* Make icon color same as text color on hover */
}

/* Project Carousel Section */
.work h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

/* Carousel Styles */
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* Adjust as needed */
    margin: 2rem auto; /* Center the carousel */
    overflow: hidden; /* Crucial for slide effect - hides parts of images outside the viewport */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.carousel-slides {
    display: flex; /* Aligns images in a row */
    transition: transform 0.5s ease-in-out; /* Smooth slide transition */
}

.carousel-inner {
    display: flex; /* Arrange images in a row */
    transition: transform 0.5s ease-in-out; /* Slide transition */
    width: 100%; /* Ensure inner container takes full width of its parent */
}

.carousel-image {
    min-width: 100%; /* Each image takes full width of the viewport */
    height: auto; /* Maintain aspect ratio */
    max-height: 400px; /* Added to prevent images from becoming too tall */
    object-fit: contain; /* Ensure the whole image is visible, letterboxing if necessary */
    background-color: #f0f0f0; /* Diagnostic: show image area */
    border: 1px solid #ddd; /* Diagnostic: show image border */
    /* display: none; and opacity: 0; are no longer needed for slide */
    /* transition: opacity 0.5s ease-in-out; is removed */
}

/* .carousel-image-active is no longer needed for slide logic, JS will handle transform */

/* 
  The .carousel-image:first-child rule that previously set 'display: block;' 
  has been removed. The initial display of the first slide is handled 
  by the JavaScript function showSlides(0) which is called on page load.
  The JavaScript will now set the initial transform.
*/

/* Next & previous buttons */
.carousel-button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.5);
    border: none;
}

.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.next {
    right: 0;
    border-radius: 0 3px 3px 0;
}

.carousel-button:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Work Section - Old styles, can be removed or repurposed if no longer needed elsewhere */
.work {
    padding: 4rem 0;
    background-color: var(--bg-color);
}

.work h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.project-card {
    background: var(--section-bg);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.project-card h4 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.project-card img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.project-card p {
    font-size: 0.9rem;
    color: var(--text-color);
}

/* Footer */
footer {
    padding: 4rem 0 2rem; /* Adjusted padding */
    background-color: var(--text-color);
    color: var(--bg-color);
}

.footer-content {
    display: flex;
    justify-content: space-around; /* Space out sections */
    align-items: flex-start; /* Align items to the top */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 2rem; /* Add gap between sections */
    margin-bottom: 2rem; /* Space before copyright */
}

.footer-section {
    flex: 1; /* Allow sections to grow */
    min-width: 250px; /* Minimum width for sections */
    text-align: center; /* Center content within sections */
}

.footer-section h2 {
    font-size: 1.5rem; /* Slightly smaller heading */
    margin-bottom: 1.5rem;
    color: var(--secondary-color); /* Use accent color */
}

.contact-links {
    display: flex;
    justify-content: center; /* Center links */
    gap: 1.5rem; /* Adjust gap */
}

.contact-item {
    display: inline-flex; /* Use inline-flex for better alignment */
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--bg-color); /* White text */
    transition: color 0.3s ease, transform 0.3s ease;
    font-size: 1rem;
}

.contact-item i {
    font-size: 1.2rem; /* Slightly larger icon */
}

.contact-item:hover {
    color: var(--primary-color);
    transform: translateY(-2px); /* Add subtle hover effect */
}

.hire-me-button {
    background-color: var(--primary-color);
    color: var(--bg-color);
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hire-me-button:hover {
    background-color: var(--secondary-color);
    color: var(--bg-color); /* Ensure text color remains white on hover */
    transform: translateY(-2px);
}

.copyright {
    text-align: center;
    padding-top: 2rem; /* Add padding above copyright */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
}

.copyright p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7); /* Slightly dimmer text */
}

.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(100px);
    z-index: 1000;
    border: none;
}

.scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-top:hover {
    transform: translateY(-5px);
}



/* Custom Cursor Styles */
.cursor-dot,
.cursor-dot-outline {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    opacity: 1;
    transform: translate(0, 0);
    z-index: 9999;
    will-change: transform; /* Optimize for animations */
}

.cursor-dot {
    width: 12px; /* Increased from 8px */
    height: 12px; /* Increased from 8px */
    background-color: var(--primary-color);
    transition: background-color 0.2s ease-in-out; /* Faster color transition */
    z-index: 10000; /* Ensure dot is above outline */
}

.cursor-dot-outline {
    width: 32px; /* Decreased from 40px */
    height: 32px; /* Decreased from 40px */
    background-color: transparent;
    border: 2px solid var(--primary-color);
    transition: border-color 0.2s ease-in-out; /* Faster color transition */
}

body.cursor-hover .cursor-dot {
    transform: translate(-6px, -6px) scale(1.5);
    background-color: var(--secondary-color);
}

body.cursor-hover .cursor-dot-outline {
    transform: translate(-16px, -16px) scale(1.2);
    border-color: var(--secondary-color);
}

/* Hide default cursor when custom cursor is active */
body.custom-cursor {
    cursor: none;
}

/* Ensure clickable elements still show pointer cursor for usability */
body.custom-cursor a,
body.custom-cursor button,
body.custom-cursor .service-card,
body.custom-cursor .project-card,
body.custom-cursor .tech-item,
body.custom-cursor .carousel-button,
body.custom-cursor .scroll-top,
body.custom-cursor .contact-item,
body.custom-cursor .hire-me-button {
    cursor: none;
}



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

@keyframes cursor-blink {
    from, to { border-color: transparent }
    50% { border-color: #000 }
}

.typing-text {
    border-right: 3px solid;
    animation: cursor-blink 1s step-end infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero h2 {
        font-size: 1.2rem;
    }

    .nav-links {
        gap: 1rem;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

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

    .contact-links {
        justify-content: center;
    }
}