/* NAVIGATION */
#mainNav {
    background-color: #4f1117 !important;
}

/* Navigation logo and links */
#mainNav .navbar-brand,
#mainNav .nav-link {
    color: #ffffff !important;
}

/* Navigation link hover */
#mainNav .nav-link:hover,
#mainNav .nav-link:focus {
    color: #fbf7f2 !important;
}

/* Mobile navigation button */
#mainNav .navbar-toggler {
    background-color: #fbf7f2 !important;
    color: #4f1117 !important;
    border-color: #fbf7f2 !important;
}


/* MASTHEAD SECTION */
.masthead {
    background-color: #fbf7f2 !important;
    color: #4b4748 !important;
}

/* Masthead heading */
.masthead .masthead-heading {
    color: #4b4748 !important;
}

/* Masthead description */
.masthead .masthead-subheading {
    color: #4b4748 !important;
}

/* Masthead divider lines */
.masthead .divider-custom-line {
    background-color: #4b4748 !important;
}

/* Masthead divider star */
.masthead .divider-custom-icon {
    color: #4b4748 !important;
}


/* ABOUT SECTION */
#about {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
}

/* About heading */
#about h2 {
    color: #2c3e50 !important;
}

/* About paragraphs */
#about p {
    color: #2c3e50 !important;
}

/* About divider */
#about .divider-custom-line {
    background-color: #2c3e50 !important;
}

#about .divider-custom-icon {
    color: #2c3e50 !important;
}

/* About button */
#about .btn-outline-light {
    color: #659ee0;
    border-color: #659ee0;
}

#about .btn-outline-light:hover {
    background-color: #659ee0;
    border-color: #659ee0;
    color: #ffffff;
}

/* ABOUT SECTION */
#about {
    background-color: #ffffff !important;
    color: #4b4748 !important;
}

/* About heading */
#about h2 {
    color: #4b4748 !important;
}

/* Single-column About text */
#about .about-copy {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    text-align: left;
}

/* About paragraphs */
#about .about-copy p {
    margin: 0 0 1.5rem;
    color: #4b4748 !important;
    font-family: "Lato", sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    font-weight: 400;
    line-height: 1.65;
}

/* Remove margin after final paragraph */
#about .about-copy p:last-child {
    margin-bottom: 0;
}

/* About divider */
#about .divider-custom-line {
    background-color: #4b4748 !important;
}

#about .divider-custom-icon {
    color: #4b4748 !important;
}

/* About button */
#about .btn-outline-light {
    color: #4f1117;
    border-color: #4f1117;
}

#about .btn-outline-light:hover {
    background-color: #4f1117;
    border-color: #4f1117;
    color: #ffffff;
}

/* Smaller About text on phones */
@media (max-width: 767px) {
    #about .about-copy p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1.25rem;
    }
}

html {
    scroll-behavior: smooth;
}


/* ========================================
   MASTHEAD ACTIONS
======================================== */

.masthead-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2rem;
}

.masthead-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 58px;
    padding: 0.9rem 2.25rem;
    border: 2px solid transparent;
    border-radius: 999px;

    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.masthead-button:hover {
    transform: translateY(-2px);
}

.masthead-button-primary {
    background-color: #4f1117;
    border-color: #4f1117;
    color: #ffffff;
}

.masthead-button-primary:hover,
.masthead-button-primary:focus {
    background-color: #681820;
    border-color: #681820;
    color: #ffffff;
}

.masthead-button-secondary {
    background-color: transparent;
    border-color: #918b8b;
    color: #262326;
}

.masthead-button-secondary:hover,
.masthead-button-secondary:focus {
    background-color: #ffffff;
    border-color: #4f1117;
    color: #4f1117;
}


/* Masthead email and LinkedIn */

.masthead-contact-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    margin-top: 2rem;
}

.masthead-contact-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    color: #2d292b;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;

    transition: color 0.2s ease;
}

.masthead-contact-links a:hover,
.masthead-contact-links a:focus {
    color: #4f1117;
}

.masthead-contact-links svg,
.masthead-contact-links i {
    color: #4f1117;
    font-size: 1.4rem;
}


/* ========================================
   RESUME SECTION
======================================== */

.resume-section {
    background-color: #f7f2ee;
    color: #4b4748;
}

.resume-section .page-section-heading {
    color: #4f1117;
}

.resume-section .divider-custom-line {
    background-color: #4f1117;
}

.resume-section .divider-custom-icon {
    color: #4f1117;
}

.resume-layout {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}


/* Resume sidebar */

.resume-sidebar {
    background-color: #ffffff;
    border: 1px solid #eee4df;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 12px 30px rgba(79, 17, 23, 0.07);
}

.resume-label {
    margin-bottom: 1.25rem;
    color: #4f1117;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
}

.resume-sidebar-section + .resume-sidebar-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5dddd;
}

.education-item + .education-item {
    margin-top: 2rem;
}

.education-item h4 {
    margin-bottom: 0.35rem;
    color: #29262a;
    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.education-item p {
    margin-bottom: 0.65rem;
    color: #625d5e;
    font-size: 0.97rem;
    line-height: 1.55;
}

.education-item .resume-date {
    color: #426854;
    font-weight: 700;
}


/* Skill tags */

.resume-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.resume-skills span {
    display: inline-block;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;

    background-color: #f4e9e3;
    color: #4f1117;

    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}


/* Experience area */

.resume-experience > .resume-label {
    margin-bottom: 1.25rem;
}

.resume-card {
    padding: 2.25rem;
    background-color: #ffffff;
    border: 1px solid #e8dfdc;
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(79, 17, 23, 0.05);
}

.resume-card + .resume-card {
    margin-top: 1.5rem;
}

.resume-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

.resume-card h3 {
    margin: 0 0 0.35rem;
    color: #29262a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 700;
}

.resume-company {
    margin: 0;
    color: #426854;
    font-weight: 700;
}

.resume-card-date {
    flex-shrink: 0;
    margin: 0;
    color: #6a6465;
    font-weight: 700;
    white-space: nowrap;
}

.resume-card ul {
    margin: 0;
    padding-left: 1.4rem;
}

.resume-card li {
    margin-bottom: 0.85rem;
    color: #625d5e;
    font-size: 1rem;
    line-height: 1.65;
}

.resume-card li:last-child {
    margin-bottom: 0;
}

.resume-download {
    margin-top: 2rem;
    text-align: center;
}


/* ========================================
   RESPONSIVE STYLES
======================================== */

@media (max-width: 991px) {
    .resume-layout {
        grid-template-columns: 1fr;
    }

    .resume-sidebar {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .masthead-actions {
        width: 100%;
        flex-direction: column;
    }

    .masthead-button {
        width: 100%;
        min-height: 54px;
        padding: 0.9rem 1.25rem;
        font-size: 1rem;
    }

    .masthead-contact-links {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .masthead-contact-links a {
        font-size: 0.9rem;
        overflow-wrap: anywhere;
    }

    .resume-sidebar,
    .resume-card {
        padding: 1.5rem;
        border-radius: 18px;
    }

    .resume-card-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .resume-card-date {
        white-space: normal;
    }

    .resume-card li {
        font-size: 0.95rem;
    }
}

/* ========================================
   PORTFOLIO SHOWCASE
======================================== */

.portfolio-showcase {
    background-color: #fbf7f2;
    color: #4b4748;
}

.portfolio-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.portfolio-intro > div {
    max-width: 800px;
}

.portfolio-eyebrow {
    margin-bottom: 0.75rem;
    color: #4f1117;
    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.13rem;
    text-transform: uppercase;
}

.portfolio-heading {
    margin-bottom: 1rem;
    color: #272427;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.75rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 0.98;
}

.portfolio-description {
    max-width: 760px;
    margin: 0;
    color: #6d6869;
    font-size: 1.1rem;
    line-height: 1.7;
}

.portfolio-program-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    padding-bottom: 0.25rem;

    color: #4f1117;
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}

.portfolio-program-link:hover,
.portfolio-program-link:focus {
    color: #7a2029;
}


/* Portfolio filters */

.portfolio-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;

    width: fit-content;
    max-width: 100%;
    margin: 0 auto 3rem;
    padding: 0.5rem;

    background-color: #ffffff;
    border: 1px solid #e8dfda;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(79, 17, 23, 0.08);
}

.portfolio-filter {
    padding: 0.8rem 1.25rem;
    border: 0;
    border-radius: 999px;

    background-color: transparent;
    color: #625d5e;

    font-family: "Montserrat", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.portfolio-filter:hover {
    color: #4f1117;
}

.portfolio-filter.active {
    background-color: #4f1117;
    color: #ffffff;
}


/* Portfolio grid */

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

.work-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;

    background-color: #ffffff;
    border: 1px solid #e6ded9;
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(79, 17, 23, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.work-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 42px rgba(79, 17, 23, 0.12);
}


/* Card image */

.work-card-image {
    position: relative;
    display: block;
    width: 100%;
    height: 265px;
    padding: 0;
    overflow: hidden;

    background-color: #f1e8e2;
    border: 0;
    cursor: pointer;
}

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

    transition: transform 0.35s ease;
}

.work-card:hover .work-card-image img {
    transform: scale(1.035);
}

.work-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;

    display: inline-flex;
    align-items: center;

    padding: 0.55rem 0.85rem;
    border-radius: 999px;

    background-color: #373437;
    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06rem;
    line-height: 1;
    text-transform: uppercase;
}


/* Card content */

.work-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.9rem;
}

.work-card-category {
    margin-bottom: 0.75rem;
    color: #4d705f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07rem;
    line-height: 1.5;
    text-transform: uppercase;
}

.work-card-content h3 {
    margin-bottom: 1rem;
    color: #292629;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 2.3vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
}

.work-card-description {
    margin-bottom: 1.5rem;
    color: #6a6566;
    font-size: 1rem;
    line-height: 1.65;
}

.work-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    width: fit-content;
    margin-top: auto;
    padding: 0;
    border: 0;

    background-color: transparent;
    color: #4f1117;

    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;

    cursor: pointer;
    transition: color 0.2s ease;
}

.work-card-action:hover,
.work-card-action:focus {
    color: #8a2731;
}


/* ========================================
   PORTFOLIO RESPONSIVE STYLES
======================================== */

@media (max-width: 991px) {
    .portfolio-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.25rem;
    }

    .portfolio-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .portfolio-heading {
        font-size: 2.8rem;
    }

    .portfolio-description {
        font-size: 1rem;
    }

    .portfolio-filters {
        width: 100%;
        border-radius: 22px;
    }

    .portfolio-filter {
        flex: 1 1 45%;
        padding: 0.75rem;
        font-size: 0.78rem;
    }

    .portfolio-card-grid {
        grid-template-columns: 1fr;
    }

    .work-card-image {
        height: 235px;
    }

    .work-card-content {
        padding: 1.5rem;
    }
}

/* Custom portfolio styles moved from index.html */

.dmi-portfolio {
    background: #fbf7f2;
    color: #4b4748;
}


/* Portfolio heading styled like the Resume heading */
.dmi-portfolio-title {
    text-align: center;
    margin-bottom: 1rem;
}

.dmi-portfolio .page-section-heading {
    color: #4f1117 !important;
}

.dmi-portfolio-title .divider-custom-line {
    background-color: #4f1117 !important;
}

.dmi-portfolio-title .divider-custom-icon {
    color: #4f1117 !important;
}

.dmi-program-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 3rem;
}

.dmi-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
    margin-bottom: 3rem;
}

.dmi-topline > div {
    max-width: 850px;
}

.dmi-eyebrow,
.dmi-card-label,
.dmi-modal-label {
    margin: 0 0 0.8rem;
    color: #4f1117;
    font-family: "Montserrat", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12rem;
    line-height: 1.5;
    text-transform: uppercase;
}

.dmi-main-heading,
.dmi-section-heading {
    margin: 0 0 1rem;
    color: #282528;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1;
}

.dmi-main-heading {
    font-size: clamp(3rem, 6vw, 5rem);
}

.dmi-section-heading {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
}

.dmi-intro-copy,
.dmi-additional-heading > p:last-child {
    max-width: 830px;
    margin: 0;
    color: #6f696a;
    font-size: 1.08rem;
    line-height: 1.75;
}

.dmi-program-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    color: #4f1117;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-decoration: none;
}

.dmi-program-link:hover {
    color: #7b222c;
}

.dmi-featured-grid,
.dmi-additional-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.dmi-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4dcda;
    border-radius: 24px;
    box-shadow: 0 14px 34px rgba(79, 17, 23, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dmi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(79, 17, 23, 0.12);
}

.dmi-card-button,
.dmi-visual-card button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.dmi-preview {
    position: relative;
    height: 250px;
    overflow: hidden;
    background: linear-gradient(135deg, #f3e7e1, #e9efea);
}

.dmi-preview img,
.dmi-modal-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dmi-preview-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    color: #4f1117;
    text-align: center;
}

.dmi-preview-fallback i,
.dmi-preview-fallback svg {
    font-size: 3.4rem;
}

.dmi-preview-fallback span {
    max-width: 85%;
    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.dmi-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: #393638;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
}

.dmi-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.9rem;
}

.dmi-card-body h3 {
    margin: 0 0 1rem;
    color: #292629;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 2.25vw, 2rem);
    font-weight: 700;
    line-height: 1.08;
}

.dmi-card-body > p:not(.dmi-card-label) {
    margin: 0 0 1.5rem;
    color: #6d6768;
    font-size: 1rem;
    line-height: 1.65;
}

.dmi-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    margin-top: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #4f1117;
    font-family: "Montserrat", sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

.dmi-portfolio-subsection {
    margin-top: 6rem;
}

.dmi-visual-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.dmi-visual-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 14px 34px rgba(79, 17, 23, 0.09);
}

.dmi-visual-preview {
    height: 460px;
}

.dmi-visual-overlay {
    position: absolute;
    inset: auto 0 0;
    z-index: 4;
    padding: 5rem 1.7rem 1.7rem;
    background: linear-gradient(transparent, rgba(25, 22, 24, 0.96));
    color: #fff;
}

.dmi-visual-overlay p {
    margin: 0 0 0.55rem;
    font-family: "Montserrat", sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.dmi-visual-overlay h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    line-height: 1.1;
}

.dmi-additional-heading {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.dmi-additional-heading .dmi-eyebrow {
    margin-bottom: 0.9rem;
}

.dmi-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    width: fit-content;
    max-width: 100%;
    margin: 2.5rem auto 3rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #e5ddda;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(79, 17, 23, 0.08);
}

.dmi-filter {
    padding: 0.8rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6c6667;
    font-family: "Montserrat", sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
}

.dmi-filter.active {
    background: #4f1117;
    color: #fff;
}

.dmi-additional-card[hidden] {
    display: none !important;
}

.dmi-modal-label {
    text-align: center;
}

.dmi-modal-preview {
    position: relative;
    max-width: 900px;
    height: 440px;
    margin: 0 auto 2rem;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(135deg, #f3e7e1, #e9efea);
}

.dmi-modal-description {
    max-width: 820px;
    margin: 0 auto 2rem;
    color: #625d5e;
    font-size: 1.08rem;
    line-height: 1.75;
}

.dmi-modal-close {
    background: #4f1117;
    border-color: #4f1117;
    color: #fff;
}

.dmi-modal-close:hover {
    background: #681820;
    border-color: #681820;
    color: #fff;
}

@media (max-width: 991px) {
    .dmi-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.25rem;
    }

    .dmi-featured-grid,
    .dmi-additional-grid,
    .dmi-visual-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .dmi-program-row {
        justify-content: center;
        text-align: center;
    }

    .dmi-main-heading {
        font-size: 3rem;
    }

    .dmi-section-heading {
        font-size: 2.55rem;
    }

    .dmi-featured-grid,
    .dmi-additional-grid,
    .dmi-visual-grid {
        grid-template-columns: 1fr;
    }

    .dmi-preview {
        height: 230px;
    }

    .dmi-visual-preview {
        height: 390px;
    }

    .dmi-filters {
        width: 100%;
        border-radius: 22px;
    }

    .dmi-filter {
        flex: 1 1 45%;
        padding: 0.75rem;
        font-size: 0.76rem;
    }

    .dmi-card-body {
        padding: 1.5rem;
    }

    .dmi-modal-preview {
        height: 280px;
    }
}

/* Direct portfolio project links */
.dmi-card-link {
    text-decoration: none;
}

.dmi-card-link:hover,
.dmi-card-link:focus {
    color: #7b222c;
}

.dmi-visual-card a {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.dmi-modal-open {
    margin-right: 0.75rem;
    background: #4f1117;
    border-color: #4f1117;
    color: #ffffff;
}

.dmi-modal-open:hover,
.dmi-modal-open:focus {
    background: #681820;
    border-color: #681820;
    color: #ffffff;
}

@media (max-width: 575px) {
    .dmi-modal-open,
    .dmi-modal-close {
        display: block;
        width: 100%;
        margin: 0.6rem 0 0;
    }
}


/* Social Media & Analytics Report image positioning */
.dmi-featured-card:nth-child(3) .dmi-preview img,
#portfolioModal3 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #eef4f2;
}


/* Visual Branding for SJMC image positioning */
.dmi-visual-card:first-child .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal4 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #f3ece7;
}


/* SunLife Organics Campaign image positioning */
.dmi-visual-card:nth-child(2) .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal5 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #f5eee7;
}


/* Digital Literacy Starter Pack image positioning */
.dmi-visual-card:nth-child(3) .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal6 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #f3ece7;
}


/* Deepfakes, Synthetic Media & Visual Toxicity image positioning */
.dmi-additional-card:first-child .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal7 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #f3ece7;
}


/* Coffee & Chill Content Analysis image positioning */
.dmi-additional-card:nth-child(2) .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal8 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #f7f1ea;
}


/* SunLife Organics Strategy image positioning */
.dmi-additional-card:nth-child(3) .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal9 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #f5eee7;
}


/* SJMC Instagram Content image positioning */
.dmi-additional-card:nth-child(4) .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal10 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #f3ece7;
}


/* Cross-Platform Creator Analysis image positioning */
.dmi-additional-card:nth-child(5) .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal11 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #eef1f3;
}


/* Drop Your Comfort Pin on the World image positioning */
.dmi-additional-card:nth-child(6) .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal12 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #171b22;
}


/* Deepfakes Awareness Campaign image positioning */
.dmi-additional-card:nth-child(7) .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal13 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #f3ece7;
}


/* Clean Eats ATX image positioning */
.dmi-additional-card:nth-child(8) .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal14 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #eef3ec;
}


/* Coffee + Matcha Guide image positioning */
.dmi-additional-card:nth-child(9) .dmi-preview img {
    object-fit: cover;
    object-position: center;
}

#portfolioModal15 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #eef1f4;
}


/* Tiny Adventures Shop App image positioning */
.dmi-additional-card:nth-child(10) .dmi-preview img {
    object-fit: cover;
    object-position: top center;
}

#portfolioModal16 .dmi-modal-preview img {
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #20272a;
}


/* Center the Visuals · Design · Graphics · Photography label */
.dmi-visual-section > .dmi-eyebrow {
    width: 100%;
    text-align: center;
}


/* Burgundy About heading and divider */
#about .page-section-heading {
    color: #4f1117 !important;
}

#about .divider-custom-line {
    background-color: #4f1117 !important;
}

#about .divider-custom-icon {
    color: #4f1117 !important;
}

/* Burgundy Sofia Pabon masthead heading and divider */
.masthead .masthead-heading {
    color: #4f1117 !important;
}

.masthead .divider-custom-line {
    background-color: #4f1117 !important;
}

.masthead .divider-custom-icon {
    color: #4f1117 !important;
}


/* Skills bar between the masthead and About section */
.skills-bar {
    width: 100%;
    background-color: #4f1117;
    color: #fbf7f2;
}

.skills-bar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.skills-bar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 86px;
    padding: 1.25rem 1rem;
    color: #fbf7f2;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.skills-bar-item + .skills-bar-item {
    border-left: 1px solid rgba(251, 247, 242, 0.18);
}

.skills-bar-item i,
.skills-bar-item svg {
    flex-shrink: 0;
    font-size: 1.15rem;
}

@media (max-width: 991px) {
    .skills-bar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .skills-bar-item:nth-child(3) {
        border-left: 0;
    }

    .skills-bar-item:nth-child(n + 3) {
        border-top: 1px solid rgba(251, 247, 242, 0.18);
    }
}

@media (max-width: 575px) {
    .skills-bar-grid {
        grid-template-columns: 1fr;
    }

    .skills-bar-item {
        min-height: 68px;
        padding: 1rem;
    }

    .skills-bar-item + .skills-bar-item {
        border-left: 0;
        border-top: 1px solid rgba(251, 247, 242, 0.18);
    }
}


/* Match the Portfolio background to the About section */
#portfolio,
.dmi-portfolio {
    background-color: #ffffff !important;
}


/* Redesigned Contact section */
#contact {
    background-color: #ffffff;
    text-align: center;
}

#contact .page-section-heading {
    color: #4f1117 !important;
}

#contact .divider-custom-line {
    background-color: #4f1117 !important;
}

#contact .divider-custom-icon {
    color: #4f1117 !important;
}

.contact-content {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.contact-title {
    margin: 0 0 1.25rem;
    color: #282528;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 700;
    line-height: 1;
}

.contact-intro {
    max-width: 980px;
    margin: 0 auto 3.5rem;
    color: #6f696a;
    font-family: "Lato", sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    line-height: 1.55;
}

.contact-email {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 3rem;
    color: #7b222c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 4.6rem);
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.contact-email:hover,
.contact-email:focus {
    color: #4f1117;
}

.contact-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-width: 240px;
    padding: 1.15rem 2rem;
    border: 2px solid #4f1117;
    border-radius: 999px;
    font-family: "Montserrat", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
}

.contact-button:hover,
.contact-button:focus {
    transform: translateY(-3px);
}

.contact-button-primary {
    background-color: #4f1117;
    color: #ffffff;
}

.contact-button-primary:hover,
.contact-button-primary:focus {
    background-color: #681820;
    border-color: #681820;
    color: #ffffff;
}

.contact-button-secondary {
    background-color: #ffffff;
    color: #282528;
    border-color: #9b9697;
}

.contact-button-secondary:hover,
.contact-button-secondary:focus {
    background-color: #fbf7f2;
    border-color: #4f1117;
    color: #4f1117;
}

.contact-button i,
.contact-button svg {
    font-size: 1.35rem;
}

@media (max-width: 575px) {
    .contact-intro {
        margin-bottom: 2.5rem;
    }

    .contact-email {
        margin-bottom: 2.25rem;
    }

    .contact-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-button {
        width: 100%;
        min-width: 0;
    }
}


/* Consistent body and paragraph typography throughout the portfolio */
body {
    font-family: "Lato", sans-serif;
}

p,
li {
    font-family: "Lato", sans-serif;
}

.about-copy p,
.masthead-subheading,
.resume-sidebar p,
.resume-card li,
.dmi-card-body > p:not(.dmi-card-label),
.dmi-additional-heading > p:last-child,
.dmi-modal-description,
.contact-intro,
.footer p {
    font-family: "Lato", sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

/* Smaller Contact section text */
.contact-title {
    margin-bottom: 1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.15;
}

.contact-intro {
    max-width: 760px;
    margin-bottom: 2rem;
}

.contact-email {
    margin-bottom: 2.25rem;
    font-family: "Lato", sans-serif;
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.35;
}

@media (max-width: 575px) {
    .contact-title {
        font-size: 2rem;
    }

    .contact-email {
        font-size: 1.05rem;
    }
}


/* Larger, consistent paragraph text throughout the portfolio */
.about-copy p,
.masthead-subheading,
.resume-sidebar p,
.resume-card li,
.dmi-card-body > p:not(.dmi-card-label),
.dmi-additional-heading > p:last-child,
.dmi-modal-description,
.contact-intro,
.footer p {
    font-family: "Lato", sans-serif !important;
    font-size: 1.24rem !important;
    line-height: 1.7 !important;
}

@media (max-width: 575px) {
    .about-copy p,
    .masthead-subheading,
    .resume-sidebar p,
    .resume-card li,
    .dmi-card-body > p:not(.dmi-card-label),
    .dmi-additional-heading > p:last-child,
    .dmi-modal-description,
    .contact-intro,
    .footer p {
        font-size: 1.05rem !important;
        line-height: 1.65 !important;
    }
}


/* Resume-only typography refinements */
#resume .education-item p:not(.resume-date) {
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

#resume .resume-date,
#resume .resume-company {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

#resume .resume-card-header h3 {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
}

#resume .resume-card li {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
}

@media (max-width: 575px) {
    #resume .education-item p:not(.resume-date) {
        font-size: 0.9rem !important;
    }

    #resume .resume-date,
    #resume .resume-company {
        font-size: 0.95rem !important;
    }

    #resume .resume-card-header h3 {
        font-size: 1.45rem !important;
    }

    #resume .resume-card li {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
    }
}


/* Smaller main section headings and matching dividers */
.masthead .masthead-heading {
    font-size: 3.3rem !important;
    line-height: 1.05 !important;
}

#about .page-section-heading,
#resume .page-section-heading,
#portfolio .page-section-heading,
#contact .page-section-heading {
    font-size: 2.8rem !important;
    line-height: 1.1 !important;
}

/* Reduce only the main dividers for Sofia Pabon and the primary sections */
.masthead > .container > .divider-custom,
#about > .container > .divider-custom,
#resume > .container > .divider-custom,
#contact > .container > .divider-custom,
#portfolio .dmi-portfolio-title > .divider-custom {
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.masthead > .container > .divider-custom .divider-custom-line,
#about > .container > .divider-custom .divider-custom-line,
#resume > .container > .divider-custom .divider-custom-line,
#contact > .container > .divider-custom .divider-custom-line,
#portfolio .dmi-portfolio-title > .divider-custom .divider-custom-line {
    max-width: 5rem !important;
    height: 0.18rem !important;
}

.masthead > .container > .divider-custom .divider-custom-icon,
#about > .container > .divider-custom .divider-custom-icon,
#resume > .container > .divider-custom .divider-custom-icon,
#contact > .container > .divider-custom .divider-custom-icon,
#portfolio .dmi-portfolio-title > .divider-custom .divider-custom-icon {
    padding: 0 0.65rem !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
}

@media (max-width: 575px) {
    .masthead .masthead-heading {
        font-size: 2.25rem !important;
    }

    #about .page-section-heading,
    #resume .page-section-heading,
    #portfolio .page-section-heading,
    #contact .page-section-heading {
        font-size: 2rem !important;
    }

    .masthead > .container > .divider-custom .divider-custom-line,
    #about > .container > .divider-custom .divider-custom-line,
    #resume > .container > .divider-custom .divider-custom-line,
    #contact > .container > .divider-custom .divider-custom-line,
    #portfolio .dmi-portfolio-title > .divider-custom .divider-custom-line {
        max-width: 4rem !important;
    }

    .masthead > .container > .divider-custom .divider-custom-icon,
    #about > .container > .divider-custom .divider-custom-icon,
    #resume > .container > .divider-custom .divider-custom-icon,
    #contact > .container > .divider-custom .divider-custom-icon,
    #portfolio .dmi-portfolio-title > .divider-custom .divider-custom-icon {
        font-size: 1.1rem !important;
    }
}


/* Narrower text containers for the masthead and About section */
.masthead .masthead-subheading {
    width: 100%;
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
}

#about .about-copy {
    width: 100%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .masthead .masthead-subheading,
    #about .about-copy {
        max-width: 100%;
    }
}


/* Slightly smaller portfolio project titles */
#portfolio .dmi-card-body h3 {
    font-size: clamp(1.35rem, 1.9vw, 1.7rem) !important;
    line-height: 1.15 !important;
}

#portfolio .dmi-visual-overlay h3 {
    font-size: clamp(1.35rem, 1.9vw, 1.7rem) !important;
    line-height: 1.15 !important;
}

@media (max-width: 575px) {
    #portfolio .dmi-card-body h3,
    #portfolio .dmi-visual-overlay h3 {
        font-size: 1.3rem !important;
    }
}


/* Smaller Contact section title and email */
#contact .contact-title {
    font-size: clamp(1.65rem, 3vw, 2rem) !important;
    line-height: 1.2 !important;
}

#contact .contact-email {
    font-size: clamp(1rem, 1.6vw, 1.21rem) !important;
    line-height: 1.4 !important;
}

@media (max-width: 575px) {
    #contact .contact-title {
        font-size: 1.55rem !important;
    }

    #contact .contact-email {
        font-size: 0.95rem !important;
    }
}


/* Match the Contact section background to the Resume section */
#contact {
    background-color: #fbf7f2 !important;
}


/* Navigation order hover and active color */
#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link:focus,
#mainNav .navbar-nav .nav-link.active {
    background-color: #836d3d !important;
    color: #ffffff !important;
}


/* Compact footer matching the provided reference */
.portfolio-footer {
    background-color: #5a1018;
    color: #f7f1ef;
    padding: 2rem 0;
}

.portfolio-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.portfolio-footer-copy {
    margin: 0;
    color: #f7f1ef;
    font-family: "Lato", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400;
    line-height: 1.4 !important;
}

.portfolio-footer-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.portfolio-footer-links a {
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.portfolio-footer-links a:hover,
.portfolio-footer-links a:focus {
    color: #d9c89b;
}

@media (max-width: 767px) {
    .portfolio-footer {
        padding: 1.75rem 0;
    }

    .portfolio-footer-inner {
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        text-align: center;
    }

    .portfolio-footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
    }
}

/* Five required DMI portfolio cards: three on the first row and two centered below. */
@media (min-width: 992px) {
    .dmi-featured-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .dmi-featured-grid > .dmi-featured-card {
        grid-column: span 2;
    }

    .dmi-featured-grid > .dmi-featured-card:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .dmi-featured-grid > .dmi-featured-card:nth-child(5) {
        grid-column: 4 / span 2;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .dmi-featured-grid > .dmi-featured-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 1rem);
        justify-self: center;
    }
}

/* HallMatch Research Project image positioning */
.dmi-featured-card:nth-child(4) .dmi-preview img,
#portfolioModal17 .dmi-modal-preview img {
    object-fit: cover;
    object-position: center;
    background-color: #fbf7f2;
}

/* HallMatch final website image positioning */
.dmi-featured-card:nth-child(5) .dmi-preview img,
#portfolioModal18 .dmi-modal-preview img {
    object-fit: cover;
    object-position: center;
    background-color: #eef2ef;
}