/* 1. Set the main header/navbar container to relative positioning. */
/* This will contain the absolutely positioned logo. */
/* Replace '.pkp_structure_head' with the actual class of your header container if different. */
.pkp_structure_head {
    position: relative;
    overflow: visible; /* Ensure the logo isn't cut off */
}

/* 2. Target and position the logo container */
/* Replace '.pkp_site_name_wrapper' with your actual logo wrapper class if different. */
.pkp_site_name_wrapper {
    position: absolute;
    top: 10px; /* Adjust this to fit within your header space */
    left: 20px; /* Align to the left corner */
    width: auto; /* Allow width to be flexible based on image and text */
    margin: 0; /* Remove any default margins */
    display: flex; /* Align logo and text horizontally */
    align-items: center; /* Center them vertically to each other */
    gap: 15px; /* Add some space between the logo and the text */
}

/* 3. Handle the logo image size and spacing */
.pkp_site_name_wrapper img {
    max-height: 80px; /* Set a consistent size */
    width: auto;
    display: block;
}

/* 4. Target the text next to the logo (The Journal Name) */
/* Assuming the title is in a separate text container inside the wrapper, like 'a' or 'h1'. */
/* Add this to style the white text for your dark background. */
.pkp_site_name_wrapper .pkp_site_name_title {
    color: #ffffff !important; /* Force the text to white */
    font-size: 1.5em; /* Adjust size as needed */
    font-weight: bold;
    display: flex; /* Helps with complex text layouts */
    flex-direction: column; /* Stacks 'and Dental College' below 'Journal of Women Medical' */
    text-align: left;
}

/* Optional: To further control text positioning within the flex item */
.pkp_site_name_wrapper .pkp_site_name_title div {
    /* If the name is split by a line break '<div>' or '<br>', this can control it */
}