/* Gallery Section Styling */
.gallery-section {
    position: relative;
    padding: 30px 0;
}

.gallery-section .link-btn {
    position: absolute;
    right: 0;
    top: 10px;
}

/* Portfolio Item Styling */
.portfolio-item {
    position: relative;
    padding: 0 7.5px;
    margin-bottom: 15px;
}

.portfolio-item-inner {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

/* On Hover, scale up the item */
.portfolio-item-inner:hover {
    transform: scale(1.05);
}

/* Image Styling */
.portfolio-image img {
    width: 100%;
    border-radius: 8px;
    transition: opacity 0.3s ease-in-out;
}

/* Hover Effect on Image */
.portfolio-item-inner:hover .portfolio-image img {
    opacity: 0.8;
}

/* Overlay Box Styling */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.portfolio-item-inner:hover .portfolio-overlay {
    opacity: 1;
}

/* Overlay Content Styling */
.overlay-content {
    color: white;
    padding: 20px;
    text-align: center;
}

.overlay-content h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.overlay-content .read-more {
    color: #48c7ec;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.overlay-content .read-more:hover {
    color: #ffffff;
}

/* Read More Icon */
.read-more .fa {
    margin-left: 5px;
}
/*
<section class="gallery-section">
        <div class="auto-container">
            <!-- Title -->
            <div class="sec-title">
                <h2>Our Services</h2>
                <div class="link-btn"><a href="services.html" class="btn-style-five">View All</a></div>
            </div>
    
            <div class="row-15 grid clearfix">
                <!-- Portfolio Item -->
                <div class="portfolio-item col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="portfolio-item-inner">
                        <a href="indirect-tax.html" class="portfolio-link">
                            <figure class="portfolio-image">
                                <img src="images/gallery/2.jpg" alt="image">
                                <figcaption class="portfolio-overlay">
                                    <div class="overlay-content">
                                        <h2>INDIRECT TAX</h2>
                                        <a class="read-more" href="indirect-tax.html">Read More <span class="fa fa-angle-right"></span></a>
                                    </div>
                                </figcaption>
                            </figure>
                        </a>
                    </div>
                </div>
                <!-- Repeat for other items -->
            </div>
        </div>
    </section>
    /*