/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin:0px;
  background-color: white;
  color: black;
  font-family: "Century Gothic", Helvetica, Arial, Verdana, sans-serif;}
  .wrapper-main {
    width:auto;
    padding:0;
    margin:0 auto;
  }
  header { 
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:nowrap;
    padding:25px;
    padding-bottom:2px;}
  header > nav {
    margin-left:auto;
    min-width:0;
  }
 .navbar ul {
    list-style-type:none;
    display: flex;
    gap:20px;
    padding:0px;
    margin:0px;
    text-align:right;
    overflow:hidden;}
  header h1{
  margin:0px;
  font-family: "Century Gothic",Helvetica,Arial,Verdana, sans-serif;
  font-weight: Bold;
  font-style:Italic;
  font-size:40px;
  }
    h2{
    margin:0px;
    font-family: "Century Gothic", Helvetica, Arial, Verdana, sans-serif;
    font-weight: Bold;
    font-size: 32px;
  }
  p{font-family: "Century Gothic", Helvetica, Arial, Verdana, sans-serif;
  font-size:16px;}
  
  .navbar {
    margin-left:auto}
    
  .navbar a{
  color: black;
  font-family:"Century Gothic",Helvetica,Arial,Verdana, sans-serif;
  font-weight: Bold;
  font-size:20px;
  text-decoration: none;
  line-height:1;}
  .navbar a:hover {color:#6FCCDD;text-decoration: none;}
  .navbar a:visited {color:#FF0000;text-decoration: none;}
  .navbar a:active {color:#FFFF00;text-decoration: none;
 }
  .navbar li{
    display:inline-block;
    text-decoration:none;}
 
 /* Gallery grid layout */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px;
}
.static-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* prevents interaction */
  user-select: none; /* prevents text selection (if relevant) */
}


/* Card styling */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  height:300px;
}

.card:hover {
  transform: scale(1.03);
}

/* Image styling */
.card img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  display: block;
}

.lightbox {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  color: #fff;
  font-family: "Century Gothic", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.1em;
  box-sizing: border-box;
  text-align: left;
}


.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: #fff;
  font-size: 2em;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2em;
  color: #fff;
  cursor: pointer;
}

.lightbox.show {
  display: flex;
}
 
  .card{
    width:100%;
    height:300px;
    margin:0;
    padding:0;
    overflow:hidden;}
    .card__img{
      width:100%;
      height:100%;
      object-fit:cover;}
      
      .image-text-section {
  display: flex;
  width: 100%;
  align-items: stretch;
}

.image-side, .text-side {
  width: 50%;
}

.image-side img {
  height: 100%;
  max-height: 500px;
  width: 100%;
  object-fit: cover;
}

.text-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background-color: #f9f9f9;
}

.text-side h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.text-side p {
  font-size: 18px;
  line-height: 1.6;
}

      
 @media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start; /* Aligns items to the left */
    padding: 15px;
    gap: 10px;
  }

  header h1 {
    font-size: 28px;
    margin-bottom: 0;
  }

  .navbar {
    width: 100%;
  }

  .navbar ul {
    flex-direction: row; /* still horizontal on small screens */
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }

  .navbar a {
    font-size: 18px;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .card {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  header h1 {
    font-size: 24px;
  }

  .navbar a {
    font-size: 16px;
  }
}