@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */


/* Container holding the image and the text overlay */
.image-container {

  position: relative;
  width: 100%; /* Container takes the full width of its parent */

}

.biz-growth-image {
  width: 100%; /* Make image responsive */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove extra space below the image */
  content: url('/img/biz-growth3.png');
}

.overlay-text {
  position: absolute;
  top: 10%;  /* Center vertically */
  left: 10%; /* Center horizontally */
  /*transform: translate(-50%, -50%);  Perfect centering */
  color: white; /* Text color */
  font-size: 50px; /* Text size */
  font-weight: bold; /* Text weight */
  /* text-align: center;  Align text */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better readability */
  padding: 10px 20px; /* Padding around text */
  border-radius: 8px; /* Rounded corners for background */
}

.down-arrow {
  position: absolute;
  top: 10%;
  left: 10%;
}

h4.overlay-text {
  position: absolute;
  top: 25%;
  font-size: 24px;
}

a.down-arrow {
  top: 40%;
}


.logo {
  max-width: 200px;
  height: auto;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
}

/* This for cell phones used in portrait mode */
@media (max-width: 480px) {
  

  .overlay-text {
    top: 5%;
  }

  h2.overlay-text {
    font-size: 25px;
  }

  h4.overlay-text {
    font-size: 15px;
  }

  a.down-arrow {
    top: 40%;
  }

    .biz-growth-image {
    content: url('/img/biz-growth.png');
  }

  .logo {
    top: 2%;
    left: 2%;
  }

}

 /* Media Query for all other screen widths */
 /* Cell phones held in landscape mode will resolve to this one */
 /* Screen widths above 1023px will use the default styles specified without @media */
 @media (min-width: 481px) and (max-width: 1024px) {

  .overlay-text {
    top: 5%;
  }

  h2.overlay-text {
    font-size: 25px;
  }

  h4.overlay-text {
    font-size: 15px;
  }

  a.down-arrow {
    top: 45%;
  }

  .pointer-arrow {
    content: url('/img/down-arrow-sm.png');
  }

  .biz-growth-image {
    content: url('/img/biz-growth2.png');
  }

  .logo {
    top: 2%;
    left: 2%;
  }
}