/* =========================
   Container
   ========================= */
.dotbloom-sequence {
  /* tweakables — responsive sizes */
  --dot-size: clamp(80px, 16vw, 160px); /* min 80px on phones, grows with viewport, max 160px */
  --dot-color: #08466d;  /* circles */
  --line-color: #ffffff; /* line (set to #dd0000 if you prefer red) */
  --line-thickness: clamp(4px, calc(var(--dot-size) / 12), 10px); /* scales with dot size */

  /* icon color: change this to recolor all icons at once */
  --icon-color: #ffffff; /* e.g. white */

  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between !important;   /* spreads dots */
  width: 100%;
  max-width: 1200px;
  height: var(--dot-size);
    margin: 0 auto;
}
.dotbloom h4{
    font: normal normal 500 12px/10px Aminute !important; 
}
.dotbloom p{
    font: normal normal 500 20px Poppins !important; 
}

/* =========================
   Line (separate element)
   ========================= */
.dotbloom-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: var(--line-thickness);
  transform: translateY(-50%);
  background: var(--line-color);
  border-radius: 999px;
  z-index: 0;  /* behind circles */
}

/* =========================
   Circles
   ========================= */
.dotbloom-circle {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot-color);
  z-index: 1;  /* above the line */

  /* center icon nicely */
  display: grid;
  place-items: center;
  overflow: hidden; /* just in case */
}

/* =========================
   Icon inside each circle (recolorable)
   ========================= */
.dotbloom-icon {
  /* size relative to circle size
  width: calc(var(--dot-size) * 0.55);*/
  height: calc(var(--dot-size) * 0.55);
  width:35px; 
  margin:5px auto 2px;
  /* the color of the icon shape */
  background-color: var(--icon-color);

  /* use the SVG as a mask so we can recolor via background-color */
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;     /* Safari */
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Point each icon to its SVG file */
.icon-06 {
  mask-image: url('icons/icons-06.svg');
  -webkit-mask-image: url('icons/icons-06.svg');
}
.icon-07 {
  mask-image: url('icons/icons-07.svg');
  -webkit-mask-image: url('icons/icons-07.svg');
}
.icon-08 {
  mask-image: url('icons/icons-08.svg');
  -webkit-mask-image: url('icons/icons-08.svg');
}



/* =========================
   Hover: invert colors (circle → white, icon → #08466d)
   ========================= */
.dotbloom-circle {
  cursor: pointer; /* optional, feels interactive */
  transition: background-color .25s ease;
}
.dotbloom-icon {
  transition: background-color .25s ease;
}

/* On hover, swap colors */
.dotbloom-circle:hover {
  background: #ffffff;          /* circle turns white */
  --icon-color: #08466d;        /* icon adopts this via the CSS variable */

}


/* (Optional) keyboard accessibility */
.dotbloom-circle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}


/* =========================
   Interaction: active/checked state
   ========================= */
.dotbloom-circle {
  cursor: pointer;
  user-select: none;
  transition: background-color .2s ease, transform .12s ease;
  display: flex; 
  flex-direction: column; 
  justify-content:start !important; 
  align-items:center !important;
}

.dotbloom-circle:is(:hover, :focus-visible) {
  transform: translateY(-1px);
  outline: none;
}

/* When active: circle turns white, icon turns #08466d */
.dotbloom-circle.is-active {
  background: #ffffff;          /* circle fill on select */
  --icon-color: #08466d;        /* icon color on select */
  box-shadow: inset 0 0 0 calc(var(--dot-size) * 0.04) rgba(8,70,109,0.12);
}



/* Remove our own active ring */
.dotbloom-circle.is-active {
  box-shadow: none;
}
.dotbloom-circle.is-active .dotbloom-heading {
  color: #08466d;
}
/* Remove browser focus ring / tap highlight */
.dotbloom-circle {
  outline: none;
  -webkit-tap-highlight-color: transparent; /* iOS */
}
.dotbloom-circle:focus,
.dotbloom-circle:focus-visible,
.dotbloom-circle:active {
  outline: none !important;
  box-shadow: none !important;
}


/* =========================
   Content under the dots
   ========================= */
.dotbloom-content {
  /* share the same width as the sequence */
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0;
  text-align: right;
}

.dotbloom-panel { display: none; }
.dotbloom-panel.is-active { display: block; }

/* Title (white) and text (brand color) */
.dotbloom-heading {
  color: #fff; 
  font: normal normal 500 12px/10px Aminute; 
  text-align:center !important; 
  margin:0; 
  letter-spacing:1px
}
.dotbloom-heading:hover{
  color: #08466d !important;
}
.dotbloom-text {
  color: #08466d;                 /* paragraph color */
  margin: 0 auto;
  font: normal normal 500 20px Poppins; 
  letter-spacing: 0.5px;
  line-height: 34px;
  max-width: 70ch;
}



/* =========================
   Only the title moves; text stays centered
   ========================= */

/* Keep the whole content area and paragraph centered */
.dotbloom-content { text-align: center; }
.dotbloom-text { 
  text-align: left; 
  margin-inline: auto; 
}