@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap');

/* Apply the font to the body or specific elements */
h1, h2, h3, h4, h5, h6{
    font-family: 'IBM Plex Sans', sans-serif!important;
    font-weight: bold!important;
}

body, div, a, td, th, input, button, textarea {
    font-family: 'IBM Plex Sans', sans-serif!important;
    font-weight: bold!important;
}

p, li {
    font-family: 'IBM Plex Sans', sans-serif!important;
    /* font-weight: bold!important; */
}


.static-top{
    background-color:#0000002e !important;
    backdrop-filter: blur(5px);
    width: 100%;
    padding: 10px 0;
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.static-top a{
    color: white!important;
}

.static-top span{
    color: white!important;
}

.logo{
    background-color: #00aeef!important;
}
.footer{
    background-color: #a8d5f3!important;
}
.footer-bottom{
    padding-top: 10px!important;
    background-color: #a8d5f3!important;
}

.footer a{
    color: #0885ad!important;
}
.footer-meta-nav-link{
    color: #0885ad!important;
}

.u-bg-blue-tint{
    color: #0885ad!important;
}

.footer-meta-nav-item {
	white-space: nowrap;

	@media all and (min-width: 550px) {	
	padding: 0 0.5em;

		+ .footer-meta-nav-item {

			&:before {
				content: '|';
				display: inline-block;
				padding-right: 1em;
                color: #0885ad!important;
			}

		}

	}

}

@media screen and (min-width: 600px) {
    .hero-title {
        font-size: calc(36px + 29*((100vw - 600px) / 1150));
    }
}

@media screen and (min-width: 600px) {
    .hero-title {
        font-size: calc(32px + 18*((100vw - 600px) / 1150));
    }
}



.banner-wrapper {
    position: relative;
    width: 100%;
    height: 320px; /* Adjust as per your banner's height */
    overflow: hidden;
  }
  
  .banner-image {
    width: 100%;
    height: auto;
  }
  
  .overlay-content {
    position: absolute;
    top: 10%;
    left: 10%;
    color: white; /* Adjust color to ensure readability */
    border-radius: 8px; /* Optional: Adds rounded corners */
  }
  
  .hero-title {
    margin-bottom: .5em!important;
    color: #fff!important;
    font-weight: bold;
    font-weight: 700!important;
    font-style: normal!important;
    line-height: 1.1!important;
}

.hero-text{
    color: #0885ad;
}
  
  .overlay-content p {
    font-size: 1.2rem; /* Adjust font size */
    margin: 0;
  }

  @media screen and (min-width: 600px) {
    .hero-text {
        font-size: calc(26px + 18*((100vw - 600px) / 1150));
    }
}

  @media screen and (min-width: 600px) {
    .hero-text {
        font-size: calc(28px + 8*((100vw - 600px) / 900));
    }
}