body {
  background-color: #15182e;
  color: lightgrey;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  margin-top: 5%;
}

/* Adjust margin-top for screens up to 768px wide (e.g., tablets/mobiles) */
@media screen and (max-width: 768px) {
  body {
    margin-top: 12%;
  }
}

/* Further adjustment for screens up to 480px wide (e.g., smaller phones) */
@media screen and (max-width: 480px) {
  body {
    margin-top: 15%;
  }
}

/* Remove body padding if you want main to be edge-to-edge */
body.no-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

main {
  display: flex;
  flex: 1; /* Take all available space */
  align-items: center;
  justify-content: center;
  width: 100vw; /* Full viewport width */
  min-height: 100vh; /* Full viewport height */
  margin: 0;
  padding: 0;
  background-color: transparent; /* Temporary to see area */
}

/* If you need to compensate for fixed header */
main.with-header-offset {
  margin-top: -60px; /* Counteract body padding */
  padding-top: 60px; /* Restore space for content */
}
.text-justify {
  text-align: justify;
}

.rounded-custom {
  border-top-left-radius: 100px;
  /* border-bottom-right-radius: 25px; */
}
.trimmed-diagonal {
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}
#story{
  flex: 1;
}

/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

.contact-container-1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px; /* extra breathing space */
}
.contact-container-2 {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-radius: 12px;
  overflow: hidden;
  background: lightsteelblue;
  color: #15182e;
  width: 90%;          /* make it responsive */
}
.contact-image {
  object-fit: cover;
  height: 100%;
}