.container-family-tree {
  width: 100%;
  max-width: 100%; /* Allow the container to expand */
  height: 650px; /* Or any other fixed size based on your layout */
  overflow: auto;
  position: relative;
}

.family-tree-svg {
  /* background-color: red; */
  padding: 60px;
  scale: 1.8;
}

.node, .spouse-node {
  cursor: pointer;
}

.node circle {
  transition: fill 0.3s, stroke 0.3s;
  width: 300px;
  height: 300px;
  fill: var(--gray-medium);
}

.node circle.selected {
  fill: var(--primary-color);
  stroke: var(--primary-color) !important;
  stroke-width: 3;
}

svg line {
  stroke: var(--primary-color) !important;
}



/* ==============================================
   Media Queries
   ============================================== */

@media (min-width: 992px) and (max-width: 1199.9px) {
  .family-tree-svg {
    scale: 2.2 !important; 
    transform: translate(0px, 20px); 
  }
}

@media (min-width: 768px) and (max-width: 991.9px) {
  .family-tree-svg {
    scale: 2.8 !important; 
    transform: translate(30px, 0);
  }
}

@media (min-width: 576px) and (max-width: 767.9px) {
  .family-tree-svg {
    scale: 4.5 !important; 
    transform: translate(40px, 0px); 
  }
}

@media (min-width: 426px) and (max-width: 575.9px) {
  .family-tree-svg {
    scale: 4.8 !important;
    transform: translate(50px,10px); 
  }
}

@media (min-width: 376px) and (max-width: 425.9px) {
  .family-tree-svg {
    scale: 7.8 !important;
    transform: translate(30px, 0px); 
  }
}

@media (min-width: 336px) and (max-width: 375.9px) {
  .family-tree-svg {
    scale: 9!important; 
    transform: translate(20px, 0px); 

  }
}

@media (max-width: 335.9px) {
  .family-tree-svg {
    scale: 15!important; 
    transform: translate(20px, 0px); 

  }
}