<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./assets/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<link rel="stylesheet" href="./assets/css/style.css">


<style>
#ck-img-preview img {
    max-width: 100%;
    height: auto;
}

.blink_me {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}
</style>

<style>
.service-details {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

/* Desktop view: all items in a single row */
.service-details li {
    flex: 1 1 auto;
    min-width: 160px;
    /* Adjust as needed */
}

/* Tablet view: two items per row */
@media (max-width: 768px) {
    .service-details li {
        flex: 1 1 45%;
        /* About half-width for each item */
    }
}

/* Mobile view: ensure two items per row */
@media (max-width: 480px) {
    .service-details li {
        flex: 1 1 48%;
        /* Two items per row with some gap */
    }
}

/* Basic styling */
.search-details {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

/* Desktop view: all items in a single row */
.search-details li {
    flex: 1 1 auto;
    min-width: 80px;
}

/* Tablet view: two items per row */
@media (max-width: 768px) {
    .search-details li {
        flex: 1 1 45%;
        /* About half-width for each item */
    }
}

/* Mobile view: ensure two items per row */
@media (max-width: 480px) {
    .search-details li {
        flex: 1 1 48%;
        /* Two items per row with some gap */
    }

    .service-details li:first-child,
    .search-details li:first-child {
        flex: 1 1 100%;
        /* First item takes full width */
    }
}
</style>