@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
  /* Navbar Styling */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0; /* Make sure it starts from the left */
    width: 100%; /* Full width */
    height: 8%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    box-sizing: border-box; /* Ensure padding doesn't affect the width */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    z-index: 1000;
  }
  
  .navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.7); /* Lighter when scrolled */
  }
  
  .navbar .logo {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: black;
  }
  
  .navbar .nav-links {
    list-style: none;
    display: flex;
  }
  
  .navbar .nav-links li {
    margin-left: 20px;
  }
  
  .navbar .nav-links a {
    text-decoration: none;
    color: black;
    font-size: 18px;
    transition: color 0.3s ease;
  }
  
  .navbar .nav-links a:hover {
    color: #007BFF;
  }

  
body{
    margin: 0;
    font-family: 'Lobster', cursive;
    background-color: #010001;
    color: #fff;
}
.container-fuild{
    height: 100vh;
    overflow-x: hidden;
    perspective: 20px;
}
.banner{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform-style: preserve-3d;
}
.bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(bg4.jpg);
    background-size: cover;
    background-position: center;
    transform: translateZ(-10px) scale(1.);
}
.bg::before{
    position: absolute;
    width: 100%;
    height: 100px;
    content: '';
    background-image: linear-gradient(
        to top, #010001, transparent
    );
    bottom: 0;
}
.content {
  font-size: 5rem;  /* Default large size for desktop */
  transform: translateZ(10px);
  text-align: center; /* Ensures text is centered in the banner */
  padding: 0 20px;  /* Add some padding for smaller screens */
  color: white;  /* Ensure the text is white and visible on dark background */
  position: absolute; /* Make content absolute within the banner */
  top: 50%; /* Vertically center content */
  left: 50%; /* Horizontally center content */
  transform: translate(-50%, -50%); /* Center the content exactly */
  width: 100%; /* Ensure it doesn't overflow */
}
.container{
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-bottom: 100px;
}
.animation-show{
  transform: translateY(50px);
  opacity: 0;
  transition: 0.7s;
}
.active .animation-show{
  transform: translateY(0);
  opacity: 1;
}
.animation-show:nth-child(2){
  transition-delay: 0.3s;
}
.animation-show:nth-child(3){
  transition-delay: 0.6s;
}
.animation-show:nth-child(4){
  transition-delay: 0.9s;
}
.secondlibrary{
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  color: #fff;
}
.secondlibrary img{
  width: 90%;
  height: 500px;
  object-fit: cover;
}
nav ul{
    list-style: none;
    display: flex;
    justify-content: end;
}
nav ul li{
    padding: 10px;
}
.library{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 100px);
    margin-top: 100px;
    column-gap: 20px;
    row-gap: 20px;
}
.library .item{
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(bg1.jpg);
    background-size: cover;
    transition: 0.5s;
    opacity: 0;
    transition-delay: 0.3s;
}
.library .item:nth-child(2){
    background-image: url(bg2.jpg);
    transition-delay: 0.5s;
}
.library .item:nth-child(3){
    background-image: url(bg3.jpg);
    transition-delay: 0.7s;
}
.library .item:nth-child(4){
    background-image: url(bg4.jpg);
    transition-delay: 0.9s;
}
.des{
    width: 70%;
    text-align: center;
    margin: 100px auto;
    transition: 0.5s;
    transform: translateY(30px);
    opacity: 0;
}
.library.active .item{
    opacity: 1;
}
.des.active{
    opacity: 1;
    transform: translateY(0px);
}
  
  /* Footer Styling */
.footer {
    background-color: #000;
    color: #fff;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
  }
  
  .footer-content {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  
  .footer-links ul,
  .footer-social-media ul {
    list-style: none;
    padding: 0;
  }
  
  .footer-links ul li,
  .footer-social-media ul li {
    margin-bottom: 10px;
  }
  
  .footer-links ul li a,
  .footer-social-media ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    transition: color 0.3s ease;
  }
  
  .footer-links ul li a:hover,
  .footer-social-media ul li a:hover {
    color: #007BFF;
  }
  
  .footer-bottom {
   /* Footer Bottom Styling */
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  width: 100%;
  position:relative;
  bottom: 0;  /* Stick it at the bottom of the screen */
  left: 0;  /* Ensure it starts at the left */
  padding: 10px 0;  /* Space for the bottom text */
  
  color: #fff;
  }

/* Adjust font size for tablet and mobile */
@media (max-width: 768px) {
  .banner {
    height: 60vh; /* Adjust banner height for smaller screens */
  }

  .bg {
    background-size: cover; /* Ensure background covers the section */
    background-position: center; /* Center the background image */
    transform: translateZ(-5px) scale(1.1); /* Slight scaling of background */
  }

  .content {
    font-size: 6vw;  /* Scale text using viewport width (6% of the screen width) */
    padding: 0 20px;  /* Padding to prevent text from touching edges */
    top: 50%; /* Vertically center content on smaller screens */
    left: 50%; /* Horizontally center content */
    transform: translate(-50%, -50%); /* Center the content exactly */
  }
  .library {
    display: flex; /* Use flexbox for mobile */
    flex-direction: column; /* Stack items vertically */
    gap: 20px; /* Add gap between items */
    
  }

  .library .item {
    width: 100%; /* Make each item take full width */
    height: auto; /* Let items adjust their height based on content */
    padding: 30px; /* Add some padding for aesthetics */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.5s;
  }

  .library .item:nth-child(2) {
    transition-delay: 0.5s;
  }
  .library .item:nth-child(3) {
    transition-delay: 0.7s;
  }
  .library .item:nth-child(4) {
    transition-delay: 0.9s;
  }
  .secondlibrary {
    display: grid; /* Grid layout on tablet */
    grid-template-columns: repeat(2, 1fr); /* 2 items per row */
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
  }

  .footer-links ul,
  .footer-social-media ul {
    display: flex;
    justify-content: center;
  }
  .footer-content {
    flex-direction: column; /* Stack the content vertically on smaller screens */
    align-items: center; /* Center the content */
  }

  .footer-links,
  .footer-social-media {
    align-items: center; /* Center the links */
    width: 100%; /* Make the links container take full width */
    text-align: center; /* Center the text */
  }
}


@media (max-width: 480px) {
  .banner {
    height: 50vh; /* Adjust banner height further for small screens */
  }

  .bg {
    background-size: cover;
    background-position: center;
    transform: translateZ(-5px) scale(1.2); /* Slight scaling of background */
  }

  .content {
    font-size: 8vw; /* Increase font-size scaling for mobile */
    padding: 0 10px;  /* Reduce padding */
    top: 50%; /* Vertically center content */
    left: 50%; /* Horizontally center content */
    transform: translate(-50%, -50%); /* Center the content exactly */
  }
  .library {
    flex-direction: column; /* Stack items vertically on very small screens */
    gap: 15px; /* Slightly reduce gap on smaller devices */
  }

  .library .item {
    padding: 15px; /* Reduce padding */
  }
  .secondlibrary {
    display: flex; /* Use flexbox for mobile */
    flex-direction: column; /* Stack items vertically */
    gap: 20px; /* Space between items */
    padding: 10px; /* Padding around the container */
  }

  .secondlibrary .animation-show {
    width: 100%; /* Each item should take the full width of the screen */
    height: auto; /* Let the height adjust according to content */
    padding: 15px; /* Add padding to prevent cramping */
    background-color: #000; /* Give a black background to each item */
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    justify-content: center;
    align-items: center; /* Center content */
    opacity: 0; /* Ensure elements are hidden initially */
    transform: translateY(50px); /* Start with slight position below */
    transition: opacity 0.7s ease, transform 0.7s ease; /* Transition for both opacity and position */
  }

  /* Item transition delays for staggered animation */
  .secondlibrary .animation-show:nth-child(2) {
    transition-delay: 0.3s;
  }

  .secondlibrary .animation-show:nth-child(3) {
    transition-delay: 0.6s;
  }

  .secondlibrary .animation-show:nth-child(4) {
    transition-delay: 0.9s;
  }

  /* Trigger animation when in active state */
  .secondlibrary.active .animation-show {
    opacity: 1; /* Make the item visible */
    transform: translateY(0); /* Move to normal position */
  }

  /* Ensure the image name stays below the image */
  .secondlibrary .animation-show img {
    width: 100%; /* Make sure the image takes full width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure the image covers the area */
  }

  .secondlibrary .animation-show p {
    margin-top: 10px; /* Add some space between the image and text */
    color: #fff; /* Ensure the text is white and readable */
    font-size: 16px; /* Adjust the font size as needed */
    text-align: center; /* Center the text */
  }
  .footer-links,
  .footer-social-media {
    width: 100%;
    align-items: center;
  }

  .footer-links ul,
  .footer-social-media ul {
    display: flex;
    justify-content: center; /* Center the items horizontally */
  }

  .footer-links ul li,
  .footer-social-media ul li {
    margin-right: 20px; /* Space out links */
  }

  .footer-bottom {
    margin-top: 20px;
    font-size: 12px;
  }
}