.triangle-square {
  width: 60vw;
  aspect-ratio: 13 / 9;
  margin: auto;
  display: grid;
  gap: var(--spacing-gap);
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr); 
  position: relative;
}
.triangle-container h3{
  text-align: center;

}
.triangle-container h4{
  text-align: center;
  font-size: 2rem;

}
.triangle-title {
  text-decoration: none;
  color: var(--text-color-light);
  margin:0;
  padding-block-start: var(--sp-block-lg);
  padding-block-end: var(--sp-block-lg);
  border-radius: var(--border-radius-sm);
}
.item {
  transition: transform .2s;
  overflow: hidden; /* To contain transformed children */

}
/* Assign grid areas to items */
.top-left,
.top-right,
.bottom-left, 
.bottom-right{
  box-shadow: var(--box-shadow);
  transition: border-radius 0.2s ease-in-out, transform 0.2s ease-in-out;

}



/* On Hover */
.item:hover {
  transform: scale(1.2);
  z-index: 200;
  border-radius: 0%;
}
/*------MODAL------*/
.modal-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);  /* Semi-transparent black */
  z-index: 5;  /* Adjust if needed to ensure it's behind .info but above other content */
  display: none;  /* Hidden by default */
}
.modal.active {
  display: block;
}

/*-----BUTTONS-----*/
.close-btn {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  font-weight: bold;
  color:  white;
  background-color:  var(--color-blue-dusk);
  border: none;
  cursor: pointer;
}

.learn-more-btn {
  display: none;
 text-align: center;
  margin-top: 10px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color:  var(--color-blue-dusk);
  border: none;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

/* Background Image for Top Right */
.top-right {
  background-image: url("../images/home/space2.png");
  background-size: cover;
  border-top-right-radius: 100%;
}
.top-left {
  background-image: url("../images/home/aerospace2.png");
  background-size: cover;
  border-top-left-radius: 100%;
}
.bottom-left {
  background-image: url("../images/home/mri2.png");
  background-size: cover;
 border-bottom-left-radius: 100%;
}
.bottom-right {
  background-image: url("../images/home/rf_factory1.png");
  background-size: cover;
  border-bottom-right-radius: 100%;
 
}

/* Transform Origin */
.top-left { transform-origin: bottom right; }
.top-right { transform-origin: bottom left; }
.bottom-left { transform-origin: top right; }
.bottom-right { transform-origin: top left; }

.info {
  width: auto;
  visibility: hidden;
  position: absolute;
  background-color:var(--color-blue-dark); 
  color: var(--text-color-light);
  padding: var(--sp-inline-normal);
  padding-block: var(--sp-block-normal);
  border-radius: var(--border-radius-sm); /* Optional */
  box-shadow: var(--box-shadow);
  z-index: 1000;
  pointer-events: none;
}
.info h4{
  text-align: center;
  font-size: 2rem;
  margin: auto;
}

/* On hover of an item, make the adjacent info div visible */
.item:hover + .info {
  visibility: visible;
}

.top-left-info {
  position: absolute;
  inset: 50% auto auto 50%; /* top and left set to 50% */
  transform: translate(-50%, -50%); /* adjust for the element's own dimensions */
  
}

.top-right-info {
  position: absolute;
  inset: 50% auto auto 50%; /* top and left set to 50% */
  transform: translate(-50%, -50%); /* adjust for the element's own dimensions */
}

.bottom-left-info {
  position: absolute;
  inset: 50% auto auto 50%; /* top and left set to 50% */
  transform: translate(-50%, -50%); /* adjust for the element's own dimensions */
}

.bottom-right-info {
  position: absolute;
  inset: 50% auto auto 50%; /* top and left set to 50% */
  transform: translate(-50%, -50%); /* adjust for the element's own dimensions */
}


.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  padding: var(--sp-inline-sm);
  padding-block:var(--sp-block-sm);
  height: auto; 
  transform: translate(-50%, -50%);
  z-index: 100;
  text-align: center;
  line-height: 2rem;  /* equal to height to vertically center text */
  background-color: var(--color-blue-dark);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--box-shadow); 
  pointer-events: none;
}

.center-text h3{
  margin: auto;
}
@media only screen and (max-width: 1000px) {
  .triangle-square {
    width: 90vw;
    aspect-ratio: 13 / 9;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    position: relative;
   
  }
  .item {
    width: 100%;
    height: auto;
    margin: 2px 0;

  }
  .info{
    pointer-events: auto;
  }




}
@media only screen and (max-width: 700px) {
  .triangle-square {
    width: 90vw;
    aspect-ratio: 13 / 9;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    position: relative;
   
  }
  .triangle-container h3{
    text-align: center;
  }
.top-left { transform-origin: bottom right; }
.top-right { transform-origin: bottom left; }
.bottom-left { transform-origin: top right; }
.bottom-right { transform-origin: top left; }
.info{
  width: 40vh;
}

.learn-more-btn{
  display: block;
}
.close-btn{
  display: block;
}
.top-left-info {
  position: absolute;
  inset: 50% auto auto 50%; /* top and left set to 50% */
  transform: translate(-50%, -15%); /* adjust for the element's own dimensions */
  
}

.top-right-info {
  position: absolute;
  inset: 50% auto auto 50%; /* top and left set to 50% */
  transform: translate(-50%, -15%); /* adjust for the element's own dimensions */
}

.bottom-left-info {
  position: absolute;
  inset: 50% auto auto 50%; /* top and left set to 50% */
  transform: translate(-50%, -110%); /* adjust for the element's own dimensions */
}

.bottom-right-info {
  position: absolute;
  inset: 50% auto auto 50%; /* top and left set to 50% */
  transform: translate(-50%, -110%); /* adjust for the element's own dimensions */
}
.top-left:hover {
  transform: translate(92%, -20%) scale(1.8);
}
.top-right:hover {
  transform: translate(-92%, -20%) scale(1.8);
}
.bottom-left:hover {
  transform: translate(92%, -20%) scale(1.8);
}
.bottom-right:hover {
  transform: translate(-92%, -20%) scale(1.8);
}

.info {
  width: 75%;
  visibility: hidden;
  pointer-events: auto;
}

.item:active + .info, .item:focus + .info {
  visibility: visible;
}


}