/* ====== Header Start  ====== */


/* ====== RESET ====== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}



/* ====== TOP NAVBAR ====== */
.header {
    background: #fff;
    border-bottom: 2px solid #034f59;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 6%;
}

.logo {
    display: flex;
    align-items: center;
    color: #034f59;
    text-decoration: none;
}

.brpi-logo-img {
    height: 40px;
    width: auto;
    margin-right: 8px;
}

.logo span {
    font-weight: 700;
    font-size: 30px; /* px is used */
    color: #034f59;
    letter-spacing: 0.3px;
}

.nav-links {
    display: flex; /* Ensure flex is set for the container */
    align-items: center;
    gap: 25px; /* Added gap to remove margin-left on all items */
}

.nav-links a {
    text-decoration: underline;
    color: #000;
    /* margin-left: 25px; -- Replaced by gap on .nav-links */
    font-size: 16px; /* px is used */
    font-weight: 400;
    padding: 5px 0; /* Added slight padding for better hover area */
}

.nav-links a:hover {
    text-decoration: underline;
    color: #034f59;
}


/* ----------------------------------------------------------------------------------- */
/* ====== POLICIES DROPDOWN MENU STYLES (New Styles for header.php) ====== */
/* ----------------------------------------------------------------------------------- */

/* Policies Dropdown Container */
.dropdown {
    position: relative; 
    /* The link will now be inside this div, inheriting nav-links flex properties */
}

/* Policies Link Styling - This style will override the default .nav-links a style for the Policies main link */
.dropdown > a {
    text-decoration: underline;
    color: #000;
    font-size: 16px; /* px is used */
    font-weight: 400;
    padding: 5px 0; /* Match other link padding */
    display: block; /* Ensure full clickable area */
}

.dropdown > a:hover {
    text-decoration: underline;
    color: #034f59;
}

/* Dropdown Content/Menu Styling */
.dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #ffffff;
    min-width: 280px; /* Sufficient width for long policy names */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10; /* Ensure it stays on top of other content */
    padding: 10px 0;
    border-radius: 4px;
    /* Positioning it slightly left of the link itself */
    left: -50px; 
    border: 1px solid #ccc;
}

/* Dropdown Item Styling - Overrides .nav-links a for the inner items */
.dropdown-content a {
    color: #333;
    padding: 8px 16px;
    text-decoration: none; /* Removed underline for inner links */
    display: block;
    font-size: 16px; /* px is used */
    margin: 0; /* Remove the margin-left inherited from .nav-links a */
    white-space: nowrap; /* Prevent breaking policy names */
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: #034f59;
    text-decoration: none; /* Keep text-decoration: none on hover */
}

/* Class to show the dropdown (toggled by JavaScript) */
.show {
    display: block;
}


/* ----------------------------------------------------------------------------------- */
/* ====== JOURNAL TITLE SECTION (Existing Styles) ====== */
/* ----------------------------------------------------------------------------------- */
.journal-header {
    background: #D5D2CE;
    padding: 60px 6%;
    text-align: left;
}



.journal-header p {
    color: #034f59;
    font-size: 20px; /* px is used */
    font-family: 'Century Gothic';
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* ====== Header End  ====== */





/* ====== Pre FOOTER Start ====== */  
 

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* প্রি-ফুটার সেকশন স্টাইল */
        .pre-footer-cta {
            background-color: #034f59;
            padding: 50px 0;
           /* border-top: 2px solid #034f59; /* ওয়েবসাইটের প্রাথমিক নীল রং */
            margin-top: 60px; 
            text-align: center;
        }

        .pre-footer-cta .container {
            display: flex;
            flex-wrap: wrap; 
            justify-content: center;
            align-items: center; 
        }

        .cta-col {
            flex: 1; 
            min-width: 250px;
            padding: 10px 0;
        }
        
        /* উল্লম্ব রেখা (Vertical Divider) এবং প্যাডিং */
        .cta-editorial {
            border-right: 1px solid #fff; 
            padding-right: 40px; 
        }

        .cta-reviewer {
            padding-left: 40px; 
        }

        /* -----------------------------------------------------
         * বাটন স্টাইল (শিক্ষা-থিমের রং) 
         * ----------------------------------------------------- */
        .cta-button {
            display: inline-block;
            text-decoration: none;
            text-align: center;
            padding: 15px 30px;
            border-radius: 4px;
            font-weight: ;
            font-size: 1.1rem;
            min-width: 200px;
            transition: background-color 0.3s, transform 0.2s;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            white-space: nowrap;
            border: 1px solid white;
        }

        .button-editorial {
            /* গভীর নীল (Deep Blue): পেশাদারিত্ব, জ্ঞান */
            background-color: ; 
            color: #fff;
        }
        
        .button-editorial:hover {
            background-color: white; /* গাঢ় হোভার রং */
            color: #034f59;
            transform: translateY(-2px);
        }

        .button-reviewer {
            /* উজ্জ্বল কমলা (Bright Orange): শক্তি, মনোযোগ, ঘোষণা */
            background-color: ; 
            color: #fff; /* টেক্সট গাঢ় */
        }

        .button-reviewer:hover {
            background-color: white; /* গাঢ় হোভার রং */
            color: #034f59;
            transform: translateY(-2px);
        }

        /* -----------------------------------------------------
         * ছোট স্ক্রিন (Mobile) এর জন্য রেসপন্সিভ ডিজাইন 
         * ----------------------------------------------------- */
        @media (max-width: 650px) {
            .pre-footer-cta .container {
                flex-direction: column; 
            }

            .cta-col {
                min-width: 100%;
                margin-bottom: 20px;
                border-right: none; 
                padding-right: 0; 
                padding-left: 0;
                
            }
            
            .cta-editorial {
                border-bottom: 1px solid #ccc;
                padding-bottom: 30px;
                
            }

            .cta-reviewer {
                padding-top: 30px;
                padding-left: 0; 
            }

            .cta-button {
                width: 80%;
                margin: 0 auto;
            }
        }
        
   
 /* ====== Pre FOOTER End ====== */ 









/* ====== FOOTER Start (Existing Styles) ====== */



.footer {
    background-color: #D5D2CE;
    padding-top: 50px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.footer .footer-inner-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.footer-top-section {
    border-bottom: 1px solid #034f59;
    padding-bottom: 40px;
    margin-bottom: 30px;
}

.footer-top-section .footer-inner-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-col {
    flex: 1;
    min-width: 280px;
}

.footer-info .logo {
    height: 30px;
    width: auto;
    margin-bottom: 15px;
}

.footer-info p {
    margin: 0;
    font-size: 14.4px; /* 0.9em converted to 16px base */
    color: #000;
    line-height: 1.6;
}

.footer-subscribe {
    text-align: right;
    flex: 2;
    min-width: 350px;
}

.footer-subscribe h3 {
    font-size: 24px; /* 1.5em converted to 16px base */
    color: #000000;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.subscribe-form {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.email-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 14.4px; /* 0.9em converted to 16px base */
    max-width: 200px;
}

.subscribe-btn {
    background-color: #004d80;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14.4px; /* 0.9em converted to 16px base */
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.subscribe-btn:hover {
    background-color: #003366;
}

.footer-bottom-section {
    padding-bottom: 30px;
}

.footer-bottom-section .footer-inner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-copyright-links {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    color: #333;
}

.footer-copyright-links p {
    margin: 0;
    font-size: 13.6px; /* 0.85em converted to 16px base */
    color: #333;
}

.footer-links a {
    color: #333;
    text-decoration: none;
    font-size: 13.6px; /* 0.85em converted to 16px base */
    margin-right: 15px;
}

.footer-links a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer-top-section .footer-inner-container,
    .footer-bottom-section .footer-inner-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-col {
        min-width: 100%;
        text-align: center;
    }

    .footer-subscribe {
        text-align: center;
    }

    .subscribe-form {
        justify-content: center;
    }

    .footer-copyright-links {
        flex-direction: column;
        gap: 10px;
    }

    .footer-links a {
        margin: 0 5px;
    }
}
/* ====== FOOTER End ====== */



/* ----------------------------------------------------------------------------------- */
/* ====== BODY AND RIGHT SIDEBAR LAYOUT (Existing Styles) ====== */
/* ----------------------------------------------------------------------------------- */

.page-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding-left: 60px ;
  padding-right: 40px ;
  padding-top: 60px ;
  padding-bottom: 40px ;
  gap: 30px;
  line-height: 1.8;
  
}

/* Main content - ADJUSTED WIDTH FOR PROPER LAYOUT */
.main-content {
  flex-grow: 1;
  /* Adjusted from 70% to 68% for better fit with 29% sidebar and 30px gap */
  width: 68%;
  padding-left: 70px ;
  padding-right: 120px ;
  /* border-right: 0.5px solid #d0d0d0; */
}

/* Right sidebar WRAPPER - NO BOX STYLE */
.right-sidebar {
    /* Layout */
    position: ;
    top: 20px;
    /* Adjusted from 27% to 29% for better fit */
    width: 23%; /* Set to 29% to align with original styles and keep content in flow */

    /* ***** FINAL FIX: REMOVED ALL BOX STYLING ***** */
    background: none; 
    padding: 0;      
    border: none; 
    border-radius: 0;

    /* Content baseline styles */
    line-height: 1.8;
}

/*
 * ====== NEW RIGHT SIDEBAR CONTENT STYLES (Image Design) ======
*/

/* --- Submit Article Button --- */
.submit-article-btn {
    display: block;
    padding: 10px 15px;
    margin-bottom: 30px;
    background-color: #034f59; /* Blue color */
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 15px; /* px is used */
    font-weight: 600 ;
    border: 1px solid #3660a5;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s;
}

.submit-article-btn:hover {
    background-color: #1a6874;
}

/* --- Headings for Information/Indexing/Join --- */
.sidebar-heading {
    font-size: 15px; /* px is used */
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #333;
}



/* Styling the custom separator line (DAG) for list links (Editorial Board | Reviewers) */
.sidebar-links .separator {
    display: inline-block;
    height: 12px; 
    width: 1px;
    background: #333; 
    margin: 0 5px; 
    vertical-align: middle; 
}

.sidebar-links li {
    margin-bottom: 5px;
    font-size: 15px; /* px is used */
    text-decoration: underline;
}

.sidebar-links a {
    color: #333;
    text-decoration: none;
    text-decoration: underline;
}

.sidebar-links a:hover {
    text-decoration: underline;
}

/* --- Inline Links (Information, Indexing) --- */
.sidebar-info-links {
    font-size: 15px; /* px is used */
    margin-bottom: 15px;
    padding-left: 0px; 
    line-height: 1.5; /* Keeps lines centered */
    text-decoration: underline;
}

.sidebar-info-links a {
    color: #333;
    text-decoration: none;
}

.sidebar-info-links a:hover {
    text-decoration: underline;
}


/* Styling the custom separator line (DAG) for inline links */
.sidebar-info-links .separator {
    display: inline-block;
    height: 12px; 
    width: 1px;
    background: #333; 
    margin: 0 5px; 
    vertical-align: middle; 
}




/* ====== RESPONSIVE (Keep as is) ====== */
@media screen and (max-width: 900px) {
  .page-container {
    flex-direction: column;
    gap: 0;
  }
  .main-content,
  .right-sidebar {
    width: 100%;
    position: relative;
    top: 0;
  }
}


/* ====== BODY AND RIGHT SIDEBAR LAYOUT (Crucial Flexbox) END  ====== */



/* ====== Submit article button fixed start  ====== */
/*
 

/*
 * এই ক্লাসটি জাভাস্ক্রিপ্ট দ্বারা যোগ করা হবে
 * যখন বাটনটি স্ক্রিনের নিচে ডানে Fixed হবে
*/
.fixed-submit-btn {
    position: fixed;
    bottom: 20px; /* স্ক্রিনের নিচ থেকে 20px উপরে */
    right: 50px; /* স্ক্রিনের ডান দিক থেকে 20px দূরে */
    z-index: 1000; /* নিশ্চিত করুন যেন অন্য উপাদানের উপরে থাকে */
    /* Transition ব্যবহার করতে পারেন যেন Fixed হওয়ার সময় পরিবর্তনটি মসৃণ হয় */
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0px 10px 30px 2px rgba(0, 0, 0, 0.6);
}

/* ====== Submit article button fixed end  ====== */