html, body {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400;
    line-height: 1.6;
    color: #222;
     background: #FBF9F4;
}

html, body {
    font-family: 'Inter', sans-serif !important;
}

h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 15px;
}
a.title-link {
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    display: block;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #1a1a1a ;
    text-decoration: none; /* optional but recommended */
}


element.style {
    background-image: url(/core/services/aop-file-manager/file/572b093…);
}
.banner.subject, .banner.journal {
    padding-top: 30px ;
}
.banner.banner-placeholder {
    background: url(../images/bannerPlaceholder_2140x1100.jpg) no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.banner {
    position: relative;
    top: 0px;
    left: 0px;
    overflow: hidden;
    clear: both;
    min-height: 207px;
}
.banner {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    clear: both;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
section {
    display: block;
    unicode-bidi: isolate;
}



}
@media only screen and (min-width: 40.063em) {
    .banner.subject .social, .banner.subject .button.dark, .banner.journal .social, .banner.journal .button.dark {
        display: block;
    }
}
.banner.subject .social, .banner.subject .button.dark, .banner.journal .social, .banner.journal .button.dark {
    display: none;
}
.top-right {
    position: absolute;
    top: 0;
    right: 30px;
}
.social {
    margin-bottom: 0;
}
.black {
    color: #000000 !important;
}
ul, dl, dl dd, ul li ul, ul li ol {
    margin: 0;
}
label, ul, ol, dl {
    font-size: inherit;
}
ul {
    margin-left: 1.1rem;
}
ul, ol, dl {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    list-style-position: outside;
    margin-bottom: 1.4285714286rem;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

.social.black .rss :hover circle, .social.black .rss:focus circle, .social.black .rss:active circle {
    fill: #006ED2;
    opacity: 100;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
circle[Attributes Style] {
    opacity: 0.6;
    cx: 18.5;
    cy: 18.5;
    r: 17.3;
}
user agent stylesheet
:not(svg) {
    transform-origin: 0px 0px;
}
a:hover, a:focus, a:active, a.active {
    text-decoration: none;
    color: #006FCA;
}
a:hover, a:focus {
    color: rgb(0, 95.46, 173.72);
}
a:hover {
    cursor: pointer;
}
.icon {
    cursor: pointer;
    width: 37px;
    height: 37px;
}
a {
    color: #006FCA;
    line-height: inherit;
    text-decoration: none;
}
user agent stylesheet
a:-webkit-any-link:active {
    color: -webkit-activelink;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
.social li {
    float: left;
    margin-left: 0.75em;
    width: auto;
    list-style: none;
}
user agent stylesheet
li {
    text-align: -webkit-match-parent;
}
.black {
    color: #000000 !important;
}
label, ul, ol, dl {
    font-size: inherit;
}
ul, ol, dl {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    list-style-position: outside;
    margin-bottom: 1.4285714286rem;
}
user agent stylesheet
ul {
    list-style-type: disc;
}
.social.black .rss :hover circle, .social.black .rss:focus circle, .social.black .rss:active circle {
    fill: #006ED2;
    opacity: 100;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
circle[Attributes Style] {
    opacity: 0.6;
    cx: 18.5;
    cy: 18.5;
    r: 17.3;
}
user agent stylesheet
:not(svg) {
    transform-origin: 0px 0px;
}
a:hover, a:focus, a:active, a.active {
    text-decoration: none;
    color: #006FCA;
}
a:hover, a:focus {
    color: rgb(0, 95.46, 173.72);
}
a:hover {
    cursor: pointer;
}
.icon {
    cursor: pointer;
    width: 37px;
    height: 37px;
}
a {
    color: #006FCA;
    line-height: inherit;
    text-decoration: none;
}
user agent stylesheet
a:-webkit-any-link:active {
    color: -webkit-activelink;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
.social li {
    float: left;
    margin-left: 0.75em;
    width: auto;
    list-style: none;
}
user agent stylesheet
li {
    text-align: -webkit-match-parent;
}
.black {
    color: #000000 !important;
}
label, ul, ol, dl {
    font-size: inherit;
}
ul, ol, dl {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    list-style-position: outside;
    margin-bottom: 1.4285714286rem;
}
user agent stylesheet
ul {
    list-style-type: disc;
}
.social .icon {
    height: 38px;
    width: 38px;
    display: block;
    transition: none 300ms 
ease-out;
}
.icon {
    cursor: pointer;
    width: 37px;
    height: 37px;
}
a {
    transition: all 0.3s 
ease;
    text-decoration: none;
}
a {
    color: #006FCA;
    line-height: inherit;
    text-decoration: none;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
.social li {
    float: left;
    margin-left: 0.75em;
    width: auto;
    list-style: none;
}
user agent stylesheet
li {
    text-align: -webkit-match-parent;
}
.black {
    color: #000000 !important;
}
label, ul, ol, dl {
    font-size: inherit;
}
ul, ol, dl {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    list-style-position: outside;
    margin-bottom: 1.4285714286rem;
}
user agent stylesheet
ul {
    list-style-type: disc;
}
.hero-social-icons {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
}

.hero-social-icons ul {
    list-style: none;
    
   padding-top: 35px;
    display: flex;
    gap: 12px;
        flex-direction: column;
    
}

.hero-social-icons a.icon {
    width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: 0.2s ease;
}

.hero-social-icons a.icon:hover {
    opacity: 1;
    transform: scale(1.05);
}

.hero-social-icons svg {
    width: 37px;
    height: 37px;
    
}


.hero-container .hero {
    height: 300px;
    color: #fff;
    font-weight: 700;
    
    padding-bottom: 20px !important;
}

.hero {
    position: relative;
}
.hero-container .hero.hero-homepage-if2023 {
    /* background: url(/img/design/mdpi-header-if2023.jpg) #05003b; */
    background-size: 1260px 260px;
}




.hero-links {
    margin-bottom: 25px;
    text-align: center;
}

.hero-links a {
    margin: 0 15px; /* Space between links */
    text-decoration: none;
    color: #333; /* Adjust color */
    font-weight: 500;
}


@media (max-width: 767px) {
    /* Reposition social icons */
    .hero-social-icons {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        text-align: center;
        margin: 0 ;
        padding: 0px;
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
      
    }
    
    .hero-social-icons ul {
       list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;}

    .hero-social-icons li {
    width: 100%;
}
    /* Adjust hero size */
    .hero-container .hero {
        height: auto !important;
        min-height: 200px;
        padding: 25px 0;
    }
    
    /* Optimize hero content */
    .hero h1 {
        font-size: 1.8em;
        margin-bottom: 8px;
    }
    
    .hero .tagline {
        font-size: 0.95em;
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .hero-social-icons {
        all: unset !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin: 20px auto;
        width: 100%;
    }
    
    .hero-social-icons ul {
        all: unset !important;
        display: flex !important;
      
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin: auto;
        padding: auto;
        list-style: none;
    }
    
    .hero-social-icons li {
        all: unset !important;
        display: block !important;
    }
    
    .hero-social-icons a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
       
        text-decoration: none;
        font-size: 18px;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
}


@media (max-width: 767px) {
    .social-icons {
        all: unset !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin: 20px auto;
        width: 100%;
    }
    
    .social-icons ul {
        all: unset !important;
        display: flex !important;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }
    
    .social-icons li {
        all: unset !important;
        display: block !important;
    }
    
    .social-icons a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        color: white !important;
        text-decoration: none;
        font-size: 18px;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
}







/* Make each article box uniform */
.article-content {
    background: #ffffff;
    border: 1px solid #e3e3e3;
    padding: 20px;
    border-radius: 8px;
}



.title-link {
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #1a1a1a;
    text-decoration: none; /* optional but recommended */
}



/* Hero wrapper */
.hero-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Responsive hero section */
.hero {
  width: 100%;
  max-width: 1400px;        /* keeps hero from stretching too wide */
  padding: 60px 20px;       /* responsive height instead of fixed */
  text-align: center;
  position: relative;
  background-size: cover;   /* responsive background */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
}

/* Make it zoom in/out properly */
.hero  {
  position: relative;       /* stop absolute elements breaking layout */
}




/* Force full width for the entire article section */

#left-column {
    margin-right: 20px;
}

#middle-column {
    margin-left: 20px;   /* Adjust spacing as needed */
}


.journal-layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin: 40px auto;      /* space above/below + centered horizontally */
    padding: 0 20px;        /* inner horizontal padding */
    max-width: 1200px;      /* prevents over-wide stretching */
}

.cover-side {
    flex: 0 0 150px;
}

.text-side {
    flex: 1;
}

.journal-cover img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}


.expanding-div {
    margin-top: 30px;
    margin-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
}


 .article-content {
    background: #ffffff;
    border: 1px solid #e3e3e3;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
}



.hero-container {position: relative; 
    height: fit-content !important;
     text-align: center; justify-content: center;}


     .bookmark-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #528265;
    color: white;
    padding: 12px 20px;
    border-radius: 5px;
    z-index: 10000;
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


/* Bookmark icon styles */
.hero-social-icons .fa-bookmark {
  
    transition: color 0.3s ease;
}

.hero-social-icons .bookmarked {
    color: #ffd700 !important; /* Gold color when bookmarked */
}

/* Add this to your CSS */
.hero-social-icons .fa-bookmark {
    color: #fff !important;
    transition: all 0.3s ease;
}

.hero-social-icons .bookmarked {
    color: #ffd700 !important;
}

.hero-social-icons a:hover .fa-bookmark {
    color: #fff ;
    transform: scale(1.1);
}




    body {
    font-family: 'Inter', sans-serif !important;
}

.fa, .fas, .far, .fal, .fab {
    font-family: "Font Awesome 6 Free" !important;
}
.fab {
    font-family: "Font Awesome 6 Brands" !important; /* Needed for brand icons like Facebook, LinkedIn, Twitter */
}
.material-icons {
    font-family: "Material Icons" !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: inherit;
    line-height: 1;
}

             a.button--color-journal {
                      background-color: #fff !important; /* Replace with the desired button color */
                                      }
             .button.button--color.button.button--color.UA_JournalShareButtons{
                border-color:#528265;
                                        }
            .button.button--color {  
                border-color:#C9EFC7 !important;
                color: #528265 !important ;
                                }
              .button.button:hover {
                        background-color: #528265 !important; /* Replace with the desired hover button color */
                        color: #fff  !important; 
                        /* Replace with the desired hover text color */
                    }
             .button.button--color.UA_JournalShareButtons:hover {
            background-color: #528265 !important; /* Hover background color */
            color: #fff !important; /* Hover text color */
                       }

       @media screen and (max-width: 767px) {
   
    .hide-for-small {
        display: none !important;
    }
 
}

/* Reset margins and padding for right column and its container */
#right-column,
#right-column .content__container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix the social icons layout */
.hero-social-icons {
    margin-bottom: 20px;
}

.hero-social-icons ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-social-icons li {
    margin: 0;
    padding: 0;
}

.hero-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #FFFFFF;
  
    padding: 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    width: 100%;
}

.hero-social-icons a:hover {
   
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.hero-social-icons i {
    font-size: 22px;
}

/* Style for the accordion section */
.custom-accordion-for-small-screen-link {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.custom-accordion-for-small-screen-link h3 {
    margin: 0;
    
    font-size: 1.2rem;
}




/* Also style the container to match */
#left-column .content__container {
  
    border-radius: 12px;
      border: 3px solid #3E644D;
}

/* Also style the container to match */
#middle-column .content__container {
 
    border-radius: 12px;
     border: 1px solid #3E644D;
}


.hero-container {
 
    border-radius: 12px;
     border: 1px solid #3E644D;
}


.main-section.full-size-menu {  border-radius: 12px;
     border: 1px solid #3E644D;
}


.journal-hero {
            background-color:  #528265 ;
            color: white;
          
            text-align: center;
            position: relative;
            overflow: hidden;
            min-height: 40vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 12px;
             border: 3px solid #3E644D;
        }



        
        /* Large screens (desktops, 1200px and up) */
        @media (min-width: 1200px) {
            .journal-hero {
                height: 40vh;
                padding: 30px 20px;
                 min-height: 200px;
            }
        }
        
        /* Medium screens (tablets, 768px to 1199px) */
        @media (min-width: 768px) and (max-width: 1199px) {
            .journal-hero {
                height: 30vh;
                 min-height: 200px;
                padding: 30px 20px;
            }
        }
        
        /* Small screens (mobile, up to 767px) */
        @media (max-width: 767px) {
            .journal-hero {
                height: 40vh;
                min-height: 200px; /* More minimum height for mobile to accommodate content */
                padding: 30px 15px;
            }
        }
        
        /* Extra small screens (very small mobile devices) */
        @media (max-width: 480px) {
            .journal-hero {
                height: 30vh;
                min-height: 200px;
                padding: 20px 10px;
            }
        }
         .journal-hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          
            background-size: cover;
            opacity: 0.7;
        }
        
        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
        }
        
        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: #C9EFC7;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            letter-spacing: 1px;
        }
        
        .hero-subtitle {
            font-family: 'PT Serif', serif;
            font-size: 1.4rem;
            font-style: italic;
            font-weight: 300;
            margin-bottom: 30px;
            line-height: 1.5;
            color: #e8f5e8;
        }
        
        .hero-actions {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 12px 25px;
            border-radius: 4px;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
        }
        
        .btn-primary {
            background-color: #4CAF50;
            color: white;
            border: none;
        }
        
        .btn-primary:hover {
            background-color: #3d8b40;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .btn-secondary {
            background-color: transparent;
            color: white;
            border: 1px solid white;
        }
        
        .btn-secondary:hover {
            background-color: rgba(255,255,255,0.1);
            transform: translateY(-2px);
        }
        
        .journal-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 40px;
            flex-wrap: wrap;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: #C9EFC7;
        }
        
        .stat-label {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 5px;
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .journal-stats {
                gap: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .journal-hero {
                padding: 60px 15px;
            }
            
            .hero-title {
                font-size: 2rem;
            }
            
            .hero-subtitle {
                font-size: 1rem;
            }
            
            .hero-actions {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 250px;
            }
        }


li {
    break-inside: avoid;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
    unicode-bidi: isolate;
}
body .accordion__dummy.accordion__menu ul:not(.tabs):not(.orbit-slides-container) li::before {
    width: 10px;
    content: "lens";
    font-size: 6px;
    font-family: 'Material Icons';
    -webkit-font-feature-settings: 'liga';
    color: #ccc;
    position: absolute;
    top: 3px;
    left: -4px;
}



a {
    font-weight: 700;
    color: #4f5671;
    color: #008cba;
    line-height: inherit;
    text-decoration: none;
}





.button--full-width {
    width: 100%;
}



.nav-icon {
  font-size: 18px;
  color: #528265;   /* IAS blue */
  margin-right: 8px;
  min-width: 22px;  /* keeps icons aligned */
}


.side-menu-li.active .nav-icon {
  
  color: #fff;   /* IAS blue */
 
 
}



.side-menu-li.button.active {
  background-color: #528265 !important;
  border: 2px solid #67a37a;      /* Lighter border */
  outline: 2px solid rgba(82, 130, 101, 0.3); /* Outer glow */
  border-radius: 6px;             /* Rounded corners */
}




.side-menu-li:hover .nav-icon {
  color: #fff;
}




/* Base button styles */
.button.button--color {
    background-color: #fff !important;
    border-color: #C9EFC7 !important;
    color: #528265 !important;
    font-weight: 400;
    padding: 6px 12px !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: unset !important;
    line-height: 1.2 !important;
}

/* Specific share buttons */
.button.button--color.UA_JournalShareButtons {
    border-color: #3E644D !important; /* Fixed from inconsistent border colors */
    text-size-adjust: 14px !important;
}

/* Hover states - Consolidated */
.button.button--color:hover,
.button.button--color.UA_JournalShareButtons:hover {
    background-color: #528265 !important;
    color: #fff !important;
    border-color: #C9EFC7 !important;
}

/* Hover path fill for SVG icons */
.button.button--color:hover path {
    fill: #fff;
}


.article-content .button,
.article-content .button:hover
 {
    color: #528265 !important;
    background-color: #fff !important;
    border-color: #C9EFC7 !important;
}
/* Force icon color */
.bookmark-btn i.fas.fa-bookmark {
    color: #528265 !important;
}

/* Force hover state */
.bookmark-btn:hover i.fas.fa-bookmark {
    color: #fff !important;
}

a {
    color: #1E3A5C; /* Balanced green */
    text-decoration: none;
    transition: all 0.2s ease;
}

.post-content a:hover {
    color: #528265 !important;
    border-bottom: 1px solid #528265;
}
.post-tags a {
    color: #2D5A3D !important;}

    .flex-columns {
    display: flex;
    flex-wrap: wrap;
}
.flex-columns li {
    width: 50%;        /* making the list into 2 columns. class name would be felx-columns */
    padding: 4px 0;
}



.content__container h1{
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 24px;
}
.content__container h2 {   margin-top: 30px;
    margin-bottom: 10px;
    font-size: 20px;
}

.content__container h3 {
    font-weight: 700;
    line-height: 1.5;
    margin-top: 20px;
    margin-bottom: 10px;
}

p {
    margin-bottom: 10px;
}

 .journal-policies ul {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    list-style-position: outside;
    margin-bottom: 1.25rem !important;
    display: block;
    list-style-type: disc;
   
    margin-left: 1.1rem !important;
}
 .journal-policies ol {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    list-style-position: outside;
    margin-bottom: 1.25rem !important;
    display: block;
    list-style-type: disc;
    margin-left: 1.1rem !important;
}