/* Our Creative Work: Bootstrap 5 collage slider */
.portfolio-showcase {
    --portfolio-primary: #14aeb7;
    --portfolio-navy: #102847;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 12%, rgba(20, 174, 183, .11), transparent 22%),
        radial-gradient(circle at 94% 86%, rgba(16, 40, 71, .08), transparent 22%),
        #fff;
}

.portfolio-section-heading { position: relative; z-index: 3; }
.portfolio-section-heading .eyebrow {
    display: inline-block;
    margin-bottom: .45rem;
    color: var(--portfolio-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.portfolio-section-heading h2 {
    margin-bottom: .45rem;
    color: var(--portfolio-navy);
    /* font-size: clamp(2rem, 4vw, 3.4rem); */
    font-size: 36px;
    font-weight: 800;
}
.portfolio-section-heading p {
    max-width: 680px;
    margin-inline: auto;
    color: #4f5c6b;
    font-size: .98rem;
    font-size: 14px;
}

.portfolio-showcase .collage-grid {
    width: min(100%, 1620px);
    /* min-height: 635px; */
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 205px 205px;
    gap: 20px;
}
.portfolio-showcase .project-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 22px;
    background: #dbe8ef;
    box-shadow: 0 22px 55px rgba(16, 40, 71, .12);
    text-decoration: none;
    isolation: isolate;
}
.portfolio-showcase .project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 42%, rgba(7, 24, 45, .78));
    opacity: 0;
    transition: opacity .35s ease;
}
.portfolio-showcase .project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.portfolio-showcase .project-card:hover img { transform: scale(1.045); }
.portfolio-showcase .project-card:hover::after,
.portfolio-showcase .project-card:hover .project-overlay { opacity: 1; }
.portfolio-showcase .card-branding { grid-column: 1; grid-row: 1; }
.portfolio-showcase .card-website { grid-column: 1; grid-row: 2; }
.portfolio-showcase .card-mobile { grid-column: 2; grid-row: 1 / span 2; }
.portfolio-showcase .collage-grid-alt .card-mobile { grid-column: 1; grid-row: 1 / span 2; }
.portfolio-showcase .collage-grid-alt .card-branding { grid-column: 2; grid-row: 1; }
.portfolio-showcase .collage-grid-alt .card-website { grid-column: 2; grid-row: 2; }
.portfolio-showcase .project-overlay {
    position: absolute;
    right: 24px;
    bottom: 22px;
    left: 24px;
    z-index: 2;
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: .35s ease;
}
.portfolio-showcase .project-card:hover .project-overlay { transform: translateY(0); }
.portfolio-showcase .project-overlay small {
    display: block;
    margin-bottom: .25rem;
    color: #8ef1f5;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.portfolio-showcase .project-overlay strong { font-size: clamp(1.15rem, 2vw, 1.7rem); }
.portfolio-showcase .portfolio-arrow {
    top: 50%;
    bottom: auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #fff;
    background: rgba(16, 40, 71, .94);
    box-shadow: 0 12px 30px rgba(16, 40, 71, .25);
    opacity: 1;
    transform: translateY(-50%);
    position: absolute;
}
.portfolio-showcase .portfolio-arrow:hover { background: var(--portfolio-primary); }
.portfolio-showcase .portfolio-arrow span { font-size: 1.55rem; line-height: 1; }
.portfolio-showcase .carousel-control-prev { left: 12px; }
.portfolio-showcase .carousel-control-next { right: 12px; }
.portfolio-showcase .portfolio-indicators {
    position: absolute;
    margin: 34px 0 0;
    gap: 10px;
}
.portfolio-showcase .portfolio-indicators [data-bs-target] {
    width: 11px;
    height: 11px;
    margin: 0;
    border: 2px solid #bdc4cb;
    border-radius: 50%;
    background: transparent;
    opacity: 1;
    transition: .25s ease;
}
.portfolio-showcase .portfolio-indicators .active {
    width: 30px;
    border-color: var(--portfolio-primary);
    border-radius: 999px;
    background: var(--portfolio-primary);
}
.portfolio-showcase .decor-line {
    position: absolute;
    width: 260px;
    height: 120px;
    border: 4px solid rgba(20, 174, 183, .16);
    border-radius: 50%;
    pointer-events: none;
}
.portfolio-showcase .decor-line-top {
    top: -60px;
    left: -100px;
    transform: rotate(15deg);
    box-shadow: 0 13px 0 rgba(20,174,183,.10), 0 26px 0 rgba(20,174,183,.07);
}
.portfolio-showcase .decor-line-bottom {
    right: -120px;
    bottom: -45px;
    transform: rotate(-16deg);
    box-shadow: 0 13px 0 rgba(20,174,183,.10), 0 26px 0 rgba(20,174,183,.07);
}

@media (max-width: 991.98px) {
    .portfolio-showcase .collage-grid,
    .portfolio-showcase .collage-grid-alt {
        min-height: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 230px 230px;
        gap: 14px;
    }
    .portfolio-showcase .project-card { border-radius: 16px; }
    .portfolio-showcase .portfolio-arrow { display: none; }
}
@media (max-width: 767.98px) {
    .portfolio-showcase .collage-grid,
    .portfolio-showcase .collage-grid-alt { display: flex; flex-direction: column; }
    .portfolio-showcase .project-card,
    .portfolio-showcase .card-branding,
    .portfolio-showcase .card-website,
    .portfolio-showcase .card-mobile { width: 100%; height: 250px; }
    .portfolio-showcase .project-overlay { opacity: 1; transform: none; }
    .portfolio-showcase .project-card::after { opacity: 1; }
}


/* Standalone slider mechanics: no Bootstrap JavaScript dependency */
.portfolio-slider { position: relative; }
.portfolio-slides { position: relative; }
.portfolio-slide { display: none; opacity: 0; transform: translateX(18px); }
.portfolio-slide.is-active { display: block; animation: portfolioFade .55s ease both; }
@keyframes portfolioFade {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
.portfolio-showcase .portfolio-prev { left: 12px; }
.portfolio-showcase .portfolio-next { right: 12px; }
.portfolio-showcase .portfolio-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  margin: 34px 0 0;
  gap: 10px;
}
.portfolio-showcase .portfolio-indicators button {
  width: 11px;
  height: 11px;
  padding: 0;
  margin: 0;
  border: 2px solid #bdc4cb;
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  transition: .25s ease;
}
.portfolio-showcase .portfolio-indicators button.is-active {
  width: 30px;
  border-color: var(--portfolio-primary);
  border-radius: 999px;
  background: var(--portfolio-primary);
}