* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins';
    text-decoration: none;
    scroll-behavior: smooth;
    list-style: none;
}

section:first-of-type {
    /* Premium Black Blue Gradient */
    background: linear-gradient(#0a192f, #000000 100%);
    color: white;
    overflow: hidden;
    /* Ensure carousel doesn't overflow */
}

header {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    color: white;
    padding: 0.5rem 2rem;
    border-radius: 2rem;
    z-index: 1000;
}

.logo {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    transition: 0.3s ease-in-out;
}

.logo.hover {
    transform: scale(1.1);
}

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

li a {
    position: relative;
    color: white;
    font-weight: 300;

}

li a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 3px;
    border-radius: 1rem;
    background: linear-gradient(to right, rgb(0, 157, 255), rgb(0, 0, 134));
    transition: width 0.3s ease-in-out;
}

li a:hover::before {
    width: 100%;
}

.visit-btn {
    padding: 0.8rem 1.5rem;
    border-radius: 3rem;
    border: none;
    font-weight: 500;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    text-wrap: nowrap;
    transition: 0.3s ease-in-out;
    background: linear-gradient(to right, rgb(0, 157, 255), rgb(0, 0, 134));
}

.visit-btn:hover {
    background: linear-gradient(to right, rgb(0, 0, 134), rgb(0, 157, 255));
    transform: scale(1.03);

}

#menu-icon {
    font-size: 2rem;
    display: none;
}

section {
    min-height: 100vh;
    padding: 8rem 12%;
    width: 100%;
    position: relative;

}

.about {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* For absolute carousel */
}

.about .about-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rem;
    position: relative;
    z-index: 10;
    /* Bring content to front */
}

/* Removed .about img style as profile pic is moved */

.info-box {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    /* Glassmorphism Cover */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 3rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.info-box h1 {
    font-size: clamp(1rem, 4vw, 1.8rem);
    font-weight: 400;

}

.info-box h3 {
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 600;
}

.info-box span {
    background: linear-gradient(to right, #00f2fe, #4facfe);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: clamp(1rem, 4vw, 2rem);
    /* High contrast text shadow for readability on all backgrounds */
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

.btn-group-main {
    display: flex;
    gap: 1rem;

}

.btn-main {
    border-radius: 3rem;
    padding: 0.5rem 1.5rem;
    border: 2px solid rgb(255, 255, 255);
    cursor: pointer;
    font-weight: 500;
    text-wrap: nowrap;
    transition: 0.2s ease-in-out;
    color: rgb(255, 255, 255);

}

.btn-main:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

.btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    border-radius: 3rem;
    padding: 0.5rem 1.5rem;
    border: 2px solid rgb(0, 0, 0);
    cursor: pointer;
    font-weight: 500;
    text-wrap: nowrap;
    transition: 0.2s ease-in-out;
    color: rgb(0, 0, 0);

}

.btn:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

.socials {
    display: flex;
    gap: 2rem;
}

.socials i {
    font-size: 2.5rem;
    cursor: pointer;
    transition: 0.2 ease-in-out;
    color: rgb(255, 255, 255)
}

.socials i:hover {
    transform: scale(1.1);
}

.timeline-wrapper {
    min-height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 5% 2rem;
}

.timeline-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}

.heading {
    font-size: 2.5rem;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
}

.heading i {
    font-size: 4rem;
    font-weight: 600;
}

.content-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 2rem;
    margin: 0 2rem;
    background-color: solid white;
    border: 3px solid black;
    border-radius: 2rem;
    font-size: 14px;
    align-items: baseline;
    justify-content: left;
    transition: 0.2s ease-in-out;
    cursor: pointer;

}

.content-box:hover {
    transform: scale(1.02);
    background-color: black;
    color: white;
}

.timeline-box {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-left: 5px solid rgb(0, 0, 0);
}

.content-box h3 {
    font-size: 1.3rem;
    background: linear-gradient(to right, #00f2fe, #4facfe);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 600;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
}

.date {
    font-size: 1.7rem;
    font-weight: 600;

}

.content-box::before {
    position: absolute;
    content: '';
    width: 25px;
    height: 25px;
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    left: -50px;
    top: 90px;
}




.about1 {
    /* Smooth transition: Black -> Dark Blue -> White (at the very tip) */
    background: linear-gradient(to bottom, #000000, #0a192f 85%, #ffffff 100%);
    color: white;
    padding-bottom: 4rem;
    /* Ensure space for gradient */
}

.about1 .grid-card {
    border: 2px solid white;
    /* Invert border for visibility */
}

.about1 .grid-card span {
    /* Maintain gradient text but ensure it pops */
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
}

.about1 .grid-card:hover {
    background-color: white;
    color: black;
}

.section-title {
    text-align: center;
    font-size: clamp(1.8rem, 6vw, 4rem);
    font-weight: 600;
    margin-bottom: 2rem;
}

.about1-title {
    text-align: center;
    font-size: clamp(0.9rem, 2.5vw, 1.3rem);
    font-weight: 400;
    margin-bottom: 2rem;
    line-height: 1.6;
    color: #e0e0e0;
    /* Slightly off-white for reading */
}

.about-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;

}

.about1 img {
    width: 34vw;
    display: block;
    margin: 0 auto;
    margin-top: 3rem;
}

.experience-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;

}

.experience img {
    width: 24vw;
    border-radius: 2rem;

}

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

}

.grid-card {
    border: 2px solid black;
    border-radius: 2rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: left;
    cursor: pointer;
    transition: 0.2s ease-in-out;

}

.grid-card:hover {
    transform: scale(1.02);
    background-color: black;
    color: white;

}

.grid-card i {
    font-size: 1.5rem;
    margin-bottom: 1rem;

}

.grid-card span {
    font-size: 1.5rem;
    font-weight: 600;
    background: linear-gradient(to right, #00f2fe, #4facfe);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));

}

::-webkit-scrollbar {
    width: 20px;

}

::-webkit-scrollbar-track {
    background-color: rgb(219, 219, 219);

}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgb(0, 0, 134), rgb(0, 157, 255));

}

.projects-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
}

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

}

.projects-card {
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
    border: 2px solid black;
    border-radius: 2rem;
    cursor: pointer;
    transition: 0.3s ease-in-out;

}

.projects-card:hover {
    background-color: black;
    color: white;
    transform: translateY(-10px) scale(1.02);

}

.projects-card img {
    /* Use 100% to ensure it stays inside the card padding */
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 2rem;
}

.projects-card:hover .btn {
    border: 2px solid white;
    color: white;

}

.projects-card:hover .btn:hover {
    border: 2px solid white;
    background-color: white;
    color: black;

}

.projects-card h3 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 500;
}


.input-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    text-align: center;
    gap: 2rem;
    margin-top: 5rem;

}

.input-box input {
    border-radius: 2rem;
    border: 2px solid black;
    padding: 2rem 8rem;
    font-size: 3rem;
}

.input-box input::placeholder {
    font-size: 3rem;

}

.input {
    position: relative;
}

.input i {
    position: absolute;
    font-size: 4rem;
    top: 50%;
    left: 10px;
    transform: translate(50%, -50%);

}

.references-title {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 400;


}

footer {
    bottom: 0;
    left: 0;
    height: 10rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;

}

footer ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

footer ul li a {
    color: black;
    font-weight: 600;
}

.copyright {
    font-size: 300;
    margin-top: 2rem;

}



@media(max-width:1280px) {
    header {
        padding: 1rem 2rem;
        gap: 2rem;
    }

    .about .about-container {
        gap: 3rem;
    }

    .experience-info {
        flex-direction: column;
    }

    .input-box input {
        padding: 2rem 5rem;
        font-size: 2.5rem;
    }

    .input input::placeholder {
        font-size: 2.5rem;
    }

    .input-box i {
        font-size: 2.5rem;
    }
}

@media(max-width:768px) {
    header {
        gap: 1rem;
        padding: 1rem 1rem;

    }

    header .logo {
        font-size: 1rem;

    }

    header .visit-btn {
        display: none;

    }

    .about-container {
        flex-direction: column;

    }

    .input-box input {
        padding: 1rem 2rem;
        font-size: 1.8rem;

    }

    .input-box input::placeholder {
        font-size: 1.5rem;
    }

    .input-box i {
        display: none;

    }

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

    .experience-info img {
        width: 90vw;
        max-width: 400px;
    }

}

@media(max-width:600px) {
    header #menu-icon {
        display: block;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        margin-top: 1rem;
        width: 100%;
        padding: 1rem;
        color: white;
        display: none;
        flex-direction: column;
        text-align: center;
        background: rgba(0, 0, 0, 0.9);
        border-radius: 3rem;

    }

    .nav-links li {
        margin-top: 1rem;
        padding: 0.5rem;
    }

    .nav-links.active {
        display: flex;
    }

    header {
        width: 100%;
        max-width: 100%;
        gap: 2rem;
        padding: 0.5rem 1rem;
        border-radius: 0;
        top: 0;
    }

    section {
        padding: 4rem 5%;
    }

    header .logo {
        font-size: 1.5rem;
    }

    .about-container img {
        width: 80vw;
    }

    .input-box input {
        padding: 0.5rem 3rem;
        width: 80%;
        font-size: 1.5rem;
    }

    .input-box input::placeholder {
        font-size: 1.5rem;
    }

    footer ul {
        gap: 1rem;
    }
}







/* =========================
   ARTWORK COLLAGE – PROJECT CARD HOVER
========================= */

.artwork-section {
    min-height: 100vh;
    padding: 6rem 12%;
    /* Smooth transition to Project Section (#070707) - only 2% tip */
    background: linear-gradient(to bottom, #ffffff 98%, #070707 100%);
}

/* Grid layout */
.artwork-collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 5rem;
}

/* Artwork card */
.artwork-item {
    aspect-ratio: 4 / 5;
    border-radius: 2rem;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    background-color: white;
    position: relative;
}

/* Image starts slightly zoomed */
.artwork-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(0, 0);
    transition: transform 0.2s ease-out;
}

/* Card hover (same as projects-card) */
.artwork-item:hover {
    background-color: black;
    transform: translateY(-10px) scale(1.02);
}

/* Dim effect on hover */
.artwork-item:hover img {
    opacity: 0.85;
}

/* Text section */
.artwork-text {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.artwork-desc {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 3rem;
}

/* Button matches site style */
.artwork-btn {
    padding: 0.9rem 2.5rem;
    border-radius: 3rem;
    border: 2px solid black;
    color: black;
    font-size: 1.1rem;
    font-weight: 500;
    transition: 0.3s ease-in-out;
}

.artwork-btn:hover {
    background-color: black;
    color: white;
}

/* =========================
   RESPONSIVE GRID BEHAVIOR
========================= */

/* Tablets - 3 columns */



/* PROJECT SECTION */
.project-section .section-title {
    color: white !important;
}

.project-section {
    padding: 80px 5%;
    background: #070707;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.project-card {
    position: relative;
    height: 420px;
    overflow: hidden;
}

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

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

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 40px;
    color: white;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.project-overlay h3 {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
}

.project-btn {
    padding: 8px 20px;
    background: transparent;
    border: 2px solid white;
    border-radius: 3rem;
    font-size: 14px;
    text-decoration: none;
    color: white;
    transition: 0.3s ease;
}

.project-btn:hover {
    background: white;
    color: black;
}

/* RESPONSIVE PROJECTS SECTION */
@media (max-width: 768px) {
    .projects-card {
        padding: 2rem 1rem;
    }

    .projects-card img {
        width: 100%;
        max-width: 100%;
    }
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .project-card {
        height: 300px;
    }
}

/* =========================
   CONSOLIDATED RESPONSE STYLES
========================= */

@media (max-width: 1024px) {
    .artwork-collage {
        grid-template-columns: repeat(3, 1fr);
    }

    .timeline-row {
        grid-template-columns: 1fr;
    }
}

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

    .artwork-overlay {
        padding: 0 8%;
    }

    .artwork-desc {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .artwork-collage {
        grid-template-columns: repeat(1, 1fr);
    }

    .artwork-item {
        aspect-ratio: 4 / 5;
    }

    /* Smallest screen refinements */
    section {
        padding: 3rem 1rem;
    }

    .btn,
    .btn-main,
    .visit-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .grid-card,
    .projects-card,
    .content-box {
        padding: 1.5rem 1rem;
    }

    .input-box input {
        padding: 0.5rem 1rem;
        width: 100%;
        max-width: 100%;
        font-size: 1.2rem;
    }

    .input-box input::placeholder {
        font-size: 1.2rem;
    }

    .about-info,
    .projects-info {
        gap: 2rem;
    }

    footer {
        padding: 2rem 1rem;
        height: auto;
    }
}

/* =========================
   CAROUSEL BACKGROUND & PROFILE
========================= */
.carousel-bg {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centered with gap */
    gap: 5vh;
    /* Explicit spacing between layers */
    overflow: hidden;
    z-index: 1;
    opacity: 0.75;
    pointer-events: none;
    transform: scale(1.1) rotate(-5deg);
    /* Slightly reduced scale */
}

.carousel-row {
    display: flex;
    width: 100%;
    /* gap: 0; Ensure no double gap, spacing handled by padding-right in group-row */
}

.group-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    /* Important: The translateX must be exactly the width of the group including the gap.
       Since we have gap: 2rem, we need to ensure the animation covers it.
       The easiest way for seamless loop with gap is to NOT use padding on the group.
       Instead, the gap between the last item of group 1 and first item of group 2 is handled by flex layout of parent?
       No, the parent has no gap.
       So we need a gap after the last item!
    */
    padding-right: 2rem;
    /* Add gap at end of group so group1 + group2 matches */
    animation: spin 30s linear infinite;
    /* Faster speed for smoother flow */
    will-change: transform;
}

.carousel-row.reverse .group-row {
    animation: spin-reverse 35s linear infinite;
}

.card-row {
    /* Use VH to ensure 3 rows fit vertically regardless of width */
    height: 25vh;
    aspect-ratio: 4/5;
    flex: 0 0 auto;
    /* Don't shrink/grow */
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

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

@keyframes spin {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes spin-reverse {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.about1-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.about-profile-pic {
    width: clamp(200px, 20vw, 300px);
    aspect-ratio: 1/1;
    /* Ensure perfect circle */
    height: auto;
    /* Allow width to control size */
    border-radius: 50%;
    object-fit: cover;
    /* Removed border: 4px solid black; */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .carousel-bg {
        transform: scale(1.2) rotate(-5deg);
        /* Slightly more zoom on mobile to fill gaps */
        gap: 3vh;
    }

    .card-row {
        height: 20vh;
        /* Slightly smaller on mobile to ensure header visibility */
        border-radius: 0.5rem;
    }
}