/* software page reset all margins */
#software_css h1,
#software_css h2,
#software_css h3,
#software_css h4,
#software_css h5,
#software_css h6,
#software_css p,
#software_css a,
#software_css ul {
  margin: 0;
  padding: 0;
}

/* software page container main */
.software_container_main {
  display: grid;
  place-items: center;
  width: 100%;

  position: relative;
  scroll-margin-top: calc(var(--variable_spacing_01) * 2.6 );
}

.software_shadow_container_main {
  display: grid;
  width: 100%;
  height: calc(var(--vh, 1vh) * 200); /* 100% of the actual viewport height */

  position: absolute;
  pointer-events: none;
  top: -80%;
  left: 0;
  overflow: hidden;
  z-index: 0;
}

.software_shadow_container_content {
  display: grid;
  width: 100%;
  height: 50%;
  position: absolute;
  transform: scale(250%);
  top: 30%;
  left: -20%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, var(--variable_shadow_color_03) 0%, transparent 50%);
}

/* software page container content */
.software_container_content {
  display: grid;
  grid-template-columns: 1.5fr 1fr; /* two equal columns for left and right content */
  width: calc(100% - 2 * var(--variable_spacing_01));
  border-radius: var(--variable_borderradius_03);
  margin-top: var(--variable_spacing_01);
  margin-bottom: var(--variable_spacing_01);
  align-items: start; /* align items to the top of the grid */

  /* background gradient element 02 with border and inner shadow */
  background-color: var(--variable_color_gradient_01_gray_01);
  background-image:
          linear-gradient(205deg,
          var(--variable_color_gradient_01_gray_02) 25%,
          var(--variable_color_gradient_01_gray_03) 75%,
          var(--variable_color_gradient_01_gray_04) 100%);

  box-shadow:
          inset 0 0 10px var(--variable_color_gradient_01_gray_05),
          inset 0 0 0 1px var(--variable_color_gradient_01_gray_06);

  z-index: 7;

  overflow: hidden;
}

/* software page left container */
.software_left_container {
  display: grid;
  grid-template-rows: auto 1fr auto; /* creates 3 rows */
  height: 100%; /* ensures the section takes up the full height */
  margin-right: var(--variable_spacing_01); /* adds space to the right, for text purposes */
}

/* software page left top container */
.software_left_top_container {
  display: grid;
  align-self: start; /* keep top content at the top */
}

/* software page left bottom container */
.software_left_bottom_container {
  display: grid;
  align-self: end; /* keep bottom content at the bottom */
}

/* software page right container */
.software_right_container {
  display: grid;
  grid-template-rows: auto 1fr auto; /* top content, flexible middle, button at the bottom */
  height: 100%; /* Full height of the container */
  margin-left: var(--variable_spacing_01); /* adds space to the left, for text purposes */
}

/* software page right top container */
.software_right_top_container {
  align-self: start; /* keep top content at the top */
}

/* software page right bottom container */
.software_right_bottom_container {
  align-self: end; /* keep bottom content at the bottom */
}

/* software page number margin */
.software_page_number a {
  margin: 0; /* remove default margins */
  line-height: 1.2;
}

/* software page number */
.software_page_number {
  display: inline-grid; /* ensures the container wraps tightly around the content */
  place-items: center; /* center the number inside the square */

  width: calc(var(--variable_spacing_items_01) * 9/2);
  height: calc(var(--variable_spacing_items_01) * 9/2);
  border-radius: var(--variable_borderradius_02);

  /* element page number type 01 background colors */
  background: linear-gradient(155deg,
  var(--variable_button_01_color_03) 0%,
  var(--variable_button_01_color_02) 25%,
  var(--variable_button_01_color_01) 100%);

  box-shadow:
          -10px 10px 40px var(--variable_button_01_color_04),
          inset 0 0 10px var(--variable_button_01_color_05),
          inset 0 0 0 1px var(--variable_button_01_color_05);

  backdrop-filter: blur(10px); /* apply blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */

  margin: var(--variable_spacing_01);
}

/* software page container content item_margin */
.software_container_content h1, h2, h3, h4, h5, h6, p, a, ul, li {
  margin: var(--variable_spacing_01);
}




/* software page media queries */
@media only screen and (max-width: 1100px) {
  /* software page container content */
  .software_container_content {
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-rows: auto auto; /* Two rows: one for the left, one for the right */
    justify-items: center; /* Center both containers horizontally */
    margin-top: var(--variable_spacing_01); /* Adjust margins if necessary */
    margin-bottom: var(--variable_spacing_01);
  }

  /* software page left container */
  .software_left_container {
    margin-right: 0; /* remove right margin */
  }

  /* software page right container */
  .software_right_container {
    margin-left: 0; /* remove left margin */
  }
}