h1 {
  /* font-family: 'Vidaloka', serif; */
  font-family: "Playfair Display SC", serif;
  font-weight: 400;
  font-style: normal;
}
h2 {
  font-family: "Playfair Display SC", serif;
  font-weight: 400;
  font-style: normal;
}
 h3, h4 {
  font-family: "Playfair Display SC", serif;
  font-weight: 400;
  font-style: normal;
}
body {
/*   font-family: 'IBM Plex Serif', serif;
 */
/*  font-family: 'Roboto', sans-serif;
 font-weight: 100; */
 font-weight: 50;
 font-family: "Lora", serif;
 font-optical-sizing: auto;
 
 font-style: normal;
}
.lead {
/*   font-family: 'IBM Plex Serif', serif;
 */
 /* font-family: 'Roboto', sans-serif;
 font-weight: 100; */
 font-family: "Lora", serif;
 font-optical-sizing: auto;
 font-weight: 50;
 font-style: normal;
}

.p {
/*   font-family: 'IBM Plex Serif', serif;
 */
 /* font-family: 'Roboto', sans-serif;
 font-weight: 100; */
 font-weight: 100;
 font-family: "Lora", serif;
 font-optical-sizing: auto;
 font-weight: 50;
 font-style: normal;
}

   .truncated {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Number of lines */
    line-height: 1.4em; /* Adjust as needed */
    max-height: 4em; /* Adjust as needed */
  }
  
  .video-background {
    position: relative;
    width: 100%;
    height: 65vh; /* Full viewport height for video container */
    overflow: hidden; /* Prevent content overflow */
  }
  
  .video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%; /* Only changed as a test */
    height: 100%; /* Ensure video height fits the container */
    object-fit: cover;
    transform: translate(-50%, -50%);
  }
  /* Style for h1 and p tags inside banner */
.banner-content h1, .banner-content p {
  font-family: 'Libre Baskerville', serif; /* Apply Libre Baskerville font */
}

.banner-content h1 {
  font-size: 6rem; /* Increase font size for the heading */
  font-weight: 500; /* Make the h1 bold */
  margin-bottom: 1rem; /* Add space below the heading */
}

.banner-content p {
  font-size: 1.7rem; /* Increase font size for the paragraph */
  font-weight: 300; /* Regular weight for the paragraph */
  color: rgb(111, 119, 96);
}
  
  /* Light Grey Overlay covering only the video */
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Matches video container height */
    /* background: linear-gradient(to bottom,  #dfeff0,#d9dfe4); */
    background:linear-gradient(to bottom, rgba(123, 175, 177, 1),rgba(174, 189, 201, 0.5));
    /*background: rgba(58, 77, 94, 0.5); /* Light grey with transparency */
    z-index: 1; /* Ensure overlay stays on top of the video */
  }
  
  /* Banner Content */
  .banner-content {
    position: absolute; /* Position relative to the nearest positioned ancestor (video-background) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    color: rgb(77, 82, 83);
    text-align: center;
    padding: 5rem 2rem;
    z-index: 2; /* Ensure content is above the video and overlay */
    width: 100%; /* Full width to accommodate text and button */
  }
  
  .content {
    position: relative;
    z-index: 2;
    color: rgb(77, 82, 83);
    text-align: center;
    padding: 20px;
  }
  

    .navbar {
      position: relative;
      z-index: 3; /* Ensure navbar is above the video */
    }

    .text-white {
      color: #fff !important;
    }
     /* Container for fixed-size images with centered cropping */
     /* Container for fixed-size images with centered cropping */
     .gallery-item {
      position: relative;
      width: 100%;
      padding: 0 0.25rem; /* Horizontal padding for spacing around images */
    }

  .card-custom {
    background-size: cover;
    background-position: center;
    color: white;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .card-custom:hover {
    opacity: 0.8;
  }
  .footer {
    background-color: #f4eceb;
  }

  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }

  .b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
  }

  .bd-mode-toggle {
    z-index: 1500;
  }

  .bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
  }


  .table-scroll {
    overflow-x: auto;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa;
}

 /* Container for fixed-size images with centered cropping */
     /* Container for fixed-size images with centered cropping */
     .gallery-item {
      position: relative;
      width: 100%;
      padding: 0 0.25rem; /* Horizontal padding for spacing around images */
    }

    .image-container {
      position: relative;
      width: 100%;
      height: 300px; /* Fixed height */
      overflow: hidden;
    }

    .image-container img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Crops and centers the image */
      transform: translate(-50%, -50%);
    }

    .row {
      margin-left: -0.25rem; /* Compensate for padding in gallery-item */
      margin-right: -0.25rem; /* Compensate for padding in gallery-item */
    }

    /* Custom styles for modal */
    .modal-dialog {
      padding: 0; /* Remove padding */
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%; /* Full height of the modal-dialog */
      overflow: hidden; /* Hide overflow to prevent scrollbars */
    }

    .modal-content {
      border: none; /* Remove border */
      width: 100%; /* Ensure modal content uses full width of modal-dialog */
      height: auto; /* Adjust height based on content */
      box-shadow: none; /* Remove box shadow if any */
    }

    .modal-body {
      padding: 0; /* Remove padding */
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%; /* Full height of the modal-dialog */
      overflow: hidden; /* Hide overflow to prevent scrollbars */
    }

    .modal-body img {
      max-width: 100%; /* Ensure the image width is responsive */
      max-height: 100vh; /* Ensure the image height does not exceed viewport height */
      object-fit: contain; /* Ensure the image fits within its container while maintaining aspect ratio */
      display: block; /* Remove extra space below image */
      margin: 0 auto; /* Center image horizontally */
    }

    /* Hide default close button */
    .modal-footer {
      display: none;
    }

    /*modalNew*/
    .modal-body .modal-img {
      width: 100%; /* Resize image to 50% of the modal width */
      height: auto; /* Maintain aspect ratio */
      object-fit: cover; /* Crop image while maintaining aspect ratio */
      display: block; /* Remove extra spacing */
      margin-left: auto; /* Center the image */
      margin-right: auto; /* Center the image */
    }




    /**/
    .album {
      padding: 5rem 0;
    }

    .card {
      border: none; /* Optional: Remove border from cards */
    }

    .card img {
      width: 100%;
      height: 200px; /* Set a fixed height for images */
      object-fit: cover; /* Crop and center the image */
      object-position: center; /* Ensure the image is centered */
    }
    .img-fluid-featurette {
    width: 300px;
    height: 300px;
    object-fit: cover; /* Crops the image to fit the 300x300 area */
    display: block;    /* Allows margin auto to work */
    margin: auto;      /* Centers the image within its container */
  }

  .table-scroll {
            overflow-x: auto;
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: #f8f9fa;
        }