#header {
margin-top: 0;
padding-top: 0;
}

/* Adjust the content area to account for the fixed navbar */
body.index-page, .main {
padding-top: 60px; /* Adjust this value according to the navbar's height */
margin-top: 0;
}

/* Add extra top spacing for individual pages */
body:not(.publications-page) .main {
padding-top: 60px !important; /* More space for individual pages */
}

/* Specific spacing for publications page */
body.publications-page .main {
padding-top: 60px !important; /* Keep original spacing for publications */
}

#portfolio-details-publications .page-title {
margin-top: 0px;
margin-bottom: 0px;
}

#portfolio-details-publications .container {
padding-top: 0px;
padding-bottom: 0px;
}

/* Flexbox layout for the title and image slider section */
#portfolio-details-publications .title-and-details {
display: flex;
flex-wrap: wrap; /* Allows content to wrap on smaller screens */
justify-content: space-between; /* Space out the title and image slider */
align-items: flex-start;
margin-bottom: 20px;
}

#portfolio-details-publications .title-text {
flex: 1 1 40%; /* Take up 40% of the width */
margin-right: 20px;
}

#portfolio-details-publications {
flex: 1 1 55%; /* Take up 55% of the width */
max-height: 650px;
}
.portfolio-details-slider {
display: flex;
justify-content: center; /* Center the slider */
align-items: right; /* Align vertically in the container */

}

#portfolio-details-publications .portfolio-details-slider img {
width: 100%;
height: auto;
border: none;
cursor: zoom-in;
overflow: visible; /* Ensure arrows are not clipped */
position: relative; /* Create a positioning context */
}

/* Grid layout for thumbnails */
#portfolio-details-publications  {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Two thumbnails per row */
gap: 15px; /* Spacing between thumbnails */
margin-top: 20px;
}

#portfolio-details-publications {
  overflow: visible; /* Prevent arrows from being clipped by parent container */
  position: relative; /* Establish relative positioning */
width: 100%;
height: auto;
border: 0px solid #ccc;
transition: transform 0.3s ease;
}

#portfolio-details-publications .thumbnails-grid img:hover {
transform: scale(1.05); /* Slight zoom effect on hover */
}

/* MediumZoom Image Styling */
.medium-zoom-overlay {
background: #000; /* Zoom overlay background */
}

.medium-zoom-image--opened {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Ensure proper aspect ratio */
margin: auto; /* Center the zoomed image */
display: block;
}


/* Ensure the main content starts closer to the top */
.main {
margin-top: 0;
padding-top: 0;
}


/* Center the Swiper pagination and navigation arrows */
.swiper-pagination {
justify-content: center;
}

        /* Style for previous and next buttons */
 .swiper-button-prev,
.swiper-button-next {
  position: absolute; /* Position arrows absolutely within the swiper container */
  top: 50%; /* Vertically center the arrows */
  transform: translateY(-50%); /* Center the arrows perfectly */
  color: lightgrey; /* Set arrow color */
  font-size: 24px; /* Adjust arrow size */
  z-index: 10; /* Ensure arrows are above the images */
  width: 25px; /* Slightly smaller arrows */
  height: 25px;
  background: none; /* No background */
  border: none; /* Remove default border */
  transition: color 0.3s ease;
}

/* Position the arrows outside the slider */
.swiper-button-prev {
  left: -50px; /* Adjust to position left arrow outside the image */
}

.swiper-button-next {
  right: 20px; /* Adjust to position right arrow outside the image */
}

/* Ensure the image is fully responsive */
#portfolio-details-publications .portfolio-details-slider img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border: none;
  cursor: zoom-in;
}


/* Adjust for smaller screens */
@media (max-width: 768px) {
#portfolio-details-publications .title-and-details {
flex-direction: column; /* Stack the title and image slider on smaller screens */
}

#portfolio-details-publications .title-text {
margin-right: 0;
margin-bottom: 0px;
margin-top: 60px;
}

#portfolio-details-publications .portfolio-details-slider {
max-height: 400px; /* Adjust for smaller screens */
}
.swiper-button-prev,
  .swiper-button-next {
    width: 25px; /* Slightly smaller arrows */
    height: 25px;
  }

/* Fix mobile centering for poetry pages - override inline margin styles */
.main .container[style*="margin: 20px 20px"] {
margin: 0 auto !important; /* Center the container on mobile */
padding: 0 15px !important; /* Add standard Bootstrap padding */
max-width: 100% !important; /* Ensure full width usage */
}

/* Ensure proper spacing on mobile for poetry pages */
.main .row {
margin-left: 0 !important;
margin-right: 0 !important;
}

.main .col-lg-6, .main .col-md-6, .main .col-sm-12 {
padding-left: 15px !important;
padding-right: 15px !important;
}
}

/* Additional mobile improvements for poetry pages */
@media (max-width: 576px) {
.main .container[style*="margin: 20px 20px"] {
padding: 0 10px !important; /* Tighter padding on very small screens */
}

.main .col-lg-6, .main .col-md-6, .main .col-sm-12 {
padding-left: 10px !important;
padding-right: 10px !important;
}

/* Ensure all containers in poetry pages are centered on mobile */
.main .container {
margin-left: auto !important;
margin-right: auto !important;
}
}

/* Fix isotope row spacing on mobile */
@media (max-width: 768px) {
body.publications-page .portfolio-item {
margin-bottom: 20px !important; /* Sets consistent row spacing */
}

/* Ensure isotope container shows purple scrollbar when needed */
body.publications-page .isotope-container {
overflow-y: auto !important; /* Allow vertical scrolling */
max-height: 80vh !important; /* Limit height to trigger scrolling */
}

/* Mobile-specific margin adjustments for all content pages */
/* Target all major spacing elements */
body {
padding-top: 80px !important;
margin-top: 0px !important;
}

.main {
margin-top: 0px !important;
padding-top: 20px !important; /* Default top spacing on mobile */
}

/* Keep publications pages as they are */
body.publications-page .main {
padding-top: 20px !important; /* Keep publications spacing */
}

/* Reduce spacing specifically for exhibition and other individual pages */
body:not(.publications-page) .main {
padding-top: 10px !important; /* Less space for exhibition pages */
}

.container, .container[style*="margin"] {
margin-top: 0px !important;
padding-top: 0px !important;
}

.page-title, .page-title[style*="margin"] {
margin-top: 0px !important; /* Remove negative margin */
padding-top: 0px !important;
}

.row {
margin-top: 0px !important;
padding-top: 0px !important;
}

/* Add header spacing */
#header, .header {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
}

/* Mobile-specific margin adjustments for smaller screens */
@media (max-width: 480px) {
/* Target all major spacing elements */
body {
padding-top: 0px !important;
margin-top: 0px !important;
}

.main {
margin-top: 0px !important;
padding-top: 20px !important; /* Default top spacing on mobile */
}

/* Keep publications pages as they are */
body.publications-page .main {
padding-top: 20px !important; /* Keep publications spacing */
}

/* Reduce spacing specifically for exhibition and other individual pages */
body:not(.publications-page) .main {
padding-top: 10px !important; /* Less space for exhibition pages */
}

.container, .container[style*="margin"] {
margin-top: 0px !important;
padding-top: 0px !important;
}

.page-title, .page-title[style*="margin"] {
margin-top: 0px !important; /* Remove negative margin */
padding-top: 0px !important;
}

.row {
margin-top: 0px !important;
padding-top: 0px !important;
}

/* Add header spacing */
#header, .header {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
}

/* Mobile Custom Accordion Styles */
/* Desktop - hide accordion, show desktop links */
.mobile-links .custom-accordion {
display: none;
}

.mobile-links .desktop-links {
display: block;
line-height: 1.7;
}

@media (max-width: 768px) {
/* Mobile - hide desktop links, show custom accordion */
.mobile-links .desktop-links {
display: none !important;
}
.mobile-links .custom-accordion {
display: block !important;
}

/* Custom Accordion Styles */
.custom-accordion {
border: none;
background: transparent;
margin-top: 15px;
}

.custom-accordion-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 12px 16px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.custom-accordion-header:hover {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.accordion-title {
font-weight: 500;
color: #495057;
font-size: 0.95em;
letter-spacing: 0.5px;
}

.accordion-icon {
font-size: 0.8em;
color: #6c757d;
transition: transform 0.3s ease;
}

.custom-accordion-header.active .accordion-icon {
transform: rotate(180deg);
}

.custom-accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
background: #ffffff;
border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
border-radius: 0 0 8px 8px;
margin-top: -1px;
}

.custom-accordion-content.open {
max-height: 500px;
padding: 15px;
}

.accordion-links {
line-height: 1.8;
}

.accordion-links a {
padding: 4px 0;
transition: color 0.2s ease;
}

.accordion-links a:hover {
color: #495057 !important;
}
}

/* Desktop - hide custom accordion, show desktop links */
@media (min-width: 769px) {
.mobile-links .custom-accordion {
display: none !important;
}
.mobile-links .desktop-links {
display: block !important;
}
}