/*========================================
       OUR BRANCHES PAGE STYLE
=========================================*/
.contact-card {
    text-align: center;
    border-radius: 8px;
    margin: 0px 0.5px 30px;
    padding: 15px 15px 15px;
    background: var(--white);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    width: 100%;
}

.contact-card:hover {
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.contact-card h4 {
    margin-bottom: 0px;
    text-transform: capitalize;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.contact-card p {
    width: 100%;
    font-size: 18px;
    line-height: 20px;
    margin: 0 auto;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.contact-card-text {
    font-size: 14px !important;
}

/* Make row flex to stretch cards equally */
.banner-part .row {
    display: flex;
    flex-wrap: wrap;
}

/* Make column flex */
.banner-part .col-md-6,
.banner-part .col-lg-4 {
    display: flex;
}

/* Optional: align contact section bottom */
.contact-card .contact-card-text:last-child {
    margin-top: auto;
}

/*========================================
   STATE SIDEBAR ACTIVE STATE STYLING
=========================================*/
.banner-category-item a {
    position: relative;
    border-radius: 5px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.banner-category-item a.active {
    color: var(--white) !important;
    background: var(--primary) !important;
    font-weight: 500;
    box-shadow: 0px 4px 12px rgba(223, 161, 12, 0.35);
}

.banner-category-item a.active i {
    color: var(--white);
}

.banner-category-item a.active span {
    color: var(--white);
}

.banner-category-item a.active::before {
    color: var(--white) !important;
}

/* Sticky sidebar for better UX */
.banner-category {
    position: sticky;
    top: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

/* Custom scrollbar for sidebar */
.banner-category::-webkit-scrollbar {
    width: 4px;
}

.banner-category::-webkit-scrollbar-track {
    background: var(--chalk);
    border-radius: 4px;
}

.banner-category::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

@media (max-width: 991px) {
    .banner-category {
        display: block;
        position: static;
        max-height: none;
    }
}

/*========================================
         SKELETON LOADING STYLE
=========================================*/
.skeleton-card {
    padding: 20px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.skeleton {
    background: linear-gradient(90deg, #eee, #ddd, #eee);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-title {
    width: 60%;
    height: 20px;
}

.skeleton-text {
    width: 100%;
    height: 12px;
}

.skeleton-text.short {
    width: 40%;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/*========================================
       BRANCH CARD FADE-IN ANIMATION
=========================================*/
@keyframes branchFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#branchesContainer .col-md-6 {
    animation: branchFadeIn 0.4s ease forwards;
}

#branchesContainer .col-md-6:nth-child(1) {
    animation-delay: 0.05s;
}

#branchesContainer .col-md-6:nth-child(2) {
    animation-delay: 0.1s;
}

#branchesContainer .col-md-6:nth-child(3) {
    animation-delay: 0.15s;
}

#branchesContainer .col-md-6:nth-child(4) {
    animation-delay: 0.2s;
}

#branchesContainer .col-md-6:nth-child(5) {
    animation-delay: 0.25s;
}

#branchesContainer .col-md-6:nth-child(6) {
    animation-delay: 0.3s;
}

#branchesContainer .col-md-6:nth-child(7) {
    animation-delay: 0.35s;
}

#branchesContainer .col-md-6:nth-child(8) {
    animation-delay: 0.4s;
}

#branchesContainer .col-md-6:nth-child(9) {
    animation-delay: 0.45s;
}

/*========================================
        BRANCH COUNT BADGE
=========================================*/
.branch-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
    margin-left: auto;
    padding: 0 5px;
    line-height: 22px;
}

.banner-category-item a.active .branch-count {
    color: var(--primary);
    background: var(--white);
}

.banner-category-list {
    padding: 0px 0px 20px;
}