/* Hero image css start */
/* Hero image css start */
/* Hero Section */
.hero-image {
  width: 100%;
  height: auto;
  position: relative;
  
}

.hero-image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

/* Mobile and Tablet Responsiveness */
@media (max-width: 768px) {
  .hero-image img {
      height: 200px; /* Optimize height for tablets */
      object-fit: cover; /* Ensure content fits nicely */
  }
}

@media (max-width: 480px) {
  .hero-image img {
      height: 150px; /* Smaller height for smaller screens */
  }
}
/* Hero image css finished */
/* new-arrivals css start */
.new-arrival-scrollable-container{
  height: 450px;
}
@media (max-width: 960px) {
  .new-arrival-scrollable-container {
      height: 300px; /* Adjust the height for screens smaller than 960px */
  }
}

@media (max-width: 768px) {
  .new-arrival-scrollable-container {
      height: 200px; /* Adjust the height for screens smaller than 768px */
  }
}
/* new-arrivals css finished */

/* Ousl Library css start */
.library-img {
  transition: 0.5s;
}
.library-img:hover {
  transform: scale(1.05);
}

.new-arriavl-img {
  /* width: 700px; */
  transition: 0.5s;
  background-size: cover;
  background-repeat: no-repeat;
}
.new-arriavl-img:hover {
  transform: scale(1.05);
}

.heading {
  /* font-size: 3em; Adjust the size as needed */
  text-align: left;
}

.heading span:first-child {
  color: #e05b1d;
}

.heading span:last-child {
  color: black;
  font-weight: bold;
}

.description {
  color: #000;
  /* font-size: 18px; */
  line-height: 1.6;
  padding-bottom: 20px;
  text-align: justify;
  padding-top: 20px;
}

/* Responsive Design */
@media (max-width: 992px) {
  /* Tablet view */
  .row {
    flex-direction: column; /* Stack columns vertically */
    text-align: center; /* Center text */
  }

  .left-column {
    padding-right: 0;
  }

  .btn-custom {
    /* font-size: 14px; */
    padding: 10px 20px;
  }
}

@media (max-width: 576px) {
  /* Mobile view */

  .btn-custom {
    /* font-size: 12px; */
    padding: 8px 15px;
  }

  .right-column img {
    width: 100%; /* Reduce image size */
  }
}

/* Ousl library css finished */

/* welcome message from librarian css start */

.welcome-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  background-color: #fff;
}

.welcome-content {
  display: flex;
  max-width: 1200px;
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
}

.text-section {
  flex: 2;
  padding: 40px;
  text-align: left;
}

.welcome-title {
  /* font-size: 36px; */
  color: #f36b2b;
  margin-bottom: 20px;
  font-weight: 400;
}

.welcome-title span {
  font-weight: bold;
  color: #000000;
}

.welcome-description {
  /* font-size: 18px; */
  line-height: 1.6;
  color: #000;
  margin-bottom: 30px;
  text-align: justify;
  padding-top: 20px;
  padding-bottom: 20px;
}

.contact-button {
  display: inline-block;
  background-color: #f36b2b;
  color: #ffffff;
  padding: 10px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  /* font-size: 16px; */
  text-align: center;
  border: none; /* Removes any border */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Static subtle shadow */
  cursor: pointer;
}

.contact-button:hover {
  background-color: #000; /* Slightly darker shade on hover */
}

.contact-button:active {
  background-color: #c0501f; /* Darker color on click */
}

/* Responsive Design */
@media (max-width: 1024px) {
  .welcome-content {
    flex-direction: column;
    padding: 20px;
  }

  .text-section {
    padding: 20px;
  }

  .welcome-description {
    /* font-size: 16px; */
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .contact-button {
    /* font-size: 14px; */
    padding: 8px 20px;
  }
}

@media (max-width: 768px) {
  .welcome-container {
    padding: 20px;
  }

  .contact-button {
    /* font-size: 12px; */
    padding: 8px 15px;
  }

  .image-section {
    flex: 1;
    padding: 10px;
  }

  .text-section {
    flex: 1;
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .welcome-description {
    /* font-size: 14px; */
    line-height: 1.5;
  }

  .contact-button {
    /* font-size: 12px; */
    padding: 8px 12px;
  }

  .image-section {
    padding: 10px;
  }

  .text-section {
    padding: 10px;
  }
}
/*welcome message from librarian css finished  */

/* Left Panel Styling */
.left-panel-header {
  background-color: #e05b1d;
}

.left-panel-body {
  background-color: #262626;
}

/* Button Styles */
.btn-search-active {
  background-color: hsla(19, 89%, 55%, 0.2);
  color: white;
  border: 3.5px solid var(--color-red-orange);
  font-weight: bold;
  transition: 0.3s;

}

.btn-search-inactive {
  background-color: #2d2d2d;
  color: white;
  border: 3.5px solid #777;
  transition: 0.3s;

}

.btn-search-active:hover {
  opacity: 0.9;
  cursor: pointer;
  transition: 0.3s;
}

.btn-search-inactive:hover {
  background-color: hsla(19, 89%, 55%, 0.2);  /* Hover effect for inactive buttons */
  border-color: #f26627;
  opacity: 0.9;
  cursor: pointer;
  transition: 0.3s;
}

.btn-custom {
  background-color: var(--color-red-orange) !important;
  transition: 0.3s;
}
.btn-custom:hover {
  background-color: var(--color-hover-orange) !important;
  transition: 0.3s;
}
/* Form Input Styling */
.form-control {
  width: 100%; /* Ensure full width */
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #ddd;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
  align-items: normal;
  /* border-color:#c0501f; */
}

.form-control:focus {
  outline: none;
  border-color: #e05b1d;
  box-shadow: 0 0 5px rgba(242, 102, 39, 0.5);
}

/* Panel Styling */
.panel {
  display: none; /* All panels are hidden by default */
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
}

.panel.active {
  display: flex; /* Display active panel */
  flex-direction: column;
  justify-content: center;
}

.right-panel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Takes full height */
}

/* Main Search CSS finished */