body, html {
    height: 100%;
    margin: -10px 0 0 0;
    padding: 0;
}

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.67), rgba(0, 0, 0, 0.67)), url("gybHero.jpg");

  /* Set a specific height */
  height: 100%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.main_header {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
.main_header h1 {
    font-size: 90px;
    line-height: 90px;
    margin: 0;
    padding: 0 0 50px 0;
    font-family: "Saira Extra Condensed", sans-serif;
    font-weight: 700;
    background: linear-gradient(116deg, #3ccbcf 40%, #ff9300 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main_header p {
  text-align: center;
  font-size: 23px;
  line-height: 23px;
  margin: -20px 0 31px;
  font-family: "Lato", sans-serif;
  color: #fff;
}


.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}

.gyb_description, .gyb_connect {
    background-color: #3ccbcf;
    padding: 40px 5% 40px 5%;
    border-top: 15px solid #fff;
    color: #00123b;
}


.gyb_connect {
    background-color: #FF9300;
}

.gyb_connect a {
    color: #FFF;
    text-decoration: none;
}

.gyb_connect a:hover {
    color: #01133B;
}


.gyb_description h1, .gyb_connect h1 {
    font-family: "Saira Extra Condensed", sans-serif;
    font-weight: 500;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
}

.gyb_description p, .gyb_connect p {
    text-align: center;
    font-size: 22px;
    line-height: 30px;
    font-family: "Lato", sans-serif;
}

.container {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    justify-content: center;
    align-items: center;
    width: 100%; /* Adjust the width as needed */
}

.column {
/*    flex: 1 1 30%; /* Each column takes up to 30% of the container width, adjusts with flex-wrap */*/
    padding: 20px; /* Padding for content inside columns */
    margin: 0 30px;
    border: 0; /* Border to visualize the columns */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    font-family: "Lato", sans-serif;
}

.column p {
    margin: 0;
    padding: 0;
}


/* Media query for screens smaller than 600px */
@media (max-width: 600px) {
    .column {
        flex: 1 1 100%; /* Each column takes full width of the container on small screens */
    }
}


.gyb_footer {
    background-color: #01133B;
    padding: 40px 10% 40px 10%;
    border-top: 15px solid #fff;
    color: #3ccbcf;
}

.gyb_footer p {
    text-align: center;
    font-size: 22px;
    line-height: 30px;
    font-family: "Lato", sans-serif;
}