/* Ribbon Size Auto-Adjust */
.ribbon-container {
    width: 100%;
    text-align: center;
    background-color: #50D972; /* Updated ribbon color */
    padding: 8px 0; /* Previously 10px, now reduced */
    font-size: 0.9em; /* Slightly smaller text */
    position: relative;
    z-index: 10;
    overflow: hidden; /* Prevents content from overflowing */
    box-sizing: border-box;
}

/* Adjusting the Logo and Ribbon Alignment */
.pkp_site_name {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    overflow: hidden; /* Ensures content stays within bounds */
}

/* Ensure image and ribbon are properly aligned */
.pkp_site_name .is_img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin-top: 2px; /* Reduced spacing */
    z-index: 5;
    max-width: 100%; /* Prevents overflow */
    box-sizing: border-box;
}

/* Responsive Logo Size */
.pkp_site_name .is_img img {
    max-width: 100%; /* Ensures image fits inside container */
    height: auto;
    max-height: 250px; /* Adjusted */
    object-fit: contain;
}

/* Mobile View Fix */
@media (max-width: 768px) {
    .pkp_site_name {
        flex-direction: column-reverse; /* Ribbon will be above logo */
    }
    
    .ribbon-container {
        padding: 3px 0; /* Further reduced padding */
        font-size: 0.85em; /* Slightly smaller text */
    }

    .pkp_site_name .is_img img {
        max-width: 90%; /* Ensures image does not overflow */
        max-height: 130px;
    }
}

/* 1. Background image ko header se puri tarah hatane ke liye */
.pkp_structure_head {
    background-image: none !important;
    background: #F7D04A; /* Ya jo bhi aapka header background color ho */
}

/* 2. Agar OJS default title text aur logo dono dikha raha hai */
.pkp_site_name .is_text {
    display: none !important; /* Sirf logo dikhega, text hat jayenge */
}

/* 3. Logo container se background hatane ke liye */
.pkp_site_name {
    background: none !important;
}