@charset "utf-8";

/* =========================
   Typography
   ========================= */
/* rest of styles below */

body {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #2C343B;
  background-color: #F0F2F5;
}

h1, h3, h4, h5, h6 {
  font-family: "Exo 2", sans-serif;
  color: #D9D9D9;
  margin-bottom: 0.5rem;
}
h2 {
  font-family: "Exo 2", sans-serif;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}
p {
  font-family: "Inter", sans-serif;
  color: #F0F2F5;
  margin-bottom: 0.5rem;
}
h1 { font-size: 36px; font-weight: 700; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }
h5 { font-size: 16px; font-weight: 600; }
h6 { font-size: 14px; font-weight: 600; }

/* =========================
   Navbar Code
   ========================= */

/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
    background-color: #1B1B2F;
}
/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
    color: #ecf0f1;
}
/* Background and text colors for current page link and links on hover and focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover, 
.navbar-custom .dropdown-item:focus {
    background-color: #2C343B;
    color: #fff;
}
/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
    border-color: #ecf0f1;
    color: #fff;
}
/* Hamburger icon rules */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(236,240,241, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* Force navbar + dropdown to match font and size */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}
/* Keep dropdown inside the viewport */
.navbar-custom .dropdown-menu {
  right: 0;
  left: auto;
  max-width: calc(100vw - 2rem);
  white-space: normal;   /* allow wrapping */
  overflow-wrap: anywhere;
}
/* ===== Navbar typography: Exo 2 ===== */
.navbar-custom,
.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
  font-family: "Exo 2", sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
/* Prevent navbar content from touching right edge */
.navbar-custom .navbar-nav {
  padding-right: 1.5rem;
}
@media (max-width: 991.98px) {
  .navbar-custom { padding-right: 1rem; }
  .navbar-custom .navbar-toggler { margin-right: 0.25rem; }
}
/* Add space between logo and left edge */
.navbar-custom .navbar-brand {
  padding-left: 1rem;
}
/* ===== Mobile menu aligned under Menu button (right side) ===== */
@media (max-width: 991.98px) {

  /* Position the collapsed menu */
  .navbar-custom .navbar-collapse {
    position: absolute;
    top: 100%;              
    right: 1rem;            
    width: 240px;           
    background-color: #1B1B2F;
    border-radius: 12px;
    padding: 0.75rem 0;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  }

  /* Make links stack cleanly */
  .navbar-custom .navbar-nav {
    margin: 0;
  }

  .navbar-custom .nav-link {
    padding: 0.6rem 1.25rem;
    text-align: left;
  }
}
body { 
  background: #F0F2F5;
  margin: 0;
  padding: 0;
}

/* Hero image */
.carousel-img {
  height: 375px;
  object-fit: cover;
}

/* Wrapper for overlay */
.hero-wrapper {
  position: relative;
}

/* Dark gradient overlay */
.hero-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.6)
  );
}

/* Keep text above overlay */
.carousel-caption {
  z-index: 2;
}

/* Smooth animation */
.carousel-item {
  transition: transform 1.2s ease-in-out, opacity 1.2s ease-in-out;
}

/* Responsive heights */
@media (max-width: 992px) {
  .carousel-img { height: 260px; }
}
@media (max-width: 576px) {
  .carousel-img { height: 200px; }
}

/* Responsive heading size */
.carousel-caption h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}
/*header banner section*/
#home_banner {
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}
/*Featured Work Cards*/
#home_banner h1 {
    font-size: 4em;
    color: #fff;
    text-shadow: 3px 5px #363434;
    position: absolute;
left: 3%;
bottom: 7%;
}
.img-fluid {max-width:100%;
            height: auto; 
}
/*Featured Work Cards*/
.service-card{
  background:#1B1B2F;
  color:#F0F2F5;
  border-radius:14px;
  padding:18px;
  height:100%;
  box-shadow:0 12px 25px rgba(0,0,0,.2);
  transition:0.25s ease;
}

.service-card:hover{
  transform:translateY(-5px);
}

.service-card h4{
  font-weight:700;
  margin-bottom:12px;
}

.service-card p{
  font-family:"Inter", sans-serif;
  font-size:.9rem;
  color:rgba(255,255,255,.8);
}
.service-card h5{
  color:#FFFFFF;
  font-weight:700;
  margin-bottom:12px;
}
.service-card:hover h5{
  color:#D9D9D9;
}
.thumb{
  background:rgba(255,255,255,.08);
  border-radius:8px;
  padding:12px;
  margin-bottom:12px;
}

.thumb img{
  width:100%;
  height:auto;
}
/* Carousel headline */
.carousel-caption h1 {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 600;
}

/* Carousel sub-headline */
.carousel-caption h4 {
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
}
.service-card { width: 100%; }
.thumb img { width: 100%; height: auto; display: block; }

/*Footer*/
.footer {
  background-color: #F0F2F5;
  font-size: 0.9rem;
}

.footer a {
  color: #000;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer i {
  font-size: 1.2rem;
}
/* About page branded background band */
.about-band {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(20, 22, 28, 0) 0%,
    rgba(20, 22, 28, 0.04) 20%,
    rgba(20, 22, 28, 0.04) 80%,
    rgba(20, 22, 28, 0) 100%
  );
  border-radius: 24px;
}
/* Override Bootstrap primary button */
.btn-primary {
  background-color: #1B1B2F !important;
  border-color: #1B1B2F !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #2C343B !important;
  border-color: #2C343B !important;
}
/* Profile card social icons */
.card a i {
  color: #1B1B2F;
  transition: 0.2s ease;
}
.about-hero-card,
.profile-card {
  border-radius: 20px;
}

.card a:hover i {
  color: #2C343B;
}
/* About - What I do best cards */
.about-band .card {
  background-color: #1B1B2F;
  color: #F0F2F5;
  border-radius: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* text colors inside dark cards */
.about-band .card h3 {
  color: #FFFFFF;
}
.about-band .card .card-body p {
  color: rgba(255,255,255,0.8) !important;
}
.about-band .card p {
  color: rgba(255,255,255,0.8);
}

/* icon color */
.about-band .card i {
  color: #D9D9D9;
}
.about-band .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
/* ===== Button System ===== */

/* Primary button */
.btn-main {
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

/* Secondary button */
.btn-secondary-action {
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-secondary-action:hover {
  background-color: #1B1B2F;
  color: #fff;
  transform: translateY(-2px);
}

/* Icon motion */
.btn i {
  transition: transform 0.2s ease;
}

.btn:hover i {
  transform: translateX(4px);
}
/* Contact Page */
.contact-panel{
  background: #1B1B2F;
  border-radius: 12px;
  padding: 40px 36px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  height: 100%;
}
.contact-title{
  color: #ffffff;
  font-weight: 700;
  font-family: "Exo 2", sans-serif;
}

.contact-label{
  color: #ffffff;
  font-weight: 600;
}

.contact-note{
  color: rgba(255,255,255,.75);
}
.btn-contact{
  background: #d9d9d9;
  border: 2px solid #000;
  border-radius: 10px;
  font-weight: 700;
  transition: all .2s ease;
}

.btn-contact:hover{
  transform: translateY(-2px);
  background:#ececec;
}
/* Left column flex sack */
.contact-art{
  height: 100%;
}

/* Each image box shares height evenly and crops nicely */
.contact-art-box{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  min-height: 180px;
}

/* Make images fill the box without distortion */
.contact-art-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* On small screens, let images go natural height */
@media (max-width: 991.98px){
  .contact-art{
    height: auto;
  }
  .contact-art-box{
    min-height: 220px;
  }
  .contact-art-img{
    height: auto;
  }
}
/* LEFT column wrapper */
.contact-art{
  display: grid;
  gap: 1rem;
}

/* Two fixed-size image tiles that will NOT stretch the form column */
.contact-tile{
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  background: #ddd;
}

.contact-tile img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 992px){
  .contact-tile{ aspect-ratio: 5 / 4; } /* slightly less tall on desktop */
}
@media (max-width: 575.98px){
  .contact-tile{ aspect-ratio: 16 / 10; } /* nicer on phones */
}
/* ===== Contact images — MOBILE FIX ===== */
@media (max-width: 767.98px){

  .contact-tile{
    max-width: 280px;     
    margin-left: auto;
    margin-right: auto;  
    aspect-ratio: 3 / 4;
  }

}
/* ===== Contact images for Mobile ===== */
@media (max-width: 767.98px){
  .contact-tile{
    max-width: 280px;    
    margin-left: auto;
    margin-right: auto;   
    aspect-ratio: 4 / 3;
  }
}
/* ===== Contact Form Labels ===== */

.contact-label{
  font-family: "Exo 2", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
  display: block;
}

.req{
  color: #ff5a5a;
  margin-left: 4px;
  font-weight: 700;
}
.contact-art-stack{
  display: grid;
  gap: 1rem;
}

/* Tiles */
.contact-tile{
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  background: #ddd;
}

.contact-tile img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Desktop: define tile heights so combined height visually matches typical form height */
@media (min-width: 992px){
  .contact-tile-top{ height: 260px; }
  .contact-tile-bottom{ height: 260px; }
}

/* Mobile: smaller tiles */
@media (max-width: 767.98px){
  .contact-tile{ max-width: 320px; margin: 0 auto; }
  .contact-tile-top{ height: 200px; }
  .contact-tile-bottom{ height: 200px; }
}
/* Make the image stack follow the form height WITHOUT stretching the form */
.contact-art-stack{
  display: grid;
  gap: 1rem;
}

/* Tiles */
.contact-tile{
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  background: #ddd;
}

.contact-tile img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Desktop: define tile heights */
@media (min-width: 992px){
  .contact-tile-top{ height: 260px; }
  .contact-tile-bottom{ height: 260px; }
}

/* Mobile: smaller tiles */
@media (max-width: 767.98px){
  .contact-tile{ max-width: 320px; margin: 0 auto; }
  .contact-tile-top{ height: 200px; }
  .contact-tile-bottom{ height: 200px; }
}
/* ===== Resume Progress Bars ===== */

.progress {
  height: 10px;
  background-color: rgba(0,0,0,0.08);
  border-radius: 50px;   /* rounded track */
  overflow: hidden;
}

.progress-bar {
  border-radius: 50px;
  transition: width 0.6s ease;
}

/* Brand color variations */
.bar-primary {
  background: linear-gradient(90deg, #5b7cfa, #7aa6ff);
}

.bar-accent {
  background: linear-gradient(90deg, #7c4dff, #a78bfa);
}

.bar-highlight {
  background: linear-gradient(90deg, #00bcd4, #4dd0e1);
}

.bar-warm {
  background: linear-gradient(90deg, #ff7a59, #ffb199);
}
/* Progress bar text styling */
.progress-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
/* ===== Progress Bar Base ===== */

.progress {
  height: 28px;
  background-color: rgba(0,0,0,0.08);
  border-radius: 50px;
  overflow: hidden;
}

.progress-bar {
  width: 0; 
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 12px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  transition: width 1.2s ease;
}

/* Skill text formatting */
.skill-name {
  white-space: nowrap;
}

.skill-percent {
  opacity: 0.9;
}

/* Theme colors */
.bar-primary {
  background: linear-gradient(90deg, #1b1f3a, #5b7cfa);
}

.bar-accent {
  background: linear-gradient(90deg, #5b7cfa, #7aa6ff);
}

.bar-highlight {
  background: linear-gradient(90deg, #7c4dff, #a78bfa);
}
/* Default text inside bars */
.progress-bar {
  color: #fff;
}

/* When bar is short, switch text color */
.progress-bar.short-bar {
  color: #1b1f3a;
}
/* About hero card polish */
.about-hero-card {
  border-radius: 20px;
}
/* UI mockup styling inside hero */
.about-mockup-wrapper {
  position: relative;
}
.profile-card,
.profile-card .card-body {
  border-radius: 20px !important;
}
.hero-heading {
  position: relative;
  padding: 3rem 2rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
}

.hero-heading h1 {
  position: relative;
  z-index: 2;
  color: #1a1a1a;
}

/* Background image */
.hero-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/about-ushero.jpg") center/cover no-repeat;
  z-index: 1;
}

.hero-heading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  z-index: 1;
}
.profile-hook {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4b5563; /* soft slate tone */
  max-width: 90%;
}
.profile-card .badge {
  font-size: 0.75rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font-weight: 500;
  background-color: #D9D9D9;
  color: #1c1f2f;
  transition: all 0.2s ease;
}

.profile-card .badge:hover {
  background-color: #e4e8f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* portrait overlaps the band */
.profile-pic {
  position: absolute;
  left: 50%;
  bottom: -55px;                /* controls overlap amount */
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid #fff;       /* clean cutout */
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
/* Top band (match navbar) */
.profile-card .profile-band {
  position: relative;
  height: 120px;
  background-color: #1c1f2f;
}

/* Move the photo UP */
.profile-card .profile-pic {
  position: absolute;
  left: 50%;
  top: 5px;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}
.profile-card .card-body {
  padding-top: 2.25rem !important;
}
.profile-card hr {
  margin: 1.25rem 0;
}
.resume-btn {
  background-color: #1c1f2f;
  border-color: #1c1f2f;
}

.resume-btn:hover {
  background-color: #141726;
  border-color: #141726;
}
.btn i {
  color: inherit;
  transition: color 0.2s ease;
}
.btn-main:hover i,
.btn-secondary-action:hover i {
  color: inherit;
}
/* Make all button icons follow button text color */
.btn i {
  color: inherit !important;
}

/* Ensure hover states also inherit */
.btn:hover i,
.btn:focus i,
.btn:active i {
  color: inherit !important;
}
/* WORK PAGE */
.work-hero {
  min-height: 85vh;
  background:
    linear-gradient(135deg, rgba(10, 16, 38, 0.92), rgba(43, 63, 122, 0.82)),
    url("../images/slide1.jpg") center/cover no-repeat;
  padding: 5rem 0;
}

.work-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.65rem 1rem;
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.work-hero-card {
  max-width: 420px;
  padding: 1rem;
  border-radius: 1.5rem;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.section-subtitle {
  max-width: 700px;
  margin: 0 auto;
  color: #666;
}

.project-card {
  background: linear-gradient(180deg, #18264d, #0f1831);
  color: #ffffff;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(0,0,0,0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.project-img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center;
  background: #1B1B2F;
  padding: 1.25rem;
}

.project-tag {
  width: fit-content;
  background-color: #7a8ee6;
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  padding: 0.5rem 0.8rem;
}

.project-btn {
  border-radius: 50px;
  padding: 0.6rem 1.2rem;
}

.featured-callout {
  background: linear-gradient(135deg, #22376f, #131d3d);
  color: #ffffff;
}

.work-cta {
  background: #0c1228;
  color: #ffffff;
}

.work-cta .btn,
.featured-callout .btn,
.work-hero .btn {
  border-radius: 50px;
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .work-hero {
    text-align: center;
    min-height: auto;
    padding: 4rem 0;
  }

  .work-hero-card {
    margin-top: 1rem;
  }
}
.project-heading {
  max-width: 780px;
  margin: 0 auto 3rem;
  padding: 1rem 1rem 0;
}

.projects-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5f78d6;
  background: rgba(95, 120, 214, 0.10);
  border: 1px solid rgba(95, 120, 214, 0.22);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.projects-title {
  font-family: 'Exo 2', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #1a2748;
  margin-bottom: 0.85rem;
  line-height: 1.1;
}

.projects-subtitle {
  font-size: 1.08rem;
  line-height: 1.8;
  color: #5f6678;
  max-width: 680px;
  margin: 0 auto 1.5rem;
}

.projects-divider {
  width: 110px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(90deg, #5f78d6, #1a2748);
  box-shadow: 0 0 18px rgba(95, 120, 214, 0.28);
}

.featured-callout h2 {
  color: #ffffff;
}

.featured-callout p {
  color: rgba(255,255,255,0.85);
}

.featured-callout .work-badge {
  color: #ffffff;
  border-color: rgba(255,255,255,0.35);
}
.work-cta h2 {
  color: #ffffff;
}

.work-cta p {
  color: rgba(255,255,255,0.85);
}
/* SUB-PORTFOLIO PAGES */
.subportfolio-hero {
  padding: 5.5rem 0 4.5rem;
  color: #fff;
}

.animation-hero {
  background:
    linear-gradient(135deg, rgba(11, 20, 52, 0.95), rgba(46, 74, 156, 0.80)),
    url("../images/slide1.jpg") center/cover no-repeat;
}

.subportfolio-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.subportfolio-title {
  font-family: 'Exo 2', sans-serif;
  font-size: clamp(2.3rem, 4.2vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: #ffffff;
}

.subportfolio-text {
  font-size: 1.08rem;
  line-height: 1.8;
  max-width: 680px;
  color: rgba(255,255,255,0.88);
}

.subportfolio-hero-panel {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 1.75rem;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.subportfolio-hero-panel img {
  max-height: 360px;
  object-fit: contain;
}

.subportfolio-intro {
  background: linear-gradient(180deg, #eef3ff 0%, #f7f9fd 100%);
}

.subportfolio-chip {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1rem 1.2rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  font-weight: 600;
  color: #24345f;
}

.subportfolio-chip i {
  color: #4d67c8;
  margin-right: 0.5rem;
}

.subportfolio-section {
  background:
    radial-gradient(circle at top center, rgba(95, 120, 214, 0.08), transparent 35%),
    linear-gradient(180deg, #f8faff 0%, #eef2f9 100%);
}

.subproject-card {
  background: linear-gradient(180deg, #18264d, #101935);
  color: #ffffff;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(0,0,0,0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.subproject-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 42px rgba(0,0,0,0.24);
}

.subproject-image-wrap {
  background: #ffffff;
  padding: 1.25rem;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subproject-img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}

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

.subproject-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.82);
}

.subproject-meta i {
  margin-right: 0.35rem;
  color: #8ea2ff;
}

.subproject-btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
}

@media (max-width: 991.98px) {
  .subportfolio-hero {
    padding: 4rem 0 3rem;
  }

  .subportfolio-text {
    margin-left: 0;
    margin-right: 0;
  }
}
.showcase-card {
  background: linear-gradient(180deg, #18264d, #101935);
  color: #ffffff;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.showcase-media {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d1430, #1c2d5f);
  padding: 2rem;
}

.showcase-img {
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
}

.showcase-content {
  padding: 3rem 2.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.showcase-content h3 {
  font-family: 'Exo 2', sans-serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.showcase-content p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.88);
}

.showcase-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.25rem;
  margin-top: 1rem;
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
}

.showcase-meta i {
  color: #8ea2ff;
  margin-right: 0.35rem;
}

.showcase-placeholder {
  background: linear-gradient(135deg, #121b3e, #243a79);
}

.placeholder-panel {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 1.5rem;
  background: rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.placeholder-panel i {
  font-size: 3rem;
  color: #9cb2ff;
  margin-bottom: 1rem;
}

.placeholder-panel h3 {
  font-size: 1.35rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.placeholder-panel p {
  margin-bottom: 0;
  color: rgba(255,255,255,0.75);
}

.showcase-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.showcase-arrow {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #1b2b5a;
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform 0.25s ease, background 0.25s ease;
}

.showcase-arrow:hover {
  background: #304a9b;
  color: #ffffff;
  transform: translateY(-2px);
}

@media (max-width: 991.98px) {
  .showcase-media {
    min-height: 300px;
  }

  .showcase-content {
    padding: 2rem 1.5rem;
    text-align: center;
  }

  .showcase-meta {
    justify-content: center;
  }
}
.showcase-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 0 4.5rem;
}

.showcase-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #1b2b5a;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  z-index: 5;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  transition: transform 0.25s ease, background 0.25s ease;
}

.showcase-arrow:hover {
  background: #304a9b;
  color: #ffffff;
}

.showcase-arrow-left {
  left: 0;
}

.showcase-arrow-right {
  right: 0;
}

.showcase-card {
  background: linear-gradient(180deg, #18264d, #101935);
  color: #ffffff;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
@media (max-width: 991.98px) {
  .showcase-wrapper {
    padding: 0 1rem 5rem;
  }

  .showcase-arrow {
    top: auto;
    bottom: -72px;
    transform: none;
  }

  .showcase-arrow-left {
    left: calc(50% - 70px);
  }

  .showcase-arrow-right {
    right: calc(50% - 70px);
  }
}
#animation-projects {
  scroll-margin-top: 100px;
}
#graphicdesign-projects {
  scroll-margin-top: 100px;
}
#uxui-projects {
  scroll-margin-top: 70px;
}
#webdev-projects {
  scroll-margin-top: 70px;
}
#typography-projects {
  scroll-margin-top: 70px;
}
.graphicdesign-hero {
  background:
    linear-gradient(135deg, rgba(34, 16, 48, 0.94), rgba(98, 44, 126, 0.82)),
    url("../images/slide1.jpg") center/cover no-repeat;
}
.uxui-hero {
  background:
    linear-gradient(135deg, rgba(12, 34, 58, 0.94), rgba(31, 108, 139, 0.82)),
    url("../images/playnextapponphone.jpg") center/cover no-repeat;
}
.webdev-hero {
  background:
    linear-gradient(135deg, rgba(10, 24, 47, 0.94), rgba(33, 77, 142, 0.82)),
    url("../images/buildmyresume.jpg") center/cover no-repeat;
}
.typography-hero {
  background:
    linear-gradient(135deg, rgba(42, 20, 53, 0.94), rgba(126, 62, 110, 0.82)),
    url("../images/typographypreview.jpg") center/cover no-repeat;
}
.workpage-hero {
  background:
    linear-gradient(135deg, rgba(10, 18, 45, 0.95), rgba(34, 63, 133, 0.82)),
    url("../images/slide1.jpg") center/cover no-repeat;
}
/* WORK PAGE CATEGORY BUTTONS */

.portfolio-category-btn {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 12px 22px;

  font-weight: 600;
  letter-spacing: .5px;

  border-radius: 30px;

  border: 1px solid rgba(110,130,200,.35);

  background: rgba(60,90,180,.12);
  color: #4e6bdc;

  transition: all .25s ease;
}

.portfolio-category-btn i {
  font-size: 1.1rem;
}

.portfolio-category-btn:hover {
  background: #1B1B2F;
  color: white;
  border-color: #1B1B2F;

  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
@media (min-width: 992px) {
  .portfolio-category-row > .col-lg {
    flex: 1 0 0;
  }
}
.portfolio-category-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 76px;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  text-align: center;
  border-radius: 16px;
  border: 1px solid rgba(110,130,200,.35);
  background: rgba(60,90,180,.12);
  color: #2C343B;
  transition: all .25s ease;
  white-space: normal;
}

.portfolio-category-btn i {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.portfolio-category-btn:hover {
  background: #1B1B2F;
  color: #fff;
  border-color: #1B1B2F;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
@media (max-width: 767.98px) {
  .subportfolio-hero {
    padding: 2.75rem 0 2.25rem;
    text-align: left;
  }

  .subportfolio-eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
  }

  .subportfolio-title {
    font-size: 2.35rem;
    line-height: 1.08;
    margin-bottom: 0.85rem;
    color: #ffffff;
  }

  .subportfolio-text {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.92);
    margin-bottom: 0;
  }

  .subportfolio-hero .d-flex.flex-wrap.gap-3 {
    flex-direction: column;
    align-items: stretch;
  }

  .subportfolio-hero .btn {
    width: 100%;
    text-align: center;
  }

  .subportfolio-hero-panel {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
  }

  .subportfolio-hero-panel img {
    max-height: 240px;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
  }

  .subportfolio-intro {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .subportfolio-chip {
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
  }

  .showcase-wrapper {
    padding: 0 0.75rem 5rem;
    margin: 0 auto 2.5rem;
  }

  .showcase-card {
    border-radius: 1.25rem;
  }

  .showcase-media {
    min-height: 240px;
    padding: 1.25rem;
  }

  .showcase-img {
    max-height: 220px;
  }

  .showcase-content {
    padding: 1.5rem 1.25rem;
    text-align: left;
  }

  .showcase-content h3 {
    font-size: 1.6rem;
  }

  .showcase-content p {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .showcase-meta {
    gap: 0.65rem 1rem;
    font-size: 0.9rem;
  }

  .showcase-arrow {
    width: 50px;
    height: 50px;
  }

  .showcase-arrow-left {
    left: 4px;
  }

  .showcase-arrow-right {
    right: 4px;
  }

  .portfolio-category-btn {
    min-height: 64px;
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 14px;
  }

  .portfolio-category-btn i {
    font-size: 1rem;
  }

  .project-heading {
    padding: 0 0.5rem;
  }

  .projects-title {
    font-size: 2rem;
  }

  .projects-subtitle {
    font-size: 1rem;
    line-height: 1.6;
  }
}