.content {
    margin-top: 100px;
    /* Adjust this value to match the padding of the fixed header */
    padding: .1rem;
}

.logo img {
    align-self: start;
    margin: 5px;
    padding: 5px;
    max-width: 350px;
}

.navbar {
    min-height: 70px;
    width: 100%;
}

.navbar-brand {
    padding: 0 15px;
    height: 70px;
    line-height: 50px;
}

.navbar-toggle {
    /* (80px - button height 34px) / 2 = 23px */
    margin-top: 20px;
    padding: 9px 10px !important;
}

.hero-content h1 {
    font-size: 3rem;
}

.hero-content p {
    height: 80%;
    width: 80%;
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .navbar-nav>li>a {
        /* (80px - line-height of 27px) / 2 = 26.5px */
        padding-top: 26.5px;
        padding-bottom: 26.5px;
        line-height: 27px;
    }
}



.carousel-container {
    position: relative;
    width: 100%;
    height: calc(100% - 140px); /* Adjust 60px to match your header's height */
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.carousel-item img {
    position: relative;
    width: 75%;  
    margin: auto;                  
    padding: 0px;
    margin: 0px;
    transition: opacity 0.2s ease-in-out;
    object-fit: cover; /* Ensures the image covers the container */
    background-size: cover;
}