/*--------------------------------------------------------------
# Portfolio Cards - FIXED VERSION
# Addresses:
# 1. Consistent <p> positioning across all cards
# 2. Hover size matches active card (prevents border-radius cutoff)
# 3. Gradient text hover effect on both p text and arrow
# 4. Arrow icon properly hidden on load, shown on hover
# 5. Maintains specific background-size and background-position per card
# 6. ACCORDION BEHAVIOR: Only one card expanded at a time
--------------------------------------------------------------*/

/* ===== VARIABLES FOR EASY ADJUSTMENT ===== */
:root {
  /* Border radius - Override Bootstrap */
  --card-border-radius: 8px;
  
  /* Content spacing - STANDARDIZED */
  --card-content-bottom: 0px;
  --card-content-left: 20px;
  --card-content-right: 20px;
  --card-content-padding-top: 20px;
  --card-content-padding-bottom: 20px;
  
  /* Hover background */
  --card-hover-bg-color: #000000e8;
  --card-hover-bg-padding-top: 20px;
  
  /* Arrow icon */
  --card-arrow-size: 20px;
  --card-arrow-spacing: 20px;
  --card-arrow-color: #fff;
  
  /* Card dimensions */
  --card-min-height: 400px;
  --card-gap: 20px;
  
  /* Background image scale on hover */
  --card-bg-scale-hover: 1.1;
  
  /* FIXED: Active and hover flex values should match */
  --card-flex-normal: 1;
  --card-flex-expanded: 2.5;
}

/* ===== BOOTSTRAP OVERRIDES - Critical! ===== */
.card-container .card,
#portfolio .card,
#portfolio.portfolio .card {
  --bs-card-border-radius: var(--card-border-radius) !important;
  --bs-card-inner-border-radius: calc(var(--card-border-radius) - 1px) !important;
  border-radius: var(--card-border-radius) !important;
}

/* Force border-radius on all states */
.card-container .card,
.card-container .card.active,
.card-container .card:hover,
.card-container:hover .card,
#portfolio .card,
#portfolio .card.active,
#portfolio .card:hover {
  border-radius: var(--card-border-radius) !important;
  -webkit-border-radius: var(--card-border-radius) !important;
  overflow: hidden !important;
}

/* ===== Card Container ===== */
.card-container {
  display: flex;
  margin: 0 auto;
  gap: var(--card-gap);
  max-width: 81.85vw;
  height: var(--card-min-height);
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  border-radius: var(--card-border-radius);
}

/* ===== Card Base Styles ===== */
.card-container .card,
#portfolio.portfolio .card {
  flex: var(--card-flex-normal) 1 0% !important;
  position: relative;
  border-radius: var(--card-border-radius) !important;
  overflow: hidden !important;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-color: rgb(238 238 238 / 30%);
  border: transparent;
  /* FIXED: Consistent transition for all states */
  transition: flex 0.55s cubic-bezier(.2,.9,.2,1);
  min-height: var(--card-min-height);
  
  /* Override Bootstrap defaults */
  background-clip: border-box !important;
  height: auto !important;
  flex-direction: row !important;
  display: block !important;
}

/* ===== Pseudo-element for background image (Fix for scale issue) ===== */
.card-container .card::after,
#portfolio.portfolio .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  transition: transform 0.55s ease;
  z-index: 0;
  border-radius: var(--card-border-radius);
}

.card-container .card:hover::after,
#portfolio.portfolio .card:hover::after {
  transform: scale(var(--card-bg-scale-hover));
}

/* Gradient overlay */
.card-container .card::before,
#portfolio.portfolio .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));
  z-index: 1;
  pointer-events: none;
}

/* ===== FIXED: Content styling - CONSISTENT POSITIONING FOR ALL CARDS ===== */
.card-container .card .content,
#portfolio.portfolio .card .content {
  position: absolute !important;
  bottom: var(--card-content-bottom) !important;
  left: var(--card-content-left) !important;
  right: var(--card-content-right) !important;
  z-index: 3;
  color: #fff;
  opacity: 0.85;
  padding: var(--card-content-padding-top) 0 var(--card-content-padding-bottom) 0;
  transition: opacity 0.25s ease;
}

.card-container .card:hover .content,
#portfolio.portfolio .card:hover .content {
  opacity: 1;
}

/* ===== Hover background behind text ===== */
.card-container .card .content::before,
#portfolio.portfolio .card .content::before {
  content: "";
  position: absolute;
  left: calc(var(--card-content-left) * -1);
  right: calc(var(--card-content-right) * -1);
  top: calc(var(--card-hover-bg-padding-top) * -1);
  bottom: calc(var(--card-content-padding-bottom) * -1);
  background: var(--card-hover-bg-color);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: -1;
  pointer-events: none;
}

.card-container .card:hover .content::before,
#portfolio.portfolio .card:hover .content::before {
  opacity: 1;
}

/* ===== FIXED: Portfolio content paragraph - STANDARDIZED ===== */
#portfolio.portfolio .card .content p {
  width: 95% !important;
  font-size: 13px !important;
  font-weight: 100 !important;
  letter-spacing: 0.044rem !important;
  line-height: 1.15rem !important;
  margin-bottom: 0px !important;
  padding-right: 5%;
  position: relative;
  display: inline-block;
  transition: all 0.25s ease;
}

/* ===== FIXED: Arrow icon - HIDDEN ON LOAD, SHOWN ON HOVER ===== */
#portfolio.portfolio .card .content p::after {
  content: "";
  display: inline-block;
  width: 0; /* START AT 0 WIDTH */
  height: var(--card-arrow-size);
  margin-left: 0; /* START AT 0 MARGIN */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.25s ease, filter 0.25s ease, width 0.25s ease, margin-left 0.25s ease;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

#portfolio.portfolio .card:hover .content p::after {
  opacity: 1;
  width: var(--card-arrow-size); /* EXPAND TO FULL WIDTH ON HOVER */
  margin-left: var(--card-arrow-spacing); /* ADD MARGIN ON HOVER */
  /* Gradient effect for arrow on hover */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e990ff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
}

/* ===== FIXED: Default expanded (first card) - matches hover size ===== */
/* CRITICAL: .active card must ALWAYS be 2.5 unless card-container is hovered */
.card-container .card.active,
#portfolio.portfolio .card.active,
.card-container .card.active:not(:hover),
#portfolio.portfolio .card.active:not(:hover) {
  flex: var(--card-flex-expanded) 1 0% !important;
  border-radius: var(--card-border-radius) !important;
}

/* ===== FIXED: ACCORDION BEHAVIOR - Only one card expanded at a time ===== */
/* When the card-container itself is DIRECTLY hovered, shrink the .active card to normal size */
.card-container:hover .card.active,
#portfolio.portfolio .card-container:hover .card.active,
.card-container:hover .card.active:not(:hover),
#portfolio.portfolio .card-container:hover .card.active:not(:hover) {
  flex: var(--card-flex-normal) 1 0% !important;
  border-radius: var(--card-border-radius) !important;
}

/* Expand the hovered card to large size */
.card-container .card:hover,
#portfolio.portfolio .card:hover,
.card-container:hover .card:hover,
#portfolio.portfolio .card-container:hover .card:hover {
  flex: var(--card-flex-expanded) 1 0% !important;
  border-radius: var(--card-border-radius) !important;
}

/* Multiple card containers */
.card-container + .card-container {
  margin-top: 22px;
  margin-bottom: 200px;
}

.wrap section {
  padding: 0px;
}

/* ===== SPECIFIC CARD VARIANTS ===== */

/* Animated background card variant */
.card.animated-bg {
  background: none !important;
  background-color: #000 !important;
  position: relative;
  border-radius: var(--card-border-radius) !important;
  overflow: hidden !important;
}

.card.animated-bg::before {
  content: none !important;
  background-color: #000;
}

.card.animated-bg::after {
  display: none !important;
}

.card.animated-bg .cluster-wrap {
  position: absolute;
  inset: 0;
  z-index: 1; 
  overflow: hidden;
  transition: transform 0.55s ease;
  border-radius: var(--card-border-radius);
}

.card.animated-bg:hover .cluster-wrap {
  transform: scale(var(--card-bg-scale-hover));
}

.card.animated-bg .content {
  position: absolute;
  z-index: 3;
}

/* FIXED: Override for animated-bg cards */
#portfolio.portfolio .card.animated-bg .content p {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Gradient behind cards */
.gradationCircleCards::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 67%;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  background: conic-gradient(from 900deg at 50% 50%, rgb(110 86 255) 0deg, rgb(110 86 255) 180deg, #ff54c2 180deg, #ff54c2 360deg);
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

/* ===== DoD PMA Card ===== */
/*#portfolio.portfolio .card.dodpm-promo {
  position: relative;
  overflow: hidden !important;
  height: 400px;
  background-image: 
    linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.25) 2px, transparent 4px),
    linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, .10)),
    url(../img/portfolio/jetf35c.png);
  background-size: 400px 400px, 40px 40px, cover, 230%;
  background-position: center, -1px -1px, center, 70%;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  background-blend-mode: normal;
  border: 1px solid #000000b0;
  border-radius: var(--card-border-radius) !important;
}

#portfolio.portfolio .card.dodpm-promo:hover {
  position: relative;
  overflow: hidden !important;
  height: 400px;
  background-image: 
    linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.25) 2px, transparent 4px),
    linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, .10)),
    url(../img/portfolio/jetf35c.png);
  background-size: 400px 400px, 40px 40px, cover, 130%;
  background-position: center, -1px -1px, center, 60%;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  background-blend-mode: normal;
  border: 1px solid #000000b0;
  border-radius: var(--card-border-radius) !important;
}*/

/* Add this after your existing dodpm-promo styles */

#portfolio.portfolio .card.dodpm-promo::after {
  background-image: 
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' overflow='visible'>\
      <circle cx='40' cy='40' r='20' fill='none' stroke='%23ffd300' stroke-width='1'/>\
      <circle cx='40' cy='40' r='22' fill='none' stroke='%23ffd300' stroke-width='1'/>\
      <circle cx='40' cy='40' r='24' fill='none' stroke='%23ffd300' stroke-width='1'/>\
      <circle cx='40' cy='40' r='26' fill='none' stroke='%23ffd300' stroke-width='1'/>\
      <circle cx='40' cy='40' r='28' fill='none' stroke='%23ffd300' stroke-width='1'/>\
      <circle cx='40' cy='40' r='30' fill='none' stroke='%23ffd300' stroke-width='1'/>\
    </svg>"),
    linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.20) 2px, transparent 4px),
    linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 200.3)),
    url(../img/portfolio/jetf35c.png);
  background-size: 50px 50px, cover, 40px 40px, cover, 230%;
  background-position: center, center, -1px -1px, center, 70%;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
}

#portfolio.portfolio .card.dodpm-promo:hover::after {
  background-image:
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' overflow='visible'>\
      <circle cx='40' cy='40' r='20' fill='none' stroke='%23ffd300' stroke-width='1'/>\
      <circle cx='40' cy='40' r='22' fill='none' stroke='%23ffd300' stroke-width='1'/>\
      <circle cx='40' cy='40' r='24' fill='none' stroke='%23ffd300' stroke-width='1'/>\
      <circle cx='40' cy='40' r='26' fill='none' stroke='%23ffd300' stroke-width='1'/>\
      <circle cx='40' cy='40' r='28' fill='none' stroke='%23ffd300' stroke-width='1'/>\
      <circle cx='40' cy='40' r='30' fill='none' stroke='%23ffd300' stroke-width='1'/>\
    </svg>"),
    linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 2px, transparent 4px),
    linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, .30)),
    url(../img/portfolio/jetf35c.png);
  background-size: 64px 64px, cover, 40px 40px, cover, 210%;
  background-position: center, center, -1px -1px, center, 77.5% 70%;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  transform: scale(1.1); /* This will still apply the zoom effect */
}



#portfolio.portfolio .card.dodpm-promo::after {
  /*background-size: 400px 400px, 40px 40px, cover, cover;*/
  background-size: 64px 64px,cover, 40px 40px, cover, 240%;

  background-position: center,center, -1px -1px, center, 70%;
}

#portfolio.portfolio .card.dodpm-promo:hover {
  border-radius: var(--card-border-radius) !important;
}

/* FIXED: Ensure p positioning is consistent */
.card.dodpm-promo .content p {
  margin-bottom: 20px !important;
}

/* ===== DoD AIF Card ===== */
#portfolio.portfolio #card-dodaif2 {
  position: relative;
  height: 400px;
  min-height: 400px;
  background: 
    linear-gradient(30deg,rgba(0, 0, 0, .75) 0%, rgba(7, 7, 54, .75) 50%, rgba(5, 38, 87, .75) 100%),
    url(../img/dots.png), 
    url("../img/portfolio/bg-blur-dodfs.png");
  background-size: cover;
  background-repeat: repeat, no-repeat;
  background-position: top, center, center;
  background-blend-mode: normal;
  border-radius: var(--card-border-radius) !important;
}

#portfolio.portfolio #card-dodaif2::after {
  background-size: cover;
  background-repeat: repeat, no-repeat;
  background-position: top, center, center;
}

#portfolio.portfolio #card-dodaif2:hover {
  border-radius: var(--card-border-radius) !important;
}






























/*======================================================================
  DODAIF2 CARD - WITH COMPLETE BACKGROUND GRADIENT
======================================================================*/

#card-dodaif2,
#card-dodaif2.dodaif-promo2,
.card.dodaif-promo2 {
  position: relative;
  height: 400px;
  min-height: 400px;
  
  /* RESTORED: Complete background with gradient */
  background: 
    linear-gradient(30deg, rgba(0, 0, 0, .75) 0%, rgba(7, 7, 54, .75) 50%, rgba(5, 38, 87, .75) 100%),
    url(../img/dots.png), 
    url(../img/portfolio/bg-blur-dodfs.png);
  background-size: cover;
  background-repeat: repeat, no-repeat;
  background-position: top, center, center;
  background-blend-mode: normal;
  
  border-radius: var(--card-border-radius) !important;
  overflow: hidden !important;
}

/* SVG positioning and visibility */
#card-dodaif2.dodaif-promo2 svg {
  position: absolute;
  /*top: -25%;
  left: -25%;*/
  top: 0;
  left: 0;
  /*width: 180%;
  height: 160%;*/
  width: 200%;
  height: 200%;
  display: block;
  transform-origin: 25% 25%;
  animation: rotation 200s infinite linear;
  filter: blur(25px);
  -webkit-filter: blur(25px);
  z-index: 1 !important;
  pointer-events: none;
  opacity: .6 !important;
  visibility: visible !important;
}

/* Hover state for SVG */
#card-dodaif2.dodaif-promo2:hover svg {
/*  top: -50%;
  left: -50%;
  width: 400%;
  height: 400%;
  transform-origin: 50% 50%;
  animation: rotation 200s infinite linear;
  filter: blur(50px);
  -webkit-filter: blur(50px);
  filter: blur(5px);
  -webkit-filter: blur(8px);
  z-index: 1 !important;*/
  display: none;
}

/* SVG path styling */
#card-dodaif2.dodaif-promo2 svg path {
  stroke-width: 60px;
  stroke-opacity: 0.4;
  fill-opacity: 0.6;
  stroke: #4F46E5:
  /*stroke: #b047ff;*/
  fill: #ff00d8;
}

/* Rotation animation */
@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Content layer - above SVG */
#card-dodaif2 .content,
#card-dodaif2.dodaif-promo2 .content {
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px;
  text-align: left;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  background: none;
  z-index: 2 !important;
  pointer-events: none;
}

#card-dodaif2.dodaif-promo2 {
  pointer-events: auto;
}

.cluster-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    linear-gradient(30deg, rgba(0, 0, 0, .75) 0%, rgba(7, 7, 54, .75) 50%, rgba(5, 38, 87, .75) 100%), 
    url(../img/dots.png), 
    url(../img/portfolio/bg-blur-dodfs.png);
  background-size: cover;
  background-repeat: repeat, no-repeat;
  background-position: top, center, center;
  background-blend-mode: normal;
}

/* End - New DoD blob */





























/* ===== HRSA Card ===== */
#portfolio.portfolio .card.hrsaots-promo {
  background: repeating-linear-gradient(to bottom, #009cffb3 4px, #009cffb3, #d0ecff1f 4px), 
    url(../img/portfolio/portfolio-page-hero-hrsaots.png);
  background-size: cover, cover;
  background-position: -180px;
  background-repeat: repeat, no-repeat;
  border-radius: var(--card-border-radius) !important;
}

#portfolio.portfolio .card.hrsaots-promo::after {
  background-size: cover, cover;
  background-position: -180px;
  background-repeat: repeat, no-repeat;
}

#portfolio.portfolio .card.hrsaots-promo:hover {
  border-radius: var(--card-border-radius) !important;
  background-position: center;
}

#portfolio.portfolio .card.hrsaots-promo:hover::after {
  background-position: center;
}

/* ===== IRS DS Card ===== */
#portfolio.portfolio .card.irsds-promo {
  background: url('../img/portfolio/promo-irs-ds.jpg');
  background-size: auto;
  background-position: 54% -142px;
  background-repeat: no-repeat;
  border-radius: var(--card-border-radius) !important;
}

#portfolio.portfolio .card.irsds-promo::after {
  background-size: auto;
  background-position: 54% -142px;
  background-repeat: no-repeat;
}

#portfolio.portfolio .card.irsds-promo:hover {
  border-radius: var(--card-border-radius) !important;
  background-position: -107px -141px;
}

#portfolio.portfolio .card.irsds-promo:hover::after {
  background-position: -107px -141px;
}

/* ===== SaaS Card ===== */
#portfolio.portfolio .card.saasfs-promo {
  position: relative;
  height: 400px !important;
  background-image: url("../img/portfolio/promo-saasfs.png");
  background-size: cover;
  background-position: 50% 52%;
  background-repeat: no-repeat;
  overflow: hidden !important;
  border-radius: var(--card-border-radius) !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

#portfolio.portfolio .card.saasfs-promo::after {
  background-size: cover;
  background-position: 50% 52%;
  background-repeat: no-repeat;
}

#portfolio.portfolio .card.saasfs-promo:hover {
  border-radius: var(--card-border-radius) !important;
}

/* FIXED: Override for saasfs-promo */
.card.saasfs-promo .content p {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ===== IRS RR Card ===== */
#portfolio.portfolio .card.irsrr-promo {
  background: url('../img/portfolio/promo-irs-rr.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--card-border-radius) !important;
}

#portfolio.portfolio .card.irsrr-promo::after {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#portfolio.portfolio .card.irsrr-promo:hover {
  border-radius: var(--card-border-radius) !important;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet - 1024px and below */
/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet - 1024px and below */
@media (max-width: 1024px) {
  :root {
    --card-min-height: 400px; /* Keep full height like HRSA */
    --card-gap: 20px;
  }

  .card-container {
    flex-direction: column;
    height: auto;
  }

  .card-container .card,
  #portfolio.portfolio .card {
    flex: 1 1 100% !important;
    width: 100%;
    height: var(--card-min-height) !important;
    min-height: var(--card-min-height) !important;
    border-radius: var(--card-border-radius) !important;
  }

  /* Override all specific card heights */
  .card.saasfs-promo,
  .card.saasfs-promo.active,
  .card.dodpm-promo,
  #card-dodaif2,
  .card.dodaif-promo2,
  .card.hrsaots-promo,
  .card.irsds-promo,
  .card.irsrr-promo,
  .card.animated-bg {
    height: var(--card-min-height) !important;
    min-height: var(--card-min-height) !important;
  }

  .card-container:hover .card,
  .card-container .card:hover,
  .card.active {
    flex: 1 1 100% !important;
    height: var(--card-min-height) !important;
    border-radius: var(--card-border-radius) !important;
  }
}

/* Tablet - 992px and below */
@media (max-width: 992px) {
  :root {
    --card-min-height: 400px; /* Keep full height */
    --card-gap: 40px;
    --card-content-padding-bottom: 15px;
    --card-arrow-size: 18px;
    --card-arrow-spacing: 15px;
  }

  .wrap {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 40px;
  }

  .card-container {
    gap: var(--card-gap);
  }  

  .card-container + .card-container {
    margin-top: 40px;
    margin-bottom: 60px;
  }

  /* All cards use consistent height */
  .card-container .card,
  #card-dodaif2,
  .card.saasfs-promo,
  .card.dodpm-promo,
  .card.irsds-promo,
  .card.hrsaots-promo {
    height: var(--card-min-height) !important;
    min-height: var(--card-min-height) !important;
    border-radius: var(--card-border-radius) !important;
  }

  .card.irsds-promo {
    background-position: 54.5% -185px;
  }

  .card.irsds-promo::after {
    background-position: 54.5% -185px;
  }

  .card,
  .card.active,
  .card.active:hover {
    border-radius: var(--card-border-radius) !important;
  }

  #portfolio.portfolio .card .content p {
    font-size: 12px;
    width: 90%;
  }
}

/* Mobile - 600px and below */
@media (max-width: 600px) {
  :root {
    --card-min-height: 400px; /* Keep full height even on mobile */
    --card-arrow-size: 16px;
    --card-arrow-spacing: 12px;
    --card-content-left: 15px;
    --card-content-right: 15px;
  }

  .card-container .card,
  #portfolio.portfolio .card,
  #card-dodaif2,
  .card.hrsaots-promo {
    flex: 1 1 100%;
    height: var(--card-min-height) !important;
    min-height: var(--card-min-height) !important;
    border-radius: var(--card-border-radius) !important;
  }

  .card-container:hover .card,
  .card-container .card:hover {
    flex: 1 1 100%;
    border-radius: var(--card-border-radius) !important;
  }

  #portfolio.portfolio .card .content p {
    font-size: 11px;
    width: 85%;
  }
}

/* Desktop range - 768px to 1100px */
@media (min-width: 768px) and (max-width: 1100px) {
  .card.active {
    flex: 100%;
    border-radius: var(--card-border-radius) !important;
  }
}