@font-face {
  font-family: "Roboto";
  src: url("assets/roboto-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Optional */
  max-width: 50%; /* Optional */
  margin: 0 auto; /* Optional */
  padding-top: 50px; /* Desktop padding (optional) */
}

.row {
  display: flex;
  width: 100%;
  justify-content: center; /* Center content horizontally */
}

.column {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

/* Media query for mobile padding */
@media only screen and (max-width: 768px) {
  .container {
    padding-top: 10px; /* Mobile padding (optional) */
  }

  .row {
    flex-direction: column;
  }
}

/* Hide mobile image by default */
.mobile-image {
  display: none;
  width: 100%;
}

/* Show mobile image on mobile screens */
@media only screen and (max-width: 768px) {
  .desktop-image {
    display: none;
  }
  .mobile-image {
    display: block;
  }
}

body {
  font-family: "Roboto", sans-serif; /* Roboto as primary, fallback to sans-serif */
}