:root {
    /* Vibrant Palette */
    --bg-yellow: #FFB649;
    --bg-pink: #E54591;
    --accent-green: #BEF05A;
    --card-green: #D4F580;
    /* Slightly lighter for cards if needed */

    --text-primary: #333333;
    --text-white: #FFFFFF;

    /* Typography */
    --font-heading: 'Bernoru', 'Poppins', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    --spacing-unit: 2rem;
    --border-radius-lg: 30px;
    --border-radius-md: 20px;
}

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

body {
    background-color: var(--bg-yellow);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.5;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.1;
    color: inherit;
}

h1 {
    font-size: clamp(3rem, 6vw, 5rem);
}

h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Utilities */
.bg-yellow {
    background-color: var(--bg-yellow);
    color: var(--text-pink);
}

.bg-pink {
    background-color: var(--bg-pink);
    color: var(--text-white);
}

/* Ensure Pink Text uses Bernoru */
.text-pink,
h1,
h2,
h3,
h4,
.logo-text span,
.logo,
.project-header h1,
.media-text-card h2,
.faq-title,
.contact-card h2,
.contact-row .label,
.card-content h3 {
    font-family: var(--font-heading);
    /* Bernoru */
    color: var(--bg-pink);
    /* Reinforce pink where applicable, though some are bg-pink blocks */
}

/* Exception: Headings inside pink backgrounds (white text) still use Bernoru */
.bg-pink h1,
.bg-pink h2,
.bg-pink h3,
.bg-pink p {
    color: white;
}

.bg-green {
    background-color: var(--accent-green);
    color: var(--text-primary);
}

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

.text-center {
    text-align: center;
}

/* Navigation */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    position: absolute;
    /* Integrate into hero */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    font-family: var(--font-heading);
}

.logo {
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--bg-pink);
    /* Ensure Pink on Project Pages */
    text-transform: uppercase;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-circle {
    width: 65px;
    height: 65px;
    background-color: #E54591;
    /* Pink */
    border-radius: 50%;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.logo-text span {
    font-weight: 900;
    font-size: 1.8rem;
    text-transform: uppercase;
    color: var(--bg-pink);
    display: block;
}

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

.nav-links a {
    font-weight: 700;
    font-size: 1.1rem;
    position: relative;
    /* Determine color based on page - simplified for now */
    color: white;
    /* Blend mode might help if backgrounds vary, but explicit classes are better. 
       For now, let's assume nav needs to be visible on Yellow. */
    color: #333;
}

/* Specific overrides if on pink background? handled individually if needed */

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

.nav-links a.active {
    color: var(--bg-pink);
}


/* HERO SECTION (HOME) */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 4rem;
    color: var(--bg-pink);
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.hero-text h1 {
    margin-bottom: 2rem;
    color: var(--bg-pink);
}

.hero-text p {
    font-size: 1.5rem;
    color: white;
    font-weight: 500;
    max-width: 400px;
}

/* HERO IMAGE - LAPTOP ZOOMED RIGHT */
.hero-image {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100vh;
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    /* Allow overlapping slightly if needed, or stick to 50% */
    pointer-events: none;
    /* Let clicks pass through if it overlaps text area */
}

.hero-laptop-img {
    width: auto;
    max-width: 100%;
    /* Reduced size */
    height: 80vh;
    /* Reduced height */
    object-fit: contain;
    position: absolute;
    right: 0;
    /* Shifted fully on screen */
    filter: drop-shadow(-20px 20px 40px rgba(0, 0, 0, 0.2));
}

/* MEDIA SECTION (HOME) */
.media-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    background-color: var(--bg-pink);
    /* The screenshot implies a pink background, 
       but the card itself is Light Pink. 
       Let's stick to the base pink background. */
}

.media-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.media-visuals {
    order: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.media-collage-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
}

/* Media Text Card Styling (Matches Screenshot 3) */
.media-text-wrapper {
    order: 2;
    display: flex;
    justify-content: center;
    /* or flex-start */
}

.media-text-card {
    background-color: #F49AC1;
    /* Light Pink from screenshot approx */
    padding: 3rem;
    border-radius: 40px;
    /* Highly rounded */
    color: #C62A88;
    /* Dark Pink Text */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 450px;
    width: 100%;
}

.media-text-card h2 {
    color: #C62A88;
    /* Dark Pink */
    font-size: 3.5rem;
    line-height: 0.9;
    margin-bottom: 1.5rem;
    text-transform: none;
    /* Ensure case matches */
}

.media-text-card p {
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 1rem;
}


/* PROJECTS PAGE */
.projects-header {
    background-color: var(--bg-yellow);
    padding: 8rem 0 2rem;
    color: var(--bg-pink);
}

.projects-section {
    padding-bottom: 5rem;
}

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

.project-card-vibrant {
    background-color: var(--accent-green);
    /* Lime Green */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.3s ease;
    border: 2px solid white;
}

.project-card-vibrant:hover {
    transform: translateY(-10px);
}

.card-image {
    background: white;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    aspect-ratio: 4/3;
}

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

.card-content {
    text-align: center;
    color: var(--bg-pink);
}

.card-content h3 {
    color: var(--bg-pink);
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.card-content p {
    color: #555;
    /* Darker green or grey? Screenshot shows greyish text */
    font-size: 0.95rem;
    line-height: 1.4;
}

/* FAQs SECTION */
.faq-section {
    padding: 5rem 0;
}

.faq-title {
    color: var(--accent-green);
    /* Lime Green */
    font-size: 5rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 1rem;
    /* Reduced margin since it's now directly above image */
    line-height: 1;
}

.small-s {
    font-size: 0.6em;
    /* Smaller sizing */
    text-transform: lowercase;
    /* Lowercase s */
}

.faq-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    /* Center vertically */
}

.faq-visual {
    display: flex;
    flex-direction: column;
    /* Stack Title and Image */
    justify-content: center;
    align-items: center;
}

.faq-main-img {
    width: 100%;
    max-width: 450px;
    height: auto;
    object-fit: contain;
    /* Optional: verify if rounded or not needed based on image transparency */
}

.faq-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.faq-item h4 {
    color: var(--accent-green);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.faq-item p {
    color: white;
    font-size: 1.1rem;
}

.faq-item a {
    color: inherit;
    text-decoration: underline;
}


/* CONTACT PAGE */
.contact-page-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 4rem;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.contact-card {
    background: var(--accent-green);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    border: 2px solid white;
}

.contact-card h2 {
    color: var(--bg-pink);
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-size: 1.2rem;
}

.contact-row .label {
    font-weight: 700;
    color: var(--bg-pink);
    min-width: 80px;
}

.contact-row .value {
    color: #555;
    font-family: var(--font-body);
}

.icons-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.icon-bubble {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    border: 5px solid #3366ff;
    /* Blue icons from screenshot? */
    color: #3366ff;
}

.icon-bubble:nth-child(2) {
    transform: translateY(-30px);
}


/* RESPONSIVE */
@media (max-width: 768px) {

    .hero-content,
    .media-content,
    .faq-container,
    .contact-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .media-text {
        order: 1;
    }

    .media-visuals {
        order: 2;
        height: 300px;
    }

    .nav-bar {
        flex-direction: column;
        gap: 1rem;
        background: rgba(255, 182, 73, 0.95);
        /* Yellow background to hide content overlay */
        backdrop-filter: blur(5px);
        position: relative;
        /* Stop absolute positioning on mobile to prevent overlap */
        padding: 1rem;
    }

    .hero-text h1 {
        font-size: 3rem;
    }

    /* Reset Hero Image for Mobile */
    .hero-image {
        position: relative;
        width: 100%;
        height: auto;
        right: auto;
        top: auto;
        order: -1;
        margin-top: 2rem;
        pointer-events: auto;
    }

    .hero-laptop-img {
        width: 100%;
        max-width: 500px;
        height: auto;
        position: relative;
        right: auto;
    }

    /* Project Page Fixes */
    .content-row,
    .content-row.reverse {
        flex-direction: column;
        /* Force vertical stack */
        gap: 2rem;
        text-align: center;
    }

    .back-nav {
        padding-top: 2rem;
        /* Reduced since nav is relative now */
        padding-left: 1rem;
    }

    .project-header {
        padding-top: 2rem;
    }

    .pop-gallery {
        display: grid;
        grid-template-columns: 1fr;
        /* Single column gallery on mobile */
        gap: 2rem;
        /* Normal gap */
        max-width: 100%;
        padding: 0 1rem;
        margin: 0;
    }

    .pop-item {
        width: 100%;
        /* Full width */
        height: auto;
        margin: 0;
        /* No negative margins */
        transform: none !important;
        /* Remove scatter */
        border-radius: var(--border-radius-md);
    }

    .pop-item img {
        aspect-ratio: 4/3;
        /* Standard ratio */
    }

    .pop-item:hover {
        transform: none;
        /* No interaction on mobile usually */
        width: 100%;
        height: auto;
    }
}

/* Project Detail Images Grid */
.image-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 600px;
    /* Constrain overall width */
    margin: 0 auto;
}

.image-grid-2x2 img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    object-fit: cover;
    aspect-ratio: 1;
    /* Make them square or consistent */
}

/* Fix for Project Pages Overlap */
.back-nav {
    padding-top: 140px;
    /* Clear the absolute navbar */
    padding-left: 2rem;
    padding-bottom: 2rem;
}

.back-nav a {
    font-weight: 600;
    color: var(--bg-pink);
    font-size: 1.1rem;
    display: inline-block;
    transition: transform 0.2s ease;
}

.back-nav a:hover {
    transform: translateX(-5px);
}

.project-header {
    padding: 0 2rem 4rem 2rem;
    text-align: center;
    color: var(--bg-pink);
}

.project-header h1 {
    font-size: clamp(3rem, 6vw, 5rem);
    /* Consistent with other headers */
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

/* Pop-up Grid Gallery (Clean Layout with Hover Effect) */
/* Pop-up Collage Gallery */
.pop-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 700px;
    margin: 2rem auto;
    /* "Place a bit closer" - relying on negative margins on items */
}

.pop-item {
    position: relative;
    width: 220px;
    /* Fixed base size */
    height: 220px;
    margin: -15px;
    /* "Closer" - Overlapping collage feel */
    border-radius: var(--border-radius-md);
    overflow: hidden;
    /* Cropped by default */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background: white;
    border: 3px solid white;
    /* Polaroid-ish border to separate overlaps */
}

.pop-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cropped by default */
    display: block;
    transition: object-fit 0s step-end;
    /* Switch instantly on hover? or just scale? */
}

/* Scattering Effect for Collage */
.pop-item:nth-child(odd) {
    transform: rotate(-3deg);
}

.pop-item:nth-child(even) {
    transform: rotate(3deg) translateY(10px);
}

.pop-item:nth-child(3n) {
    transform: rotate(1deg) translateX(-5px);
}

/* Hover Effect: Pop up (Square Zoom Only) */
.pop-item:hover {
    z-index: 100;
    /* Bring to very front */
    transform: scale(1.2) rotate(0);
    /* Zoom in slightly and straighten */
    /* REMOVED: width/height expansion that caused scrolling */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.pop-item:hover img {
    /* REMOVED: object-fit switch. Keep it cover (cropped square) */
    /* object-fit: contain; */
    /* height: auto; */
}

/* Page Layout Standardization */
.content-section {
    padding: 6rem 0;
    /* Add proper vertical spacing */
}

.content-row {
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
    /* Stack on mobile */
    margin-bottom: 2rem;
}

.content-row.reverse {
    flex-direction: row-reverse;
}

.text-col {
    flex: 1;
    min-width: 300px;
}

.text-col h3 {
    color: var(--bg-pink);
    /* Pink Heading */
    font-size: 2rem;
    margin-bottom: 1rem;
}

.text-col p {
    color: #C62A88;
    /* Dark Pink for readability */
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
}

.image-col {
    flex: 1;
    min-width: 300px;
}