.codetechbd_card {
    border: 1px solid;
    background-color: white;
    border-color: #d1d5db;
    /* gray-300 */
    transition-property: all;
    transition-duration: 75ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* ease-in-out */
}

.codetechbd_card:hover {
    transition-duration: 500ms;
    border-color: var(--hover-color-solid);
    /* green-600 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    /* shadow-md */
}

.codetechbd_add_button {
    background-color: var(--main-color-solid);
    color: white;
}

.codetechbd_add_button:hover {
    background-color: var(--hover-color-solid);
}

.codetechbd_buy_button {
    background-color: var(--secondary-color-solid);
    color: white;
}

.codetechbd_buy_button:hover {
    background-color: var(--hover-color-solid);
}

.hover_main_codetechbd:hover {
    border-color: 1px solid var(--main-color-solid);
}

.bottom_nav_items {
    display: none;
    /* Changed from 'hidden' to 'none' */
}

.topbar_background {
    background-color: var(--secondary-color-op7);
}

.mainbar {
    background-color: var(--main-color-op1);
    padding-top: 5px;
    padding-bottom: 5px;
}

.codetechbd_text {
    color: black;
    transition: background-color 0.3s ease;
}

.codetechbd_text:hover {
    color: var(--hover-color-solid);
}

.codetechbd_text:active,
.codetechbd_text:focus {
    color: var(--main-color-solid);
}

.codetechbd_button {
    background-color: var(--main-color-solid);
    transition: background-color 0.3s ease;
}

.codetechbd_button:hover {
    background-color: var(--hover-color-solid);
}

.codetechbd_button:active,
.codetechbd_button:focus {
    background-color: var(--secondary-color-solid);
}

.codetechbd_link {
    color: var(--main-color-solid);
    transition: background-color 0.3s ease;
}

.codetechbd_link:hover {
    color: var(--hover-color-solid);
}

.codetechbd_link:active,
.codetechbd_link:focus {
    color: var(--main-color-solid);
}

@media (max-width: 768px) {
    .bottom_nav_items {
        display: grid;
        place-items: center;
        gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
        z-index: 99;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        background-color: white;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        /* Add these new properties */
        border-top-left-radius: 20px;
        /* Curved top-left corner */
        border-top-right-radius: 20px;
        /* Curved top-right corner */
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
        /* Top shadow */
    }
    .active {
        width: 110%;
        height: 70%;
        padding: 2px;
        margin: 20px;
        /* Fixed typo from 'magrin' to 'margin' */
        justify-content: center;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.9em;
        color: white;
        background-color: var(--main-color-solid);
        border-radius: 50px;
        transition: 0.3s all cubic-bezier(0.87, 0.03, 0.32, 1);
        transform-origin: center;
        animation: 0.6s cubic-bezier(0.96, 0.01, 0.18, 0.79) icons;
        overflow: hidden;
    }
    @keyframes icons {
        from {
            transform: scale(0.5);
        }
        to {
            transform: scale(1);
        }
    }
    .active::after {
        transition: 0.2s all cubic-bezier(0.87, 0.03, 0.32, 1);
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        content: attr(data-label);
        font-size: 1em;
        color: white;
        animation: 0.6s cubic-bezier(0.96, 0.01, 0.18, 0.79) fold;
    }
    @keyframes fold {
        from {
            transform: translate(-50px);
            opacity: 0;
            color: transparent;
        }
        to {
            transform: translate(0px);
            opacity: 1;
            color: white;
        }
    }
    .fa {
        font-size: 1.2em !important;
        padding: 2px;
    }
}