body, html {
    height: 100%;
    margin: 0;
}
.parallax-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 300px; /* Adjust to the height you prefer for the parallax sections */
}
.parallax {
    background-image: url('parallax.webp'); /* Replace with your image path */
    height: 300px; /* Set the height for the hero image */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    width: 100%;
}

h2 {
    font-size: 2.5rem; /* Larger font size for headings */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* Text shadow for better readability */
}
/* Navbar styles */

.navbar.bg-light {
    background-color: rgb(5, 52, 5) !important;
}

.navbar-nav {
    width: 100%;
    justify-content: center;
}

.nav-link {
    color: #555; /* Adjust link color */
}

/* Adjust the navbar-brand size if needed */
.navbar-brand {
    font-size: 1.5em; /* Larger font size for the brand */
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    color: white;
    text-shadow: black;
}

.navbar-brand:hover {
    color: rgb(214, 210, 210);
    text-decoration: none;
}

.navbar.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1030; /* Increase z-index to ensure it's on top of other elements */
}

.fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1020;
}
a.nav-link {
    color: white;
    text-shadow: black;
}
a.nav-link:hover {
    color: rgb(214, 210, 210);
    text-decoration: underline;
    text-underline-offset: 0.5em;
}
.card {
    width: 18rem; /* Adjust the width as needed */
}
div.card:hover {
    background-color: #f8f8f8;
}
div.card-body > p {
    text-align: center;
}
.card-title {
    font-size: 1.5rem; /* Adjust the font size as needed */
    text-align: center;
}
#services > h2 {
    padding-bottom: 30px;

}
div.card-body > p > a:hover {
    background-color:rgb(38, 35, 207);
}
.accreditation-image {
    width: auto; /* Adjust width automatically */
    height: 150px; /* Fixed height; adjust as necessary */
    max-width: 100%; /* Ensures the image is not bigger than its container */
}

/* Optional: add some styles to ensure the images are centered in their columns */
.accreditation-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.typeform-responsive-wrapper {
    overflow: hidden;
    padding-top: 120%; /* Adjust this value to maintain aspect ratio */
    position: relative;
}

.typeform-responsive-wrapper > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}