/* =========================================
   CUSTOM CSS
   Generated by OTW OJS Builder
========================================= */

<!-- =========================================
     OJS INDEXING LOGOS
     Generated by OTW OJS Builder
========================================= -->

<style>

.otw-indexing {

    --otw-primary: #043F29;
    --otw-secondary: #296338;
    --otw-background: #FBFAF0;

    width: 100%;

    box-sizing: border-box;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    box-shadow:
        0 8px 22px
        rgba(16, 24, 40, .08);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


.otw-indexing-title {

    position: relative;

    padding: 14px 16px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--otw-secondary),
            var(--otw-primary)
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

}


.otw-indexing-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;

    padding: 13px;

}


.otw-indexing-item {

    min-width: 0;
    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #eaecf0;
    border-radius: 7px;

    color: #344054;

    text-decoration: none !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;

}


.otw-indexing-item:hover {

    border-color:
        var(--otw-primary);

    box-shadow:
        0 4px 12px
        rgba(16, 24, 40, .06);

    transform:
        translateY(-1px);

}


.otw-indexing-item img {

    display: block;

    max-width: 100%;
    max-height: 44px;

    width: auto;
    height: auto;

    object-fit: contain;

}

.otw-indexing-text {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    color:
        var(--otw-secondary);

    font-size: 13px;
    font-weight: 700;

    text-align: center;
    line-height: 1.4;

}


/* =========================================
   LOGO + NAME
========================================= */

.otw-indexing-label
.otw-indexing-list {

    grid-template-columns: 1fr;

}


.otw-indexing-label
.otw-indexing-item {

    min-height: 58px;

    justify-content: flex-start;

    gap: 12px;

}


.otw-indexing-label
.otw-indexing-item img {

    width: 80px;

    max-width: 80px;
    max-height: 35px;

}


.otw-indexing-name {

    min-width: 0;

    color: #344054;

    font-size: 12px;
    font-weight: 700;

}


/* =========================================
   COMPACT
========================================= */

.otw-indexing-compact
.otw-indexing-list {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.otw-indexing-compact
.otw-indexing-item {

    width: auto;

    min-width: 70px;
    min-height: 45px;

    flex: 1 1 80px;

    padding: 7px;

}


.otw-indexing-compact
.otw-indexing-item img {

    max-height: 30px;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

    .otw-indexing-list {

        grid-template-columns: 1fr;

    }

}

</style>


<div class="otw-indexing">

    <div class="otw-indexing-title">
        Indexed By
    </div>

    <div class="otw-indexing-list">


        <a
            href="#"
            class="otw-indexing-item" target="_blank" rel="noopener noreferrer"
            aria-label="Google Scholar"
        >
            <img
                src="https://ojshub.com/scanner/assets/images/indexing/google-scholar.png"
                alt="Google Scholar"
                loading="lazy"
            >
        </a>

        <a
            href="#"
            class="otw-indexing-item" target="_blank" rel="noopener noreferrer"
            aria-label="Crossref"
        >
            <img
                src="https://ojshub.com/scanner/assets/images/indexing/crossref.png"
                alt="Crossref"
                loading="lazy"
            >
        </a>

        <a
            href="#"
            class="otw-indexing-item" target="_blank" rel="noopener noreferrer"
            aria-label="GARUDA"
        >
            <img
                src="https://ojshub.com/scanner/assets/images/indexing/garuda.png"
                alt="GARUDA"
                loading="lazy"
            >
        </a>

        <a
            href="#"
            class="otw-indexing-item" target="_blank" rel="noopener noreferrer"
            aria-label="Dimensions"
        >
            <img
                src="https://ojshub.com/scanner/assets/images/indexing/dimensions.png"
                alt="Dimensions"
                loading="lazy"
            >
        </a>


    </div>

</div>