/* =======================================================
  Designed by PageMelo
  A Zarephia brand

  Visit the website: https://pagemelo.com
  Buy here: https://pagemelo.gumroad.com
  Follow for updates: https://instagram.com/hello.pagemelo

  License: Single Use Only
  Copyright © PageMelo. All rights reserved.
  ======================================================= */

:root {
    /* Colors */
    --navbar-bg: rgb(44, 44, 44);
    --navbar-text: #EFEFEF;
    --card-color: #f7f7f7;
    --primary-accent-color: #4aa9a9;
    --secondary-accent-color: #438c8c;
    --icon-wrapper: rgba(44, 44, 44, 0.3);
    --icon-wrapper-text: rgb(44, 44, 44);
    --text: #1A1A1A;
    --primary-background-color: #f5f5f5;
    --secondary-background-color: #e7e7e7;
    --tertiary-background-color: #e0e0e0;
    --footer: #888888;
    --shadow-color: rgb(44, 44, 44);
    --back-to-top-shadow: rgba(44, 44, 44, 1);
    --navbar-hover-shadow: var(--primary-background-color);
    --btn-shadow: var(--navbar-bg);
    --socials-icon-color: inherit;
    --back-to-top-text: #1A1A1A;

    /* Fonts */
    --hero-font: "Montserrat", sans-serif;
    --content-font: "Overpass", sans-serif;
}

* {
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text);
    background-color: var(--primary-background-color);
    overflow-x: hidden;
    font-family: var(--content-font);
    line-height: 1.8;
}

#hero {
    background-color: var(--secondary-background-color);
    padding: 60px 20px;
    font-family: var(--hero-font);
    position: relative;
    height: 42.5vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

#hero h1, #hero h6, #hero p, #hero a {
    position: relative;
    z-index: 2;
}

#hero h1 {
    font-size: 3rem;
    font-weight: bold;
    color: var(--text);
}

#hero h6 {
    font-size: 1.5rem;
}

#hero-description {
    text-align: center;
}

/* Hero Description Tablet View */
@media (min-width: 769px) and (max-width: 1024px) {
    #hero-description {
        width: 75%;
        margin-top: 1rem;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    #hero-description {
        width: 66.67%;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    #hero-description {
        font-size: medium;
        width: 92.5%;
        margin-top: 1rem;
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }
}

@media (max-width: 375px) {
    #hero-description {
        font-size: 0.9rem;
        line-height: 1.4;
        width: 92.5%;
        margin: 1rem auto 0;
        text-align: center;
    }
}

#hero .btn-primary {
    display: inline-block;
    font-family: var(--hero-font);
    background-color: var(--primary-accent-color);
    border: none;
    padding: 20px 50px;
    border-radius: 12px;
    color: var(--cta-text-color);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 2;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
    letter-spacing: 0.5px;
}

/* Light sweep effect */
#hero .btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.4), 
    rgba(255, 255, 255, 0.6), 
    rgba(255, 255, 255, 0.4), 
    transparent
    );
    transition: left 0.8s ease;
    pointer-events: none;
}

#hero .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.1) 100%
    );
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#hero .btn-primary:hover {
    background-color: var(--secondary-accent-color);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.8px;
}

#hero .btn-primary:hover::before {
    left: 100%;
}

#hero .btn-primary:hover::after {
    opacity: 0.7;
}

#hero .btn-primary:focus {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
}

#hero .btn-primary:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
}

/* Add a subtle pulse animation on load */
@keyframes hero-btn-pulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); }
    50% { box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2); }
}

#hero .btn-primary {
    animation: hero-btn-pulse 3s ease-in-out infinite;
}

#hero .btn-primary:hover {
    animation: none;
}

#mainContent {
    width: 80%;
    margin: 0 auto;
    font-family: var(--content-font);
}

@media (min-width: 769px) and (max-width: 1024px) {
    #mainContent {
        width: 90%;
    }
}

@media (max-width: 768px) {
    #mainContent {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

/* Navigation Bar */
.custom-navbar {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 0;
    z-index: 1020;
    background-color: var(--navbar-bg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: var(--hero-font);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.custom-navbar.is-sticky {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.navbar-collapse {
    justify-content: center;
}

/* Desktop styles */
.nav-item {
    margin: 0;
    border-radius: 3px;
}

.nav-link {
    height: 50px;
    padding: 0 50px;
    display: flex;
    align-items: center;
}

.custom-navbar .nav-link {
    color: var(--navbar-text);
}

.custom-navbar .nav-link:hover {
    color: var(--primary-accent-color);
    border-bottom: 3px solid var(--primary-accent-color);
}

.nav-item .nav-link.active {
    color: var(--primary-accent-color);
    border-bottom: 3px solid var(--primary-accent-color);
    font-weight: 600;
}

/* Toggler button */
.navbar-toggler {
    border: none;
    width: 45px;
    height: 35px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 0;
    cursor: pointer;
}

.navbar-toggler:focus {
    box-shadow: none;
    border: none;
}

.navbar-toggler:focus-visible {
    outline: none;
}

/* Hamburger bars */
.navbar-toggler span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: var(--navbar-text);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.center-toggler {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Hamburger animation when active */
.navbar-toggler[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(12px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg);
}

/* Mobile and tablet styles */
@media (max-width: 991px) {
.custom-navbar {
    min-height: 50px;
}

/* Mobile navbar collapse */
.navbar-collapse {
    background-color: var(--navbar-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 10px;
    padding: 20px 0;
}

/* Mobile navigation list */
#navbarTabs {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
}

.nav-item {
    margin: 5px 0;
    width: 100%;
}

.nav-link {
    height: auto;
    padding: 15px 20px;
    text-align: center;
    border-radius: 5px;
    transition: all 0.3s ease;
    border-bottom: none !important;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.nav-item .nav-link.active {
    background-color: var(--primary-accent-color);
    color: var(--text);
    border-bottom: none !important;
    font-weight: 600;
}

/* Smooth collapse animation */
.navbar-collapse.collapsing {
    transition: height 0.35s ease;
}

.navbar-collapse.show {
    animation: slideDown 0.3s ease-out;
}
}

@keyframes slideDown {
from {
    opacity: 0;
    transform: translateY(-10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Content Section */
.content-section {
    display: none;
    padding: 40px 20px;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .content-section {
        padding: 40px 15px;
    }
}

.content-section.active {
    display: block;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
    width: 100%;
    color: var(--text);
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--primary-accent-color);
    margin: 3.5px auto 0;
    border-radius: 3px;
}

/* About Section */
.profile p {
    font-size: large;
    padding-top: 1rem;
    color: var(--text);
}

.profile-avatar {
    width: 250px;
    height: 250px;
    margin: 1.5rem auto;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    animation: animate-shadow 3s ease-in-out infinite;
}

.profile-avatar-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes animate-shadow {
    0% {
        box-shadow: 0 0 50px var(--secondary-accent-color);
    }
    50% {
        box-shadow: 0 0 50px var(--shadow-color);
    }
    100% {
        box-shadow: 0 0 50px var(--secondary-accent-color);
    }
}

/* Default styles */
#about-text {
    margin-left: 1rem;
    line-height: 1.7;
    margin: 1rem auto 0;
}

/* Tablet: Full width */
@media (min-width: 769px) and (max-width: 1024px) {
    #about-text {
        width: 100%;
        margin-top: 1rem;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

/* Desktop: 8 columns width */
@media (min-width: 1025px) {
    #about-text {
        width: 66.67%;
        margin-left: 1rem;
        margin-right: auto;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #about-text {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    #about-text {
        width: 92.5%;
        margin-top: 1rem;
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }
}

/* Skills section */
.skills-section,
.tools-section {
    margin-top: 2.5rem;
    padding: 2rem;
    background-color: var(--secondary-background-color);
    border-radius: 20px;
}

@media (max-width: 768px) {
    .skills-section,
    .tools-section {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .skills-section,
    .tools-section {
        padding: 2rem 1.5rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

.skills-section h5,
.who-i-help-section h5,
.tools-section h5,
.how-it-works-section h5 {
    font-size: x-large;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 1.5rem;
    color: var(--text);
}

.skills-card {
    background-color: var(--card-color);
    color: var(--text);
    border: none;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    padding: 20px 10px;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .skills-card,
    .who-i-help-card,
    .how-it-works-card {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 768px) {
    .skills-card,
    .who-i-help-card,
    .how-it-works-card {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.skills-card i,
.who-i-help-card i,
.how-it-works-card i {
    color: var(--secondary-accent-color);
    font-size: 2rem;
    margin-bottom: 12px;
    display: block;
    width: 100%;
    text-align: center;
}

.skills-card p,
.who-i-help-card p,
.how-it-works-card p {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.skills-card:hover,
.who-i-help-card:hover,
.how-it-works-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.1) !important;
}

/* Who I Help Section */
.who-i-help-section,
.how-it-works-section {
  text-align: center;
  padding: 3.5rem 1rem 1rem;
}

.who-i-help-card,
.how-it-works-card {
    background-color: var(--card-color);
    color: var(--text);
    border: 0.1px solid var(--tertiary-background-color);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    padding: 20px 10px;
}

.who-i-help-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0;
    list-style: none;
}

.who-i-help-list li {
    color: var(--text);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    min-width: 120px;
    text-align: center;
}

/* Services Section */
.service-icon,
.portfolio-icon {
    width: 250px;
    height: auto;
    display: block;
    margin: 25px auto 10px auto;
    text-align: center;
    margin-top: 25px;
}

.services-card,
.portfolio-card,
.testimonial-card {
    background-color: var(--card-color);
    color: var(--text);
    height: 100%;
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid var(--tertiary-background-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .services-card,
    .portfolio-card,
    .testimonial-card {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 1.25rem;
    }
}

@media (max-width: 768px) {
    .services-card,
    .portfolio-card,
    .testimonial-card {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.services-card:hover,
.portfolio-card:hover,
.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

/* Icon wrapper */
.icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-wrapper);
    color: var(--icon-wrapper-text);
    font-size: 2rem;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.services-card:hover .icon-wrapper,
.portfolio-card:hover .icon-wrapper {
    transform: scale(1.1);
    background: var(--primary-accent-color);
    color: var(--card-color);
}

.card-title {
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    color: var(--text);
}

.card-text {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--text);
}

/* Pricing Section */
.pricing-card {
    position: relative;
    background-color: var(--card-color);
    color: var(--text);
    height: 100%;
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid var(--tertiary-background-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.pricing-card-highlighted {
    border: 1px solid var(--primary-accent-color);
    box-shadow: 0 8px 20px rgba(74, 169, 169, 0.18);
}

.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-accent-color);
    color: var(--cta-text-color);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px var(--btn-shadow);
    white-space: nowrap;
}

.pricing-name {
    font-weight: bold;
    color: var(--text);
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.pricing-description {
    color: var(--text);
    opacity: 0.8;
    font-size: 0.9rem;
    min-height: 40px;
}

.pricing-price {
    margin: 0.75rem 0 1.25rem;
}

.pricing-amount {
    font-family: var(--hero-font);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--accessible-accent);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
    flex-grow: 1;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    color: var(--text);
    font-size: 0.95rem;
}

.pricing-features li i {
    color: var(--secondary-accent-color);
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.pricing-btn {
    display: inline-block;
    align-self: center;
    margin-top: auto;
    font-family: var(--hero-font);
    font-size: 1rem;
    letter-spacing: 0.03em;
    background-color: var(--primary-accent-color);
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    color: var(--cta-text-color);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px var(--btn-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
}

.pricing-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.pricing-btn:hover {
    background-color: var(--secondary-accent-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: var(--accent-hover-text-color);
    font-weight: 600;
}

.pricing-btn:hover::before {
    left: 100%;
}

.pricing-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.pricing-note-wrapper {
    margin-top: 2.5rem;
}

.pricing-note {
    color: var(--text);
    opacity: 0.85;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto 1.25rem;
}

.pricing-note-wrapper .pricing-btn {
    margin-top: 0;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .pricing-card {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 1.25rem;
    }
}

@media (max-width: 768px) {
    .pricing-card {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Tools Section */
.tools-card.invisible-card {
    background: none;
    border: none;
    padding: 10px 5px;
    text-align: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.tools-card.invisible-card i {
    color: var(--secondary-accent-color);
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
    width: 100%;
    text-align: center;
}

.tools-card.invisible-card p {
    font-size: 0.9rem;
    margin: 0;
    color: var(--text);
}

.tools-card.invisible-card:hover {
    transform: translateY(-5px) scale(1.05);
}

/* How It Works Section */
.how-it-works-emoji {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Portfolio Section */
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.portfolio-img {
    max-height: 200px;
    border-radius: 10px;
    object-fit: contain;
    transition: filter 0.3s ease;
    transform: translateZ(0);
}

@media (min-width: 769px) and (max-width: 1024px) {
    .portfolio-img {
        width: 100%;
        max-height: 180px;
    }
}

@media (max-width: 768px) {
    .portfolio-img {
        display: block;
        margin: 0 auto;
        width: 90%;
        border-radius: 7px;
    }
}

.portfolio-card:hover .portfolio-img {
    filter: brightness(1.15) contrast(1.05);
}

.portfolio-btn {
    background-color: transparent;
    border: 2px solid var(--accessible-accent);
    color: var(--accessible-accent);
    border-radius: 10px;
    font-weight: 500;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.portfolio-btn:hover {
    background-color: var(--primary-accent-color);
    color: var(--accent-hover-text-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Modal styles */
/* Modal vertical centering for all devices */
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 3.5rem);
}

.modal-dialog-centered::before {
  height: calc(100vh - 3.5rem);
  content: "";
  display: inline-block;
  vertical-align: middle;
}

.modal-content {
    background-color: var(--card-color);
    font-family: var(--content-font);
    border-radius: 12px;
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--text);
}

.modal-header {
  margin: 1.5rem;
}

.modal-title {
    font-size: x-large;
    color: var(--text);
}

.modal-section {
    padding: 0.5rem 3rem;
}

.modal-section h5 {
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--accessible-accent);
}

.modal-section p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .modal-dialog-centered {
        min-height: calc(100vh - 1rem);
    }

    .modal-dialog-centered::before {
        height: calc(100vh - 1rem);
    }

    .modal-content {
        max-height: 95vh;
        margin: 0.5rem;
        overflow-y: auto;
    }

    .modal-section {
        padding: 0.5rem 1.5rem;
    }
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.25rem;
    }
  
    .modal-content {
        max-height: 98vh;
        overflow-y: auto;
    }
  
    .modal-section {
        padding: 0.5rem 1rem;
    }
}

.solution-emoji-bullets,
.outcome-emoji-bullets {
    list-style-type: none;
    padding-left: 20px;
}

.solution-emoji-bullets li,
.outcome-emoji-bullets li {
    display: flex;
    align-items: center;
    padding-left: 0;
    vertical-align: middle;
    position: relative;
}

.solution-emoji-bullets li::before {
    content: "•";
    position: absolute;
    left: -20px;
    top: -5px;
    font-size: 35px;
    line-height: 1;
    margin-bottom: 10px;
}

.outcome-emoji-bullets li::before {
    content: "✓";
    position: absolute;
    left: -20px;
    top: -2.5px;
    font-size: 25px;
    line-height: 1;
    margin-bottom: 10px;
}

.solution-text,
.outcome-text {
    margin-left: 25px;
}

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: center;
    padding: 1rem 2rem;
}




/* ── Modal split layout ───────────────────────────────────────────── */
.modal-body--split {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    overflow: hidden;          /* parent doesn't scroll; children do */
    max-height: 70vh;
}

.modal-body__text {
    flex: 1 1 0;
    overflow-y: auto;
    min-width: 0;
}

.modal-body__images {
    flex: 0 0 340px;           /* fixed right-column width */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    max-height: 100%;
}

/* Image thumbnails */
.case-img-wrapper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.case-img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border-radius: 8px;
}

.case-img:hover {
    opacity: 0.88;
    transform: scale(1.01);
}

/* ── Mobile: stacked layout ───────────────────────────────────────── */
@media (max-width: 767px) {
    .modal-body--split {
        flex-direction: column;
        max-height: none;
        overflow: visible;
    }

    .modal-body {
        overflow-y: auto;
        max-height: none;
    }
    .modal-body__text {
        overflow: visible;
        max-height: none;
    }

    .modal-body__images {
        flex: none;
        width: 100%;
        max-height: none;
        overflow: visible;
    }

    .modal-dialog {
        margin: 0.5rem;
    }
}

/* ── Lightbox ─────────────────────────────────────────────────────── */
#portfolio-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1090;
    align-items: center;
    justify-content: center;
}

#portfolio-lightbox.lb-active {
    display: flex;
}

.lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
}

.lb-img-wrap {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

.lb-close,
.lb-prev,
.lb-next {
    position: absolute;
    z-index: 2;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
    transition: background 0.2s;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
    background: rgba(255,255,255,0.28);
}

.lb-close {
    top: 1rem; right: 1rem;
    font-size: 1.8rem;
    width: 2.4rem; height: 2.4rem;
}

.lb-prev {
    left: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 2.4rem;
    width: 3rem; height: 3rem;
}

.lb-next {
    right: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 2.4rem;
    width: 3rem; height: 3rem;
}

.lb-counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    z-index: 2;
}

/* Full-width text when no images */
.modal-body:not(.modal-body--split) .modal-body__text {
    width: 100%;
    max-height: none;
    overflow: visible;
}

.modal-body:not(.modal-body--split) {
    max-height: none;
    overflow: auto;
}



/* Testimonial Section */
.testimonial-text {
    font-style: italic;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.featured-testimonial {
    background-color: var(--secondary-background-color);
    border-radius: 15px;
    position: relative;
}

.featured-avatar {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.custom-muted {
    color: var(--text);
    opacity: 75%;
}

.featured-custom-muted {
    color: var(--text);
    opacity: 50%;
}

/* Contact Section */
.contact-mail,
.contact-calendly {
    font-size: 20px;
    color: var(--text);
}

#contactEmail,
#contactCalendly {
    color: var(--primary-accent-color);
}

.socials-icon {
    color: var(--socials-icon-color) !important;
    transition: transform 0.3s ease;
    padding: 1.75rem;
}

.socials-icon:hover {
    transform: translateY(-5px);
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.85rem;
    color: var(--footer);
}

.footer-credit {
    font-size: 0.8rem;
    color: var(--footer);
}

/* iPad Mini and iPad Air (744px - 1024px)*/
@media (min-width: 744px) and (max-width: 1024px) {
    #servicesCards > div,
    #pricingCards > div,
    #portfolio .row > div,
    #testimonialCards > div {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .skills-card,
    .who-i-help-card,
    .services-card,
    .pricing-card,
    .portfolio-card,
    .testimonial-card {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    #about-text {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }

    .skills-section,
    .tools-section {
        padding: 2rem 2rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .services-card,
    .pricing-card,
    .portfolio-card,
    .testimonial-card {
        padding: 1.5rem 1rem;
    }
}

/* Landscape tablets (1024px - 1200px) */
@media (min-width: 1024px) and (max-width: 1200px) {
    #mainContent {
        width: 85%;
    }

    .skills-card,
    .who-i-help-card,
    .services-card,
    .pricing-card,
    .portfolio-card,
    .testimonial-card {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
}

/* Back to top button */
#backToTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--card-color);
    color: var(--back-to-top-text);
    cursor: pointer;
    box-shadow: 0 0 15px var(--back-to-top-shadow);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

#backToTop svg {
    width: 24px;
    height: 24px;
}

#backToTop:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 0 20px var(--back-to-top-shadow);
}

#backToTop.show {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================== */
/* PageMelo adjustments (September 2026)                           */
/* Kept together at the end so the original rules above stay       */
/* untouched; these override them by coming later.                 */
/* ============================================================== */

/* Social icons wrap onto a second line instead of running off the
   side of a phone screen (4 icons were ~100px wider than a 320px
   phone), with a little less space around each on phones. */
#socialsContainer {
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .socials-icon {
        padding: 0.75rem 1rem;
    }
}

/* The highlighted pricing plan's glow follows the chosen accent color
   (it was always teal, whatever the preset). */
.pricing-card-highlighted {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-accent-color) 22%, transparent);
}

/* Long unbroken text (a pasted link, a very long word) wraps inside its
   card instead of widening the page on phones. */
.card,
.modal-content,
#about-text,
#hero h1,
#hero h6,
#hero-description {
    overflow-wrap: anywhere;
}

/* A long email address (shown when "Email link text" is blank) or booking
   link text wraps instead of running off a phone screen: a 38-character
   address ran 20px past a 360px phone and 60px past a 320px one (the
   end was cut off). Same rule as Black Pearl's (September 2026). */
#contactEmail,
#contactCalendly {
    overflow-wrap: anywhere;
}


/* Navbar tabs (October 2026): the highlighted and hovered tab use the
   accent only when it can be read on the navbar, otherwise the navbar's
   text color (--accessible-accent-nav, set by script.js -- Pearl Switch's
   rule). The presets' deeper accents are too dark to read on the dark
   navbars. */
.custom-navbar .nav-link:hover {
    color: var(--accessible-accent-nav, var(--primary-accent-color));
    border-bottom-color: var(--accessible-accent-nav, var(--primary-accent-color));
}
.nav-item .nav-link.active {
    color: var(--accessible-accent-nav, var(--primary-accent-color));
    border-bottom-color: var(--accessible-accent-nav, var(--primary-accent-color));
}

/* Phone menu (October 2026): the highlighted tab is a filled accent block;
   its label uses the preset's "text on accent" color (the button label
   color, 5.1:1 or more for every preset) instead of the page's text color,
   which was unreadable on many presets (e.g. black on black for Pure
   Monochrome). Same rule in all three Pearls. */
@media (max-width: 991px) {
    .nav-item .nav-link.active,
    [data-theme="dark"] .nav-item .nav-link.active {
        color: var(--cta-text-color);
    }
}

/* ===== Owner feedback (October 2026), the same in all three Pearls ===== */

/* Hero on phones: the hero had a FIXED height (42.5% of the screen) and cut
   off whatever didn't fit -- a long name + role + intro + button on a
   phone. It now grows to fit (never shorter than before). The name and role
   stay centered when they wrap onto two lines (wrapped lines used to
   start at the left), and shrink on small screens (48px name on tablets
   and computers as before, down to 28px on the smallest phones). */
#hero {
    height: auto;
    min-height: 42.5vh;
}
#hero h1,
#hero h6 {
    text-align: center;
    max-width: 100%;
}
#hero h1 {
    font-size: clamp(1.75rem, 0.75rem + 5vw, 3rem);
    line-height: 1.15;
}
#hero h6 {
    font-size: clamp(1.15rem, 0.5rem + 2.6vw, 1.5rem);
}

/* Who I Help cards: the text sits centered vertically (cards in a row share
   the tallest one's height, so shorter text used to sit at the top). */
.who-i-help-card {
    justify-content: center;
}

/* Services cards: the space under the last line matches the space above
   the icon (~40px; the list's own bottom margin made it ~56px). */
.services-card .card-body > :last-child {
    margin-bottom: 0;
}

/* Navbar tabs between 992 and ~1065px wide (older iPads in landscape, small
   laptops): six tabs with 50px on each side were up to 40px wider than the
   screen, so the page scrolled sideways. The side space now shrinks just
   enough there; from ~1065px up it's 50px as before. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nav-link {
        padding-left: clamp(20px, calc((100vw - 1000px) * 0.4 + 24px), 50px);
        padding-right: clamp(20px, calc((100vw - 1000px) * 0.4 + 24px), 50px);
    }
}

/* Copy button beside the email address (PageMelo, October 2026): the
   address is always shown, and copying it doesn't depend on an email app.
   Takes the text color around it, so it suits light and dark themes. */
.copy-email {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  padding: 0.3em 0.8em;
  min-height: 32px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  background: transparent;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.copy-email:hover,
.copy-email:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: currentColor;
}
.copy-email.is-copied { border-color: currentColor; }
@media (hover: none) and (pointer: coarse) {
  .copy-email { min-height: 44px; padding: 0.3em 1em; }
}
#contact-mail-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .75rem; }
#contact-mail-row > i { margin-right: 0 !important; }
#contact-mail-row #contactEmail { min-width: 0; overflow-wrap: anywhere; }
#contact-mail-row .copy-email { color: var(--text); }

/* ===== Owner's Editor test, Pearl round 1 (October 2026) -- the same in
   all three Pearls. "Tablets" = 744-1024px wide (every iPad held upright,
   incl. the mini, and the editor's Tablet preview). ===== */

/* Skills / Who I Help: the line break between two rows (script.js) adds no
   extra space -- the rows sit as far apart as cards wrapping naturally. */
.pm-row-break {
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Services: each card's width comes from script.js (rows fill the width,
   at most 3 per row on computers, 2 on tablets -- 4 = 2 + 2, 5 = 3 + 2).
   Computers start above 1100px since Pearl round 4 (was 1025px). */
@media (min-width: 1100.02px) {
    #servicesCards > .col {
        flex: 0 0 var(--w-lg, 33.3333%);
        width: var(--w-lg, 33.3333%);
        max-width: var(--w-lg, 33.3333%);
    }
}

@media (min-width: 744px) and (max-width: 1100px) {   /* to 1100px since Pearl round 4 (was 1024) */
    /* Hero name: more space at the sides (a long name wraps sooner). */
    #hero h1 {
        max-width: 75%;
    }

    /* Services, Pricing, Portfolio and Testimonials: the cards line up with
       the grey Tools box (the box sits 0.5rem in from the section's sides;
       the cards' own side margins are dropped, so the space between two
       cards is the grid's gap). */
    .tools-section {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    #services > .container,
    #pricing > .container,
    #portfolio > .container,
    #testimonials > .container {
        max-width: none;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .services-card,
    .pricing-card,
    .portfolio-card,
    .testimonial-card {
        margin-left: 0;
        margin-right: 0;
    }

    /* Services: up to 2 per row, each row the full width (a lone last card
       fills its row). */
    #servicesCards > .col {
        flex: 0 0 var(--w-md, 50%);
        width: var(--w-md, 50%);
        max-width: var(--w-md, 50%);
    }

    /* Pricing, Portfolio, Testimonials: 2 per row (a lone last card stays
       the same width, centered, so plans are easy to compare). */
    #pricingCards > .col,
    #portfolioCards > .col,
    #testimonialCards > .col {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    /* Featured testimonial: as wide as the cards above it. */
    #featuredTestimonial > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    /* Tools: 3 per row (the computer layout's row breaks are ignored). */
    #toolsCards > .col {
        flex: 0 0 33.3333%;
        width: 33.3333%;
        max-width: 33.3333%;
    }
    #toolsCards > .tools-row-break {
        display: none !important;
    }
}

/* Case-study window on tablets (and phones held sideways): stacked like on
   phones -- the text first, the photos below -- centered, up to 720px wide.
   Between 768 and 991px the text used to be squeezed into a 70-86px column
   beside the photos. */
@media (min-width: 576px) and (max-width: 1100px) {   /* to 1100px since Pearl round 4 (was 1024) */
    .portfolio-modal .modal-dialog {
        max-width: min(720px, calc(100% - 2rem));
        margin-left: auto;
        margin-right: auto;
    }
    .portfolio-modal .modal-body--split {
        flex-direction: column;
        max-height: none;
        overflow: visible;
    }
    .portfolio-modal .modal-body {
        overflow-y: auto;
        max-height: none;
    }
    .portfolio-modal .modal-body__text {
        overflow: visible;
        max-height: none;
    }
    .portfolio-modal .modal-body__images {
        flex: none;
        width: 100%;
        max-height: none;
        overflow: visible;
    }
}

/* ===== Pearl round 2 (October 2026, owner): Who I Help on phones (under
   744px) shows one card per row (it was 2). Tablets and computers keep
   theirs (the 744px iPad mini: 2 per row). ===== */
@media (max-width: 743.98px) {
    #who-i-help-list > .col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* ===== Pearl round 3 (October 2026, owner): Skills on phones (under 744px)
   show one card per row too (it was 2): a word like "Management" didn't fit
   on one line in a half-width card. Tablets and computers keep theirs (the
   744px iPad mini: 2 per row), as Who I Help above. ===== */
@media (max-width: 743.98px) {
    #about-skills > .col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* ===== Pearl round 4 (October 2026, owner) -- the same in all three Pearls.
   "Tablets" now run to 1100px (was 1024): the 13" iPad Pro held upright is
   1032px wide and got the computer layout (3 per row). The round-1 tablet
   rules above were widened to match; every iPad held sideways (1133px and
   up) keeps the computer layout. ===== */

/* Row breaks (script.js joinRows): computers' and tablets' own. */
.pm-row-break {
    display: none !important;
}
@media (min-width: 1100.02px) {
    .pm-row-break.pm-break-lg {
        display: block !important;
    }
}
@media (min-width: 744.02px) and (max-width: 1100px) {
    .pm-row-break.pm-break-md {
        display: block !important;
    }
}

/* Skills / Who I Help on tablets (not the 744px iPad mini, which keeps 2 per
   row): at most 3 per row, every card a third of the list's width, shorter
   rows centered -- 4 = 2 + 2, 5 = 3 + 2, 7 = 3 + 2 + 2, 8 = 3 + 3 + 2. A
   quarter-width card was too narrow for "Management" on 10th-gen iPads. */
@media (min-width: 744.02px) and (max-width: 1100px) {
    #about-skills > .col,
    #who-i-help-list > .col {
        flex: 0 0 33.3333%;
        width: 33.3333%;
        max-width: 33.3333%;
    }
}

/* The card pages on tablets bigger than the iPad mini get the mini's side
   space: Services (with Tools and How It Works), Pricing, Portfolio and
   Testimonials reach 20px from the screen's edges (the cards and the grey
   Tools box 28px), so the cards get wider. The page's body is 90% wide at
   769-1023px and 85% at 1024-1100px (the designer's rules), so these pages
   step out of it by exactly the missing part on each side; About, Contact
   and the rest stay as they were. */
@media (min-width: 769px) and (max-width: 1023.98px) {
    #services.content-section,
    #pricing.content-section,
    #portfolio.content-section,
    #testimonials.content-section {
        margin-left: -5.5556%;
        margin-right: -5.5556%;
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (min-width: 1024px) and (max-width: 1100px) {
    #services.content-section,
    #pricing.content-section,
    #portfolio.content-section,
    #testimonials.content-section {
        margin-left: -8.8235%;
        margin-right: -8.8235%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ===== Pearl round 5 (October 2026, owner) ===== */
/* Portfolio on computers: each card's width comes from script.js -- 2 or 4
   case studies fill the width (2 per row), otherwise a third each. */
@media (min-width: 1100.02px) {
    #portfolioCards > .col {
        flex: 0 0 var(--w-lg, 33.3333%);
        width: var(--w-lg, 33.3333%);
        max-width: var(--w-lg, 33.3333%);
    }
}