@import url('https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@100..800&display=swap');
body,
h1,
h2,
h3,
p,
span {
    font-family: "Anek Bangla", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

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

.codetechbd_maincolor {
    color: var(--main-color-solid);
}

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

.codetechbd_card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid transparent;
    border-radius: 2%;
    z-index: 1;
    pointer-events: none;
    /* Initial state with all borders transparent */
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.codetechbd_card:hover::before {
    /* Animation for a smooth continuous circle effect */
    animation: borderAnimation 2.4s linear infinite;
}

@keyframes borderAnimation {
    0% {
        border-top-color: var(--hover-color-solid);
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    25% {
        border-top-color: var(--hover-color-solid);
        border-right-color: var(--hover-color-solid);
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    50% {
        border-top-color: var(--hover-color-solid);
        border-right-color: var(--hover-color-solid);
        border-bottom-color: var(--hover-color-solid);
        border-left-color: transparent;
    }
    75% {
        border-top-color: var(--hover-color-solid);
        border-right-color: var(--hover-color-solid);
        border-bottom-color: var(--hover-color-solid);
        border-left-color: var(--hover-color-solid);
    }
    100% {
        border-top-color: transparent;
        border-right-color: var(--hover-color-solid);
        border-bottom-color: var(--hover-color-solid);
        border-left-color: var(--hover-color-solid);
    }
}


/* Optional: Add a glowing effect on hover */

.codetechbd_card:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    transition: all 0.3s ease;
    border-radius: 2%;
}

.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;
    font-size: medium;
}

.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);
}

.codetechbd_logo_image {
    width: var(--logo_size);
    max-width: 250%;
}