.card img {
  /*height: 250px;*/
/*  height: 420px;
  object-fit: cover;*/
  width: 100%;
  height: 320px;
  object-fit: contain;  /* show full image */
  background: #f8f9fa;
}
footer {
  position: relative;
  bottom: 0;
  width: 100%;
}


html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  /*background: #f5f8fa;*/
}

main {
  flex: 1;
  min-height: calc(100vh - 300px); /* Adjust based on footer height */
}

.bg-teal {
  background-color: #177d80 !important;
}


/* 🔹 Slider Image */
.slider-img {
  height: 350px;   /* adjust as per design */
  object-fit: cover;
}

/* 🔹 Carousel Indicators (dots) */
.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.7;
}
.carousel-indicators .active {
  opacity: 1;
  background-color: #ffc107; /* highlight color */
}

/* 🔹 Book Title Multiline Wrap */
.book-title111 {
  font-size: 1rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* max 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 60px; /* ensures equal height */
}



/* 🔹 Book Image Height */
.book-img {
 /* height: 300px; 
  object-fit: cover;*/
  width: 100%;
  height: 320px;
  object-fit: contain;  /* show full image */
  background: #f8f9fa;
}

/* 🔹 Book Title - 3 lines with ellipsis */
.book-title {
  font-size: 1rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* max 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 62px;  /* keeps uniform card height */
}


/* Carousel Image Responsive Fix */
.carousel-item img {
  width: 100%;
  height: 450px; /* default desktop height */
  object-fit: cover;
}

@media (max-width: 768px) {
  .carousel-item img {
    height: 250px; /* tablet */
  }
}

@media (max-width: 576px) {
  .carousel-item img {
    height: 180px; /* mobile */
  }
}


 @media (max-width: 991.98px) {
            .offcanvas-end {
                width: 100%;
                /* You can adjust the width here for smaller screens */
            }
        }

/* styles.css */

/* Custom CSS for the offcanvas menu text color */
@media (max-width: 991.98px) {
  #offcanvasNavbar .nav-link,
  #offcanvasNavbar .btn-outline-light {
    color: #000 !important; /* Change the text color to black or any dark color */
  }

  /* Optional: Hover effect for better user experience */
  #offcanvasNavbar .nav-link:hover {
    color: #0d6efd !important; /* A nice blue color on hover */
  }
}

/* styles.css */

/* Custom CSS for the offcanvas menu on mobile */
@media (max-width: 991.98px) {
  .offcanvas-body {
    padding: 1rem; /* Adjust padding for the entire offcanvas body */
  }

  /* Optional: Adds space between the button group and the links above it */
  .offcanvas-body .d-flex {
    margin-top: 1rem;
  }
}






/* styles.css */

/* General styling for the book detail image */
.book-detail-img {
    max-width: 100%;
    height: auto;
}

/* * Truncate long titles with an ellipsis after a certain number of lines.
 * This is crucial for responsiveness.
 */
.book-detail-title {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show up to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2; /* Adjust line height for better spacing */
}


.contact-card {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 2rem;
}

.form-control {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.btn-purple {
    background-color: #6f42c1;
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
}

.btn-purple:hover {
    background-color: #5a33a1;
    color: #fff;
}

.captcha-img {
    width: 100px;
    height: 40px;
    object-fit: contain;
}


/* Force RTL sliding */
.carousel-rtl .carousel-inner {
  overflow: hidden;
  position: relative; /* needed for absolute stacking */
}

.carousel-rtl .carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.34s ease-in-out;
}

.carousel-rtl .carousel-item.active {
  position: relative; /* keep the active one in flow */
}

/* Move directions */
.carousel-rtl .carousel-item-next.carousel-item-start,
.carousel-rtl .carousel-item-prev.carousel-item-end {
  transform: translateX(-100%);
}

.carousel-rtl .carousel-item-next,
.carousel-rtl .active.carousel-item-end {
  transform: translateX(-100%); /* enter from right */
}

.carousel-rtl .carousel-item-prev,
.carousel-rtl .active.carousel-item-start {
  transform: translateX(100%); /* exit to right */
}

/* Slider height */
.slider-img {
  height: 450px; /* fixed desktop height */
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .slider-img { height: 250px; }
}

@media (max-width: 576px) {
  .slider-img { height: 180px; }
}

/* Right side feature images with text on left */
/* Feature box layout */
.feature-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between; /* keeps image fixed on right */
  align-items: center;
}

/* Force image to stay aligned right */
.feature-box img.feature-img {
  height: 204px;
    width: 150px;
    object-fit: contain;
    cursor: pointer;
    flex-shrink: 0;
  margin-left: auto; /* ensures image sticks to right */
}
/* Title truncation: max 3 lines with ellipsis */
.feature-title {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* max 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-width: calc(100% - 90px); /* keep space for image */
}

.pull-right{
  float: right;
}
.pull-left{
  float: left;
}