/* Rounded title container */
.title-container {
background-color: var(--primary-color);
border-radius: 25px;
padding: 125px 40px;
margin: 120px 25px 100px 25px;
color: white;
text-align: center;
box-sizing: border-box;
}

.title-container h1 {
margin: 0;
}

/* App Info Layout */
#app-info-container {
display: flex;
align-items: flex-start;
margin-bottom: 80px;
}

#details-column {
flex: 4;
margin: 0 50px;
}

#details-column ul {
font-size: 20px;
margin: 20px 0;
padding-left: 20px;
font-weight: 300;
}

#details-column li {
margin-bottom: 10px;
}

#details-column strong {
font-weight: 600;
}

#screenshots-column {
margin-left: 50px;
flex: 6;
display: flex;
align-items: flex-start;
}

#column-1, #column-2 {
flex: 1;
}

#column-2 {
margin-top: 300px; /* offset for desktop layout */
}

.appScreenshot {
width: 85%;
margin-bottom: 50px;
display: block;
margin-left: auto;
margin-right: auto;
}

/* Download Section Styling */
#download-section {
background-color: transparent;
margin: 0 25px 80px 25px;
}

.download-container {
padding: 50px 30px;
background: black;
border-radius: 30px;
text-align: center;
}

.download-container h2 {
font-size: 40px;
color: white;
}

.download-links {
margin-top: 30px;
}

.download-button {
display: inline-block;
padding: 10px 20px;
color: #000;
margin-right: 10px;
border-radius: 5px;
text-decoration: none;
}
/* --------- MOBILE RESPONSIVE --------- */
@media (max-width: 768px) {
  #app-info-container {
    flex-direction: column;   /* stack details and screenshots */
    align-items: center;      /* center content */
  }

  #details-column {
    margin: 0 20px 30px 20px; /* adjust spacing */
  }

  #screenshots-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 0 20px;
  }

  .appScreenshot {
    flex: 0 0 45%;  
    max-width: 45%;
    width: 100%;
  }

  #column-1, #column-2 {
    display: contents;
  }
  #app-info-container{
    margin-bottom: 25px;
  }
}