img{
    max-width: 100%;
    height:auto;
    margin: auto;
}

/* RECEIVED AI HELP WITH MOST OF THIS, DID A SCAN THROUGH THE CODE TO MAKESURE I UNDERSTOOD IT */


:root {
    --cream-white: #FAF7F2;
    --ink-black: #1A1A1A;
    --medium-gray: #4A4A4A;
    --detective-brown: #2C1810;
    --steel-blue: #8A9BB5;
    --dusty-rose: #D4A0A0;
    --warm-amber: #D4A853;
    --light-gray: #C8C4BC; /* warm light gray — for nav border line */
    --warm-tan: #C4A882; /* soft warm tan — for home hover */
    --font-header: 'Playfair Display', serif;
    --font-body: 'Lora', serif;
    --font-hindi: 'Playfair Display', serif;
}


/* ========== GLOBAL STYLES ========== */
body {
    background-color: var(--cream-white); /* sets the whole page background */
    color: var(--ink-black); /* sets default text color */
    font-family: var(--font-body); /* sets Lora as default font */
    margin: 0; /* removes default browser spacing */
    padding: 0; /* removes default browser spacing */
}

/* ========== HERO SECTION ========== */
.hero {
    display: flex; /* lines children up in a row or column */
    flex-direction: column; /* stacks children vertically */
    align-items: center; /* centers everything horizontally */
    padding: 40px 20px; /* breathing room around the section */
}

/* ========== KEYA ========== */
h1 {
    font-family: var(--font-header); /* Playfair Display */
    font-size: 140px; /* large and dramatic */
    letter-spacing: 20px; /* spreads letters apart like a masthead */
    color: var(--ink-black);
    margin-top: 300px;
    margin-bottom: 1px; /* space between name and hindi text */
    text-align: center; /* centers the name */
}

/* ========== HERO IMAGE ========== */
/* AI TAUGHT ME HOW TO MASK --> masking the sketch so it looks cool */
.sketch-container {
    position: relative;
    width: 70%;
    max-width: 1200px;
}
/* ========== HERO HINT ========== */

.hero-hint {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--medium-gray);
    
    /* centers it above the image */
    text-align: center;
    
    /* breathing room below before the image starts */
    margin-bottom: 20px;
    margin-top: 0;
}

.sketch-img {
    width: 100%;
    display: block;
    -webkit-mask-image: 
        linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image: 
        linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-composite: intersect;
}

/* AI HELPED WITH ENSURING THE GIFS HAVE THE SAME MASK! */
.sketch-gif {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    -webkit-mask-image: 
        linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image: 
        linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-composite: intersect;
}

/* ========== TOOLTIPS ========== */

.sketch-tooltip {
    /* position: absolute means "place me relative to my parent container" */
    /* this only works because .sketch-container already has position: relative */
    position: absolute;
    
    /* hidden by default — JS will change this to 'block' on hover */
    display: none;
    
    /* styling to match your portfolio aesthetic */
    font-family: var(--font-body);
    font-size: 16px;
    letter-spacing: 2px;
    color: var(--cream-white);
    background-color: var(--ink-black);
    padding: 8px 16px;
    
    /* soft rounded corners */
    border-radius: 2px;
}

/* position each tooltip over its object */
/* these percentages are relative to .sketch-container's width/height */
#laptop-tooltip {
    bottom: 18%;
    left: 8%;
}

#notebook-tooltip {
    bottom: 16%;
    left: 42%;
}

#folder-tooltip {
    bottom: 18%;
    right: 8%;
}


/* AI HELPED WITH INTEGRATING HINDI INTO MY PORTFOLIO */
.hindi-logline {
    font-style: italic; 
    font-style: bold;
    font-family: var(--font-hindi); /* Lora */
    font-size: 54px;
    color: var(--ink-black);
    text-align: center;
    margin: 0 0 0 0; /* top right bottom left — only 4px below */
    letter-spacing: 6px;
}

.english-logline {
    font-style: italic; 
    font-family: var(--font-body); /* Lora */
    font-size: 24px;
    color: var(--medium-gray);
    letter-spacing: 4px;
    text-align: center;
    margin: 0 0 300px 0; /* keeps space before the image */
    text-transform: lowercase; /* keeps it subtle */
}


/* ========== NAVBAR ========== */
header {
    background-color: var(--cream-white); /* matches page background */
    border-bottom: 1px solid var(--medium-gray);
    padding: 10px 18px;
    position: fixed;    /* keeps the header locked to the top of the screen */
    top: 0;             /* makes sure it's glued to the very top edge */
    width: 100%;        /* stretches it across the full screen width */
    z-index: 100;       /* makes sure it sits ON TOP of everything else when scrolling */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 10px;
}

/* adds breathing room on the right end of the nav to mirror the left side */
.desktop-links {
    margin-right: 20px;
}

.logo {
    max-width: 90px;
    height: auto;
    display: block;
}

/* ========== MENU ITEMS ========== */
.menu-item {
    font-family: var(--font-body); /* Lora */
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--ink-black);
    margin: 0 14px;
    transition: color 0.3s ease;
}

/* each nav link glows its page color on hover - GOT THIS FROM MY PREVIOUS PROJECT!*/
.nav-home:hover {
    color: var(--light-gray);
}

.nav-about:hover {
    color: var(--dusty-rose);
}

.nav-ai:hover {
    color: var(--steel-blue);
}

.nav-projects:hover {
    color: var(--warm-amber);
}

.nav-contact:hover {
    color: var(--light-gray);
}


/* ========== DESKTOP NAV ========== */
.desktop-nav {
    display: none; /* hidden on mobile by default */
    justify-content: space-between;
    align-items: center;
}

.desktop-nav .menu-item:not(.logo-box) {
    margin-left: 40px;
}

.desktop-links {
    display: flex;
    align-items: center;
}

/* ========== HAMBURGER ICON ========== */
.fa-bars {
    color: var(--ink-black);
    font-size: 1.8rem;
    cursor: pointer;
     margin-right: 20px; /* pulls the hamburger away from the right edge */
}

/* ========== SIDENAV ========== */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: var(--ink-black);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    border-right: 1px solid var(--ink-black);
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--cream-white);
    display: block;
    transition: 0.3s;
}

/* each nav link glows its page color on hover - GOT THIS FROM MY PREVIOUS PROJECT!*/
.sidenav-home:hover {
    color: var(--light-gray);
}

.sidenav-about:hover {
    color: var(--dusty-rose);
}

.sidenav-ai:hover {
    color: var(--steel-blue);
}

.sidenav-projects:hover {
    color: var(--warm-amber);
}

.sidenav-contact:hover {
    color: var(--light-gray);
}


.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: var(--cream-white);
}

/* ========== SCROLL HINT ========== */

#scroll-hint {
    /* fixed means it stays in the same spot on screen even as you scroll */
    /* this is different from absolute which moves with the page content! */
    position: fixed;
    bottom: 40px;
    
    /* this is a trick to center something horizontally with fixed positioning */
    left: 50%;
    transform: translateX(-50%);
    
    /* stack the arrow and text vertically */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    
    /* smooth fade out when JS hides it */
    transition: opacity 0.5s ease;
    
    /* sits on top of everything else */
    z-index: 99;
}

#scroll-hint .fa-arrow-down {
    font-size: 1.2rem;
    color: var(--ink-black);
}

#scroll-hint p {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink-black);
    margin: 0;
}

.ai-notice {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--medium-gray);
    
    /* centers it above the image */
    text-align: center;
    
    /* breathing room with the logo below */
    margin-top: 32px;
    margin-bottom: 0px;
}

/* ========== ABOUT PAGE ========== */
.about-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 40px;
}

.about-header {
    margin-bottom: 0px; /* removes gap below header section */
    padding-bottom: 0px;
}

.page-label {
    font-family: var(--font-body);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--dusty-rose);
    margin-bottom: 8px;
    padding: 0px;
    text-align: center;
}

.about-title {
    font-family: var(--font-header);
    font-size: 72px;
    letter-spacing: 0px;
    color: var(--ink-black);
    margin-top: 0px;
    margin-bottom: 60px;
    text-align: center;
}

/* for the hindi parts */
.page-sublabel-dustyrose {
    font-style: italic;
    font-family: var(--font-body);
    font-size: 24px;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: var(--dusty-rose);
    margin-bottom: 0px;
}

/* dusty rose divider line */
.rose-divider {
    width: 80px;
    height: 2px;
    background-color: var(--dusty-rose);
    margin-bottom: 40px;
}

/* large hero photo */
.about-hero-photo {
    width: 100%;
    margin-bottom: 80px;
}

.about-hero-photo img {
    width: 100%;
    max-height: 800px;
    object-fit: cover; /* crops photo to fill space nicely */
    border: 1px solid var(--dusty-rose);
}

/* ========== ALTERNATING SECTIONS ========== */
.about-feature {
    display: flex;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
}

/* reverse flips the order for alternating effect */
.about-feature-reverse {
    flex-direction: row-reverse;
}

.feature-photo {
    flex: 1;
}

.feature-photo img {
    width: 100%;
    border: 1px solid var(--dusty-rose);
}

.feature-text {
    flex: 1;
}

.feature-heading {
    font-family: var(--font-header);
    font-size: 48px;
    color: var(--dusty-rose); /* dusty rose heading */
    margin-bottom: 20px;
    line-height: 1.2;
    margin-top: 8px;
}

.feature-para {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.9;
    color: var(--ink-black);
}

/* ========== PROJECTS PAGE ========== */
.projects-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 40px;
}

/* amber colored small label above headings */
.page-label-amber {
    font-family: var(--font-body);
    font-size: 18px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--warm-amber);
    margin-bottom: 16px;
    text-align: center;
}

/* for the hindi parts */
.page-sublabel-amber {
    font-style: italic;
    font-family: var(--font-body);
    font-size: 24px;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: var(--warm-amber);
    margin-bottom: 14px;
}

/* large page title */
.projects-title {
    font-family: var(--font-header);
    font-size: 72px;
    color: var(--ink-black);
    letter-spacing: 0px;
    margin-top: 0;
    margin-bottom: 32px;
}

/* wide amber divider under page title */
.amber-divider {
    width: 80px;
    height: 2px;
    background-color: var(--warm-amber);
    margin-bottom: 40px;
}

/* ========== SKILL SECTIONS ========== */

/* each skill section starts invisible */
/* JavaScript will fade it in when user scrolls to it */
.skill-section {
    margin-bottom: 100px;
}

/* skill name heading in amber */
.skill-title {
    font-family: var(--font-header);
    font-size: 48px;
    color: var(--warm-amber);
    margin-bottom: 16px;
    margin-top: 0;
}

/* your personal definition paragraph */
.skill-description {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.9; /* generous spacing for readability */
    color: var(--ink-black);
    max-width: 1000px; /* keeps text from stretching too wide */
    margin-bottom: 40px;
    margin-top: 0;
}

/* ========== STORY CARD ========== */

/* clean simple card with amber left border accent */
.story-card {
    border-left: 3px solid var(--warm-amber); /* amber left border */
    padding: 24px 32px;
    max-width: 700px;
    transition: transform 0.3s ease; /* smooth hover effect */
}

/* card lifts slightly when hovered */
.story-card:hover {
    transform: translateX(8px); /* slides right instead of up — feels like opening a file */
}

.story-headline {
    font-family: var(--font-header);
    font-size: 24px;
    color: var(--ink-black);
    margin-bottom: 12px;
    margin-top: 0;
}

.story-description {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: var(--medium-gray);
    margin-bottom: 20px;
}

/* read more link with animated underline */
.story-link {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--warm-amber);
    text-decoration: none;
    border-bottom: 1px solid var(--warm-amber);
    padding-bottom: 2px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* link turns ink black on hover */
.story-link:hover {
    color: var(--ink-black);
    border-bottom-color: var(--ink-black);
}

/* ========== AI SKILLS PAGE ========== */

.ai-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 40px;
}

/* small blue label above headings */
.page-label-blue {
    font-family: var(--font-body);
    font-size: 18px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--steel-blue);
    margin-bottom: 16px;
    text-align: center;
}

/* large page title */
.ai-title {
    font-family: var(--font-header);
    font-size: 72px;
    line-height: 1.1;
    color: var(--ink-black);
    margin-top: 0;
    margin-bottom: 40px;
    letter-spacing: 0px;
}

/* steel blue divider line */
.blue-divider {
    width: 80px;
    height: 2px;
    background-color: var(--steel-blue);
    margin-bottom: 40px;
}

/* ========== HINDI QUOTE ========== */

.ai-hindi-quote {
    text-align: center;
    margin-bottom: 8px;
    padding: 20px;
}

.ai-hindi-script {
    font-style: italic;
    font-family: var(--font-hindi);
    font-size: 32px;
    color: var(--steel-blue);
    margin-bottom: 0px;
    margin-top: 0px;
}

.ai-hindi-translation {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 18px;
    color: var(--medium-gray);
    letter-spacing: 2px;
    margin-bottom: 40px;
}

/* ========== PHILOSOPHY BOX ========== */

.ai-philosophy-box {
    /* creates a contained box with steel blue border */
    border: 1px solid var(--steel-blue);
    padding: 48px;
    margin-bottom: 80px;
    /* subtle steel blue tint on background */
    background-color: rgba(138, 155, 181, 0.05);
}

.ai-philosophy-text {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 2;
    color: var(--ink-black);
    margin: 0;
    max-width: 1028px;
    text-align: center;
}

/* ========== WOULD NEVER SECTION ========== */

.ai-never-section {
    margin-bottom: 80px;
}

.ai-section-title {
    font-family: var(--font-header);
    font-size: 48px;
    color: var(--ink-black);
    margin-top: 0;
    margin-bottom: 16px;
}

/* each never item is a row with arrow and text */
.never-item {
    display: flex; /* puts arrow and text side by side */
    align-items: flex-start; /* aligns to top */
    gap: 16px; /* space between arrow and text */
    margin-bottom: 24px;
    padding-bottom: 24px;
    /* subtle line between each item */
    border-bottom: 1px solid var(--light-gray);
}

.never-arrow {
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--steel-blue);
    /* prevents arrow from shrinking */
    flex-shrink: 0;
}

.never-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    color: var(--ink-black);
    margin: 0;
}

/* ========== HOW I USE AI SECTION ========== */

.ai-uses-section {
    margin-bottom: 80px;
}

/* grid of flip cards — 3 per row */
.flip-cards-grid {
    display: flex;
    flex-wrap: wrap; /* wraps to next row when needed */
    gap: 24px;
}

/* ========== FLIP CARDS ========== */

/*
    The flip card works in three layers:
    1. .flip-card = fixed size container, clips overflow
    2. .flip-card-inner = the part that actually rotates
    3. .flip-card-front and .flip-card-back = the two faces
    
    The trick is that front and back are stacked on top
    of each other using position absolute, and the back
    starts pre-rotated 180 degrees so it's hidden.
    When you hover, the inner rotates 180 degrees —
    front goes away, back comes into view!
*/

.page-sublabel-blue {font-family: var(--font-body);
    font-size: 18px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--steel-blue);
    margin-bottom: 16px;
}

.flip-card {
    /* each card takes up roughly 1/3 of the row */
    flex: 1 1 calc(33% - 20px);
    height: 200px;
    /* perspective makes the 3D rotation look realistic */
    /* higher number = more subtle 3D effect */
    perspective: 1000px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* this is what actually rotates on hover */
    transition: transform 0.7s ease;
    /* tells browser to show both front and back as 3D */
    transform-style: preserve-3d;
}

/* when hovering the card, rotate the inner 180 degrees */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* both front and back share these base styles */
.flip-card-front,
.flip-card-back {
    position: absolute; /* stacked on top of each other */
    width: 100%;
    height: 100%;
    padding: 32px;
    /* backface-visibility hidden means each face only */
    /* shows when facing toward you, hides when facing away */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* front face — cream background with blue border */
.flip-card-front {
    background-color: var(--cream-white);
    border: 1px solid var(--steel-blue);
}

/* back face — steel blue background */
.flip-card-back {
    background-color: var(--steel-blue);
    /* pre-rotated 180 degrees so it starts hidden */
    transform: rotateY(180deg);
}

.flip-card-title {
    font-family: var(--font-header);
    font-size: 22px;
    color: var(--ink-black);
    margin: 0;
}

/* back title in cream white since background is blue */
.flip-card-title-back {
    font-family: var(--font-header);
    font-size: 18px;
    color: var(--cream-white);
    margin-bottom: 12px;
    margin-top: 0;
}

.flip-card-description {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--cream-white);
    margin: 0;
}

/* ========== CONTACT PAGE ========== */

.contact-main {
    max-width: 800px;       /* keeps the content from stretching too wide */
    margin: 0 auto;         /* centers the whole block on the page */
    padding: 120px 40px;     /* breathing room around the edges */
}

/* small label above the title, same pattern as your other pages */
.page-label-contact {
    font-family: var(--font-body);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--light-gray);   /* neutral gray — contact page has no special color */
    margin-bottom: 16px;
    text-align: center;
}

/* the big Hindi title */
.contact-title {
    font-family: var(--font-header);
    font-size: 72px;
    color: var(--ink-black);
    text-align: center;
    margin-top: 0;
    margin-bottom: 32px;
    letter-spacing: 2px;
}

/* the small English translation underneath */
.contact-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 18px;
    color: var(--medium-gray);
    letter-spacing: 4px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 60px;    /* big gap before the list starts */
}

/* each row is a flex container — label on the left, value on the right */
.contact-row {
    display: flex;              /* lines children up side by side */
    justify-content: space-between; /* pushes label to left, value to right */
    align-items: center;        /* vertically centers them in the row */
    padding: 24px 0;            /* vertical breathing room in each row */
}

/* the category label on the left e.g. "LinkedIn", "Signal" */
.contact-label {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;  /* makes it feel like a file category stamp */
    color: var(--medium-gray);
}

/* the actual value on the right e.g. the email address or link */
.contact-value {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink-black);
}

/* when the value is also a link, this adds the hover effect */
.contact-link {
    text-decoration: none;          /* removes the default underline */
    border-bottom: 1px solid var(--ink-black); /* our own subtle underline */
    padding-bottom: 2px;
    transition: color 0.3s ease, border-color 0.3s ease; /* smooth color change */
}

.contact-link:hover {
    color: var(--light-gray);               /* goes gray on hover */
    border-bottom-color: var(--light-gray);
}

/* the grayed-out Signal row */
.contact-row-muted .contact-label,
.contact-row-muted .contact-value {
    /* this selector targets BOTH the label and value inside a muted row */
    color: var(--light-gray);   /* lighter color signals it's inactive */
}

/* the (coming soon) badge */
.coming-soon-badge {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--light-gray);
    margin-left: 10px;  /* small gap between "Anonymous Tips" and the badge */
    font-style: italic;
}

/* thin horizontal line between each row */
.contact-divider {
    width: 100%;
    height: 1px;
    background-color: var(--light-gray);
    opacity: 0.5;   /* makes it very subtle — just a whisper of a line */
}

/* ========== HINDI QUOTE ========== */

.contact-hindi-quote {
    text-align: center;
    margin-top: 32px;
    padding: 20px;
}

.contact-hindi-script {
    font-style: italic;
    font-family: var(--font-hindi);
    font-size: 32px;
    color: var(--ink-black);
    margin-bottom: 0px;
    margin-top: 0px;
}

.contact-hindi-translation {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 18px;
    color: var(--medium-gray);
    letter-spacing: 2px;
    margin-bottom: 40px;
    margin-top: 0px;
}

/* ========== FOOTER ========== */

footer {
    /* centers the icon horizontally */
    display: flex;
    justify-content: center;
    
    /* breathing room above and below */
    padding: 8px 20px;
    
}

.footer-icon {
    /* keeps the icon small and unobtrusive */
    width: 60px;
    height: auto;
    margin-top: 0px;
    
    /* smooth fade on hover so it feels interactive */
    transition: opacity 0.3s ease;
}

.footer-icon:hover {
    opacity: 0.5;
}

/* ========== NEXT PAGE NAVIGATION ========== */

.next-page {
    /* pushes the arrow to the right side */
    display: flex;
    justify-content: flex-end;
    
    /* breathing room and right alignment to sit above footer */
    padding: 40px 60px;
}

.next-page-link {
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-black);
    
    /* subtle underline like your contact links */
    border-bottom: 1px solid var(--ink-black);
    padding-bottom: 4px;
    
    /* smooth color transition on hover */
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* on hover each link uses its destination page color */
/* we can reuse your existing nav hover classes! */
.next-page-link.nav-ai:hover {
    color: var(--steel-blue);
    border-bottom-color: var(--steel-blue);
}

.next-page-link.nav-projects:hover {
    color: var(--warm-amber);
    border-bottom-color: var(--warm-amber);
}

.next-page-link.nav-contact:hover {
    color: var(--light-gray);
    border-bottom-color: var(--light-gray);
}


/* ===== DESKTOP — large screens (1028px and above) ===== */
@media (min-width: 1028px) {
    .desktop-nav {
        display: flex;
    }
    .mobile-nav {
        display: none;
    }
}

/* ===== TABLET — iPads, small laptops (768px to 1027px) ===== */
@media (min-width: 768px) and (max-width: 1027px) {

    .next-page {
        padding: 40px 40px;
    }

    /* show desktop nav on tablets too */
    .desktop-nav {
        display: flex;
    }
    .mobile-nav {
        display: none;
    }

    /* scale down the giant hero text so it fits */
    h1 {
        font-size: 80px;
        letter-spacing: 10px;
        margin-top: 160px;
    }

    .hindi-logline {
        font-size: 36px;
    }

    .english-logline {
        font-size: 18px;
        margin-bottom: 160px;
    }

    /* scale down page titles */
    .about-title,
    .projects-title,
    .ai-title,
    .contact-title {
        font-size: 52px;
    }

    /* slightly reduce gap in alternating sections but keep side by side */
    .about-feature {
        gap: 40px;
    }

    /* flip cards go to two columns instead of three */
    .flip-card {
        flex: 1 1 calc(50% - 20px);
    }
}

/* ===== MOBILE — phones (767px and below) ===== */
@media (max-width: 767px) {

    /* make sure mobile nav shows on small screens */
    .mobile-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .next-page {
        /* centers it on mobile instead of right aligned */
        justify-content: center;
        padding: 40px 20px;
    }

    /* ── HERO PAGE ── */

    /* scale down the massive name */
    h1 {
        font-size: 52px;
        letter-spacing: 6px;
        /* replace fixed 300px margin with something proportional */
        margin-top: 100px;
    }

    .hindi-logline {
        font-size: 28px;
        letter-spacing: 2px;
    }

    .english-logline {
        font-size: 14px;
        margin-bottom: 40px;
    }

    /* make the hero image full width */
    .sketch-container {
        width: 100%;
    }

    /* ── ALL PAGES ── */

    /* scale down all big page titles */
    .about-title,
    .projects-title,
    .ai-title,
    .contact-title {
        font-size: 42px;
    }

    /* reduce padding on all main content areas so nothing feels cramped */
    .about-main,
    .projects-main,
    .ai-main,
    .contact-main {
        padding: 100px 20px;
    }

    /* ── ABOUT PAGE ── */

    /* stack the alternating sections vertically instead of side by side */
    /* flex-direction: column means children stack on top of each other */
    .about-feature {
        flex-direction: column;
        gap: 32px;
    }

    /* this overrides the reverse alternating layout — on mobile they all just stack */
    .about-feature-reverse {
        flex-direction: column;
    }

    /* feature headings slightly smaller */
    .feature-heading {
        font-size: 32px;
    }

    /* ── PROJECTS PAGE ── */

    .skill-title {
        font-size: 32px;
    }

    /* ── AI PAGE ── */

    /* philosophy box has too much padding on mobile */
    .ai-philosophy-box {
        padding: 24px;
    }

    .ai-section-title {
        font-size: 32px;
    }

    /* flip cards go to one column on mobile */
    /* 100% width means each card takes up the full row */
    .flip-card {
        flex: 1 1 100%;
    }

    /* ── CONTACT PAGE ── */

    /* on very narrow screens, stacking label above value is cleaner than side by side */
    .contact-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* ── FOOTER ── */
    .footer-icon {
        width: 44px;
    }
}