* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: Arial, sans-serif;

  color: #333;

}



#top-photo {

  background-image: url("images/top-photo.jpg");

  background-size: cover;

  background-position: center;

  height: 15rem;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 2rem;

}



#top-photo-content {

  background-color: rgba(0, 0, 0, 0.5);

  padding: 2rem 3rem;

  border-radius: 10px;

  text-align: center;

}



#top-photo h1 {

  color: white;

  font-size: 3rem;

  font-weight: bold;

}



#nav-page {

  background-color: #333;

  color: white;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 999; 

}

#nav-page .menu-item.active > a {

    color: orange;

}



#nav-page .submenu .active > a {

    color: orange;

}

#nav-page ul {

  list-style-type: none;

  display: flex;

  justify-content: center;

  padding: 0;

}



#nav-page ul li {

  margin: 0 2rem;

  display: inline-block;

}



#nav-page ul li a {

  color: white;

  text-decoration: none;

  font-size: 1.2rem;

}



#nav-page ul li a:hover {

  text-decoration: none;

}



#nav-page ul {

    list-style-type: none;

    padding: 0;

    margin: 0;

}



#nav-page li {

    position: relative;

}



#nav-page li a {

    display: block;

    padding: 10px;

    text-decoration: none;

}



#nav-page .submenu {

    background-color: #333;

    display: none;

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%);

    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);

    padding:0;

    margin:0;

    white-space: nowrap;



}



#nav-page .submenu li a {

    padding: 8px;

}



#nav-page .menu-item:hover .submenu {

    display:flex;

    flex-direction:column;

}



#nav-page .active a {

    font-weight: bold;

}





#main-content {  

  max-width: 1450px;

  gap: 20px;

  padding: 20px;

  margin: 0 auto;

  min-height: calc(100vh - 138px);

  display:flex;

  justify-content: center;

  flex-direction:column;

}

.tile-container{

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    padding:20px;

    align-items: start;

}

#detail_page:has(.details) {

  margin-top: 60px;

}

.intro-section {

  margin-top: 60px;

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 20px;

  border-radius: 10px;

  flex-wrap: wrap; 

}



.intro-text {

  flex: 1;

  font-size: 1.2rem;

  line-height: 1.5;

  color: #333;

  padding: 20px;

  min-width: 280px;



}



.intro-image {

  flex: 1;

  min-width: 280px;

  display: flex;

  justify-content: center;

  align-items: center;

}



.intro-image img {

  max-width: 100%;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: 10px;

}

.tile {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: stretch;

    border: 1px solid #ddd;

    border-radius: 10px;

    overflow: hidden;

    background: #fff;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    min-height: 200px;

    height: 100%;  

}

.tile img {

  width: 100%;

  height: 22rem;

  object-fit:cover;

  display: block;

  min-height:22rem;

}

.tile .text {

    padding: 10px;

    flex-grow: 1;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

}

.separator {

  height: 5px;

  background: orange;

  flex-grow: 0;

}

.text {

  flex-grow: 1;

  padding: 15px;

  text-align: center;

}

#detail_page {

  min-height: calc(100vh - 138px);

  max-width: 1450px;

  padding: 20px;

  justify-content: center;

  margin: 0 auto;

}

.mainpage-detail {

  width: 100%;

  margin: 0 auto;

}



.details {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.detail-item h2 {

  font-size: 18px;

  margin-bottom: 5px;

  text-align:center;

  padding-bottom: 1rem;

}



.detail-item h2 strong {

  font-weight: bold;

  font-size: 1.5rem;

  text-align:center;

}



.detail-content {

  display: flex;

  align-items: center;

  gap: 20px;

}



.detail-image {

  flex: 1;

  max-width: 33%;

}



.detail-image img {

  width: 100%;

  height: auto;

  border-radius: 8px;

}



.detail-text {

  flex: 2;

}



.detail-text h2::after {

  font-weight: bold;

}



.detail-text p {

  font-size: 1.25rem;

  color: #444;

}



.images {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  margin-top: 10px;

}



.image-tile {

  position: relative;

  width: 100%;

  height: 250px;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 10px;

}



.image-tile img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: opacity 0.3s ease;

}



.image-tile:hover img {

  filter: brightness(0.5); 

}



.image-tile::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: 50px;

  height: 50px;

  filter: invert();

  background-image: url('icons/magnify_item.png');

  background-size: contain;

  background-repeat: no-repeat;

  transform: translate(-50%, -50%);

  opacity: 0;

  transition: opacity 0.3s ease;

}



.image-tile:hover::after {

  opacity: 1;

}



.lightbox-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    justify-content: center;

    align-items: center;

    z-index: 1000; 

}



.lightbox-image {

    max-width: 90vw;

    max-height: 90vh;

}



.close-lightbox {

    position: absolute;

    top: 20px;

    right: 30px;

    font-size: 30px;

    color: white;

    cursor: pointer;

}



.lightbox-prev, .lightbox-next {

    position: absolute;

    top: 50%;

    font-size: 30px;

    background: none;

    border: none;

    color: white;

    cursor: pointer;

}



.lightbox-prev { left: 20px; }

.lightbox-next { right: 20px; }



.fade-in {

  opacity: 0;

  animation: fadeIn 0.3s forwards;

}



.fade-out {

  opacity: 1;

  animation: fadeOut 0.15s forwards;

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



@keyframes fadeOut {

  from { opacity: 1; }

  to { opacity: 0; }

}





.separator-detail {

  border-top: 3px dashed orange;

  margin-top: 20px;

  padding-top: 20px;

}



#footer {

  display: flex;

  justify-content: space-around;

  background-color: #333;

  color: white;

  padding: 2rem;

}



.footer-column {

  flex: 1;

  text-align: center;

}



.footer-column h3 {

  margin-bottom: 1rem;

}



.footer-column a {

  color: white;

  text-decoration: none;

  font-size: 1.2rem;

}



.footer-column a:hover {

  text-decoration: none;

  scroll-behavior: smooth;

}



@media (max-width:1250px){

  .intro-section{

    flex-direction: column;

  }

  .intro-image{

      width: 100%;

  }

  .detail-content{

    flex-direction: column;

  }

  .detail-image{

    max-width:unset;

  }

  .images{

      grid-template-columns: repeat(2, 1fr);

  }

.tile-container{

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width:820px){

  #footer{

    flex-direction: column;

    gap: 1rem;

  }

  .intro-section{

    flex-direction: column;

  }

  .images{

      grid-template-columns: repeat(1, 1fr);

  }

.tile-container{

    grid-template-columns: repeat(1, 1fr);

  }

}