{% extends "base.html" %}
{% load static %}
{% block content %}

<section class="page-title-section bg-img cover-background top-position1 left-overlay-secondary"
         data-overlay-dark="8"
         data-background="{% static 'img/banner/2.jpg' %}">
    <div class="container text-center">

        <h1 class="font-weight-800 text-primary">
            Our Publications
        </h1>

       
    </div>
</section>
<section class="py-5" style="background:#f9fafc;">
    <div class="container">

        <h2 class="text-center fw-bold text-primary" style="font-size:32px;">
            Publication Services
        </h2>
        <hr style="width:160px; margin:auto; border:2px solid #007bff; opacity:0.8;">
        <br><br><br>

        <div class="row g-4">

            <!-- CARD 1 -->
            <div class="col-md-4 d-flex">
                <div class="service-card text-center w-100"
                     style="background:#fff; padding:28px; border-radius:14px;
                            box-shadow:0 4px 12px rgba(0,0,0,0.06); transition:0.3s;">
                    
                    <div style="font-size:45px; margin-bottom:12px;">📄</div>
                    <h5 class="fw-bold mb-2">Manuscript Editing</h5>
                    <p style="font-size:14px; color:#666; margin-bottom:0;">
                        Formatting, proofreading, artwork correction and cover letter writing.
                    </p>
                </div>
            </div>

            <!-- CARD 2 -->
            <div class="col-md-4 d-flex">
                <div class="service-card text-center w-100"
                     style="background:#fff; padding:28px; border-radius:14px;
                            box-shadow:0 4px 12px rgba(0,0,0,0.06); transition:0.3s;">

                    <div style="font-size:45px; margin-bottom:12px;">🎓</div>
                    <h5 class="fw-bold mb-2">PhD Publication</h5>
                    <p style="font-size:14px; color:#666; margin-bottom:0;">
                        Support to refine research for national and international journals.
                    </p>
                </div>
            </div>

            <!-- CARD 3 -->
            <div class="col-md-4 d-flex">
                <div class="service-card text-center w-100"
                     style="background:#fff; padding:28px; border-radius:14px;
                            box-shadow:0 4px 12px rgba(0,0,0,0.06); transition:0.3s;">

                    <div style="font-size:45px; margin-bottom:12px;">🏆</div>
                    <h5 class="fw-bold mb-2">Journal Selection</h5>
                    <p style="font-size:14px; color:#666; margin-bottom:0;">
                        Find suitable journals based on indexing, quality and paper scope.
                    </p>
                </div>
            </div>

            <!-- CARD 4 -->
            <div class="col-md-4 d-flex">
                <div class="service-card text-center w-100"
                     style="background:#fff; padding:28px; border-radius:14px;
                            box-shadow:0 4px 12px rgba(0,0,0,0.06); transition:0.3s;">

                    <div style="font-size:45px; margin-bottom:12px;">📨</div>
                    <h5 class="fw-bold mb-2">Journal Submission</h5>
                    <p style="font-size:14px; color:#666; margin-bottom:0;">
                        Proper submission as per journal guidelines and formatting rules.
                    </p>
                </div>
            </div>

            <!-- CARD 5 -->
            <div class="col-md-4 d-flex">
                <div class="service-card text-center w-100"
                     style="background:#fff; padding:28px; border-radius:14px;
                            box-shadow:0 4px 12px rgba(0,0,0,0.06); transition:0.3s;">

                    <div style="font-size:45px; margin-bottom:12px;">🔁</div>
                    <h5 class="fw-bold mb-2">Re-Submission Support</h5>
                    <p style="font-size:14px; color:#666; margin-bottom:0;">
                        Reviewer comment response, rewriting, word reduction, improvement.
                    </p>
                </div>
            </div>

            <!-- CARD 6 -->
            <div class="col-md-4 d-flex">
                <div class="service-card text-center w-100"
                     style="background:#fff; padding:28px; border-radius:14px;
                            box-shadow:0 4px 12px rgba(0,0,0,0.06); transition:0.3s;">

                    <div style="font-size:45px; margin-bottom:12px;">🔍</div>
                    <h5 class="fw-bold mb-2">Technical Review</h5>
                    <p style="font-size:14px; color:#666; margin-bottom:0;">
                        Language clarity, structure and impactful content review.
                    </p>
                </div>
            </div>

        </div>

        <!-- Contact Button -->
        <div class="text-center mt-5">
            <a href="tel:9010632610" class="btn btn-primary px-4 py-2"
                style="border-radius:12px; font-size:18px;">
                📞 Contact: 90106 32610
            </a>
        </div>

    </div>
</section>


<style>
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

.service-card {
    background:#fff;
    padding:28px;
    border-radius:14px;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
    transition:all 0.35s ease-in-out;
    cursor:pointer;
    border:1px solid transparent;
}

/* 🔥 Hover Effect */
.service-card:hover {
    transform: translateY(-8px);
    box-shadow:0 18px 32px rgba(0,0,0,0.14);
    background:#eaf3ff; /* Light sky-blue highlight */
    border:1px solid #007bff;
}

/* Optional: Emoji bounce effect on hover */
.service-card:hover div:first-child {
    transform: scale(1.15);
    transition:0.3s;
}


</style>



{% endblock %}