.wrap p {
    font-size: 14px;
}

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Wrapper */
.wrap {
  width: 100%;
  /*max-width: 1400px;*/
  /*max-width: 81.85vw;*/
  /*margin: 32px auto;*/
  margin: 0 auto;
  padding: 32px 10px;
  background-color: black;
}

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

/* ===== Card ===== */
.card {
  flex: 1 1 0%;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-color: rgb(238 238 238 / 30%);
  transition: flex 0.55s cubic-bezier(.2,.9,.2,1), transform 0.35s ease;
  min-height: 400px;
}

/* Gradient overlay */
.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;
}

/* Content styling */
.card .content {
  position: absolute;
  bottom: 0px;
  left: 20px;
  right: 20px;
  z-index: 2;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}


.card:hover .content {
  opacity: 1;
  transform: translateY(-6px);
}

/* Default expanded (first card) */
.card.active {
  flex: 2.5 1 0%;
}

/* Hover expansion */
.card-container:hover .card {
  flex: 1 1 0%;
}

.card-container .card:hover {
  flex: 2.5 1 0%;
  transform: scale(1.02);
}

.card-container + .card-container {
  margin-top: 22px;
  margin-bottom: 140px;
}

.wrap section {
    padding: 0px;
}


/* Specific Promos */

/* Animated background card variant */
.card.animated-bg {
  background: none !important; /* disable static background image */
  background: #000 !important; 
  background-color: #000 !important;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

/* Hide the default overlay gradient on animated-bg cards */
.card.animated-bg::before {
  content: none !important;
  background-color: #000;
}

/* Canvas wrapper stays behind the content */
.card.animated-bg .cluster-wrap {
  position: absolute;
  inset: 0;
  z-index: 1; 
  overflow: hidden;
}

/* Ensure text/content sits above the animation */
.card.animated-bg .content {
  position: absolute;
  z-index: 2;
}

.card.animated-bg .content p {
  margin-bottom: 0;
  padding-bottom: 0;
}

.card.saasfs-promo p {
  margin-bottom: 0;
  padding-bottom: 15px;
}


/*.card.hrsaText {
  position: relative;
  height: 400px;
  min-height: 400px;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.25) 0%,           
      rgba(255, 255, 255, 0) 50%            
    ),
    url("../img/portfolio/promo-hrsaots.png");
  background-size:
    100% calc(400px / 20), 
    cover;
  background-repeat: repeat, no-repeat;
  background-position: top, center;
  background-blend-mode: normal;
  background-color: #000; 
}*/


.card.hrsaText {
  position: relative;
  height: 400px;
  min-height: 400px;
  background-image:
    url("../img/portfolio/promo-hrsaots.png");
  background-size: cover;
  background-repeat: repeat, no-repeat;
  background-position: top, center;
  background-blend-mode: normal;
  background-color: #000; 
}

/* Begin  Mission Readiness tool */
.card.dodpm-promo {
  position: relative;
  overflow: hidden;
  height: 400px;
  /*background-image: url("../img/portfolio/promo-dodpm.png");
  background-size: cover;
  background-position: center;*/
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.25) 2px, transparent 4px), url(../img/portfolio/portfolio-page-hero-dodpm.png);
  background-size: 40px 40px, cover;
  background-position: -1px -1px, center;
  background-repeat: repeat, no-repeat;
  background-blend-mode: normal;
}

/* --- Base dark gradient overlay (for text contrast) --- */
.card.dodpm-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

.card.dodpm-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  
  background-image: 
    /*url("../img/portfolio/bg-transparent.png"),*/
    repeating-linear-gradient(to right, #ff0000 0, #ff0000 5px, transparent 5px, transparent 55px),
    repeating-linear-gradient(to right, #ffffff 0, #ffffff 5px, transparent 5px, transparent 55px),
    repeating-linear-gradient(to right, #ffffff 0, #ffffff 1px, transparent 1px, transparent 15px), /* hash marks */
    repeating-linear-gradient(to right, #ffffff 0, #ffffff 1px, transparent 1px, transparent 15px), /* hash marks */
    repeating-linear-gradient(to right, #ffffff 0, #ffffff 1px, transparent 1px, transparent 4px), /* hash marks */
    repeating-linear-gradient(to right, #ffffff 0, #ffffff 1px, transparent 1px, transparent 4px), /* hash marks */
    repeating-linear-gradient(to bottom, rgba(192, 192, 192, 0.15) 0px, rgba(0, 255, 255, 0.35) 400px, transparent 4px, transparent 8px), /* vert band */
    /*linear-gradient(to right, rgba(255, 255, 255, .5) 5px, transparent 5px),  rectangles */
    /*linear-gradient(to bottom, rgba(255, 255, 255, .5) 5px, transparent 5px),  rectangles */
    linear-gradient(to right, rgba(30, 144, 255, 0.02) 1px, transparent 1px), /* Begin grid */
    linear-gradient(to bottom, rgba(192, 192, 192, 0.02) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 1px, transparent 1px); /* End grid */
    

  background-size: 
    /*cover,*/
    30px 5px, /* line of rectangles - red */
    30px 5px, /* line of rectangles - white */
    30px 15px, /* hash marks */
    30px 15px, /* hash marks */
    30px 5px, /* hash marks */
    30px 5px, /* hash marks */
    2px 100%,  /* vert band */
    /*16px 4px,  rectangles */
    /*16px 4px,  rectangles */
    20px 80px, /* Begin grid */
    20px 80px, 
    10px 40px, 
    10px 40px; /* End grid */
    

  background-position: 
    /* 0 0,*/
    6px 310px,  /*  0 310px, line of rectangles - red */
    6px 330px, /* line of rectangles - white */
    0 192px, /* hash marks */
    0 310px, /* hash marks */
    0 198px, /* hash marks */
    0 320px, /* hash marks */
    0 0, /* vert band */
    4px 0, /* vert band */
    /*0 100px,  rectangles */
    /*0 100px,  rectangles */
    0 0, /* Begin grid */
    0 0, 
    0 0, 
    0 0; /* End grid */

  background-repeat: 
    repeat-x,
    repeat-x,
    repeat-x,
    repeat-x,
    repeat-x,
    repeat-x,
    repeat,
    repeat,
    repeat,
    repeat,
    repeat,
    repeat;
}

/* --- Hover effect --- */
.card.dodpm-promo:hover::after {
 background-image: 
    /*url("../img/portfolio/bg-transparent.png"),*/
    radial-gradient(circle, white 0%, rgba(255, 255, 255, 0) 100%),

    repeating-linear-gradient(to right, #ff0000 0, #ff0000 5px, transparent 5px, transparent 55px),
    repeating-linear-gradient(to right, #ffffff 0, #ffffff 5px, transparent 5px, transparent 55px),
    repeating-linear-gradient(to right, #ffffff 0, #ffffff 1px, transparent 1px, transparent 15px), /* hash marks */
    repeating-linear-gradient(to right, #ffffff 0, #ffffff 1px, transparent 1px, transparent 4px), /* hash marks */
    repeating-linear-gradient(to right, #ffffff 0, #ffffff 1px, transparent 1px, transparent 4px), /* hash marks */
    /*repeating-linear-gradient(to bottom, rgba(255, 0, 255, 0.35) 0px, rgba(255, 138, 243, 0.15) 400px, transparent 4px, transparent 8px), /* vert band */
    repeating-linear-gradient(to bottom, rgba(150, 218, 255, 0.55) 0px, rgba(255, 138, 243, 0.15) 400px, transparent 4px, transparent 8px),
    repeating-linear-gradient(to bottom, rgba(75, 0, 130, 0.15) 0px, rgba(149, 232, 244, 0.5) 400px, transparent 5px, transparent 10px), /* vert band */
    /*linear-gradient(to right, rgba(255, 255, 255, .5) 5px, transparent 5px),  rectangles */
    /*linear-gradient(to bottom, rgba(255, 255, 255, .5) 5px, transparent 5px),  rectangles */
    
    linear-gradient(to right, rgba(30, 144, 255, 0.05) 1px, transparent 1px), /* Begin grid */
    linear-gradient(to bottom, rgba(192, 192, 192, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 1px, transparent 1px); /* End grid */
    

  background-size: 
    /*cover,*/
    50px 50px,
    30px 5px, /* line of rectangles - red */
    30px 5px, /* line of rectangles - white */
    30px 15px, /* hash marks */
    30px 5px, /* hash marks */
    30px 5px, /* hash marks */
    2px 100%,  /* vert band */
    /*16px 4px,  rectangles */
    /*16px 4px,  rectangles */
    20px 80px, /* Begin grid */
    20px 80px, 
    10px 40px, 
    10px 40px; /* End grid */
    

  background-position: 
    /* 0 0,*/
    center center,
    0 310px, /* line of rectangles - red */
    0 330px, /* line of rectangles - white */
    0 192px, /* hash marks */
    0 198px, /* hash marks */
    0 320px, /* hash marks */
    0 0, /* vert band */
    4px 0, /* vert band */
    /*0 100px,  rectangles */
    /*0 100px,  rectangles */
    0 0, /* Begin grid */
    0 0, 
    0 0, 
    0 0; /* End grid */

  background-repeat: 
    no-repeat,
    repeat-x,
    repeat-x,
    repeat-x,
    repeat-x,
    repeat-x,
    repeat,
    repeat,
    repeat,
    repeat,
    repeat,
    repeat;
}

.dot {
  width: 2px;
  height: 2px;
  background-color: white;
  position: absolute;
 } 

/* --- Content always above overlays --- */
.card.dodpm-promo .content {
  position: absolute;
  z-index: 2;
  bottom: 0px;
  left: 20px;
  right: 20px;
  color: #fff;
}


/* BEGIN DODPM promo */
    /* --- STATIC CIRCLE --- */
    #card-dodpm.dodpm-promo .circle {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1; /* above section’s ::before/::after */
      overflow: visible;
      border: 1px solid rgba(255, 255, 255, .25);
      /*border: 1px solid #fff;*/
    }


    #card-dodpm.dodpm-promo .circle::after {
      content: "";
      display: block;
      width: 340px;
      height: 340px;
      background-color: white;
      border-radius: 50%;
      /*animation: pulse-size 8s infinite ease-in-out;*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.1;
      border: 1px solid rgba(255, 255, 255, 1);
    }

    /* --- INNER PULSE --- */
    #card-dodpm.dodpm-promo .circle::before {
      content: "";
      display: block;
      width: 25px;
      height: 25px;
      background-color: white;
      border-radius: 50%;
      animation: pulse-size 10s infinite ease-in-out;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); 
    }

    @keyframes pulse-size {
      0% {
        width: 5px;
        height: 5px;
        opacity: 0;
      }
      50% {
        width: 60px;
        height: 60px;
        opacity: 0.35;
      }
      100% {
        width: 5px;
        height: 5px;
        opacity: 0;
      }
    }

/* END DODPM promo */



















  /* BEGIN - test of new DODAIF*/

#card-dodaif2 {
  position: relative;
  height: 400px;
  min-height: 400px;
/*  background-image:
    url("../img/portfolio/bg-blur-dodfs.png");*/


  background: 
    linear-gradient(30deg,rgba(0, 0, 0, .75) 0%, rgba(7, 7, 54, .75) 50%, rgba(5, 38, 87, .75) 100%), 
    url("../img/portfolio/bg-blur-dodfs.png");
  background-size: cover;
  background-repeat: repeat, no-repeat;
  background-position: top, center;
  background-blend-mode: normal;
  /*transform: rotate(45deg);*/
  /*background-color: #000; */
  /*background: #000000;
  background: linear-gradient(30deg,rgba(0, 0, 0, 1) 0%, rgba(7, 7, 54, 1) 50%, rgba(5, 38, 87, 1) 100%);*/
}

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

.card.dodaif-promo2 {
  background-image: url("../img/portfolio/bg-blur-dodfs.png"); 
  /*background-position: -120px 0px;*/
}


  #card-dodaif2 .content {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 0 20px;
    text-align: left;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  }

  svg {
    width: 100%;
    height: 100%;
    display: block;
      /* This ensures the rotation happens around the center of the SVG */
    transform-origin: 50% 50%;
    animation: rotation 40s infinite linear; /* Tweak 10s for speed */
    filter: blur(5px); /* Adjust the pixel value for the desired blur intensity */
    -webkit-filter: blur(8px); /* For older WebKit browsers */
    }
    /* Define the rotation animation */
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      /* Rotating to 360deg creates a smooth, seamless loop */
      transform: rotate(360deg);
    }
  }

  path {
    /* light blue*/
    /*stroke: #5ce1e6;
    fill: #5ce1e6;*/
    /*stroke-width: 30px;*/
    stroke-width: 40px;
    stroke-opacity: 0.2;
    /*fill-opacity: 0.7;*/    
    fill-opacity: .5;
    stroke: #b047ff;
    fill: #b047ff;
      }

  /* END - test of new DODAIF*/




















/* --- End Mission Readiness tool --- */


.card.hrsaots-promo {
  background-image: url("../img/portfolio/promo-hrsaots.png"); 
  /*background-position: -120px 0px;*/
}

.card.hrsaots-promo:hover {
  /*background-position: 0px -125px;
  flex: 2.5 1 0%;
  transform: scale(1.02);*/
}


    /*position: relative;*/
/*  .card.hrsaots-promo {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    text-decoration: none;
  }
  .card.hrsaots-promo .content {
    width: 100%;
    height: 100%;
    
    position: absolute;
  }*/
/*position: relative;*/



/* --- SaaS Promo Card --- */
.card.saasfs-promo {
  position: relative;
  height: 400px !important;
  background-image: url("../img/portfolio/promo-saasfs.png");
  background-size: cover;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-size 0.8s ease, box-shadow 0.35s ease;
}

.card.saasfs-promo::before {
  background-image: 
    radial-gradient(circle at bottom left, rgba(2, 48, 122, 0.6) 0%, transparent 65%),
    radial-gradient(circle at top right, rgba(255, 231, 10, 0.2) 0%, transparent 85%);
  background-size: 
    900px 400px, 
    900px 400px;
  background-position: 
    0% 100%, 
    100% 0%;  
  background-repeat: no-repeat;
}

.card-container .card:hover.saasfs-promo,
.card.saasfs-promo:hover,
.card.saasfs-promo.active {
  background-size: cover;
  /*box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);*/
}


.card.active:hover,
.card.active {
  border-radius: 6px;
}

/* --- Texture overlay --- */
.card.saasfs-promo .texture {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5px; /* spacing between groups */
  pointer-events: none;
  z-index: 1;
}

/* Each pill + stroke pair wrapper */
.card.saasfs-promo .pill-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card.saasfs-promo .pill-wrap:nth-child(2) {
  margin-left: 10px;
}

.card.saasfs-promo .pill-wrap:nth-child(3) {
  margin-right: 10px;
}

/* --- Blurred colored pill --- */
.card.saasfs-promo .pill {
  position: relative;
  width: 70px;
  border-radius: 999px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  filter: blur(18px);
  opacity: 1;
  z-index: 2;
}

.card.saasfs-promo .pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: inherit;
  filter: blur(90px);
  opacity: 0.8;
  z-index: -1;
}

/* --- White stroke (crisp, aligned) --- */
.card.saasfs-promo .pill-stroke {
  margin: 20px 5px;
  position: absolute;
  inset: 0;
  width: 44px;
  border-radius: 999px;
  border: 1px solid #fff;
  transform: rotate(45deg);
  background: transparent;
  z-index: 3;
  pointer-events: none;
}

/* --- Heights --- */
.card.saasfs-promo .pill-wrap:nth-of-type(1) .pill,
.card.saasfs-promo .pill-wrap:nth-of-type(4) .pill {
  height: 150px;
}

.card.saasfs-promo .pill-wrap:nth-of-type(2) .pill,
.card.saasfs-promo .pill-wrap:nth-of-type(3) .pill {
  height: 75px;
}



.card.saasfs-promo .pill-wrap:nth-of-type(1) .pill-stroke,
.card.saasfs-promo .pill-wrap:nth-of-type(4) .pill-stroke {
  height: 120px;
  border-color: #ff78ce;
}


.card.saasfs-promo .pill-wrap:nth-of-type(2) .pill-stroke,
.card.saasfs-promo .pill-wrap:nth-of-type(3) .pill-stroke {
  height: 45px;
  /*border-color: #ddff3c;*/
  border-color: #ff78ce;
}

.card.saasfs-promo .pill-wrap:nth-of-type(1) .pill-stroke,
.card.saasfs-promo .pill-wrap:nth-of-type(4) .pill-stroke, 
.card.saasfs-promo .pill-wrap:nth-of-type(2) .pill-stroke,
.card.saasfs-promo .pill-wrap:nth-of-type(3) .pill-stroke {
  border-color: #ddff3c;
}


/* --- Gradients --- */
/*.card.saasfs-promo .color1 { color:#ff2faf; background:linear-gradient(135deg,#ff7fd1,#ff2faf); }
.card.saasfs-promo .color2 { color:#ff1a1a; background:linear-gradient(135deg,#ff6666,#ff1a1a); }
.card.saasfs-promo .color3 { color:#ffd500; background:linear-gradient(135deg,#fff173,#ffd500); }
.card.saasfs-promo .color4 { color:#48d600; background:linear-gradient(135deg,#8dfc58,#48d600); }*/
.card.saasfs-promo .color1,
.card.saasfs-promo .color4 { color:#ff2faf; background:linear-gradient(135deg,#ff7fd1,#ff2faf); }
.card.saasfs-promo .color2,
.card.saasfs-promo .color3 { color:#ff2faf; background:linear-gradient(135deg,#ff7fd1,#ff2faf); } 
    /* { color:#811aff; background:linear-gradient(135deg,#a55cff,#811aff); }   - Purple*/
    /* { color:#d2ff00; background:linear-gradient(135deg,#e4ff66,#d2ff00); }   - lime image-rendering: ;*/



/* --- Text Layer --- */
.card.saasfs-promo .content {
  position: absolute;
  z-index: 5;
  color: #fff;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  padding: 1rem;
  backdrop-filter: blur(2px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}


/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .card-container {
    flex-wrap: wrap;
    height: auto;
  }

  .card {
    flex: 1 1 calc(50% - 12px);
    height: 300px;
    min-height: 300px;
  }

  .card-container:hover .card,
  .card-container .card:hover {
    flex: 1 1 calc(50% - 12px);
    transform: scale(1.03);
  }

  .card.saasfs-promo.active,
  .card.saasfs-promo,
  .card.dodpm-promo {
    height: 250px !important;
  }
}

@media (max-width: 992px) {

  .wrap {
    width: 100%;
    max-width: 84vw;
    margin: 32px auto;
    padding: 10px;
  }

  .wrap h4 {
    text-align: left;
  }

  .card {
    border-radius: 4px;
  }
}

@media (max-width: 600px) {
  .card {
    flex: 1 1 100%;
    height: 250px;
    min-height: 250px;
  }

  .card-container:hover .card,
  .card-container .card:hover {
    flex: 1 1 100%;
    transform: scale(1.02);
  }
}