body {
     font-family: "Roboto", sans-serif;
   }

   main {
     background-color: #f9f9f9;
   }

   .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;
     }
   }

   .min-h-40 {
     min-height: 40px;
   }

   .min-h-100 {
     min-height: 100px;
   }

   .header-info,
   .header-social {
     display: inline-flex;
     align-items: center;
     list-style: none;
     margin: 0px;
   }

   .header-info li,
   .header-social li {
     display: flex;
     align-items: center;
     min-height: 50px;
     border-left: 1px solid #ccc;
   }

   .header-info li {
     padding: 0px 15px;
   }

   .header-social li a {
     padding: 0px 15px;
     min-height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     color: #212c36;
   }

   .header-info li:last-child,
   .header-social li:last-child {
     border-right: 1px solid #ccc;
   }

   .header-social {
     justify-content: end;
   }

   .navbar-light .navbar-nav .nav-link.active,
   .navbar-light .navbar-nav .show>.nav-link,
   .navbar-expand-md .navbar-nav .nav-link {
     font-weight: 500;
   }

   .header-top-bar {
     border-bottom: 1px solid#e7e7e7;
   }

   .fixed-top {
     -webkit-animation: fadein 2s;
     -moz-animation: fadein 2s;
     -ms-animation: fadein 2s;
     -o-animation: fadein 2s;
     animation: fadein 2s;
     -webkit-transition: min-height 1s;
     -moz-transition: min-height 1s;
     -ms-transition: min-height 1s;
     -o-transition: min-height 1s;
     transition: min-height 1s;
   }

   header .fixed-top {
     min-height: 70px;
     -webkit-transition: min-height 1s;
     -moz-transition: min-height 1s;
     -ms-transition: min-height 1s;
     -o-transition: min-height 1s;
     transition: min-height 1s;
     box-shadow: 0 0 4px 0 rgba(60, 65, 140, .2), 0 10px 20px 0 rgba(60, 65, 140, .2);
   }

   @keyframes fadein {
     from {
       opacity: 0;
     }

     to {
       opacity: 1;
     }
   }

   /*
    Firefox < 16 */
   @-moz-keyframes fadein {
     from {
       opacity: 0;
     }

     to {
       opacity: 1;
     }
   }

   /* Safari, Chrome and Opera>
    12.1 */
   @-webkit-keyframes fadein {
     from {
       opacity: 0;
     }

     to {
       opacity: 1;
     }
   }

   /* Internet Explorer */
   @-ms-keyframes fadein {
     from {
       opacity: 0;
     }

     to {
       opacity: 1;
     }
   }


   .menu-bg {
     background: #fff;
   }

   .menu-bg.fixed-top {
     background: #ffffff82;
     backdrop-filter: blur(5px);
     box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.2);
   }

   @media all and (min-width: 992px) {
     .navbar .dropdown-menu-end {
       right: 0;
       left: auto;
     }

     .navbar .nav-item .dropdown-menu {
       display: block;
       opacity: 0;
       visibility: hidden;
       transition: .3s;
       margin-top: 0;
     }

     /* .navbar .nav-item:hover .nav-link{ color: #fff;  } */
     .navbar .dropdown-menu.fade-down {
       top: 80%;
       transform: rotateX(-75deg);
       transform-origin: 0% 0%;
     }

     .navbar .dropdown-menu.fade-up {
       top: 180%;
     }

     .navbar .nav-item:hover .dropdown-menu {
       transition: 1s;
       opacity: 1;
       visibility: visible;
       top: 100%;
       transform: rotateX(0deg);
     }
   }

   .fixed-top {
     backdrop-filter: blur(5px);
   }


   .js-c-facebook:hover {
     background-color: #3b5999;
     color: #fff;
   }

   .js-c-linkedin:hover {
     background: #0A66C2;
     color: #fff;
   }

   .js-c-mail:hover {
     background-color: #0072c6;
     color: #fff;
   }

   .js-c-github:hover {
     background-color: #6e5494;
     color: #fff;
   }

   .js-c-codepen:hover {
     background-color: #212121;
     color: #fff;
   }

   .js-c-steam:hover {
     background-color: #7da10e;
     color: #fff;
   }

   .js-c-snapchat:hover {
     background-color: #eec900;
   }

   .js-c-instagram:hover {
     background-image: linear-gradient(#8a3ab9, #e95950, #bc2a8d, #fccc63);
     color: #fff;
   }

   .js-c-twitter:hover {
     background: #00ECEE;
     color: #fff;
   }

   .js-c-npmjs:hover {
     background-color: #c12127;
     color: #fff;
   }

   .js-c-whatsapp:hover {
     background-color: #c12127;
     color: #fff;
   }









   @media only screen and (min-width: 200px) and (max-width: 767px) {
     #article-cover #article-content {
       padding: 47px 0px;
     }

     .container .content-wrapper {
       display: block;
     }

     .content-wrapper #article-cover {
       width: 100%;
     }

     body .download-box {
       position: relative;
       left: auto;
       height: auto;
       float: left;
       width: 100%;
       top: auto;
       bottom: 40px;
     }

     body #app-title {
       left: 0px;
     }

     .ly-search-bar select,
     .ly-search-bar input[type="text"] {
       margin-bottom: 20px;
     }
   }

   .song-detail-pg {
    white-space: pre;
    line-height: 30px;
    white-space: pre-line;
   }



   .bkg-color-site {
     position: relative;
   }

   .bkg-color-site::before {
     content: '';
     background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
     background-size: 400% 400%;
     animation: gradient 5s ease infinite;
     position: absolute;
     z-index: inherit;
     width: 100%;
     height: 100%;
     opacity: 0.6;
   }

   .bkg-color-site-content {
     z-index: 99;
   }




   @keyframes gradient {
     0% {
       background-position: 0% 50%;
     }

     50% {
       background-position: 100% 50%;
     }

     100% {
       background-position: 0% 50%;
     }
   }



   .header-info li i {
     margin-right: 2px;
   }

   section.common-page-section {
     padding: 60px 0px;
   }

   .footer-list {
     margin-top: 20px;
     line-height: 28px;
   }

   .footer-main {
     background-image: url('../../images/world.png');
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
   }




   /* Custom styling for Bootstrap 5 dropdown menus */

   .navbar .nav-item .dropdown-menu {
     padding: 0px;
     border-radius: 0px;
   }

   .navbar .nav-item .dropdown-menu li {
     padding: 0px;
   }

   /* Change the background color of the dropdown menu */
   .dropdown-menu {
     background-color: #ffffff;
     border: 1px solid #e9ecef;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   }

   /* Style dropdown items */
   .dropdown-item {
     color: #212529;
     padding: 0.5rem 1rem;
   }

   /* Style dropdown items on hover */
   .dropdown-item:hover,
   .dropdown-item:focus {
     background-color: #e9ecef;
     color: #16181b;
   }

   /* Style active dropdown items */
   .dropdown-item.active,
   .dropdown-item:active {
     background-color: #0d6efd;
     color: white;
   }

   /* Add divider styling */
   .dropdown-divider {
     border-top: 1px solid #e9ecef;
     margin: 0.5rem 0;
   }

   /* Style dropdown headers */
   .dropdown-header {
     color: #6c757d;
     font-weight: 600;
     padding: 0.5rem 1rem;
   }

   /* Rounded corners for dropdown menu */
   .dropdown-menu.rounded-3 {
     border-radius: 0.5rem;
   }

   /* Custom dropdown arrow */
   .dropdown-toggle::after {
     border-top: 0.3em solid #000000;
   }

   /* Styling dropdown menu list items and links */

   /* Style all list items in dropdown */
   .dropdown-menu li {
     margin: 0;
     padding: 0;
   }

   /* Custom padding for list items */
   .dropdown-menu li {
     padding: 2px 0;
   }

   /* Style all anchor links in dropdown */
   .dropdown-menu a {
     color: #333;
     text-decoration: none;
     font-size: 0.9rem;
     display: block;
     padding: 10px 10px;
     transition: all 0.5s ease;
   }

   /* Hover effect for links */
   .dropdown-menu a:hover {
     background-color: #000000;
     color: #ffffff;
     padding-left: 25px;
     /* Slight indent on hover */
   }

   /* Active link styling */
   .dropdown-menu a.active {
     background-color: #b30d12;
     font-weight: 500;
     color: #ffffff;
   }

   /* First and last items in dropdown */
   .dropdown-menu li:first-child a {
     border-top-left-radius: 0.25rem;
     border-top-right-radius: 0.25rem;
   }

   .dropdown-menu li:last-child a {
     border-bottom-left-radius: 0.25rem;
     border-bottom-right-radius: 0.25rem;
   }

   /* Add icons to dropdown items */
   .dropdown-menu a.with-icon {
     position: relative;
     padding-left: 40px;
   }

   .dropdown-menu a.with-icon::before {
     content: '';
     position: absolute;
     left: 15px;
     top: 50%;
     transform: translateY(-50%);
     width: 16px;
     height: 16px;
     background-repeat: no-repeat;
     background-position: center;
   }


   .zi-99 {
     z-index: 99;
   }






   .search-bar {
     background-image: url(../../images/bible-pattern.png);
     background-size: contain;
     background-repeat: repeat;
     background-position: center;
     padding: 10em 0px;
     background-color: #850000;
   }

   .search-bar h1 {
     color: #fff;
     font-weight: bold;
     line-height: 1.5em;
   }

   .search-bar p {
     font-weight: 600;
     color: #fff;
     width: 60%;
     margin: 0px auto;
     margin-bottom: 25px;
   }

   .bible-chapters .card-content {
     background-color: #850000;
     border-radius: 5px;
     background-image: url(../../images/bible-pattern.png);
   }

   .bible-chapters a {
     text-decoration: none;
   }

   .bible-chapters .card-content h3,
   .bible-chapters .card-content span {
     color: #fff;
     font-weight: 400;
   }

   .bible-chapters .card:hover {
     transition: box-shadow 0.5s, transform 0.5s;
     box-shadow: antiquewhite;
     -webkit-box-shadow: 9px 11px 43px 0px rgba(0, 0, 0, 0.75);
     -moz-box-shadow: 9px 11px 43px 0px rgba(0, 0, 0, 0.75);
     box-shadow: 9px 11px 43px 0px rgba(0, 0, 0, 0.75);
     margin-top: -5px;
     transition: margin-top 0.9s, transform 0.9s;
     border: 0px;
   }





   /*********************
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
**********************/




   @media (min-width: 576px) {
     .js-albums ul {
       grid-template-columns: repeat(1, 1fr);
     }
   }

   @media (min-width: 768px) {
     .js-albums ul {
       grid-template-columns: repeat(2, 1fr);
     }
   }

   @media (min-width: 992px) {
     .js-albums ul {
       grid-template-columns: repeat(2, 1fr);
     }
   }

   @media (min-width: 1200px) {}

   @media (min-width: 1400px) {}