.hide_side_nav {
    display: none !important;
}

.footer-style {
    background-color: var(--brand-color);
    margin-top: 3em;
    padding-top: 5em;
    padding-bottom: 5em;
    .blk-txt {
        text-align: center!important;
    }
    .category-filter {
        display: flex;
        justify-content: center;
    }
}

#navbutton {
background-color:var(--lead-color) !important;
}
        
        .blk-style {
            padding: 1em;
            .fas {
                padding-inline-end: 1em;
                font-size:0.7em;
            }
        }
        
        
        
        
        /* Carousel Container */
        .carousel {
            position: relative;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
                height: inherit;
            overflow: hidden;
            border-radius: 0px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .row {
        margin-block-start:0em !important;
        margin-block-end:0em !important;
        }
        
        .form {
            display: flex;
        }

        /* Slides Container */
        .slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: -webkit-fill-available;
        }

        /* Individual Slide */
        .slide {
            min-width: 100%;
            position: relative;
        }

        .slide img {
            width: 100%;
            display: block;
        }

        /* Slide Caption */
        .slide-caption {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px 20px;
            border-radius: 5px;
            display: none;
        }

        /* Navigation Arrows */
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 24px;
            z-index: 10;
            display: none;
        }

        .arrow.prev {
            left: 10px;
        }

        .arrow.next {
            right: 30px;
        }

        /* Navigation Dots */
        .dots {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            display: none;
        }

        .dot {
            width: 10px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .dot.active {
            background-color: white;
        }
        
.card {
    flex: 0 0 22em;
    background-color: var(--text-color-nav);
    position:relative;
    box-shadow: none;
    display: grid;
    padding: 2em;
    grid-column: span 4;
    border-radius: var(--border-radius);
    border: 0px solid rgb(255 217 10 / 25%);
    transition: transform 0.2s ease-out;
}

.card:hover {
	transform: scale(1.05);
    transition: transform 0.3s ease-in;
}

.card .card-title {
    font-size: var(--fs-card-title);
    font-weight: var(--fw-card-title);
    --fs-card-title: var(--font-size-4);
}

.card .card-content {
    font-size: var(--font-size-1);
}

.card .card-icon {
    width: 3em;
    height: auto;
    margin-block-start: -3.5em;
	display: none;
    background: var(--background-color);
    padding: .5em;
    color: var(--lead-text-2) !important;
    svg {
        fill: var(--light);
        width: 3em;
        height: 3em;
    }
}