#main-title h1 {
  margin-top: 120px;
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1px 5px #000;
}

#main-title h2 {
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  color: #4ec5f2;
  text-shadow: 1px 1px 5px #000;
}

.main-text {
  font-size: 15px;
  color: #fff;
  text-shadow: 1px 1px 5px #000;
}

.vcenter {
  margin-top: 32px;
}

/* Responsive column rules - columns with less than 75% width become 100% on mobile */
@media (max-width: 768px) {
  .col-responsive {
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px;
  }

  /* Convert flex containers to column layout on mobile */
  div[style*="justify-content:space-between"] {
    flex-direction: column !important;
  }

  div[style*="justify-content:space-between"] > div {
    width: 100% !important;
    margin-bottom: 20px;
  }

  /* Also apply to any column div with small width percentages */
  div[style*="width:33%"],
  div[style*="width:25%"],
  div[style*="width:50%"],
  div[style*="width:60%"],
  div[style*="width:40%"],
  div[style*="width:30%"],
  div[style*="width:20%"],
  div[style*="width:10%"] {
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  /* For very small screens, also apply to 75% columns */
  .col-responsive,
  div[style*="width:75%"],
  div[style*="width:70%"] {
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px;
  }
}