* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* global styles */

body {
    line-height: 1.6;
    color: #FFF;
    background: linear-gradient(to bottom, #548C56 0%, #004065 100%);
    min-height: 100vh; 
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 400;
    overflow-x: hidden;
}

html {
    font-size: 16px;
    scroll-behavior: auto;
}

article a {
    text-decoration: none;
}

.glbl-container {
    max-width: 70rem;
    margin: 0 auto;
}

.divider{
    width: 20rem;          /* was 13rem */
    height: 0.15rem;       /* was 0.125rem */
    margin: 3.5rem auto;   /* a bit more breathing room */
  
    background: linear-gradient(
      90deg,
      #ffffff 0%,
      #E6F6FC 50%,
      #C5B1EF 100%
    );
  
    -webkit-mask: linear-gradient(
      to right,
      transparent 0%,
      black 20%,
      black 80%,
      transparent 100%
    );
    mask: linear-gradient(
      to right,
      transparent 0%,
      black 20%,
      black 80%,
      transparent 100%
    );
  
    box-shadow: 0 0 6px rgba(255,255,255,0.12);
    opacity: 1;
  }

.top-divider {
    margin: 10rem auto 3rem; /* bottom space = breathing room */
}

.three-videos .bottom-center {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 34rem;
}

/* HERO SECTION: stack content + scroll cue */

  
  /* scroll CTA sits on its own row and centers */
  #scroll-down{
    flex: 0 0 100%;                 /* forces a new line */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
          /* space from hero content */
    margin-top: 0.5rem;
    text-decoration: none;
    color: #fff;
    font-family: "good-times", sans-serif;
    font-variation-settings: "wght" 500;
    opacity: 0.9;
  }
  
  /* text styling */
  .scroll-text{
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  
  /* arrow */
  .scroll-arrow{
    margin-top: 0.4rem;
    font-size: 1.5rem;
    line-height: 1;
    animation: arrowBounce 1.1s ease-in-out infinite;
  }
  
  /* hover polish */
  #scroll-down:hover .scroll-text{
    opacity: 1;
    transform: translateY(-2px);
  }
  
  @keyframes arrowBounce{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
  }

  .parallax-scroll-down {
    position: absolute;
    left: 50%;
    bottom: 3.5rem;
    transform: translateX(-50%);
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    color: #fff;
    font-family: "good-times", sans-serif;
    font-variation-settings: "wght" 700;
    opacity: 0.9;
    width: max-content;
    transition: opacity 0.25s ease;
}

.parallax-scroll-down.hide-scroll-prompt {
    opacity: 0;
    pointer-events: none;
}

/* text styling */
.parallax-scroll-down .scroll-text {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* arrow */
.parallax-scroll-down .scroll-arrow {
    margin-top: 0.4rem;
    font-size: 1.5rem;
    line-height: 1;
    animation: arrowBounce 1.1s ease-in-out infinite;
}

/* hover polish */
.parallax-scroll-down:hover .scroll-text {
    opacity: 1;
    transform: translateY(-2px);
}

#final {
    scroll-margin-top: 5rem;
}

/* =========================
   HERO DEVICE (MAC + GIF)
========================= */

.hero-device{
    position: relative;
  
    /* bigger minimum so it doesn't get too small */
    width: clamp(18rem, 50vw, 25rem);
  
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}
  
  /* mac frame always fills the wrapper */
  #hero-mac{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
  }
  
  /* gif locked into the screen window (tune these 4 once) */
  #hero-gif{
    position: absolute;
  
    top: 10.5%;
    left: 20%;
    width: 65%;
    height: 38%;
  
    object-fit: cover;
    opacity:0;
  
    z-index: 0;
  
    transition: opacity 0.25s ease;
  }

/* header styles */

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: linear-gradient(to right, #548C56 -40%, #004065 140%);
    opacity: 1;
}

nav {
    max-width: 87.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 3.75rem;
}

/* Logo */
.logo {
    font-family: 'Jaro', sans-serif;
    color: #fff;
    font-size: 2rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    font-size: 2.9rem;
}

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

.nav-links span {
    padding: 0.375rem 0.9375rem;
    border-radius: 1.5625rem;
    text-decoration: none;
    color: white;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 600;
    cursor: pointer;
    transition: text-shadow 0.25s ease, color 0.25s ease;
}

.nav-links span:hover {
    color: #ffffff;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.6),
        0 0 12px rgba(255, 255, 255, 0.4);
}

#hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    margin: 0 auto;
    padding: 12rem 2rem 4rem;
  }
  

.hero-txt {
    margin: 0;
    padding: 0;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 600;
    font-size: 2.5rem;
    line-height: 1.4;
    text-align: left;
 }

 #change {
    display: inline-block;
    position: relative;
    padding-right: 0.2em;
    padding-top: 0.5rem;
  }
  
  #change::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 0.15em;
    background: currentColor;
    transform: translateY(0.1em);
    animation: caretBlink 0.8s steps(1) infinite;
  }
  
  @keyframes caretBlink {
    50% { opacity: 0; }
  }

  .i-am {
    font-size: 2rem;
  }

  .name-txt {
    font-size: 3.3rem;
    font-family: "good-times", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-shadow:
    0 0 0.6rem rgba(255,255,255,0.1),
    0 0 1.4rem rgba(255,255,255,0.1);
}


/* about section styles */

.about {
    padding: 5rem 2rem;
}

.about-full {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.about-txt h2 {
    font-size: 2.3rem;
    margin-bottom: 1rem;
    font-family: "good-times", sans-serif;
    font-weight: 600;
     background: linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 40%,   /* holds white longer */
      #E6F6FC 65%,
      #C5B1EF 100%
    );
  
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.about-txt p {
    font-size: 1.1rem;
    max-width: 31.25rem;
    line-height: 1.8;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 400;
    padding-right: 2rem;
}

.profile-img {
    width: 15.625rem;
    height: 15.625rem;
    border-radius: 50%;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* ensures image stays within the circle */
}

.profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills the circle without distortion */
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
}

.resume-btn {
    background: #9999FF;
    color: #000;
    padding: 1rem 3rem;
    border: none;
    border-radius: 2rem;
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    font-family: "bebas-neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    margin-top: 1.5rem;
    transition: transform 0.3s ease;
}

/* skils section styles */

#hard-skills {
    padding: 5.5rem 2rem;
}

#soft-skills {
    padding: 5.5rem 2rem;
}

.skills-container {
    margin: 0 auto;
}

.skills-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.skills-text {
    flex: 1;
    max-width: 31.25rem; /* same as About */
}

.skills-text h2 {
    font-size: 2.3rem;
    margin-bottom: 1rem;
    font-family: "good-times", sans-serif;
    font-weight: 600;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 40%,   /* holds white longer */
        #E6F6FC 65%,
        #C5B1EF 100%
      );
    
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
}

.skills-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 400;
    padding-right: 2.5rem;
}

.hard-skills-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9375rem;
}

.soft-skills-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9375rem;
}

.hard-skill-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.2));
}

.hard-skill-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* keeps aspect ratio inside box */
    flex-shrink: 0;      /* prevents shrinking in flex container */
    display: block;      /* removes default inline spacing */
    box-shadow: none;
}

.soft-skill-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* keeps aspect ratio inside box */
    flex-shrink: 0;      /* prevents shrinking in flex container */
    display: block;      /* removes default inline spacing */
    border-radius: 1.3rem;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
}

.soft-skill-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
}


/* projects section styles */

#projects {
    padding: 5.5rem 2rem;
    margin-top: 3rem;
}

.projects-container {
    margin: 0 auto;
}

.projects-container h2{
    font-size: 3rem;
    text-align: center;
    margin-bottom: 3rem;
    font-family: "good-times", sans-serif;
    font-weight: 600;
  
    background: linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 40%,   /* holds white longer */
      #E6F6FC 65%,
      #C5B1EF 100%
    );
  
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

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

.project-card {
    border-radius: 0.9375rem;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.project-image {
    width: 100%;
    height: 12.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #999;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* zooms to fill box while keeping aspect ratio */
    display: block;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
}

.project-info {
    padding: 1.15rem;
}

.project-info h3 {
    font-size: 1.6rem;
    text-transform: uppercase;
    text-align: center;
    font-family: "bebas-neue", sans-serif;
    font-weight: 400;
    letter-spacing: 0.15rem;
    line-height: 2rem;
    margin-top: 0.03rem;
}

.project-detail {
    padding: 8.75rem 2rem 6.25rem;
    display: none;
}

.project-detail-container {
    margin: 0 auto;
    text-align: center;
}

.project-info p {
    margin-top: 0.7rem;
    text-align: center;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 600;
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.9;
}

.project-detail-container h2 {
    font-size: 2.3rem;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 600;
}

.project-placeholder-img {
    width: 100%;
    height: 25rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.2rem;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
}

.project-placeholder-img::before {
    content: 'Project Image';
}

/* contact section styles */

#contact {
    padding: 5.5rem 2rem;
}

.contact-container {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 4rem;
}

.contact-info {
    flex: 1;
    margin: 0 auto;
}

.contact-info h2 {
    font-size: 2.3rem;
    margin-bottom: 1rem;
    font-family: "good-times", sans-serif;
    font-weight: 600;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 40%,   /* holds white longer */
        #E6F6FC 65%,
        #C5B1EF 100%
      );
    
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
}

.contact-info h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 500;
}

.contact-info p {
    font-size: 1.1rem;
    line-height: 1.8;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 400;
    padding-right: 2rem;
}

.contact-form {
    flex: 1;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.form-group {
    margin-bottom: 1.5rem;
    width: 100%;
}

.form-group label {
    display: block;
    margin-bottom: 0.3125rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid darkgreen;
    border-radius: 0.5rem;
    font-size: 1rem;
    background: linear-gradient(90deg, #E6F6FC 0%, #C5B1EF 100%);
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 400;
}

.form-group textarea {
    min-height: 9.375rem;
    resize: vertical;
    background: linear-gradient(90deg, #E6F6FC 0%, #C5B1EF 100%);
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 400;
}

label {
    padding-left: 0.4rem;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 400;
}

.submit-btn {
    background: #9999FF;
    color: #000;
    padding: 1rem 3rem;
    border: none;
    border-radius: 2rem;
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    font-family: "bebas-neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
}

/* =====================
   FORM FIELD SHINE
===================== */

.field-wrap {
    position: relative;
    border-radius: 0.5rem; /* match input radius */
    overflow: hidden;      /* keep shine inside field */
}

/* Shine overlay */
.field-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18),
        transparent 100%
    );

    opacity: 0;
    transform: translateX(-120%);
}

/* Play once when class is added */
.field-wrap.shine::after {
    opacity: 1;
    animation: fieldShine 0.55s ease forwards;
}

@keyframes fieldShine {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* Keep text and caret above the shine */
.field-wrap input,
.field-wrap textarea {
    position: relative;
    z-index: 1;
    border-radius: 0.5rem;
}


.hideAll {
    display: none;
}

section {
    scroll-margin-top: 2rem;
}

/* footer styles */

.site-footer {
    position: relative;
    text-align: center;
    padding: 2rem 3rem;
    margin-top: 3rem;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 400;
    width: 100%;
    padding: 2rem 0;
}

.site-footer p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* socials – desktop (right side) */
.footer-socials {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 1.1rem;
}

.footer-inner {
    max-width: 87.5rem;        /* MATCH nav */
    margin: 0 auto;
    padding: 0 2rem;           /* MATCH nav */
    position: relative;
    text-align: center;
}

.footer-socials a {
    color: #fff;               /* white icons */
    font-size: 1.1rem;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-socials a:hover {
    opacity: 1;
    color: #ffffff;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.6),
        0 0 12px rgba(255, 255, 255, 0.4);
}


.profile-img img,
.project-card,
.skill-icon img,
.content-section img,
.problem-image img,
.process-image img,
.solution-image img,
.submit-btn,
.resume-btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform-origin: center;
}

.profile-img img:hover,
.skill-icon img:hover,
.content-section img:hover,
.problem-image img:hover,
.process-image img:hover,
.solution-image img:hover {
    transform: scale(1.04);
    box-shadow: 0 0 0.85em rgba(0, 0, 0, 0.28);
}

.resume-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 0 0.35em rgba(0, 0, 0, 0.18);
}

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

.submit-btn:hover {
    transform: scale(1.03);
}

:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 1);
    outline-offset: 2px;
}

/* Global Case Study Page Styles */

/* ==============================
   TITLES
============================== */


.titles h2 {
    font-family: "good-times", sans-serif;
    font-weight: 600;
  
    /* desktop baseline */
    font-size: 4rem;
    line-height: 4.5rem;
  
    /* spacing */
    margin: 0 auto 5rem;
    padding: 0 1.5rem;
  
    /* true centering */
    width: 100%;
    text-align: center;
  
    /* IMPORTANT: prevent ugly breaks */
    white-space: normal;        /* allow normal wrapping */
    word-break: normal;         /* no forced breaks */
    overflow-wrap: normal;      /* no emergency breaking */
    hyphens: none;              /* stops single-letter drops */
    text-wrap: balance;         /* supported browsers only */
  }
  
/* ==============================
   PAGE CONTAINER
============================== */

.project-detail-container {
    max-width: 70rem;
    margin: 0 auto 6rem;
    padding: 0 1.5rem;
}

.hero-img {
    width: 100%;
    max-width: 70rem;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.16);
}

.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}
/* ==============================
   SECTION HEADINGS
============================== */

.overview h3,
.tools h3,
.challenge h3 {
    font-family: "bebas-neue", sans-serif;
    font-weight: 400;
    font-size: 3rem;
}

.deliver h3,
.process h3 {
    font-family: "bebas-neue", sans-serif;
    font-weight: 400;
    font-size: 5rem;
    line-height: 5rem;
}

/* ==============================
   TEXT
============================== */

.tools p,
.deliver p,
.process p {
    text-align: left;
}

.deliver p,
.process p {
    font-size: 1.1rem;
}

/* ==============================
   TOOLS LAYOUT (case study)
============================== */

.tools-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.tools-text {
    flex: 1;
    max-width: 31.25rem;
    text-align: left;
}

.tools-text p,
.overview p,
.challenge p {
    font-size: 1.1rem;
}

.tools-img {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    width: calc((5rem * 3) + (1.5rem * 2));
}

.tools-img:has(> :nth-child(2):last-child) {
    justify-content: flex-end;
}

/* placeholder “icon boxes” */
.tool-ph {
    width: 5rem;
    height: 5rem;
    border-radius: 0.625rem;
    filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.2));
}

/* ==============================
   ADMIN PHP IMAGE SECTION
============================== */

.admin-file h3 {
    font-family: "bebas-neue", sans-serif;
    font-weight: 400;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2.5rem;
}

.admin-file-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
}

.admin-shot {
    width: 100%;
    max-width: 70rem;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.16);
}

.admin-shot img {
    width: 100%;
    height: auto;
    display: block;
}



/* ==============================
   FULL-BLEED SECTIONS 
============================== */

.project-detail-container.full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 6rem; /* keep your spacing */
}

/* ==============================
   PARALLAX PIN (FULL SCREEN)
   - Image stays fixed in place (no movement)
   - Overlay + text fade in
============================== */

.parallax{
    position: relative;
    width: 100%;
    height: calc(var(--vh) * 100); /* ✅ iOS-stable */
    overflow: hidden;
  }
  
  /* Image stays perfectly still */
  .parallax-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: translateZ(0);
    will-change: opacity;
  }
  
  /* Overlay fades in */
  .parallax-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.80) 35%,
    rgba(0, 45, 20, 0.80) 100%
    );
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    will-change: opacity;
  }
  
  /* Text fades + slides in */
  .parallax-content {
    position: relative;
    z-index: 2;
  
    height: 100%;
    width: 100%;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    max-width: 70rem;
    margin: 0 auto;
    padding: 2rem;
  
    text-align: center;
  
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
  }
  
  /* Optional: keep long text readable */
  .parallax-content .fade-text {
    max-width: 60rem;
    margin: 0;
  }
  
  

.parallax-content .fade-heading,
.parallax-content .fade-text {
  color: #fff;
}

.parallax-content .fade-heading {
  margin: 0 0 1.25rem;
}

.parallax-content .fade-text {
  margin: 0;
  max-width: 60rem;
}
  /* ==============================
   SVG IMAGE (CENTERED)
============================== */

.svg_image {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .svg_image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto; /* extra safety */
    border-radius: 0.5rem;
  }

  /* svg_image should size media consistently (img + iframe) */
.iframe-me {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .iframe-me img,
  .iframe-me iframe {
    display: block;
    width: 100%;
    max-width: 70rem;        /* match your container vibe */
    height: auto;
    margin: 0 auto;
    border-radius: 0.5rem;
  }
  
  /* iframe needs an explicit ratio */
  .iframe-me iframe {
    aspect-ratio: 16 / 9;
    border: 0;
  }

  .top-of-proj {
    font-family: "bebas-neue", sans-serif;
    font-weight: 400;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1.5rem;
  }

 /* ==============================
   BRAND MARKETING VIDEO GRID
============================== */

.brand-marketing-videos h3 {
    font-family: "bebas-neue", sans-serif;
    font-weight: 400;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2.5rem;
}

.brand-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
    max-width: 70rem;
    margin: 0 auto 5rem;
}

.brand-video-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.brand-video-card h4 {
    width: 100%;
    margin: 1rem auto 0;
    text-align: center;
    font-family: "inter-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 500;
    font-size: 1.15rem;
    line-height: 1.4;
}

.small-iframe {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.small-iframe iframe {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
    border-radius: 0.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* if only 3 videos, center the last one on the second row */
.three-videos .bottom-center {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 34rem;
}

/* ==============================
   CTA BUTTON (Case Study)
============================== */

.cta-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 6rem;
  }
  
  .cta-btn {
    display: block;              /* IMPORTANT */
    width: fit-content;          /* IMPORTANT */
    margin: 0 auto;              /* centers it */
  
    background: #9999FF;
    color: #000;
  
    padding: 1rem 3rem;
    border-radius: 3rem;
    text-decoration: none;
    text-transform: uppercase;
  
    font-family: "bebas-neue", sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
  
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform-origin: center;
  }

  
  /* hover */
  .cta-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.18);
  }
  
  /* keyboard focus */
  .cta-btn:focus-visible {
    outline: 0.125rem solid rgba(255, 255, 255, 1);
    outline-offset: 0.25rem;
  }  

/* =========================
   TO TOP BUTTON (MOBILE/TABLET ONLY)
========================= */

#to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1rem;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 23, 32, 0.8);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2000;
    opacity: 0;
    transform: translateY(0.6rem);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#to-top.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* only show on tablet + mobile */
@media (min-width: 64.001rem) {
    #to-top { display: none; }
}


/* =========================
   TO TOP BUTTON (MOBILE/TABLET ONLY) - CASE STUDY
========================= */

.to-top-case {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1rem;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 23, 32, 0.8);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2000;
    opacity: 0;
    transform: translateY(0.6rem);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.to-top-case.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.to-top-case:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* only show on tablet + mobile */
@media (min-width: 64.001rem) {
    .to-top-case { display: none; }
}

/* responsive media query so that the site scales optimally for mobile devices */
@media (max-width: 40em) {
    /* nav section styling adjustments  */

    /* BRAND MARKETING VIDEOS - MOBILE */
.brand-marketing-videos h3 {
    font-size: 2.3rem;
    margin-bottom: 2rem;
}

.admin-file h3 {
    font-size: 2.3rem;
    margin-bottom: 2rem;
}

.brand-video-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0 auto 4rem;
}

.brand-video-card {
    width: 100%;
}

.brand-video-card h4 {
    width: 100%;
    margin: 0.85rem auto 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.4;
}

.small-iframe {
    width: 100%;
}

.small-iframe iframe {
    width: 100%;
    max-width: 100%;
}

.three-videos .bottom-center {
    grid-column: auto;
    justify-self: stretch;
    max-width: 100%;
}

    .project-detail-container {
        max-width: 100%;
        margin: 0 auto 4rem;
        padding: 0 1rem;
      }
      
      .titles {
        display: flex;
        justify-content: center;
    }
    
    .titles h2 {
        font-size: clamp(0.95rem, 7.2vw, 1.85rem);
        line-height: 1.12;
        margin: 0 auto 1rem;
        padding: 0;
        text-align: center;
        letter-spacing: 0;
        white-space: normal;
        word-break: normal;
        hyphens: none;
        transform: translateX(-0.04em);
    }


    .project-detail {
    padding-top: 7rem; /* was 8.75rem */
    }

    .about-txt h2,
    .skills-text h2,
    .contact-info h2,
    #projects-title  {
        font-size: 2rem;
    }

.overview h3,
.tools h3,
.challenge h3 {
    font-family: "bebas-neue", sans-serif;
    font-weight: 400;
    font-size: 2.3rem;
}
      
      /* TOOLS: stack text then grid (CENTERED) */
.tools-wrap {
    flex-direction: column;
    align-items: center;     /* centers everything horizontally */
    gap: 2rem;
}
  
  .tools-text {
    max-width: 100%;
    text-align: center;      /* centers h3 + p */
  }

  .tools-text p {
    text-align: center;      /* centers just the paragraph */
  }
  
  .tools-img {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
  
    width: fit-content;      /* shrink-wrap grid */
    margin: 0 auto;          /* center the grid */
  }
  
      
      .tool-ph {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 0.75rem;
      }

      .hero-img,
      .svg_image {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
      }
    
      .hero-img {
        border-radius: 0.5rem;   /* smaller rounding feels better on mobile */
        overflow: hidden;
      }
    
      .hero-img img {
        display: block;
        width: 100%;
        margin: 0 auto;
        border-radius: 0.5rem;      /* wrapper controls rounding */
        object-fit: cover;
      }
    
      .svg_image {
        display: block;
        text-align: center;
      }
    
      .svg_image img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
        max-width: 100%;
        border-radius: 0.5rem;
      }
      
/* MOBILE PARALLAX — stable + slightly lowered text */
.parallax{
    position: relative;
    width: 100%;
    height: calc(var(--vh) * 100);
    overflow: hidden;
  }
  
  .parallax-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  
    object-fit: cover;
    object-position: 50% 18%;
    display: block;
  }
  
  .parallax-content {
    position: relative;
    z-index: 2;
  
    width: 100%;
    height: 100%;
    max-width: 100%;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  
    text-align: center;
  
    /* 👇 slightly pushed down more (was 7rem) */
    padding-top: calc(env(safe-area-inset-top, 0px) + 7.5rem);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 2rem;
  }
  
  /* keep text EXACT same styling */
  .parallax-content .fade-heading {
    margin: 0;
  
    font-size: clamp(1.7rem, 5.5vw + 0.3rem, 2.8rem);
    line-height: 1.08;
    letter-spacing: 0.01em;
  
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  
  .parallax-content .fade-text {
    margin-top: 1rem;
  
    text-align: center;
    max-width: 62ch;
  
    font-size: clamp(1.02rem, 2.4vw + 0.35rem, 1.35rem);
    line-height: 1.55;
    letter-spacing: 0.01em;
  
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  
      /* CTA button */
      .cta-wrap {
        margin: 0 auto 4rem;
        padding: 0 1rem;
      }
      
      .cta-btn {
        font-size: 2rem;
        padding: 1rem 2.25rem;
        border-radius: 3rem;
      }
      
      .project-info h3 {
          font-size: 1.6rem;
      }
      
      nav {
        flex-direction: row;
        height: auto;
        padding: 0.8rem 1rem;
    }
    
    .logo {
        font-size: 2.15rem;
        line-height: 1;
    }
    
    .nav-links {
        display: flex;
        flex-direction: row;
        gap: 0.15rem;
        align-items: center;
        margin-left: auto;
    }
    
    .nav-links span {
        padding: 0.2rem 0.45rem;
        font-size: 0.78rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    #hero-section {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 8rem 1rem 3rem;
    }

    .hero-txt {
        text-align: center;
        font-size: 2rem;
        line-height: 1.35;
    }

    .name-txt {
        font-size: 2.6rem;
    }

    .i-am {
        font-size: 1.6rem;
    }

    #change {
        font-size: 1.9rem;
    }

    /* Responsive hero image */
   

    /* global flex adjusment for stated sections */
    .about-full,
    .skills-content,
    .contact-container {
        flex-direction: column;
        text-align: center;
    }
    /* lucky number ;) */
    /* remove padding-right from centered text */
    .about-txt p,
    .skills-text p,
    .contact-info p {
        padding-right: 0;
        margin: 0 auto;
    }

    .about-txt p {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        font-size: 1rem;
    }

    .contact-container label {
        text-align: left;
    }

    /* skills section styling adjustments */
    .profile-img {
        margin-top: 2rem;
        width: 12rem;
        height: 12rem;
        border-radius: 50%;
        overflow:hidden;
    }

    .skills-icons {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    /* project section styling adjustments */
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        width: 100%;
    }

    /* contact styling adjustments */
    .contact-form form {
        max-width: 31.25rem; /* match contact text */
        margin: 0 auto;
        width: 100%;
    }

    label {
        padding-left: 0.4rem;
    }

    .skills-text,
    .contact-info {
        max-width: 31.25rem;
        margin: 0 auto;
        text-align: center;
    }

    /* global positioning adjustments */
    main {
        padding-top: 2rem; 
    }

    .about,
    #skills,
    #projects,
    #contact {
        padding: 5.5rem 1rem;
    }

    .project-detail-container {
        margin: 0 auto 4rem;
        padding: 0 1rem;
    }

    .overview-ri p,
    .deliverable-ri p {
        text-align: left;
    }

    .tools-ri h3,
    .deliverable-ri h3 {
        text-align: left;
    }

    .deliver p,
    .overview p,
    .challenge p,
    .tools-text p,
    .process p {
        font-size: 1rem;
    }

    .tools-list {
        justify-content: flex-start;
        gap: 0.9rem;
    }

    .tool-icon {
        width: 3rem;
        height: 3rem;
    }

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

    .process-list {
        gap: 1.25rem;
    }

    .deliverable-media {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .media-placeholder {
        height: 12.5rem;
    }

    .content-section h3 {
        font-size: 1.75rem;
    }

    .content-section p {
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 0.95rem;
    }
    
    .footer-socials {
        position: static;
        transform: none;
        justify-content: center;
        margin-top: 1rem;
    }

    .top-of-proj {
        line-height: 1.15;
      }

    /* deals with the section scrolling margin offset so that the nav anchor scroll is aligned properly */
    section {
        scroll-margin-top: 4.5rem; 
    }

}

/* this media query targets tablets and small laptops only (uses min and max widths to target between 40.1em to 64em to target basic tablet sizes while keeping mobile unaffected.*/
@media (min-width: 40em) and (max-width: 64em) {
    /* nav styling adjusments */

    /* BRAND MARKETING VIDEOS - TABLET */
.brand-marketing-videos h3 {
    font-size: 2.6rem;
    margin-bottom: 2.25rem;
}

.admin-file h3 {
    font-size: 2.6rem;
    margin-bottom: 2.25rem;
}

.brand-video-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin: 0 auto 4.5rem;
}

.brand-video-card {
    width: 100%;
}

.brand-video-card h4 {
    width: 100%;
    margin: 0.9rem auto 0;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.4;
}

.small-iframe {
    width: 100%;
}

.small-iframe iframe {
    width: 100%;
    max-width: 100%;
}

.three-videos .bottom-center {
    grid-column: auto;
    justify-self: stretch;
    max-width: 100%;
}

    .project-detail-container {
        max-width: 60rem;
        margin: 0 auto 4.5rem;
        padding: 0 1.25rem;
      }
    
      /* hero / overview image */
      .overview img,
      .svg_image img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 1rem;
      }

      .hero-img img{
        height: 100%;
        border-radius: inherit;
      }
      
      .parallax {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
      }
    
      .parallax-media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    
        object-fit: cover;              /* SAME AS DESKTOP */
        object-position: 50% 20%;       /* slightly less top-bias than mobile */
    
        display: block;
      }
    
      .parallax-content {
        max-width: 60rem;
        padding: 2rem;
    
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    
      .parallax-content .fade-text {
        text-align: center;
      }
      
      /* CTA button */
      .cta-wrap {
        margin: 0 auto 5rem;
      }
      
      .cta-btn {
        font-size: 2.25rem;
        padding: 1rem 2.75rem;
        border-radius: 3rem;
      }


    nav {
        flex-direction: column;
        align-items: center;
        padding: 1rem 1.5rem;
        height: auto;
        gap: 0.75rem;
    }

    .logo {
        font-size: 2.5rem;
    }

    #hero-section {
        flex-direction: column;
        text-align: center;
        gap: 2.5rem;
        padding: 10rem 2rem 4rem;
    }

    .hero-txt {
        text-align: center;
        font-size: 2.2rem;
    }

    .name-txt {
        font-size: 3rem;
    }

    .i-am {
        font-size: 1.8rem;
    }

    #change {
        font-size: 2.1rem;
    }

    /* Responsive hero image */


    .project-info h3 {
        font-size: 1.6rem;
    }

    .nav-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
        padding-top: 0.5rem;
    }

    /* About section styling adjustments */
    .about-full {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .about-txt h2 {
        font-size: 2.25rem;
    }

    .about-txt p {
        font-size: 1rem;
        margin: 0 auto;
        padding-right: 0;
    }

    .profile-img {
        margin-top: 1rem;
        width: 14rem;
        height: 14rem;
        border-radius: 50%;
    }

    /* skills section styling adjustments */
    .skills-content {
        flex-direction: column;
        text-align: center;
        gap: 2.5rem;
    }

    .skills-text h2 {
        font-size: 2.25rem;
    }

    .skills-text p {
        padding-right: 0;
    }

    .skills-icons {
        grid-template-columns: repeat(4, 1fr);
    }

    /* project section styling adjustments */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        justify-items: center;
    }

    .projects-grid .project-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 50%; 
    }

    .project-card {
        width: 100%;
    }

    /* contact section styling adjustments */
    .contact-container {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }

    .contact-info h2 {
        font-size: 2.25rem;
    }

    .contact-info p {
        padding-right: 0;
    }

    .contact-form form {
        max-width: 31.25rem; /* match contact text */
        margin: 0 auto;
        width: 100%;
    }

    .skills-text,
    .contact-info {
        max-width: 31.25rem;
        margin: 0 auto;
        text-align: center;
    }

    label {
        text-align: left;
        padding-left: 0.4rem;
    }

    /* global positioning adjustments */
    main {
        padding-top: 4rem;
    }

    .about,
    #skills,
    #projects,
    #contact {
        padding: 5.5rem 2rem;
    }

    .project-detail-container {
        max-width: 60rem;
        margin: 0 auto 4.5rem;
        padding: 0 1.25rem;
    }

    .titles h2{
        font-size: clamp(3rem, 6vw, 4rem);
        line-height: 1.25;
        letter-spacing: 0;
        padding: 0 1.25rem;
        margin-bottom: 3rem;
      }

            /* TOOLS: stack text then grid (CENTERED) */
.tools-wrap {
    flex-direction: column;
    align-items: center;     /* centers everything horizontally */
    gap: 2rem;
  }
  
  .tools-text {
    max-width: 100%;
    text-align: center;      /* centers h3 + p */
  }

  .tools-text p {
    text-align: center;      /* centers just the paragraph */
  }
  
  .tools-img {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
  
    width: fit-content;      /* shrink-wrap grid */
    margin: 0 auto;          /* center the grid */
  }
  
      
      .tool-ph {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 0.75rem;
      }

    .tools-list {
        justify-content: center;
        gap: 1rem;
    }

    .tool-icon {
        width: 3.25rem;
        height: 3.25rem;
    }

    .about-grid {
        gap: 2rem;
    }

    .process-list {
        gap: 1.5rem;
    }

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

    .media-placeholder {
        height: 14rem;
    }

    .content-section h3 {
        font-size: 2rem;
    }

    .content-section p {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .see-more-btn {
        font-size: 1.75rem;
    }

    #to-top {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.2rem;
    }

    .footer-socials {
        position: static;
        transform: none;
        justify-content: center;
        margin-top: 1rem;
    }

    /* deals with the section scrolling margin offset so that the nav anchor scroll is aligned properly */
    section {
        scroll-margin-top: 6rem;
    }
    
}

/* =========================
   EXTREME ZOOM FALLBACK (DESKTOP ONLY)
   Triggers when viewport height is very small (common at 200% zoom)
========================= */
/* @media (hover: hover) and (pointer: fine) and (max-height: 600px) {

    .parallax {
      background-attachment: scroll !important;
      transform: none !important;
    }
  
    .parallax-section,
    .parallax {
      position: relative !important;
      height: auto !important;
      min-height: 0 !important;
      overflow: visible !important;
      padding: 4rem 1.5rem !important;
    }
  
    .overlay {
      position: absolute !important;
      inset: 0 !important;
      z-index: 1 !important;
      pointer-events: none !important;
      opacity: 1 !important;
    }
  
    .parallax-content,
    .parallax-text {
      position: relative !important;
      z-index: 2 !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      animation: none !important;
  
      max-width: 60ch;
      margin: 0 auto;
      overflow-wrap: anywhere;
      line-height: 1.35;
    }
  } */

/* END OF MAIN.CSS */