/* UI/UX Custom Styling */
 #preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: #FFEDE1;
     z-index: 99999 !important;
     opacity: 1;
     visibility: visible;
     transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader-hidden {
     opacity: 0;
     visibility: hidden;
}

#backgroundAudio{
     opacity: 0.8;
     width: 100%;
     height: 25px;
     margin-top: 4px;
}


#jtopbar {
     /*background: linear-gradient(90deg, rgba(255, 218, 220, 1) 60%, rgba(255, 179, 174, 1) 100%);*/ /*Red 90 and 80*/
    background: linear-gradient(90deg, rgba(255, 141, 65, 1) 60%, rgba(232, 110, 0, 1) 100%); /*Orange 70 and 80*/
}

 .j-text-red-50{
    color: #DB372D !important;
 }

  .j-text-red-40{
    color: #B3251E !important;
 }

.j-text-orange-60{color: #E86E00 !important;}

.j-text-orange-50{color: #C05A01 !important;}

.j-text-orange-40{color: #9A4600 !important;}

.j-text-orange-30{color: #753403 !important;}

.j-text-orange-20{color: #522302 !important;}


    
 .jfs-small{
     font-size: small !important;
}
 .j-text-insta{
     color: #E1306C !important;
}
 .j-text-whatsapp{
     color: #25d366;
}
 #jtopNotifi {
     background: linear-gradient(90deg, rgba(255, 182, 131, 0.9) 60%, rgba(255, 141, 65, 0.9) 100%); /*orange 80 70*/
     font-size: small !important;
}
/* Outer container prevents page overflow */
 .ticker-wrap {
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
     position: relative;
}
/* Inner track containing two identical sets of items */
 .ticker-track {
     display: inline-flex;
     width: 100%;
     animation: ticker-scroll 40s linear infinite;
}
/* Pause scrolling when user hovers to click a link */
 .ticker-wrap:hover .ticker-track {
     animation-play-state: paused;
}
/* Seamless loop: translation ends exactly halfway (-50%) */
 @keyframes ticker-scroll {
     0% {
         transform: translateX(99%);
    }
     100% {
         transform: translateX(-50%);
    }
}
 #jmainheader{
   background: linear-gradient(90deg, rgba(255, 182, 131, 1) 60%, rgba(255, 141, 65, 1) 100%); /*orange 80 70*/
    /* Red 100 - 98*/
}

.j-f-mukta-extralight {
  font-family: "Mukta", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.j-f-mukta-light {
  font-family: "Mukta", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.j-f-mukta-regular {
  font-family: "Mukta", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.j-f-mukta-medium {
  font-family: "Mukta", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.j-f-mukta-semibold {
  font-family: "Mukta", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.j-f-mukta-bold {
  font-family: "Mukta", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.j-f-mukta-extrabold {
  font-family: "Mukta", sans-serif;
  font-weight: 800;
  font-style: normal;
}


 #jheading {
     /*margin-top: 15px;*/
}



 #jheading h1 i {
}
 #jmainheader p {
}
/* 1. Gradient Background: Golden Saffron to Red */
 .navbar-custom {
     background: linear-gradient(90deg, rgba(232, 110, 0, 1) 60%, rgba(192, 90, 1, 1) 100%); /*Orange 60 - 50*/
}
/* 2. Brand and Typography Styling */
 .navbar-custom .navbar-brand {
     color: #ffffff;
     font-weight: 800;
     font-size: 1.5rem;
     letter-spacing: 1px;
     transition: opacity 0.3s ease;
}
 .jfontsalkatra-brandname {
     font-family: "Alkatra", system-ui;
     font-optical-sizing: auto;
     font-weight: 800;
     font-style: normal;
}
 .navbar-custom .navbar-brand:hover {
     color: #ffffff;
     opacity: 0.8;
}
/* 3. Link Interactions */
.dropdown-item.active{
  background-color: #E86E00 !important;
}


 .navbar-custom .nav-link {
     color: rgba(255, 255, 255, 0.8);
     font-weight: 500;
     margin: 0 5px;
     transition: color 0.3s ease, transform 0.2s ease;
}
 .navbar-custom .nav-link:hover, .navbar-custom .nav-link:focus, .navbar-custom .nav-link.active {
     color: #ffffff;
     transform: translateY(-2px);
    /* Slight lift on hover */
}
/* 4. Submenu Dropdown Styling */
 .dropdown-menu {
     border: none;
     box-shadow: 0 8px 16px rgba(0,0,0,0.1);
     border-radius: 8px;
     overflow: hidden;
     margin-top: 10px;
}
 .dropdown-item {
     font-weight: 500;
     color: #333333;
     padding: 10px 20px;
     transition: background-color 0.2s ease, color 0.2s ease;
}
 .dropdown-item:hover {
     background-color: #FFEDE1;
    /* Subtle red tint on hover */
     color: #E86E00;
}
/* 5. Mobile Toggler (Hamburger Icon) Customization */
 .navbar-custom .navbar-toggler {
     border-color: rgba(255, 255, 255, 0.5);
}
/* Injecting white hamburger icon since background is dark */
 .navbar-custom .navbar-toggler-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}





 #jfooter{     
     background: 
  linear-gradient(90deg, rgba(232, 110, 0, 1) 60%, rgba(192, 90, 1, 1) 100%), /*Red 40 - 30 Orange 60 - 50*/
  url('https://jivheshwar.org/images/SliderImg111.jpg') center / cover no-repeat !important; /*Red 40 - 30*/     
    
}

.j-fs-xsmall
{
    font-size: x-small !important;
}

.j-fs-small
{
    font-size: small !important;
}

.j-border-Orange-60
{
    border-color: rgba(232, 110, 0,0.8) !important;
}

.j-bg-Orange-70
{
    background-color: rgba(255, 141, 65,0.6);
}

.j-bg-Orange-30
{
    background-color: #753403;
}

.j-bg-Orange-20
{
    background-color: #522302;
}

#j-quick-links li a
{
 
}

 #jfooter span{
     font-size: small;
     font-style: italic;
     display: inline-block 
}
 #jfooter #fSocialMedia a{
     color: #FFB3AE !important;
     border-color: #FFB3AE !important;
}
 #jfooter #fSocialMedia a:hover{
     background-color: #B3251E !important;
     color: #FFB3AE !important;
     border-color: #FFB3AE !important;
}


.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.25s ease;
  padding: 0.15rem 0;
}

.footer-link .link-icon {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
  opacity: 0.6;
}

/* Hover Effects */
.footer-link:hover {
  color: #ffffff;
  transform: translateX(4px); /* Smooth slide right */
}

.footer-link:hover .link-icon {
  opacity: 1;
  transform: translateX(2px);
}

/* Special styling for Donation / Seva CTA */
.footer-link.highlight-link {
  color: #ffc107; /* Golden accent */
  font-weight: 500;
}

.footer-link.highlight-link:hover {
  color: #ffe082;
}


/* Styles for website counter container */
.website-counter {

}

/* Styles for reset button */
#reset {
  margin-top: 20px;
  background-color: #008cba;
  cursor: pointer;
  font-size: 18px;
  padding: 8px 20px;
  color: white;
  border: 0;
}
/****************/


/* Gallery Thumbnail Styling */
    .gallery-item {
      cursor: pointer;
      overflow: hidden;
      border-radius: 8px;
      position: relative;
      background-color: #FFF8F8;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .gallery-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .gallery-img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      display: block;
    }

    /* Hover overlay prompt */
    .gallery-item::after {
      content: "\F71E  View Photo";
      font-family: "bootstrap-icons";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      font-weight: 500;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .gallery-item:hover::after {
      opacity: 1;
    }

    /* Modal Adjustments */
    .modal-dialog {
      max-width: 900px;
    }

    .modal-body {
      padding: 0;
    }

    .modal-img {
      width: 100%;
      max-height: 70vh;
      object-fit: contain;
      background-color: #3A0907;
    }

    .user-avatar {
      width: 48px;
      height: 48px;
      object-fit: cover;
      border-radius: 50%;
    }

    
    /* Custom Navigation Overlay Buttons */
    .nav-btn {
      position: absolute;
      top: 45%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      border: none;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      cursor: pointer;
      transition: background 0.2s ease;
      z-index: 10;
    }

    .nav-btn:hover {
      background: rgba(0, 0, 0, 0.9);
      color: #fff;
    }

    .nav-prev { left: 15px; }
    .nav-next { right: 15px; }             
    








        /* Optional: Custom styling for a polished look */
        .custom-card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            max-width: 350px; /* Restricts maximum width on large screens */
            margin: 2rem auto; /* Centers the card on the page */
        }

        .custom-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .custom-card img {
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            padding: 1rem; /* Adds breathing room around the illustration */
            background-color: #fcfcfc; /* Very light background to make the transparent PNG pop */
        }
        
        .card-title {
            color: #d32f2f; /* A respectful red tone often used in traditional themes */
            font-weight: bold;
            letter-spacing: 0.5px;
        }






        
        .hero-section {
            background: linear-gradient(90deg, #B3251E  60%, #8A1A16  100%);
            color: white;
            padding: 80px 20px;
            border-radius: 0 0 30px 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .section-title {
            border-bottom: 3px solid #B3251E ;
            display: inline-block;
            padding-bottom: 5px;
            margin-bottom: 20px;
            font-weight: 700;
        }
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .table th {
            background-color: #5D4037 ;
            color: white;
        }
        jfooter {
            background-color: #343a40;
            color: white;
            padding: 30px 0;
            margin-top: 40px;
        }


    /*Aarti*/
 
        .aarati-card {
            max-width: 750px;
            margin: auto;            
            border: none;
        }