@extends('app.web.layout.layout')

@section('title',__('Tambura'))

@push('css')
<style>
    .hero-btns a {
        padding: 15px;
    }
    .fab{
        color: white;
        font-size: 22px;
    }


    .menus{
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
overflow-x: auto;
}
.menu{
    border: 1px solid yellow;
    padding: 3px 15px ;
}
/* Scroll dizaynını dəyişdiririk */
.scroll-container::-webkit-scrollbar {
width: 2px; /* Scroll barın eni */
height: 2px;
}

.scroll-container::-webkit-scrollbar-thumb {
background-color: #888; /* Scroll barın rəngi */

}

.scroll-container::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Hover effekti */
}

.scroll-container::-webkit-scrollbar-track {
background-color: #f1f1f1; /* Track-in fon rəngi */

}
</style>
@endpush

@section('content')
<!-- latest news -->


<div class="latest-news mt-150 mb-150">
    <div class="container">
        <div class="row ">
            <div class="menus scroll-container">
        <a href="#"><p class="menu">ŞORBALAR</p></a>
        <a href="#"><p class="menu">ŞORBALAR</p></a>
        <a href="#"><p class="menu">ŞORBALAR</p></a>
        <a href="#"><p class="menu">ŞORBALAR</p></a>
        <a href="#"><p class="menu">ŞORBALAR</p></a>
        <a href="#"><p class="menu">ŞORBALAR</p></a>
        <a href="#"><p class="menu">ŞORBALAR</p></a>
        <a href="#"><p class="menu">ŞORBALAR</p></a>

            </div>
        </div>
        </div>
        <br><br>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <div class="single-latest-news">
                    <a href="#"><div class="latest-news-bg news-bg-1"></div></a>
                    <div class="news-text-box">
                        <div style="display: flex; justify-content: space-between;">
                            <h3>ACILI ƏZMƏ</h3>
                            <h3>9 ₼</h3>
                        </div>
                        <p class="blog-meta">
                            <span class="date"><i class="fas fa-calendar"></i> Məzələr</span>
                        </p>
                        <p class="excerpt">Təzə xiyar, tomat,cəfəri,ağ soğan,kapia bibər,yaşıl bibər</p>

                    </div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <div class="pagination-wrap">
                            <ul>
                                <li><a href="#">Əvvəl</a></li>
                                <li><a href="#">1</a></li>
                                <li><a class="active" href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">Sonra</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end latest news -->
@endsection
