@media (max-width: 480px) {
  .section-title {
      bottom: 15vh; /* Move it slightly higher on small screens */
      font-size: 16px; /* Slightly smaller text */
  }
}
@media (min-width: 768px){
    .contact-overlay-content{
        width: 30%!important;
        
    }
    .desktop-only { display: inline-block!important; }

}
/* Large Tablets (1024px and below) */
@media (max-width: 1480px) {
  .main-header {
      padding: 20px; /* Reduce padding for smaller screens */
  }

  .main-header .menu ul {
      padding: 20px;
      margin-right: 20px;
  }

  .left-slot {
      flex: 0 0 20%;
      width: 20vw; /* Adjust the width of the picker */
      padding-left: 20px;
      left: 5%;
  }

  .left-slot .title {
      font-size: 18px;
  }

  .left-slot .title.active {
      font-size: 26px;
  }

  .right-content {
      width: 20%; /* Adjust the right content width */
      right: 5%;
      flex: 0 0 25%;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .right-content .tag {
      font-size: 13px;
      width: 40%;
  }

  .right-content .tags {
      display: flex; /* Flexbox for inline layout */
      flex-wrap: wrap;
      text-align: center;
  }

  .description {
      display: -webkit-box; /* Use box layout for line clamping */
      -webkit-line-clamp: 7; /* Limit to 7 lines */
      -webkit-box-orient: vertical; /* Set box orientation */
      overflow: hidden; /* Hide overflowing text */
      text-overflow: ellipsis;
      font-size: 14px;
  }

  .photo-container {
      gap: 10%; /* Reduce gap between photos */
  }

  .photo img {
      max-width: 200px; /* Reduce image size */
  }

  .action-button {
      font-size: 14px;
      padding: 10px 8px; /* Adjust padding for better balance */
      width: 70%;
  }
  
}

/* Small Tablets and Mobile Phones (768px and below) */
@media (max-width: 768px) {
  .center2 {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      scroll-snap-type: x mandatory; /* Enable smooth snap scrolling */
      gap: 16px; /* Consistent gap between photos */
      align-items: center;
      position: relative;
      width: 100vw;
      padding: 0 10px;
      top: -12%;
      overflow-y: hidden;
  }
  .preloader-content {
    width: 30vw;
  }
  .section-title{
    position: fixed!important;
    bottom: 16vh; /* Ensures proper positioning above the footer and safe areas */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure perfect centering */
    margin: 0; /* Remove default margin */
    z-index: 9999; /* Bring to the front */
    font-size: 38px; /* Default font size */
    width: fit-content;
  }
  .center {
      display: none; /* Hide vertical layout */
  }

  .center2 .photo-v {
      flex: 0 0 auto; /* Prevent shrinking */
      width: 50vw; /* Smaller width to allow overlap */
      max-width: 300px; /* Optional max width */
      opacity: 0.5; /* Dim inactive photos */
      transform: scale(0.7); /* Shrink inactive photos */
      transition: transform 0.5s ease, opacity 0.3s ease;
      scroll-snap-align: center; /* Snap to center */
      margin: 0 -10px;
      filter: blur(10px);
      scroll-behavior: none;
      height: auto;
  }

  .center2::-webkit-scrollbar {
      display: none; /* Chrome, Safari, and Edge */
  }

  .center2 .photo-v.active {
      opacity: 1;
      transform: scale(1.3);
      z-index: 2;
      filter: blur(0px);
  }

  .left-slot {
      display: none;
  }

  .center2 .photo-v img {
      width: 100%;
      height: auto;
  }

  body {
      overflow-x: auto; /* Enable horizontal scrolling */
      overflow-y: hidden; /* Disable vertical scrolling */
      scroll-snap-type: x mandatory; /* Snap to horizontal positions */
      height: 100vh; /* Ensure body matches viewport */
      width: 100vw;
  }

  .right-content {
      width: 100vw;
      z-index: 1;
      align-content: center;
      height: auto;
      margin: auto;
      text-align: center;
      left: 0;
      padding: 0px;
      top: 100%;
  }
.tags{display: none!important;
}

  .description {
      display: none !important;
  }

  .action-button {
      display: none;
  }

  .site-footer {
      font-size: 0.6em; /* Smallest font for footer */
      text-align: center; /* Center the footer content */
      margin: auto;
      left: 0;
      padding-bottom: 5px;
      left: 50%; /* Center horizontally */
      transform: translateX(-50%);
  }


  .main-header .logo {
      padding: 10px; /* Minimal padding */
  }

  .menu {
      display: none;
  }

  .floating-menu {
      display: flex;
  }
}

/* Extra Small Devices (480px and below) */
@media (max-width: 480px) {
  .main-header {
      padding: 10px; /* Minimal padding */
  }

  .main-header .logo img {
       /* Smaller logo size */
  }
  .main-header .logo{
    padding: 20px!important;
    margin-top: 27px;
  }
  .menu-button {
    
    width: 35px;
    height: 35px;

  margin-top: 10px!important;
  margin-right: 10px!important;
}
.preloader-content {
    width: 40vw;
  }
  .preloader-content {
    width: 50vw; /* Smaller logo */
}
.progress-bar {
    height: 2px; /* Thinner progress bar */
}
  .photo-container {
      gap: 5%; /* Minimal gap between photos */
  }

  .photo img {
      max-width: 200px; /* Smallest image size */
  }

  .section-title {
      bottom: 13vh; /* Adjust for extra small devices */
      font-size: 27px; /* Reduce font size slightly */
  }

  .site-footer {
      font-size: 0.6em; /* Smallest font for footer */
      padding: 5px 10px;
      text-align: center; /* Center the footer content */
  }
}