body{color: #72523f !important;}
  a{ color:#a42310 !important}
    a:hover{ color:#72523f !important}
  a h3{ color:#a42310; font-weight: 600;}
    a:hover h3{ color:#72523f;}
  a:hover{ color:#72523f;}
  .thumbnail  a{ color: #72523f !important;}
  .h3, h3{ line-height:inherit!important;}
  .thumbnail .caption { padding:4px 9px!important;}
  .truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.navbar-inverse .navbar-nav>li>a{ color: #fff !important;}
@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: #fff!important;
    }
}
.breadcrumb-detail {
    display: flex;
    padding: 8px 15px;
    color: #6e6e6e;
    font-size: 16px;
    background: #f5f5f5;
    margin: 10px 0;
    align-items: baseline;
    border-radius: 0;
    border-bottom: none;

    /* Desktop default: ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* iPad + Mobile: enable scroll */
@media (max-width: 1024px) {
    .breadcrumb-detail {
        overflow-x: auto;
        overflow-y: hidden;
        text-overflow: unset;
        -webkit-overflow-scrolling: touch;
    }
}

/* Optional border styling for mobile only */
@media (max-width: 768px) {
    .breadcrumb-detail:has(> *:last-child) {
        border-bottom: 1px dashed #C4CDD5;
    }
}

.breadcrumb-detail i{ font-size: 18px;}
.breadcrumb-detail h1 {
    font-size: 16px;
    font-weight: normal;
    color: #6e6e6e;
    margin:0;
}

.breadcrumb-detail span {
    position: relative;
    text-align: center;
    padding: 0 5px;
}

.breadcrumb-detail span::before {
    content: "\f105"; /* angle-right icon */
    font-family: "Font Awesome 6 Free"; /* for FA6 */
    font-weight: 900; /* required for solid icons */
    display: inline-block;
    color: #101d35;
    font-size: 9px;
    margin: 0 6px; /* optional spacing */
}


.date{ font-size:14px!important; color:gray!important}
.panel-warning > .panel-heading {
    background: url(//stat.dinamalar.com/margazhi/titlebg.png) repeat left center;
      background-size:cover;
}
.panel-heading h4 a, .panel-warning > .panel-heading{color:#fff !important;}


@media screen and (max-width: 560px) {#selres{ width:250px!important; margin-top:10px!important;} }
@media screen and (max-width: 360px) {#selres{ width:250px; margin-top:10px;}}
@media screen and (max-width: 1000px) {#selres{ width:175px; margin-top:25px; margin-right: -45px;} 
}
.navbar-inverse{box-shadow:2px 2px 2px #3d0800}
.nav > li > a{ padding:30px 14px;}

@media screen and (max-width: 560px){.nav > li > a{ padding:15px 14px;}}

.pulse{padding-left:15px; position: relative; color:red; border: red solid 1px; padding: 3px 4px 3px 20px;}
.pulse::before{content:""; background: red !important; width:6px;height:6px;display:block;position:absolute;border-radius:50%;left:8px;top:50%;margin-top:-4px;animation:shadow-pulse 1s infinite;}
@keyframes shadow-pulse{
    0%{box-shadow:0 0 0 0px rgba(255,69,0,1);}
    100%{box-shadow:0 0 0 5px rgba(0,0,0,0);}
}
@keyframes shadow-pulse-big{
    0%{box-shadow:0 0 0 0px rgba(239,63,72,0.1);}
    100%{box-shadow:0 0 0 20px rgba(0,0,0,0);}
}
.img-responsive{ width: 100%;}
.panel-heading{ padding-top: 5px!important; padding-bottom: 5px!important;}
p{ font-weight:normal!important;}

.video-thumb-box {
    position: relative;
}

.video-thumb-box .thumb-link {
    position: relative;
    display: block;
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 18px;
    color: #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;

    background: rgba(0, 0, 0, 0.45);
    width: 45px;
    height: 45px;
    border-radius: 50%;

    line-height: 45px !important; /* ✅ fixes align */
    text-align: center;            /* ✅ fixes align */
    transition: 0.3s ease;
}

.video-thumb-box:hover .video-play-icon {
    background: rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%) scale(1.1);
}

.photo-thumb-box {
    position: relative;
}

.photo-thumb-box .thumb-link {
    position: relative;
    display: block;
}

.photo-play-icon {
    position: absolute;
    bottom: 0;     /* distance from bottom */
    right: 0;       /* distance from left */
    font-size: 16px; /* small icon */
    color: #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;

    /* Rounded circle background */
    background: rgba(0, 0, 0, 0.45); /* semi transparent */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: 0.3s ease;
}
.photo-thumb-box:hover .photo-play-icon {
    background: rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%) scale(1.1);
}

/* follow us */
.clsFoot{ background: #f2dccc !important;}
.social-iconbox h4{ font-size: 18px;}

  .social-iconskovilgal a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    flex: 0 0 auto;
    font-size: 1.5rem;
    border-radius: 1px;
    height: 35px;
    width: 35px;
    margin: 0 12px 10px 0;
    cursor: pointer;
    transition: all 0.4s;
  }
    .social-iconskovilgal .fab:hover{opacity: 1;}

  /* Brand colors */
  .facebook { border: 1px solid #3b5998; color: #3b5998 !important; }
  .whatsapp { border: 1px solid #25D366; color: #25D366 !important; }
  .x { border: 1px solid #000000; color: #000000 !important; }
  .x:hover{color: #000000 !important; }
  .youtube { border: 1px solid #FF0000; color: #FF0000!important; }
  .threads { border: 1px solid #000000; color: #000000!important; }
  .threads:hover {color: #000000!important; }
  .instagram { border: 1px solid #C13584; color: #C13584!important; }
  .instagram:hover {color: #C13584!important; }
  .telegram { border: 1px solid #0088CC; color: #0088CC!important; }
  .googlenews { border: 1px solid #4285F4; }
  .arattai { border: 1px solid #fedc04; color: #000!important; }
    .arattai:hover {color: #000; }
    .arattai svg{ width: 26px; height: 26px; background: #fedc04; border-radius: 30px; padding: 3px;}

  /* Hover effect */
  .social-iconskovilgal a:hover {
    margin-top: -7.2px;
    background-color: rgba(99, 115, 129, 0.08);
  }

.btn-warning{ color: #fff !important;}
.btn-primary{ color:#fff!important;}
  .btn-info{ color: #fff !important;}
  .btn-success{ color: #fff !important;}
  .btn-danger{ color: #fff !important;}

    .btn-warning:hover{ color: #fff !important;}
    .btn-primary:hover{ color:#fff!important;}
  .btn-info:hover{ color: #fff !important;}
  .btn-success:hover{ color: #fff !important;}
  .btn-danger:hover{ color: #fff !important;}

  .social-iconskovilgal img {
    width: 35px;
    height: 35px;
    vertical-align: middle;
  }
  .social-iconskovilgal {
    display: flex
;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.fa-brands, .fab {
    font-weight: 400; font-size:22px;
}
.social-iconbox h4 {
    font-size: 18px; line-height:1.4;
}
    .social-iconbox{ -webkit-box-pack: center;
    justify-content: center;
    background-color: rgb(247, 247, 247);
    border: 2px dashed rgb(231, 231, 231);
    padding: 16px;
    border-radius: 25px;
    display: grid;
    margin:10px;
}
.justify-content-center {
    justify-content: center !important;
}
.text-center {
    text-align: center !important;
}
.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}
.mt-3, .my-3 {
    margin-top: 1rem !important;
}
.d-flex {
    display: -ms-flexbox!important;
    display: flex !important;}

      
    .justify-content-center {
    -ms-flex-pack: center!important;
    justify-content: center !important;
}
    .flex-column {
    -ms-flex-direction: column!important;
    flex-direction: column !important;
}
.footer-area hr{ border:1px solid rgba(236, 240, 243, 0.1);}
.gap-2 {
    gap: 0.5rem; /* 8px */
}
.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands";
}
#footerbg img {
  height:30px;
  margin-right:5px;
  margin-top:5px;
}
.prelismall{ color: #72523f;}
.prelismall:hover{ color: #333;}
.social-icons {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 10px;
    flex-wrap: wrap;
}
#footerbg .social-icon {
    width: 30px;
    height: 30px;
    background: #8e8178;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s;
    cursor: pointer;
}
#footerbg .social-icon i, #selMobilefollow .social-icon svg, #selapps .social-icon svg {
    font-size: 16px;
    color: #fff;
    line-height: 1.8;
    display:flex;
}


#footerbg .social-icon svg:hover {
   opacity:.5
}
#footerbg .social-icon i:hover {
   opacity:.5
}


/* bottom fade overlay */
.bottom-gradient { 
    position: absolute;
    width: 100%;
    height: 60%; /* adjust size */
    bottom: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    pointer-events: none;
}

.push-left {
    float: left;
    width: 60px;       /* Adjust size */
    height: 60px;      /* Keeps shape consistent */
    border-radius: 6px;
    object-fit: cover;
    margin-right: 15px !important;
}

.sai-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e5e5e5;
    transition: all 0.25s ease;
    position: relative;
    cursor: pointer;
    display: block;
    text-decoration: none;
    margin-bottom: 15px;
}


/* Title */
.sai-card h3 {
    font-size: 17px;
    font-weight: 600;
    color: #b22222; /* Sathya Sai theme red */
    margin-bottom: 8px;
    margin-top:0px;
}

/* Summary text */
.sai-card p {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.55;
}

/* Hover effects */
.sai-card:hover {
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    transform: translateY(-3px);
    border-color: #d14c3a;
}

/* Right arrow indicator */
.sai-card::after {
    content: "→";
    position: absolute;
    right: 14px;
    bottom: 14px;
    font-size: 16px;
    color: #b22222;
    opacity: 0;
    transition: 0.25s;
}

.sai-card:hover::after {
    opacity: 1;
    transform: translateX(4px);
}




.carousel-caption {
    margin-bottom: 20px; /* pushes caption up from dots */
}
.carousel-indicators {
    bottom: 1px; /* adjust if needed */
}
.carousel-control{ color:#fff !important;}

/* ensure text comes above gradient */
#myCarousel .carousel-caption {
    position: absolute;
    z-index: 2;
    bottom: 25px; /* push caption up */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
}

#myCarousel .carousel-caption h2 {
    color: #fff !important;
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
}

/* space below indicators so caption doesn't collide */
#myCarousel .carousel-indicators {
    bottom: 8px;
}

  .carousel-inner > .item {
  transition: transform .4s ease-in-out; /* default is .6s */
}

/* Frosted Glass Carousel Arrows */
.carousel-control {
    width: 55px !important;
    height: 55px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: 0.3s ease;
    text-shadow: none;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff !important;
    margin:0 2%;
}

.carousel-control:hover {
    background: rgba(255,255,255,0.45);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}

/* Arrow Icons */
.carousel-control .icon-prev,
.carousel-control .icon-next {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: #fff;
}

/* Remove Bootstrap default gradients */
.carousel-control.left,
.carousel-control.right {
    background-image: none !important;
}

.page-header {
    padding: 10px 15px;
    margin: 20px 0 20px;
    border-bottom: 1px solid #eee;
    background: url(//stat.dinamalar.com/margazhi/titlebg.png) repeat left center;
    background-size: cover;
    color: #fff !important;
    border-radius:3px 3px 0 0;
}
.page-header a{ color:#fff !important}
.page-header a:hover{ color:#fff !important; opacity:0.8}
.panel-heading h4:hover a {color:#fff !important; opacity:0.8}
.row-eq {
  display: flex;
  flex-wrap: wrap;
}

.row-eq .col-md-4 {
  display: flex;
}

.row-eq .thumbnail {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.row-eq .caption {
  flex-grow: 1; /* makes text area stretch to equal height */
}

#backToTop {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 999;
  background: rgba(150, 30, 12, 0.9); /* slightly transparent */
  color: #fff;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease, transform 0.3s ease;
}

#backToTop:hover {
  background: rgba(150, 30, 12, 1); /* full opacity */
  transform: scale(1.08); /* optional nice hover pop */
}

#backToTop i {
  font-size: 20px; /* make icon clearer */
}


.parallax {background-image: url('//stat.dinamalar.com/new/sai/images/saibaba-qouts.jpg');min-height:500px;background-attachment: fixed;background-position: center; 
background-repeat: no-repeat;background-size: cover;  position: relative; /* Needed for caption absolute positioning */}
.clsbottom{font-size: 36px;background: rgb(0,0,0,0.5);color: #fff;position:absolute;bottom: 0px;}
.captionss {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* centers perfectly */
    width: 100%;
    text-align: center;
    color: #fff; /* or #000 depending on image */
    padding: 0 15px; /* optional for mobile */
}
.captionss span.border {background:darkred;color: #fff;padding: 18px;font-size: 25px;border-radius:10px;}