html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

body {
  background-color: #000000; 
  font-family: "Gowun Dodum", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}


nav {
  position: fixed;
  top: 0;
  left: 0; 
  width: 100%; 
  height: 65px;
  padding: 1.5rem 3rem;
  background-color: rgba(21, 21, 21, 1);
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  width: 100%;
  z-index: 10;
}


.logo-link {
  position: relative;        
  width: 50px;                
  height: 50px;               
  border-radius: 50%;         
  background-color: #ffffff;  
  transition: background-color 0.3s, box-shadow 0.3s;  
  overflow: hidden;          
}


.logo-link:hover {
  background-color: #efefef; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  
}

/* Logo image styling */
.nav-logo {
  position: absolute;  
  top: 50%;             
  left: 50%;            
  transform: translate(-50%, -50%); 
  width: 60px;          
  height: 60px;         
  object-fit: contain;   
}

nav a {
  font-weight: 200;
  text-decoration: none;
  color: #efefef;
  font-size: 1.33rem;
  padding: 0.5rem 1rem;
}

nav a:hover {
  color: #aacc83;
}


.hamburger {
  display: none; 
  position: absolute;
  top: 1rem;  
  right: 3rem; 
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 25px;
  cursor: pointer;
}

.bar {
  width: 30px;
  height: 4px;
  background-color: #efefef;
  border-radius: 5px;
}

.container {
  display: flex;
  height: 100vh; 
  margin-top: 65px; 
}

.right-square {
  width: 100%; 
  height: 100%; 
  background-color: #000000;
  overflow: hidden;
  position: relative;
}

.gallery {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery img {
  position: absolute;
  width: 100%;
  height: 100%; 
  object-fit: cover; 
  opacity: 0;
  animation: slide 24s infinite;
}

/* Set delays for each image */
.gallery img:nth-child(1) { animation-delay: 0s; }
.gallery img:nth-child(2) { animation-delay: 4s; }
.gallery img:nth-child(3) { animation-delay: 8s; }
.gallery img:nth-child(4) { animation-delay: 12s; }

@keyframes slide {
  0% { opacity: 0; }
  8% { opacity: 1; }
  25% { opacity: 1; }
  33% { opacity: 0; }
  100% { opacity: 0; }
}

.about-section {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem;
  color: #efefef; 
  font-size: 1.5rem;
}

.about-section .left {
  flex: 1;
}

.about-section .left h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about-section .left p {
  font-size: 1.2rem;
  line-height: 1.5;
}

/* Right Section Styles */
.about-section .right {
  flex: 1;
}

.about-section .right h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.right {
  flex: 1;  /* Ensure this section takes full available width */
  padding: 20px;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two icons per row */
  gap: 1rem;
}

.icon-grid img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

h1 {
  font-size: 2.5rem; 
  color: #ffffff; 
  margin-bottom: 1rem; 
  font-weight: bold;
  text-align: left; 
}

h2 {
  font-size: 2.5rem; 
  color: #ffffff;
  margin-top: 3rem;  
  margin-bottom: 1rem;
  font-weight: 600;
  text-align: left; 
}

.about-section .left h1,
.about-section .right h2 {
  text-align: left; /* Align to the left */
}

/* WORK */

.work {
  display: grid;
  place-items: center;
}

.work h3 {
  font-size: 3rem;
  color: #f8f8f8;
  margin: 1rem 0;
}

.work h4 {
  margin: 1rem 2rem;
}

.slider {
  padding-bottom: 80px;
  width: 100vw;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
}

.slide-track {
  display: flex;
  width: calc(400px * 8); /* Adjust based on number of items */
  animation: scroll 20s linear infinite;
}

.slide-track a {
  text-decoration: none;
  color: black;
}

/* Box styles */
.boxes {
  height: 400px;
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.5); 
  margin: 10px;
  position: relative; 
  transition: transform 0.3s ease, filter 0.3s ease; 
}


.boxes:hover {
  transform: scale(1.05); 
  filter: brightness(0.7) saturate(1.5); 
}

/* Text Overlay */
.boxes span {
  position: absolute;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 0.3s ease, visibility 0s ease 0.3s; 
  background-color: rgba(0, 0, 0, 0.6); 
  padding: 10px 20px;
  border-radius: 10px;
}


.boxes:hover span {
  opacity: 1; 
  visibility: visible; 
  transition: opacity 0.3s ease; 
}


@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.a { background-image: url('../img/yearbookmockup.jpg'); }
.b { background-image: url('../img/moon_wickedways.jpg'); }
.c { background-image: url('../img/watersalbum.jpg'); }
.d { background-image: url('../img/wine_bottle2.jpg'); }

.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #000000;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 18px;
  cursor: pointer;
  display: none;
}

.scroll-to-top:hover {
  background-color: #002d00;
}

footer {
  background: rgb(0, 0, 0);
  text-align: center;
  padding: 2em;
  position: relative;
}

.pflip {
  color: #efefef;
}

.hilight {
  color: rgb(213, 206, 187);
}

footer a {
  color: rgb(213, 206, 187);
  font-weight: 600;
  text-decoration: none;
}

.socials {
  display: flex; 
  justify-content: center;
  gap: 2rem; 
}

.socials img {
  max-width: 3.75rem; /* Maximum width of the icon */
  max-height: 3.75rem; 
  object-fit: contain;  
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease; 
}
 
.socials a:hover img {
  transform: scale(1.1); 
  opacity: 0.8;  
  filter: brightness(1.2);
}

.socials a:hover {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%; 
}


@media only screen and (min-width: 768px) {
  nav {
    justify-content: space-between;
  }

  nav a {
    font-size: 1.5rem;
  }

  .hamburger {
    display: none; 
  }

  .nav-logo {
    margin-right: 40px; 
  }

  .nav-links {
    display: flex;
    justify-content: space-evenly; 
    width: 100%;
  }
}

/* For Mobile Screens */
@media only screen and (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    justify-content: space-between;
  }

  .hamburger {
    display: flex; 
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 65px;
    right: 0;
    background-color: rgba(21, 21, 21, 1);
    width: 100%;
    text-align: center;
    flex-direction: column;
    gap: 1rem;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    font-size: 1.5rem;
    padding: 1rem 0;
  }

  .container {
    display: flex;
    height: 40vh;
    margin-top: 65px; 
  }

  .right-square {
    background-color: #000000;
    overflow: hidden;
    position: relative;
    margin-top: 6rem;
  }
  
  .about-section .left h1,
  .about-section .right h2 {
    text-align: center; 
  }

  .about-section {
    flex-direction: column; 
    align-items: center; 
    text-align: center;
  }

  .right .icon-grid {
    display: grid;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(2, 1fr); 
  }

  .right .icon-grid img {
    width: 100%;
    height: auto;
    max-width: 75px;
    object-fit: contain;
  }
}

.nav-links.active {
  display: flex;
}

/* For Mobile Devices */
@media only screen and (max-width: 480px) {
  nav {
      grid-template-columns: 1fr;
      padding: 1rem;
  }

  .navbar-toggle {
      display: block;
  }

  .navbar-menu {
      display: none;
  }

  .navbar-menu.active {
      display: block;
  }

  .container {
      padding: 1rem;
  }

  .about-section {
      font-size: 1.2rem;
  }

  .icon-grid {
      grid-template-columns: 1fr;
  }

  .slider {
      padding-bottom: 20px;
  }

  .boxes {
      height: 250px;
      width: 250px;
  }
  

}