/*--------------------------------------------------------------
# DODPM Hero - Final Clean Version
--------------------------------------------------------------*/

/* === APPROACH SECTION === */
#approach.approach {
  padding: 80px 0;
}

/* === BASE SECTION === */
#portfolio-details.dodpm {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  min-height: 500px;
  overflow: hidden;
  background-color: #000;
  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 GRADIENTS - BOTTOM LAYER === */
#portfolio-details.dodpm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%),
    radial-gradient(circle, rgb(0 18 54 / 75%) 0%, rgb(0 1 4 / 75%) 100%),
    linear-gradient(to right, rgb(24 40 72 / 99%) 0%, rgb(0 37 121 / 97%) 100%);
  background-size: 1px 500px, cover, cover;
  background-position: center center, center center, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* === CANVAS WRAPPER - MIDDLE LAYER === */
#portfolio-details.dodpm .canvas-wrapper {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: .45;
  pointer-events: none;
}

#portfolio-details.dodpm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
background-image:
    radial-gradient(circle, rgb(0 18 54 / 75%) 0%, rgb(0 1 4 / 75%) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%),  
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 65px),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.5) 5px, transparent 5px, transparent 100px),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.55) 1px, transparent 1px, transparent 100px),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(to bottom, rgba(192, 192, 192, 0.15) 0px, rgba(0, 255, 255, 0.35) 500px, transparent 4px, transparent 8px),

url(../img/portfolio/jetf35c.png),

    linear-gradient(to right, rgba(30, 144, 255, 0.005) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(192, 192, 192, 0.005) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px);

  background-size:
    cover,
    1px 500px, 
    500px 3px, 
    30px 5px, 
    30px 15px, 
    30px 5px, 
    30px 5px, 
    2px 100%, 

200%,

    60px 80px, 
    60px 80px, 
    20px 40px, 
    20px 40px;

  background-position:
    center center,
    center center,  
    0 255px, 
    0 255px, 
    0 232px, 
    0 238px, 
    0 255px, 
    0 0, 

center 190px,

    4px 0, 
    0 0, 
    0 0, 
    0 0;

  background-repeat:
    no-repeat,
    no-repeat, 
    repeat-x, 
    repeat-x, 
    repeat-x, 
    repeat-x, 
    repeat-x, 
    repeat, 

no-repeat,

    repeat, 
    repeat, 
    repeat, 
    repeat;
}



/* === CANVAS ELEMENT === */
canvas#bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* === STATIC CIRCLE === */
#portfolio-details.dodpm .circle {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at center, white 0%, rgba(255, 255, 255, 0) 50%);
  background-size: 400px 400px;
  background-repeat: no-repeat;
  background-position: center;
}

/* === OUTER CIRCLE === */
#portfolio-details.dodpm .circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  opacity: 0.1;
  background: radial-gradient(circle at center, white 100%, rgba(255, 255, 255, 1) 100%);
  background-size: 400px 400px;
  background-repeat: no-repeat;
  background-position: center;
}

/* === INNER PULSE === */
#portfolio-details.dodpm .circle::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  animation: pulse-size 10s infinite ease-in-out;
  background: radial-gradient(circle at center, white 100%, rgba(255, 255, 255, 1) 100%);
  background-size: 400px 400px;
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes pulse-size {
  0%, 100% {
    width: 5px;
    height: 5px;
    opacity: 0;
    background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%);
  }
  50% {
    width: 160px;
    height: 160px;
    opacity: 0.45;
    background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%);
  }
}

/* === SVG MORPHING SHAPE === */
#portfolio-details.dodpm svg {
  position: relative;
  width: 10%;
  height: auto;
  display: block;
  z-index: 4;
}

#portfolio-details.dodpm path {
  stroke: #fff;
  stroke-width: 0.01px;
  stroke-opacity: 0.1;
  fill-opacity: 0.95;
}

/* === TWINKLING DOTS === */
#portfolio-details.dodpm .dot {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  animation: twinkle 4s ease-in-out infinite;
  background-color: rgba(255, 255, 255, 0.4);
}

#portfolio-details.dodpm .dot:nth-child(2n) {
  animation-duration: 8s;
  animation-delay: 0.5s;
}

#portfolio-details.dodpm .dot:nth-child(3n) {
  animation-duration: 5s;
  animation-delay: 1s;
  background-color: rgba(92, 225, 230, 0.3);
}

#portfolio-details.dodpm .dot:nth-child(5n) {
  width: 3px;
  height: 3px;
  background-color: rgba(255, 49, 49, 0.3);
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# DODPM Hero - Final Clean Version
--------------------------------------------------------------*/

/* === APPROACH SECTION === */
#approach.approach {
  padding: 80px 0;
}

/* === BASE SECTION === */
#portfolio-details.dodpm {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  min-height: 500px;
  overflow: hidden;
  background-color: #000;
  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 GRADIENTS - BOTTOM LAYER === */
#portfolio-details.dodpm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  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>"),
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>"),
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>"),/*url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><circle cx="20" cy="20" r="10" fill="none" stroke="%23ffd300" padding="2px" overlflow="visible" stroke-width="1"/><circle cx="20" cy="20" r="12" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="14" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="16" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="18" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="20" fill="none" stroke="%23ffd300" stroke-width="1"/></svg>'),
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><circle cx="20" cy="20" r="10" fill="none" stroke="%23ffd300" padding="2px" overlflow="visible" stroke-width="1"/><circle cx="20" cy="20" r="12" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="14" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="16" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="18" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="20" fill="none" stroke="%23ffd300" stroke-width="1"/></svg>'),
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><circle cx="20" cy="20" r="10" fill="none" stroke="%23ffd300" padding="2px" overlflow="visible" stroke-width="1"/><circle cx="20" cy="20" r="12" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="14" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="16" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="18" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="20" fill="none" stroke="%23ffd300" stroke-width="1"/></svg>'),  */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%),
    radial-gradient(circle, rgb(0 18 54 / 75%) 0%, rgb(0 1 4 / 75%) 100%),
    linear-gradient(to right, rgb(24 40 72 / 99%) 0%, rgb(0 37 121 / 97%) 100%);
  
  background-size: 
    /* ADD SIZES FOR THE THREE INDICATORS */
    50px 50px,  /* indicator 1 */
    50px 50px,  /* indicator 2 */
    50px 50px,  /* indicator 3 */
    1px 500px, 
    cover, 
    cover;
  
  background-position: 
    /* ADD POSITIONS FOR THE THREE INDICATORS - Adjust these to match jet features */
    22% 52%,    /* indicator 1 - front of jet */
    35% 30%,    /* indicator 2 - middle of jet */
    40% 90%,    /* indicator 3 - back of jet */
    center center, 
    center center, 
    center center;
  
  background-repeat: 
      /* ADD NO-REPEAT FOR THE THREE INDICATORS */
    no-repeat,  /* indicator 1 */
    no-repeat,  /* indicator 2 */
    no-repeat,  /* indicator 3 */
    no-repeat, 
    no-repeat, 
    no-repeat;
}

/* === CANVAS WRAPPER - MIDDLE LAYER === */
#portfolio-details.dodpm .canvas-wrapper {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* === GRID OVERLAY - TOP LAYER ======================  Needed for lines to show above the bursting bubbles === */
#portfolio-details.dodpm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .3;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%),  
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 65px),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.5) 5px, transparent 5px, transparent 100px),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.55) 1px, transparent 1px, transparent 100px),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(to bottom, rgba(192, 192, 192, 0.15) 0px, rgba(0, 255, 255, 0.35) 500px, transparent 4px, transparent 8px),

    /* ADD THESE THREE INDICATOR SVGs BEFORE THE JET IMAGES */
    /*url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="10" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="12" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="14" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="16" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="18" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="20" fill="none" stroke="%23fe0000" stroke-width="1"/></svg>'),*/
    /*url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="20" cy="20" r="10" fill="none" stroke="#ffdd38" stroke-width="1"/><circle cx="20" cy="20" r="12" fill="none" stroke="#ffdd38" stroke-width="1"/><circle cx="20" cy="20" r="14" fill="none" stroke="#ffdd38" stroke-width="1"/><circle cx="20" cy="20" r="16" fill="none" stroke="#ffdd38" stroke-width="1"/><circle cx="20" cy="20" r="18" fill="none" stroke="#ffdd38" stroke-width="1"/></svg>'),*/
    /*url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="20" cy="20" r="10" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="12" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="14" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="16" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="18" fill="none" stroke="%23ffd300" stroke-width="1"/><circle cx="20" cy="20" r="20" fill="none" stroke="%23ffd300" stroke-width="1"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="10" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="12" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="14" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="16" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="18" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="20" fill="none" stroke="%23fe0000" stroke-width="1"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="10" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="12" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="14" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="16" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="18" fill="none" stroke="%23fe0000" stroke-width="1"/><circle cx="20" cy="20" r="20" fill="none" stroke="%23fe0000" stroke-width="1"/></svg>'),*/

    url(../img/portfolio/jetf35c.png),
    url(../img/portfolio/jetf35cP.png),

    linear-gradient(to right, rgba(30, 144, 255, 0.005) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(192, 192, 192, 0.005) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px);

  background-size: 
    1px 500px, 
    500px 3px, 
    30px 5px, 
    30px 15px, 
    30px 5px, 
    30px 5px, 
    2px 100%, 

    

    60%,
    18%,

    60px 80px, 
    60px 80px, 
    20px 40px, 
    20px 40px;

  background-position: 
    center center,  
    0 255px, 
    0 255px, 
    0 232px, 
    0 238px, 
    0 255px, 
    0 0, 



    13% center,
    84% 174px,

    4px 0, 
    0 0, 
    0 0, 
    0 0;

  background-repeat: 
    no-repeat,
    no-repeat, 
    repeat-x, 
    repeat-x, 
    repeat-x, 
    repeat-x, 
    repeat-x, 



    no-repeat,
    no-repeat,

    repeat, 
    repeat, 
    repeat, 
    repeat, 
    repeat;
}

/* === CANVAS ELEMENT === */
canvas#bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* === STATIC CIRCLE === */
#portfolio-details.dodpm .circle {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at center, white 0%, rgba(255, 255, 255, 0) 50%);
  background-size: 400px 400px;
  background-repeat: no-repeat;
  background-position: center;
}

/* === OUTER CIRCLE === */
/*#portfolio-details.dodpm .circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  opacity: 0.1;
  background: radial-gradient(circle at center, white 100%, rgba(255, 255, 255, 1) 100%);
  background-size: 400px 400px;
  background-repeat: no-repeat;
  background-position: center;
}*/
#portfolio-details.dodpm .circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  opacity: 0.1;
  background: 
  url(../img/portfolio/jet.png),
  radial-gradient(circle at center, white 100%, rgba(255, 255, 255, 1) 100%);
  background-size: 220px 102px, 400px 400px;
  background-repeat: no-repeat;
  background-position: center;
}





/* === INNER PULSE === */
#portfolio-details.dodpm .circle::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  animation: pulse-size 10s infinite ease-in-out;
  background: radial-gradient(circle at center, white 100%, rgba(255, 255, 255, 1) 100%);
  background-size: 400px 400px;
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes pulse-size {
  0%, 100% {
    width: 5px;
    height: 5px;
    opacity: 0;
    background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%);
  }
  50% {
    width: 160px;
    height: 160px;
    opacity: 0.45;
    background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%);
  }
}











.half-circle {
  /* ===== Adjustable values ===== */
  --diameter: 600px;
  --thickness: 3px;
  --color: #ffd3009c;

  /* positioning */
  --x: 50%;
  --y: 20%;

  /* rotation */
  --rotate: 45deg;

  position: absolute;
  left: var(--x);
  top: var(--y);

  width: var(--diameter);
  height: calc(var(--diameter) / 2);
  background: var(--color);
  z-index: 8;

  border-radius: var(--diameter) var(--diameter) 0 0;

  /* transform */
  transform:
    translate(-50%, -50%)
    rotate(var(--rotate));
  transform-origin: center bottom;

  -webkit-mask: radial-gradient(
    circle at center bottom,
    transparent calc(50% - var(--thickness)),
    black       calc(50% - var(--thickness)),
    black       50%,
    transparent 50%
  );
  mask: radial-gradient(
    circle at center bottom,
    transparent calc(50% - var(--thickness)),
    black       calc(50% - var(--thickness)),
    black       50%,
    transparent 50%
  );
}
.half-circle::after {
  content: "";
  display: block;
    position: absolute;
  /* ===== Adjustable values ===== */
  --diameter: 620px;
  --thickness: 10px;
  --color: #c000009c;

  /* positioning */
  --x: 50%;
  --y: 20%;

  /* rotation */
  --rotate: 45deg;

  position: absolute;
  left: var(--x);
  top: var(--y);

  width: var(--diameter);
  height: calc(var(--diameter) / 2);
  background: var(--color);
  z-index: 8;

  border-radius: var(--diameter) var(--diameter) 0 0;

  /* transform */
  transform:
    translate(-50%, -50%)
    rotate(var(--rotate));
  transform-origin: center bottom;

  -webkit-mask: radial-gradient(
    circle at center bottom,
    transparent calc(50% - var(--thickness)),
    black       calc(50% - var(--thickness)),
    black       50%,
    transparent 50%
  );
  mask: radial-gradient(
    circle at center bottom,
    transparent calc(50% - var(--thickness)),
    black       calc(50% - var(--thickness)),
    black       50%,
    transparent 50%
  );
}


/* ADD THIS: Keyframe for clockwise rotation */
@keyframes rotate-circles {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Update individual placements - remove rotation since animation handles it */
.indicator-1 { 
  margin-top: 100px; 
  margin-left: -396px; 
  /* Remove: transform: rotate(-20deg); - animation will handle rotation */
}
.indicator-2 {  
  margin-top: -156px; 
  margin-left: -200px; 
  /* Remove: transform: rotate(0deg); */
}
.indicator-3 {  
  margin-top: 220px; 
  margin-left: 40px; 
  /* Remove: transform: rotate(20deg); */
}


/*Circke if Circles*/
.circle-of-circles {
  /* You can position this container anywhere */
  position: relative;
  width: 240px;
  height: 240px;
z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Adjustable design values */
.circle-track {
  --dot-size: 8px;
  --dot-color: red;
  --circle-diameter: 200px;

  position: relative;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
}

.circle-track .dot {
  position: absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: var(--dot-color);
  border-radius: 50%;

  /* Center each dot on its coordinate */
  transform: translate(-50%, -50%);
}

/* === SVG MORPHING SHAPE === */
#portfolio-details.dodpm svg {
  position: relative;
  width: 10%;
  height: auto;
  display: block;
  z-index: 0;
}

#portfolio-details.dodpm path {
  stroke: #fff;
  stroke-width: 0.01px;
  stroke-opacity: 0.1;
  fill-opacity: 0.95;
}

/* === TWINKLING DOTS === */
#portfolio-details.dodpm .dot {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  animation: twinkle 3s ease-in-out infinite;
  background-color: rgba(255, 255, 255, 0.4);
}

#portfolio-details.dodpm .dot:nth-child(2n) {
  animation-duration: 4s;
  animation-delay: 0.5s;
}

#portfolio-details.dodpm .dot:nth-child(3n) {
  animation-duration: 5s;
  animation-delay: 1s;
  background-color: rgba(92, 225, 230, 0.3);
}

#portfolio-details.dodpm .dot:nth-child(5n) {
  width: 3px;
  height: 3px;
  background-color: rgba(255, 49, 49, 0.3);
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/

/* === MOBILE/TABLET (992px and below) - 320px height === */
@media (max-width: 992px) {
  #portfolio-details.dodpm {
    height: 320px;
    min-height: 320px;
  }

  #portfolio-details.dodpm::before {
    background-size: 1px 320px, cover, cover;
  }

@media (max-width: 992px) {
  #portfolio-details.dodpm::after {
    background-size: 
      1px 500px, 
      500px 3px, 
      30px 5px, 
      30px 15px, 
      30px 5px, 
      30px 5px, 
      2px 100%, 

      30px 30px,  /* smaller indicators on mobile */
      30px 30px,
      30px 30px,

      160%,
      18%,

      30px 40px, 
      30px 40px, 
      10px 20px, 
      10px 20px;

    background-position: 
      center center,  
      0 175px, 
      0 175px, 
      0 152px, 
      0 158px, 
      0 175px, 
      0 0, 

      /* Adjust indicator positions for mobile */
      106% 48%,
      109% 45%,
      112% 50%,

      109% center,
      84% 174px,

      4px 0, 
      0 0, 
      0 0, 
      0 0;
  }
}












  #portfolio-details.dodpm svg {
    width: 35%;
  }

  #portfolio-details.dodpm .circle {
    width: 160px;
    height: 160px;
    opacity: .2;
    filter: blur(1px);
  }

  #portfolio-details.dodpm .circle::after {
    width: 250px;
    height: 250px;
    opacity: 0.25;
  }

  @keyframes pulse-size {
    0%, 100% {
      width: 5px;
      height: 5px;
      opacity: 0;
      background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%);
    }
    50% {
      width: 220px;
      height: 220px;
      opacity: 0.45;
      background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%);
    }
  }


#portfolio-details.dodpm .circle::after {
/*  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50%;*/
  opacity: 0.1;
  background: 
  url(../img/portfolio/jet.png),
  radial-gradient(circle at center, white 100%, rgba(255, 255, 255, 1) 100%);
  background-size: 165px 76px, 400px 400px;
  background-size: 260px 120px, 400px 400px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .80;
  /*filter: blur(2px);*/
}

.half-circle {
  /* ===== Adjustable values ===== */
  --diameter: 388px;
  --thickness: 3px;
  --color: #c000009c;

  /* positioning */
  --x: 50%;
  --y: 20%;

  /* rotation */
  --rotate: 45deg;

  position: absolute;
  left: var(--x);
  top: var(--y);

  width: var(--diameter);
  height: calc(var(--diameter) / 2);
  background: var(--color);
  z-index: 8;

  border-radius: var(--diameter) var(--diameter) 0 0;

  /* transform */
  transform:
    translate(-50%, -50%)
    rotate(var(--rotate));
  transform-origin: center bottom;

  -webkit-mask: radial-gradient(
    circle at center bottom,
    transparent calc(50% - var(--thickness)),
    black       calc(50% - var(--thickness)),
    black       50%,
    transparent 50%
  );
  mask: radial-gradient(
    circle at center bottom,
    transparent calc(50% - var(--thickness)),
    black       calc(50% - var(--thickness)),
    black       50%,
    transparent 50%
  );
}



}