/*
 * Copyright (C) 2022 "Sport Link LLC". - All Rights Reserved
 *
 * Unauthorized copying or redistribution of this file in source and binary forms via any medium
 * is strictly prohibited.
 */

.logo-img {
    height: 20px;
    width: 25px;
    display: inline-block;
    padding-right: 5px;
    vertical-align: top;
}

.carousel-item-bg-img {
    height: 110vh;
    /* Makes the background cover the full height of the viewport */
    width: 110%;
    overflow: visible;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.5s ease-in-out;
    /* Smooth zoom transition */
}

.carousel-item-bg-img::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* Adjust the gradient stops and colors as needed */
    height: inherit;
    /* Set the height to inherit from the parent .shrinking-header */
    z-index: var(--gradient-z-index, 0)
}

.carousel-item-bg-img::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* Adjust the gradient stops and colors as needed */
    height: inherit;
    /* Set the height to inherit from the parent .shrinking-header */
    z-index: var(--gradient-z-index, 0)
}

.circle-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    /* Makes the div a perfect circle */
    background-size: cover;
    /* Ensures the image covers the entire circle */
    background-position: center;
    /* Centers the image */
    background-repeat: no-repeat;
    display: block;
    margin: auto;
    /* Centers the circle */
}

.feature-image {
    height: 50vh;
    /* half height of the viewport */
    background-size: contain;
    /* Ensures the image covers the entire element */
    background-position: center;
    /* Centers the image */
    background-repeat: no-repeat;
    /* Prevents the image from repeating */
}

.overflow-image-centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    /* Adjust as needed */
}

.carousel-img {
    height: 30vh;
    width: auto
}