/* Grid Section Styles */
#grid-section {
max-width: 940px;
margin: 0 auto;
padding: 0px 20px 10px;
}

#grid-section,
#album-section {
flex: 1;
}

#grid-section h2 {
text-align: center;
color: var(--color-accent);
font-size: var(--font-size-title);
margin: 0;
}

.grid-content {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}

.project-item,
.section-item {
flex: 0 1 auto;
max-width: 300px;
overflow: hidden;
margin-bottom: 20px;
}

.project-item img,
.section-item img {
width: 300px;
height: 200px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 5px;
transition: transform 0.3s ease-in-out;
cursor: pointer;
}

.project-item img:hover,
.section-item img:hover {
transform: scale(1.05);
}

.project-item h3,
.section-item h3 {
font-size: var(--font-size-projects-title);
color: var(--color-accent);
margin: 1px 0 15px;
text-align: center;
font-weight: 500;
}

.project-item p {
margin: 3px 20px;
font-size: var(--font-size-paragraph);
color: #efe6dd;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
text-align: center;
}

.show-more-btn {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 1rem;
font-family: var(--font-family-main);
color: #fff;
background-color: var(--color-accent);
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
}

.show-more-btn:hover {
background-color: var(--color-hover);
}

/* Album Section Styles */
#album-section {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
gap: 0;
}

#album-section-div {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
gap: 6px;
}

.album-header {
text-align: center;
margin-bottom: 20px;
}

.album-header h1 {
font-size: var(--font-size-subtitle);
color: var(--color-text);
margin: 0;
}

.album-header h2 {
font-size: var(--font-size-title);
font-weight: bold;
margin: 0;
color: var(--color-accent);
}

.carousel {
position: relative;
text-align: center;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
max-width: 900px;
aspect-ratio: 16 / 9;
background-color: var(--color-accent);
border-radius: 10px;
}

#main-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 10px;
position: relative;
z-index: 1;
}

.carousel::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1.5px solid var(--color-accent);
border-radius: 10px;
pointer-events: none;
z-index: 2;
}

.arrow-left,
.arrow-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 3rem;
color: white;
background: none;
border: none;
padding: 10px;
cursor: pointer;
z-index: 3;
transition: text-shadow 0.3s ease;
}

.arrow-left {
left: 10px;
}

.arrow-right {
right: 10px;
}

.arrow-left:hover,
.arrow-right:hover {
text-shadow: 0 0 10px var(--color-accent), 0 0 20px var(--color-accent), 0 0 30px var(--color-accent);
}

.thumbnail-list {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin: 20px auto;
max-width: 100%;
overflow-x: auto;
padding: 10px 0;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
}

.thumbnail-list::-webkit-scrollbar {
display: none;
}

.thumbnail-list img {
width: 80px;
height: 80px;
flex: 0 0 auto;
object-fit: cover;
object-position: center;
border: 1px solid var(--color-text);
border-radius: 7px;
cursor: pointer;
opacity: 0.7;
transition: transform 0.2s, opacity 0.2s;
}

.thumbnail-list img.selected {
border-color: var(--color-accent);
opacity: 1;
transform: scale(1.1);
box-shadow: 0 0 15px var(--color-accent);
}

.thumbnail-list img:hover {
transform: scale(1.05);
opacity: 0.9;
border-color: var(--color-accent);
}

.project-info {
text-align: center;
margin: 40px 0;
}

.project-info h3 {
font-size: var(--font-size-projects-title);
margin-bottom: 10px;
color: var(--color-accent);
}

.project-info p {
max-width: 800px;
margin: 0 auto;
color: var(--color-text);
}

.project-navigation {
display: flex;
justify-content: center;
gap: 50px;
margin: 40px auto;
max-width: 940px;
padding: 0 20px;
}

.project-navigation a {
text-decoration: none;
color: var(--color-text);
text-align: center;
cursor: pointer;
}

.project-navigation img {
width: 220px;
height: 130px;
object-fit: cover;
object-position: center;
border-radius: 4px;
border: 1px solid var(--color-text);
margin-bottom: 10px;
}

.project-navigation a:hover img {
border-color: var(--color-accent);
}

.project-navigation a:hover div {
color: var(--color-accent);
}

/* Back Arrow Styles (for both sections) */
.back-arrow {
text-align: left;
margin: 10px auto;
font-size: var(--font-size-projects-title);
color: var(--color-accent);
cursor: pointer;
transition: color 0.3s ease;
max-width: 940px;
padding-left: 0;
}

.back-arrow:hover {
color: var(--color-hover);
}

/* Responsive Styles */
@media (max-width: 1200px) {
.thumbnail-list {
    padding-left: 0;
    padding-right: 0;
}
}

@media (max-width: 940px) {
#album-section,
#album-section-div {
    width: calc(100% - 12px);
    max-width: 900px;
    margin: 0 6px;
    padding: 0;
}

.carousel {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.album-header h2 {
    font-size: calc(var(--font-size-title) * 0.8);
    font-weight: 300;
}

.thumbnail-list {
    justify-content: flex-start;
    padding-left: 5%;
    padding-right: 5%;
}

.thumbnail-list img {
    width: 60px;
    height: 60px;
}

.project-navigation {
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.project-navigation a {
    margin-bottom: 20px;
}

.project-navigation img {
    width: 200px;
    height: 120px;
}

.arrow-left,
.arrow-right {
    font-size: 2rem;
    padding: 5px;
}
}

@media (max-width: 480px) {
.thumbnail-list img {
    width: 50px;
    height: 50px;
}

.project-navigation img {
    width: 180px;
    height: 100px;
}

.carousel::after {
    border-width: 1.5px;
}

.project-navigation {
    gap: 10px;
}
}

@media (max-width: 350px) {
#grid-section {
    width: calc(100% - 12px);
    margin: 0 6px;
    padding: 0;
}

.project-item,
.section-item {
    width: 100%;
    margin-bottom: 20px;
}

.project-item img,
.section-item img {
    width: 100%;
    height: auto;
}

.project-item h3,
.section-item h3 {
    font-size: 1.2rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.project-navigation img {
    width: 150px;
    height: 100px;
}
}

.vertical-image {
object-fit: contain !important;
background-color: var(--color-accent);
}






  .loader-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  .loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--color-accent);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
    
  .image-container {
    position: relative;
    display: inline-block;
  }
  
  .image-container img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  
  .image-container img.loaded {
    opacity: 1;
  }