*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Segoe UI', sans-serif;
  text-decoration: none;
}

body{
  background:#f4f6f9;
  
}

/* ===== NAVBAR ===== */

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height: 100px;
    background:#0f172a;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 40px;
    z-index:1000;
    transition:all 0.3s ease;
}

/* Sticky Effect */
.navbar.scrolled{
    background:#0b1220;
    padding:8px 40px;
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
}

/* Logo */
.logo-section{
    display:flex;
    flex-direction:column;
}

.logo-img{
    height:50px;
    width:auto;
    border-radius: 100px;
}

.motto{
    font-size:12px;
    color:#cbd5e1;
}

/* Navigation Links */
.nav-links{
    display:flex;
    gap:25px;
    align-items:center;
}

.nav-links a{
    text-decoration:none;
    color:white;
    font-size:15px;
    transition:0.3s;
}

.nav-links a:hover{
    color:#38bdf8;
}

/* Confidential */
.confidential{
    border-left:1px solid #334155;
    padding-left:20px;
    margin-left:10px;
    display:flex;
    gap:20px;
}

/* Menu Buttons */
.menu-btn{
    display:none;
    font-size:24px;
    cursor:pointer;
}

.close-btn{
    display:none;
}

/* MOBILE */
@media(max-width:768px){

    .navbar{
        justify-content:center;
        padding:15px 20px;
    }

    .logo-section{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        align-items:center;
        text-align:center;
    }

    .logo-img{
        height:40px;
    }

    .menu-btn{
        display:block;
        position:absolute;
        right:20px;
    }

    .nav-links{
        position:fixed;
        top:0;
        right:-100%;
        width:100%;
        height:100vh;
        background:#0f172a;
        flex-direction:column;
        align-items:flex-start;
        padding:30px;
        transition:0.4s;
    }

    .nav-links.active{
        right:0;
    }

    .nav-links a{
        width:100%;
        padding:15px 0;
        border-bottom:1px solid #1e293b;
        font-size:16px;
    }

    .confidential{
        border:none;
        padding-left:0;
        margin-left:0;
        flex-direction:column;
        width:100%;
    }

    .close-btn{
        display:block;
        font-size:28px;
        align-self:flex-end;
        margin-bottom:20px;
        cursor:pointer;
    }
}

/* Content */
.content{
    padding-top:120px;
    text-align:center;
}
/* NAVBAR */


/* MOBILE */

@media(max-width:768px){

  nav{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero h2{
    font-size:28px;
  }

}





/* footer  */

.footer{
background-image:url("/home_images/jharschool4.png");
background-size:cover;
background-position:center;
color:rgb(255, 221, 221);
padding:50px 20px;
position:relative;
}

.footer::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
}

.footer *{
position:relative;
z-index:2;
}


.footer-top{
padding:50px 20px;
max-width:1200px;
margin:auto;
}

.footer-brand{
text-align:center;
margin-bottom:40px;
}

.footer-brand h2{
font-size:30px;
color:#38bdf8;
margin-bottom:10px;
}

.footer-brand p{
color:#cbd5f5;
max-width:600px;
margin:auto;
}

.footer-container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

.footer-col h3{
margin-bottom:15px;
font-size:18px;
border-bottom:2px solid #38bdf8;
display:inline-block;
padding-bottom:5px;
}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col ul li{
margin-bottom:10px;
}

.footer-col a{
text-decoration:none;
color:#cbd5f5;
font-size:14px;
transition:0.3s;
}

.footer-col a:hover{
color:#38bdf8;
padding-left:5px;
}

.footer-col p{
font-size:14px;
color:#cbd5f5;
}

.social{
margin-top:10px;
}

.social a{
margin-right:10px;
font-size:20px;
text-decoration:none;
color:white;
}

.footer-bottom{
border-top:1px solid #1e293b;
padding:15px;
display:flex;
justify-content:space-between;
align-items:center;
max-width:1200px;
margin:auto;
}

.footer-bottom p{
font-size:14px;
color:#94a3b8;
}

#topBtn{
background:#38bdf8;
border:none;
padding:8px 12px;
cursor:pointer;
border-radius:5px;
font-size:16px;
}

@media (max-width:768px){

.footer-container{
grid-template-columns:1fr;
text-align:center;
}

.footer-bottom{
flex-direction:column;
gap:10px;
}

.footer-col h3{
border:none;
}

}

/* footer ends here */














/* Header */
.header {
    background: #2e7d32;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 120px;
}

.header h1 {
    font-size: 26px;
}

/* Container */
.container {
    max-width: 1000px;
    margin: auto;
    padding: 15px;
}

/* Image */
.image-box img {
    width: 50%;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

.credit {
    font-size: 12px;
    color: gray;
    margin-top: 5px;
}

/* Content */
.content {
    background: white;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    line-height: 1.8;
}

.content h2 {
    margin-top: 20px;
    color: #1b5e20;
}

.reference {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
}

/* Footer */
.footer {
    text-align: center;
    background: #222;
    color: white;
    padding: 15px;
    margin-top: 20px;
}

/* Responsive */
@media (min-width: 768px) {
    .header h1 {
        font-size: 32px;
    }

    .content {
        padding: 30px;
    }
}





/* tabel */


.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px;
    padding: 20px;
}

/* Table */
table {
    border-collapse: collapse;
    width: 100%;
    min-width: 800px; /* important for scroll */
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    overflow-x: auto;
}

/* Header */
th {
    background: #1b5e20;
    color: #fff;
    padding: 12px;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
}

/* Cells */
td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
}

/* Zebra rows */
tr:nth-child(even) {
    background: #f5f5f5;
}

/* Hover */
tr:hover {
    background: #e8f5e9;
}

/* Mobile */
@media (max-width: 600px) {
    th, td {
        padding: 8px;
        font-size: 14px;
    }
}






.text-section {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    line-height: 1.8;
    font-family: "Noto Sans Devanagari", Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.text-section p {
    margin-bottom: 10px;
    font-size: 16px;
}

/* Mobile */
@media (max-width: 600px) {
    .text-section {
        padding: 15px;
    }

    .text-section p {
        font-size: 14px;
    }
}
















.category-section {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    font-family: "Noto Sans Devanagari", Arial, sans-serif;
}

.intro {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.7;
}

/* Cards */
.card {
    background: #ffffff;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.card:hover {
    transform: translateY(-3px);
}

/* Title */
.card h3 {
    color: #2e7d32;
    margin-bottom: 8px;
}

/* Text */
.card p {
    line-height: 1.7;
}

/* Responsive */
@media (min-width: 768px) {
    .category-section {
        padding: 30px;
    }
}













/* Container */
.sd-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

/* Card Styling */
.sd-card {
    background: #fff;
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-left: 5px solid #2c3e50;
}

/* Typography */
.sd-title {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.8rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.sd-sub-title {
    color: #e67e22;
    margin-bottom: 10px;
}

.sd-text-content {
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-align: justify;
}



/* Grid for Priest Types */
.sd-priest-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.sd-type-box {
    background: #fdf2e9;
    padding: 15px;
    border-radius: 6px;
    border: 1px dashed #e67e22;
}

.sd-citation {
    font-style: italic;
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-top: 10px;
}

.sd-note {
    background: #eee;
    padding: 10px;
    font-size: 0.95rem;
    border-radius: 4px;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .sd-priest-types-grid {
        grid-template-columns: 1fr;
    }
    
    .sd-title {
        font-size: 1.5rem;
    }
    
    body {
        padding: 10px;
    }
}







/* Sacred Places Grid */
.sd-grid-layout {
    display: grid;
    /* Responsive Grid: 1 column on mobile, 3 on tablet, 5 on desktop */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 1.5rem;
}

.sd-community-card {
    background: #fcfcfc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    transition: transform 0.2s;
}

.sd-community-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.sd-tribe-name {
    font-size: 1.1rem;
    color: var(--accent);
    border-bottom: 2px solid #eee;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.sd-community-card ul {
    list-style: none;
}

.sd-community-card li {
    font-size: 0.95rem;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

.sd-community-card li:last-child {
    border-bottom: none;
}

/* Summary Box */
.sd-highlight-summary {
    margin-top: 2rem;
    padding: 1rem;
    background: #fff4ed;
    border-left: 5px solid var(--accent);
    font-size: 1rem;
}

.sd-highlight-summary span {
    font-weight: bold;
    text-decoration: underline;
}

/* Specific Fix for 200px Screen */
@media screen and (max-width: 250px) {
    .sd-grid-layout {
        grid-template-columns: 1fr; /* Force single column */
    }
    
    .sd-community-card {
        padding: 0.5rem;
    }

    .sd-tribe-name {
        font-size: 1rem;
    }

    .sd-community-card li {
        font-size: 0.85rem;
    }
}












/* Terminology Comparison List */
#sd-nature-section {
    padding: 30px;
}
.sd-comparison-list {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 30px;
}

.sd-comp-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #ccc;
    font-size: 0.95rem;
    padding: 10px;
}

.sd-comp-item span {
    color: #636e72;
}

.sd-highlight-item {
    background: #fff9f4;
    border-left-color: var(--accent);
    color: var(--accent);
    transform: scale(1.02);
    box-shadow: 0 2px 5px rgba(211, 84, 0, 0.1);
}

.sd-definition-box {
    background: #fff;
    border: 2px solid var(--accent);
    padding: 1.2rem;
    border-radius: 8px;
    margin-top: 10px;
}

/* 200px Mobile Specific Adjustments */
@media screen and (max-width: 250px) {
    .sd-comp-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px;
        font-size: 0.85rem;
    }

    .sd-comp-item strong {
        margin-top: 2px;
    }

    .sd-highlight-item {
        transform: none; /* Avoid overflow on tiny screens */
    }
}

/* Print Styles (Bonus: for documentation purposes) */
@media print {
    body { background: white; padding: 0; }
    .sd-section-card { box-shadow: none; border: 1px solid #000; page-break-inside: avoid; }
}

.sd-section-card
{
   padding: 20px;
}
/* Fluid Wrapper */
.sd-fluid-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Card Styling */
.sd-card {
    background: var(--card-bg);
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Typography */
#sd-title {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    color: var(--primary-color);
    text-align: center;
}

.sd-divider {
    height: 4px;
    width: 60px;
    background: var(--accent-color);
    margin: 10px auto 0;
    border-radius: 2px;
}

.sd-description {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    margin-bottom: 15px;
    text-align: justify;
}

.sd-feature-box {
    background: #fff9f4;
    border-left: 5px solid var(--accent-color);
    padding: 15px;
    margin: 20px 0;
    font-style: italic;
}

.sd-sub-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--primary-color);
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

/* Responsive Grid for Names */
.sd-names-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.sd-name-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    text-align: center;
}

.sd-community {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 5px;
}

.sd-term {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--accent-color);
}

/* Extra small screen adjustment (200px) */
@media (max-width: 250px) {
    .sd-card {
        padding: 10px;
    }
    .sd-description {
        text-align: left;
    }
    .sd-name-item {
        padding: 10px;
    }
}


.sd-fluid-wrapper {
    width: 100%;
    max-width: 800px;
}

.sd-card {
    background: var(--card-bg);
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#sd-site-title {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    color: var(--primary-color);
    text-align: center;
}

.sd-divider {
    height: 4px;
    width: 60px;
    background: var(--accent-color);
    margin: 10px auto 0;
}

.sd-para {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    margin-bottom: 15px;
    text-align: justify;
}

.sd-highlight-box {
    background: #f1f2f6;
    border-left: 5px solid var(--primary-color);
    padding: 15px;
    margin: 20px 0;
    font-weight: 500;
}

.sd-sub-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.sd-tags-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sd-tag-item {
    background: #fff9f4;
    border: 1px solid #e67e22;
    padding: 8px 15px;
    border-radius: 20px;
    display: flex;
    gap: 8px;
    font-size: 0.9rem;
}

.sd-lang {
    color: #666;
}

.sd-name {
    font-weight: bold;
    color: var(--accent-color);
}

/* 200px Mobile Support */
@media (max-width: 250px) {
    .sd-card { padding: 10px; }
    .sd-tag-item { width: 100%; justify-content: center; }
    .sd-para { text-align: left; }
}











/* Fluid Wrapper centered */
.sd-fluid-wrapper {
    width: 100%;
    max-width: 650px; /* Narrower width for better focus */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Card Styling */
.sd-card {
    background: var(--card-bg);
    margin-bottom: 20px;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center; /* Centers text inside the div */
}

/* Titles */
#sd-pujan-title {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    color: var(--primary-color);
}

.sd-divider {
    height: 4px;
    width: 60px;
    background: var(--accent-color);
    margin: 10px auto 0;
}

.sd-sub-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.sd-para {
    font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    margin-bottom: 15px;
    text-align: center; /* Centers paragraph text */
}

/* Grid of Items */
.sd-items-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.sd-item-tag {
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 500;
}

/* Specific Style Boxes */
.sd-highlight-box {
    background: #fff9f4;
    border: 1px solid #ffe8d6;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: 500;
}

.sd-prohibited-box {
    background: #fdf2f2;
    border-left: 5px solid var(--prohibited-color);
    padding: 12px;
    border-radius: 4px;
    color: var(--prohibited-color);
    font-size: 0.95rem;
}

/* 200px Mobile Support */
@media (max-width: 250px) {
    .sd-card { padding: 12px; }
    .sd-item-tag { width: 100%; }
    body { padding: 5px; }
}












/* pujari swaroop */

.sd-fluid-wrapper {
    width: 100%;
    max-width: 700px;
}

/* Card Styling */
.sd-card {
    background: var(--card-bg);
    margin-bottom: 20px;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center;
}

#sd-pujari-title {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    color: var(--primary-color);
}

.sd-divider {
    height: 4px;
    width: 60px;
    background: var(--accent-color);
    margin: 10px auto 20px;
}

.sd-para {
    font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    margin-bottom: 20px;
}

/* Gender Split Grid */
.sd-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.sd-detail-box {
    background: #f8f9fa;
    border-top: 4px solid var(--accent-color);
    padding: 15px;
    border-radius: 8px;
    text-align: left;
}

.sd-gender-title {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

/* Purification Note */
.sd-purity-note {
    background: #fff9f4;
    border-left: 5px solid var(--accent-color);
    padding: 15px;
    border-radius: 4px;
    font-size: 0.95rem;
    text-align: justify;
}

/* 200px Mobile Support */
@media (max-width: 250px) {
    .sd-card { padding: 12px; }
    .sd-grid-layout { grid-template-columns: 1fr; }
    .sd-detail-box { padding: 10px; }
    body { padding: 5px; }
}

















/* Ensure the section takes center focus on desktop */
.sd-center-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Base list styling from previous steps */
.sd-sitting-details {
    width: 100%;
}
.sd-posture-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sd-list-item {
  margin: auto;
}

/* --- New Image Section Styles --- */

#sd-sitting-visual {
    margin-top: 1.5rem; /* Separates the visual card from the text card */
    padding: 1rem;
}

.sd-img-display-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

/* Critical rule for mobile-friendly images */
.sd-img-fluid-display {
    max-width: 100%;    /* Image shrinks to fit the container */
    height: auto;       /* Maintains aspect ratio */
    display: block;
    border-radius: 8px; /* Visual polish */
    border: 3px solid #eee;
}

.sd-img-caption-box {
    margin-top: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #636e72;
    text-align: justify;
}

/* 200px Mobile Support & Fluid adjustments */
@media screen and (max-width: 250px) {
    .sd-secondary-title {
        font-size: 1.1rem;
    }
    
    .sd-img-fluid-display {
        max-width: 100%; /* Ensures it scales even further on tiny screens */
    }

    .sd-img-caption-box {
        font-size: 0.8rem;
    }
}








/* Sacrifice Section Specifics */
#sd-sacrifice-section {
    border-top: 5px solid #c0392b; /* Deep red to represent sacrifice */
    padding: 20px;
}

.sd-intro-box {
    margin-bottom: 20px;
}

/* Animal Tags Layout */
.sd-animal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    justify-content: center;
}

.sd-animal-tag {
    background: #f1f2f6;
    border: 1px solid #ced6e0;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #2f3542;
}

/* Logic Cards (Bonga vs Bhoot) */
.sd-logic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
}

.sd-logic-card {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

.sd-bonga-logic {
    background: #fff5f5; /* Light Red */
    border: 1px solid #feb2b2;
}

.sd-bonga-logic h3 {
    color: #c53030;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.sd-bhoot-logic {
    background: #f8f9fa; /* Grey/Black theme */
    border: 1px solid #2d3436;
}

.sd-bhoot-logic h3 {
    color: #2d3436;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

/* --- 200px Mobile Support --- */
@media screen and (max-width: 250px) {
    .sd-animal-tag {
        width: 100%;
        text-align: center;
    }
    
    .sd-logic-container {
        grid-template-columns: 1fr;
    }

    .sd-logic-card h3 {
        font-size: 1rem;
    }
}













/* Greeting Section Specifics */
#sd-greeting-section {
    border-top: 5px solid #2980b9; /* Blue theme for social/respect */
    padding: 20px;
}

.sd-sub-title-alt {
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 10px;
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* Custom Grid for Communities */
.sd-custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.sd-custom-card {
    background: #f1f9ff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #d1e9ff;
}

.sd-custom-card h4 {
    color: #2980b9;
    margin-bottom: 5px;
}

/* Ritual List Styling */
.sd-ritual-style {
    background: #ffffff;
    border: 1px solid #eee;
    padding: 20px;
    text-align: left !important; /* Ensure list is readable */
}

.sd-greeting-list {
    list-style: none;
    padding-left: 0;
}

.sd-greeting-list li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
}

.sd-greeting-list li:last-child {
    border-bottom: none;
}

.sd-greeting-list li strong {
    color: #d35400;
}

/* --- 200px Mobile Support --- */
@media screen and (max-width: 250px) {
    .sd-custom-grid {
        grid-template-columns: 1fr;
    }
    
    .sd-custom-card h4 {
        font-size: 0.9rem;
    }

    .sd-greeting-list li {
        font-size: 0.85rem;
    }
}



/* लक्ष्मी स्वरूप विशिष्ट स्टाइल */
#sd-lakshmi-section {
    border-top: 5px solid #f1c40f; /* लक्ष्मी के लिए स्वर्ण/पीला रंग */
    padding: 30px;
}

.sd-symbols-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}

.sd-symbol-item {
    background: #fffef0;
    border: 1px solid #f9e79f;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.sd-symbol-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

.sd-symbol-item p {
    font-weight: bold;
    color: #9c640c;
    font-size: 0.95rem;
}

.sd-eco-friendly {
    background: #f0fff4;
    border-left: 5px solid #27ae60;
    padding: 20px;
    font-size: 1rem;
    text-align: justify;
    line-height: 1.6;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-symbols-grid {
        grid-template-columns: 1fr;
    }
    
    .sd-symbol-item {
        padding: 10px;
    }

    .sd-eco-friendly {
        font-size: 0.85rem;
        padding: 12px;
    }
}










/* quality */

/* विशेषता अनुभाग के लिए विशिष्ट स्टाइल */
#sd-features-section {
    border-top: 5px solid #27ae60; /* प्रकृति आधारित होने के कारण हरा रंग */
}

.sd-feature-detail-box {
    margin-top: 20px;
    padding: 15px;
    background: #fdfdfd;
    border-radius: 8px;
}

.sd-sub-title-alt {
    color: #1e8449;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.sd-border-accent {
    border-left: 4px solid #27ae60;
    background: #f0fff4;
    padding: 12px;
    margin-top: 15px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-secondary-title {
        font-size: 1.1rem;
    }
    
    .sd-sub-title-alt {
        font-size: 1rem;
    }

    .sd-border-accent {
        font-size: 0.85rem;
        padding: 8px;
    }
}




/* प्रतीकात्मक अनुभाग के लिए विशिष्ट स्टाइल */
#sd-symbolic-section {
    border-top: 5px solid #8e44ad; /* प्रतीकात्मक/आध्यात्मिक भाव के लिए बैंगनी रंग */
}

.sd-sub-title-alt {
    color: #4b2c20;
    font-size: 1.1rem;
    margin-bottom: 8px;
    border-bottom: 1px solid #ddd;
    display: inline-block;
}

.sd-logic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.sd-logic-card {
    padding: 15px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.sd-nature-logic {
    background: #f4fdf4;
    border-left: 5px solid #2ecc71;
}

.sd-practice-logic {
    background: #fef9f4;
    border-left: 5px solid #e67e22;
}

.sd-footer-note {
    background: #f8f9fa;
    padding: 10px;
    font-style: italic;
    font-size: 0.9rem;
    border-radius: 5px;
    text-align: center;
    color: #636e72;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-secondary-title {
        font-size: 1.1rem;
    }
    
    .sd-logic-card {
        padding: 10px;
        font-size: 0.85rem;
    }

    .sd-sub-title-alt {
        font-size: 0.95rem;
    }
}




/* प्रत्यक्ष पूजा अनुभाग के लिए विशिष्ट स्टाइल */
#sd-direct-worship {
    border-top: 5px solid #3498db; /* खुले आकाश और जल के लिए नीला रंग */
}

.sd-elements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.sd-element-card {
    background: #f0f8ff;
    border: 1px solid #d6eaf8;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.2s;
}

.sd-element-card:hover {
    transform: translateY(-3px);
    border-color: #3498db;
}

.sd-element-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 5px;
}

.sd-element-card p {
    font-weight: bold;
    color: #2c3e50;
    font-size: 0.95rem;
}

.sd-tradition-logic {
    background: #fdfefe;
    border: 1px dashed #3498db;
    padding: 15px;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 8px;
    color: #566573;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-elements-grid {
        grid-template-columns: 1fr;
    }
    
    .sd-element-card {
        padding: 10px;
    }

    .sd-secondary-title {
        font-size: 1.1rem;
    }
}





/* बलि परंपरा अनुभाग के लिए विशिष्ट स्टाइल */
#sd-sacrifice-tradition {
    border-top: 5px solid #c0392b; /* बलि और शक्ति के प्रतीक लाल रंग के लिए */
}

.sd-animal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    justify-content: center;
}

.sd-animal-item {
    background: #fdf2f2;
    border: 1px solid #fab1a0;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #b71540;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.sd-ritual-note {
    background: #fffafa;
    border-left: 5px solid #c0392b;
    padding: 15px;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: justify;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-animal-grid {
        gap: 5px;
    }
    
    .sd-animal-item {
        width: 100%;
        text-align: center;
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    .sd-secondary-title {
        font-size: 1.1rem;
    }

    .sd-ritual-note {
        font-size: 0.85rem;
        padding: 10px;
    }
}









/* पेड़ के नीचे बोंगा अनुभाग के लिए विशिष्ट स्टाइल */
#sd-tree-bonga-section {
    border-top: 5px solid #1b5e20; /* गहरे जंगल के हरे रंग के लिए */
}

.sd-sub-title-alt {
    color: #2e7d32;
    font-size: 1.1rem;
    margin-bottom: 8px;
    border-bottom: 1px solid #c8e6c9;
    display: inline-block;
}

.sd-logic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.sd-logic-card {
    padding: 15px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid #e8f5e9;
}

.sd-tree-shadow-logic {
    border-left: 5px solid #4caf50;
}

.sd-location-logic {
    border-left: 5px solid #0288d1; /* जल और अन्य स्थानों के लिए नीला */
}

/* Prohibition Alert Box */
.sd-prohibition-alert {
    background: #ffebee;
    border: 1px solid #ffcdd2;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #b71c1c;
}

.sd-alert-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* 200px मोबाइल सपोर्ट और रिस्पॉन्सिविटी */
@media screen and (max-width: 250px) {
    .sd-secondary-title {
        font-size: 1rem;
    }
    
    .sd-logic-card {
        padding: 10px;
        font-size: 0.85rem;
    }

    .sd-prohibition-alert {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }

    .sd-sub-title-alt {
        font-size: 0.9rem;
    }
}





/* खुले आसमान अनुभाग के लिए विशिष्ट स्टाइल */
#sd-open-worship {
    border-top: 5px solid #2980b9; /* नीले आसमान और खुलेपन के प्रतीक के लिए */
}

.sd-logic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.sd-logic-card {
    padding: 18px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    border: 1px solid #e1f5fe;
}

.sd-sub-title-alt {
    color: #2980b9;
    font-size: 1.15rem;
    margin-bottom: 10px;
    border-bottom: 2px solid #bbdefb;
    display: inline-block;
}

.sd-sky-logic {
    border-top: 4px solid #3498db;
    background: #f0faff;
}

.sd-home-logic {
    border-top: 4px solid #f39c12; /* घर की गर्मी और रोशनी के लिए */
    background: #fff9f0;
}

.sd-footer-summary {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #546e7a;
    text-align: center;
    border: 1px dashed #cfd8dc;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-secondary-title {
        font-size: 1.1rem;
    }
    
    .sd-logic-card {
        padding: 10px;
        font-size: 0.85rem;
    }

    .sd-sub-title-alt {
        font-size: 1rem;
    }

    .sd-footer-summary {
        font-size: 0.8rem;
    }
}





/* अचल बोंगा अनुभाग के लिए विशिष्ट स्टाइल */
#sd-immovable-section {
    border-top: 5px solid #2c3e50; /* स्थिरता और पुरखों की गरिमा के लिए गहरा रंग */
}

.sd-logic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.sd-logic-card {
    padding: 18px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eceff1;
}

.sd-fixed-logic {
    border-top: 4px solid #7f8c8d;
    background: #fafafa;
}

.sd-transfer-logic {
    border-top: 4px solid #c0392b; /* बलि और विशेष अनुष्ठान के लिए लाल रंग */
    background: #fffafa;
}

.sd-sub-title-alt {
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 8px;
    border-bottom: 2px solid #eee;
    display: inline-block;
}

.sd-comparison-alert {
    background: #fdfefe;
    border: 1px dashed #7f8c8d;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #455a64;
    text-align: center;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-secondary-title {
        font-size: 1.1rem;
    }
    
    .sd-logic-card {
        padding: 10px;
        font-size: 0.85rem;
    }

    .sd-sub-title-alt {
        font-size: 1rem;
    }

    .sd-comparison-alert {
        font-size: 0.8rem;
        padding: 8px;
    }
}






/* परंपरा अनुभाग के लिए विशिष्ट स्टाइल */
#sd-tradition-container {
    border-top: 5px solid #d35400; /* विरासत और परंपरा के लिए मिट्टी के रंग का उपयोग */
    padding: 20px;
}

.sd-logic-card {
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s ease;
}

.sd-site-logic {
    background: #fff8f4;
    border-left: 5px solid #e67e22;
}

.sd-family-logic {
    background: #fdfefe;
    border-left: 5px solid #2c3e50;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.sd-spacer {
    height: 20px;
}

.sd-secondary-title {
    font-size: 1.15rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.sd-main-para {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    #sd-tradition-container {
        padding: 10px;
    }

    .sd-secondary-title {
        font-size: 1rem;
    }

    .sd-main-para {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .sd-logic-card {
        padding: 10px;
    }
}



/* बोंगा प्रकार अनुभाग के लिए विशिष्ट स्टाइल */
#sd-bonga-types-section {
    border-top: 5px solid #2980b9;
}

.sd-logic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.sd-logic-card {
    padding: 20px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.sd-family-card {
    border-left: 5px solid #3498db;
    background: #f0f7ff;
}

.sd-collective-card {
    border-left: 5px solid #16a085;
    background: #f0fefb;
}

.sd-sub-title-alt {
    color: #2c3e50;
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.sd-examples-box {
    margin-top: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed #16a085;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-logic-container {
        grid-template-columns: 1fr;
    }
    
    .sd-logic-card {
        padding: 12px;
    }

    .sd-secondary-title {
        font-size: 1rem;
    }
}






/* निराकार स्वरूप अनुभाग के लिए विशिष्ट स्टाइल */
#sd-formless-deity-section {
    border-top: 5px solid #7f8c8d; /* निराकार और शांत भाव के लिए धूसर रंग */
}

.sd-formless-logic {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    text-align: center;
}

.sd-sub-title-alt {
    color: #2c3e50;
    font-size: 1.2rem;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.sd-highlight-content p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #34495e;
    margin-bottom: 20px;
}

.sd-visual-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: #f0f4f8;
    border-radius: 30px;
    color: #546e7a;
    font-size: 0.9rem;
    font-style: italic;
}

.sd-nature-icon {
    font-size: 1.4rem;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-formless-logic {
        padding: 15px;
    }
    
    .sd-secondary-title {
        font-size: 1rem;
    }

    .sd-sub-title-alt {
        font-size: 1.1rem;
    }

    .sd-visual-note {
        flex-direction: column;
        border-radius: 10px;
        padding: 10px;
    }
}











/* खरीद-बिक्री निषेध अनुभाग के लिए विशिष्ट स्टाइल */
#sd-non-commercial-section {
    border-top: 5px solid #27ae60; /* प्रकृति की शुद्धता के लिए हरा रंग */
}

.sd-market-logic {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.sd-market-alert {
    background: #fdf2f2;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #ffdbdb;
    color: #c0392b;
    font-size: 0.95rem;
}

.sd-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.sd-nature-scope {
    padding: 20px;
    text-align: left;
}

.sd-element-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.sd-element-tags span {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #c8e6c9;
}

.sd-sub-title-alt {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 8px;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-market-alert {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }
    
    .sd-nature-scope {
        padding: 12px;
    }

    .sd-secondary-title {
        font-size: 1rem;
    }

    .sd-element-tags span {
        width: 100%;
        text-align: center;
    }
}




#sd-rituals-section {
    border-top: 5px solid #7f8c8d;
}

.sd-logic-card {
    padding: 15px;
    margin-top: 15px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eee;
}

.sd-sub-title-alt {
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 8px;
    border-bottom: 2px solid #f1c40f;
    display: inline-block;
}

.sd-gender-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.sd-gender-box {
    flex: 1;
    min-width: 200px;
    background: #fdfefe;
    padding: 10px;
    border: 1px dashed #bdc3c7;
    font-size: 0.95rem;
}

.sd-ritual-list {
    list-style: circle;
    padding-left: 20px;
    margin-top: 5px;
}

.sd-ritual-list li {
    margin-bottom: 5px;
}

/* 200px Mobile Support */
@media screen and (max-width: 250px) {
    .sd-gender-box {
        min-width: 100%;
    }
    .sd-secondary-title {
        font-size: 1rem;
    }
}


/* मानसिक प्रथा अनुभाग के लिए विशिष्ट स्टाइल */
#sd-vow-practice-section {
    border-top: 5px solid #8e44ad; /* संकल्प और आध्यात्मिक अटूटता के लिए बैंगनी रंग */
}

.sd-logic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.sd-logic-card {
    padding: 18px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    border: 1px solid #f3e5f5;
    text-align: left;
}

.sd-sub-title-alt {
    color: #6a1b9a;
    font-size: 1.1rem;
    margin-bottom: 8px;
    border-bottom: 1px solid #e1bee7;
    display: inline-block;
}

.sd-pre-vow {
    border-left: 5px solid #9b59b6;
    background: #faf5ff;
}

.sd-post-vow {
    border-left: 5px solid #27ae60; /* पूर्णता के लिए हरा रंग */
    background: #f0fff4;
}

.sd-ritual-box {
    background: #fffafa;
    border: 1px dashed #c0392b;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.95rem;
    text-align: center;
    color: #b71c1c;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-logic-container {
        grid-template-columns: 1fr;
    }
    
    .sd-logic-card {
        padding: 10px;
        font-size: 0.85rem;
    }

    .sd-secondary-title {
        font-size: 1rem;
    }

    .sd-ritual-box {
        font-size: 0.8rem;
        padding: 10px;
    }
}





/* हड़गड़ी अनुभाग के लिए विशिष्ट स्टाइल */
#sd-hadgari-section {
    border-top: 5px solid #5d4037; /* पूर्वजों और मिट्टी के जुड़ाव के लिए ब्राउन थीम */
}

.sd-logic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.sd-logic-card {
    padding: 18px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
    border: 1px solid #efebe9;
}

.sd-month-logic {
    border-left: 5px solid #8d6e63;
    background: #fafafa;
}

.sd-prohibition-logic {
    border-left: 5px solid #d32f2f; /* वर्जना के लिए लाल रंग */
    background: #fff8f8;
}

.sd-sub-title-alt {
    color: #4e342e;
    font-size: 1.1rem;
    margin-bottom: 8px;
    border-bottom: 1px solid #d7ccc8;
    display: inline-block;
}

.sd-examples-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #c62828;
    font-size: 0.9rem;
    font-weight: 500;
}

.sd-examples-list span {
    background: #ffebee;
    padding: 4px 10px;
    border-radius: 4px;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-logic-container {
        grid-template-columns: 1fr;
    }
    
    .sd-logic-card {
        padding: 10px;
        font-size: 0.85rem;
    }

    .sd-secondary-title {
        font-size: 1rem;
    }

    .sd-examples-list {
        flex-direction: column;
        gap: 5px;
    }
}





/* बोंगा परिधि एवं पारिवारिक संबंध अनुभाग के लिए विशिष्ट स्टाइल */
#sd-bonga-relation-section {
    border-top: 5px solid #2e7d32; /* प्राकृतिक और ग्राम्य परिवेश के लिए हरा रंग */
}

.sd-logic-card {
    padding: 20px;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    border: 1px solid #f1f8e9;
}

.sd-boundary-logic {
    border-left: 5px solid #1b5e20;
    background: #f1f8e9;
}

.sd-family-bond-logic {
    border-left: 5px solid #f57c00; /* आत्मीयता और घर की ऊर्जा के लिए नारंगी */
    background: #fff3e0;
}

.sd-spacer {
    height: 20px;
}

.sd-divider {
    height: 3px;
    width: 40px;
    background: currentColor;
    margin-bottom: 12px;
    opacity: 0.3;
}

.sd-secondary-title {
    font-size: 1.2rem;
    color: #263238;
    margin: 0;
}

/* 200px मोबाइल सपोर्ट */
@media screen and (max-width: 250px) {
    .sd-logic-card {
        padding: 12px;
    }

    .sd-secondary-title {
        font-size: 1rem;
    }

    .sd-main-para {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}



















/* --- Global Responsive Fixes --- */

/* 1. कंटेनर और रैपर को फ्लेक्सिबल बनाना */
.container, .sd-content-wrapper, .sd-fluid-wrapper, .sd-section-card {
    width: 100% !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px !important; /* मोबाइल के लिए सुरक्षित पैडिंग */
    box-sizing: border-box;
}

/* 2. टेबल का सही रिस्पॉन्सिव व्यवहार */
.table-container {
    width: 100%;
    margin: 10px 0;
    padding: 0;
    overflow-x: auto; /* हॉरिजॉन्टल स्क्रॉल चालू रखना */
}

table {
    min-width: 600px; /* बहुत अधिक चौड़ाई (800px) को कम किया गया */
}

/* 3. इमेज को कंटेनर से बाहर जाने से रोकना */
.image-box img, .sd-img-fluid-display {
    max-width: 100% !important;
    width: auto;
    height: auto;
}

/* 4. ग्रिड सिस्टम को एडेप्टिव बनाना */
.sd-priest-types-grid, .sd-logic-container, .sd-grid-layout, .sd-items-grid, .sd-names-grid, .sd-symbols-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 15px !important;
}

/* --- विशेष मीडिया क्वेरी (Small Mobile & Desktop) --- */

/* डेस्कटॉप के लिए (992px+) */
@media (min-width: 992px) {
    .sd-grid-layout {
        grid-template-columns: repeat(5, 1fr) !important; /* 5 समुदाय एक लाइन में */
    }
}

/* टैबलेट के लिए (768px - 991px) */
@media (max-width: 991px) {
    .image-box img {
        width: 80%; /* टैबलेट पर इमेज थोड़ी बड़ी दिखे */
    }
}

/* मोबाइल के लिए (480px - 767px) */
@media (max-width: 767px) {
    .header {
        margin-top: 100px;
        padding: 15px;
    }
    
    .header h1 {
        font-size: 22px !important;
    }

    .sd-priest-types-grid, .sd-logic-container, .sd-names-grid {
        grid-template-columns: 1fr !important; /* सब कुछ एक के नीचे एक */
    }
}

/* अल्ट्रा-स्मॉल स्क्रीन के लिए (200px - 320px) */
@media (max-width: 320px) {
    html {
        font-size: 14px; /* फॉन्ट साइज थोड़ा छोटा */
    }

    .sd-section-card {
        padding: 10px !important;
    }

    .sd-secondary-title {
        font-size: 1.1rem !important;
    }

    .sd-item-tag, .sd-animal-tag, .sd-element-tag {
        width: 100% !important; /* टैग्स को फुल विड्थ बनाना */
        text-align: center;
    }

    .sd-gender-flex {
        flex-direction: column !important;
    }
    
    .sd-gender-box {
        min-width: 100% !important;
    }
}

/* नेविगेशन बार फिक्स */
.navbar {
    padding: 10px 20px;
}


/* Wrapper for scroll (FIXED NAME) */
.sd-table-responsive {
    width: 100%;
    overflow-x: auto;   /* enables horizontal scroll */
    -webkit-overflow-scrolling: touch;
    margin: 15px 0;
}

/* Table */
#sd-priest-table {
    width: 100%;
    min-width: 650px; /* forces scroll */
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
}

/* Header */
#sd-priest-table th {
    background: #1b5e20;
    color: #fff;
    padding: 10px;
    text-align: left;
    font-size: 14px;
    white-space: nowrap;
}

/* Cells */
#sd-priest-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    white-space: nowrap;
}

/* Highlight first column */
.sd-td-highlight {
    font-weight: bold;
    background: #f1f8e9;
}

/* Zebra effect */
#sd-priest-table tr:nth-child(even) {
    background: #f9f9f9;
}

/* Hover */
#sd-priest-table tr:hover {
    background: #e8f5e9;
}

/* SMALL DEVICES */
@media (max-width: 600px) {
    #sd-priest-table th,
    #sd-priest-table td {
        padding: 8px;
        font-size: 12px;
    }
}

/* ULTRA SMALL */
@media (max-width: 250px) {
    #sd-priest-table {
        min-width: 500px;
    }

    #sd-priest-table th,
    #sd-priest-table td {
        font-size: 11px;
        padding: 6px;
    }
}