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

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

/* software squares page container content */
.software_sqr_container_content {
  display: grid;
  grid-template-rows: repeat(4, 1fr); /* stack each square in a row */

  width: calc(100% - 2 * var(--variable_spacing_01));
  margin-bottom: var(--variable_spacing_01);
  border-radius: var(--variable_borderradius_03);

  gap: var(--variable_spacing_01);
}

/* software square container */
.software_sqr_square_container {
  display: grid;
  grid-template-columns: repeat(2, auto);

  border-radius: var(--variable_borderradius_03);

  /* 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);

  margin-left: 500px;
  z-index: 8;
  overflow: hidden;
}

/* software square image container */
.software_sqr_square_image {
  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) * 10);
  height: calc(var(--variable_spacing_items_01) * 10);
  border-radius: var(--variable_borderradius_02);

  /* element icon image 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);

  margin: var(--variable_spacing_01);
  overflow: hidden;
}

/* software square software icon */
.software_sqr_square_image .software_icon {
  margin: calc(var(--variable_spacing_01) / 2);
  /* filter: drop-shadow(-10px 10px 25px var(--variable_shadow_color_01)); */
}

/* software square description */
.software_sqr_square_description {
  display: grid;
  grid-template-rows: auto 1fr auto; /* title, flexible middle, button */
}

/* title inside the description */
.software_sqr_square_description h3 {
  align-self: start; /* ensure the title is at the top */
}

/* text inside the description */
.software_sqr_square_description p {
  align-self: start; /* align text to the bottom */
  margin-top: 0;
  margin-bottom: 0;
}

/* software squares page learn more button */
.software_sqr_learnmore_button {
  display: inline-grid; /* use grid */
  grid-template-columns: auto auto; /* two columns: one for text, one for icon */

  /* button type 03 background colors */
  background-color: var(--variable_button_03_color_01);
  border: var(--variable_borderline) solid var(--variable_color_offwhite); /* border */

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

  padding: calc(var(--variable_spacing_items_01) * 1) calc(var(--variable_spacing_items_01) * 2);
  border-radius: var(--variable_borderradius_02);

  text-align: center;

  color: var(--variable_color_offwhite); /* button text color */
  cursor: pointer;

  justify-content: center; /* center the content horizontally */
  align-items: center; /* center the content vertically */
  white-space: nowrap; /* prevent text from wrapping */
  width: auto; /* ensure the button only takes as much space as needed */

  justify-self: start; /* align button to the left */
  align-self: end;

  margin-top: calc(var(--variable_spacing_01));
  margin-bottom: var(--variable_spacing_01);
  margin-left: var(--variable_spacing_01);
}

/* arrow icon next to the learn more button */
.software_sqr_learnmore_button .arrow_icon {
  height: calc(var(--variable_spacing_items_01) * 2);
  width: calc(var(--variable_spacing_items_01) * 2);
  filter: brightness(0) invert(1);
}

.software_sqr_square_number p {
  margin: 0; /* remove default margins */
  line-height: 1.2;
}




/* software squares page media queries */
@media only screen and (max-width: 1400px) {
  .software_sqr_square_container {
    margin-left: 0px;
  }
}

@media only screen and (max-width: 700px) {
  /* software square container */
  .software_sqr_square_container {
    grid-template-columns: 1fr; /* single column layout */
    grid-template-rows: auto auto auto; /* stack the number, image, and description */
    margin-left: 0px;
  }
}