/* ==========================================================================
   1. CSS Variables and Global Resets/Defaults
   ========================================================================== */
:root {
    --primary-color: #500724; /* Your dark maroon */
    --accent-color: #fdba74;  /* Your orange accent */
    --light-bg: #fdfaf6;      /* A very light cream for backgrounds */
    --text-color: #333333;
    --text-light: #555555;
    --border-color: #dddddd;
    --container-width: 1140px; /* Standard container width */
    --border-radius: 8px;
    --header-height: 70px; /* Approximate header height for scroll padding */
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height); /* Adjust if header height changes */
}

body {
    font-family: 'Inter', sans-serif; /* Fallback to generic sans-serif */
    color: var(--text-color);
    background-color: var(--light-bg);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* For sticky footer */
}

main {
    flex: 1; /* Allows main content to grow and push footer down */
    width: 100%;
    padding-top: 20px; /* Add some space below sticky header */
    padding-bottom: 20px;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    margin-bottom: 0.75em;
    line-height: 1.3;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   2. Utility Classes
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ==========================================================================
   3. General Button Styling
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px); /* Subtle lift on hover */
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #3d051b; /* Darker shade of primary */
    border-color: #3d051b;
    color: white;
}

.btn-accent {
    background-color: var(--accent-color);
    color: var(--primary-color);
    border-color: var(--accent-color);
}

.btn-accent:hover {
    background-color: #fca750; /* Darker shade of accent */
    border-color: #fca750;
    color: var(--primary-color);
}

.btn-link {
    background-color: transparent;
    color: var(--primary-color);
    border: none;
    padding: 0;
    text-decoration: underline;
}
.btn-link:hover {
    color: var(--accent-color);
    text-decoration: none;
    transform: none; /* No lift for link buttons */
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.9rem;
}

.btn-outline-primary {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: white;
}

.dk-cart-icon {
    color: var(--primary-color);
}

.dk-cart-link {
    border-color: #6b3100 !important;
    color: #6b3100 !important;
}
.dk-cart-link:hover {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--accent-color) !important;
}
.dk-cart-link:hover .dk-cart-icon {
    color: var(--primary-color) !important;
}
.dk-social-fab {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1030;
}
.dk-social-fab a {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.dk-social-fab a:hover {
    transform: translateY(-2px);
    background: var(--accent-color);
    color: var(--primary-color);
}
.dk-social-fab a.wa { background: #25D366; color: #ffffff; }
.dk-social-fab a.fb { background: #1877F2; color: #ffffff; }
.dk-social-fab a.ig { background: #C13584; color: #ffffff; }
.dk-social-fab a.yt { background: #FF0000; color: #ffffff; }
.dk-social-fab a.tw { background: #000000; color: #ffffff; }
.dk-chat-fab {
    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 1030;
}
.dk-chat-fab .dk-chat-btn {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color);
    color: var(--primary-color);
    box-shadow: 0 8px 16px rgba(0,0,0,0.18);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.dk-chat-fab .dk-chat-btn:hover {
    transform: translateY(-2px);
    background: var(--primary-color);
    color: #ffffff;
}
.dk-cart-badge {
    background-color: var(--primary-color);
    color: #ffffff;
    border: 1px solid #fff3c0;
}

.btn-block {
    display: block;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 1.1rem;
}

/* ==========================================================================
   4. Header Styles
   ========================================================================== */
/* Devotional themed header.css */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #fff8f0;
}

header {
  background: #b35400; /* deep saffron */
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(179, 84, 0, 0.7);
}

.navbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 25px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Logo */
.logo a {
  color: #fff3c0; /* soft cream */
  font-weight: 900;
  font-size: 1.9rem;
  letter-spacing: 2.5px;
  text-decoration: none;
  font-family: 'Georgia', serif;
  text-shadow: 1px 1px 2px #6b3100;
  transition: color 0.3s ease;
}

.logo a:hover {
  color: #ffd54f; /* warm gold */
}

/* Nav links */
.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  color: #fff3c0; /* soft cream */
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  padding: 8px 14px;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 0 5px rgba(255, 213, 79, 0.2);
}

.nav-links li a:hover,
.nav-links li a:focus {
  background-color: #ffd54f; /* warm gold */
  color: #6b3100; /* dark saffron */
  outline: none;
  box-shadow: 0 0 10px #ffd54f;
}

/* Language selector */
.language-selector {
  position: relative;
}

.language-selector select {
  background: #6b3100; /* dark saffron */
  color: #fff3c0; /* soft cream */
  border: none;
  border-radius: 6px;
  padding: 7px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  min-width: 140px;
  box-shadow: 0 0 6px rgba(255, 213, 79, 0.3);
}

.language-selector select:hover,
.language-selector select:focus {
  background-color: #ffd54f; /* warm gold */
  color: #6b3100;
  outline: none;
  box-shadow: 0 0 12px #ffd54f;
}

/* Hamburger menu */

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 22px;
  cursor: pointer;
  z-index: 1100;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: #fff3c0;
  height: 4px;
  width: 100%;
  border-radius: 3px;
  position: relative;
  transition: all 0.3s ease;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  top: -8px;
}

.nav-toggle-label span::after {
  top: 8px;
}

/* Toggle animation */

.nav-toggle:checked + .nav-toggle-label span {
  background: transparent;
}

.nav-toggle:checked + .nav-toggle-label span::before {
  transform: rotate(45deg);
  top: 0;
}

.nav-toggle:checked + .nav-toggle-label span::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Responsive styles */

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    top: 64px;
    right: 0;
    height: calc(100% - 64px);
    width: 220px;
    background: #b35400; /* saffron */
    flex-direction: column;
    gap: 0;
    padding-top: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    border-left: 1px solid #6b3100;
  }

  .nav-links li {
    margin-bottom: 15px;
  }

  .nav-links li a {
    display: block;
    padding: 15px 25px;
    font-size: 1.1rem;
  }

  .nav-toggle:checked ~ .nav-links {
    transform: translateX(0);
  }

  .nav-toggle-label {
    display: block;
  }

  .language-selector {
    display: none; /* Hide language selector on mobile */
  }
}

@media (max-width: 480px) {
  .navbar {
    padding: 0 15px;
  }

  .logo a {
    font-size: 1.5rem;
  }
}

/* ========================================================================== */
/* 5. Login Page Styles - Devotional theme for Darshanam */
/* ========================================================================== */

.login-form-section {
  background: #fff8f0; /* Soft warm cream */
  padding: 40px 35px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(179, 84, 0, 0.25); /* warm saffron shadow */
  max-width: 400px;
  margin: 10px auto;
  /* font-family: 'Georgia', serif; */
  color: #6b3100; /* dark saffron text */
  transition: transform 0.3s ease;
}

.login-form-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(179, 84, 0, 0.35);
}

.login-form-section h1 {
  text-align: center;
  font-weight: 900;
  font-size: 2.3rem;
  margin-bottom: 30px;
  color: #b35400; /* deep saffron */
  text-shadow: 1px 1px 2px #6b3100;
  letter-spacing: 2px;
}

.login-form-section form {
  display: flex;
  flex-direction: column;
}

.login-form-section .form-group {
  margin-bottom: 24px;
}

.login-form-section label {
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
  font-size: 1.1rem;
  color: #6b3100;
  letter-spacing: 0.5px;
}

.login-form-section input.form-control {
  width: 100%;
  padding: 14px 20px;
  font-size: 17px;
  border: 2px solid #ffd54f; /* warm gold border */
  border-radius: 12px;
  background-color: #fff8f0;
  color: #6b3100;
  font-weight: 600;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  box-shadow: inset 0 1px 4px rgba(179, 84, 0, 0.1);
}

.login-form-section input.form-control::placeholder {
  color: #bfa45a;
  font-style: italic;
}

.login-form-section input.form-control:focus {
  border-color: #b35400; /* deep saffron */
  box-shadow: 0 0 12px #b35400aa;
  outline: none;
  background-color: #fffdf7;
}

.login-form-section button.btn-primary {
  background: linear-gradient(135deg, #b35400, #ffd54f);
  border: none;
  padding: 14px 20px;
  font-size: 1.25rem;
  color: #fff3c0;
  font-weight: 900;
  border-radius: 14px;
  cursor: pointer;
  letter-spacing: 1.2px;
  box-shadow: 0 6px 15px rgba(179, 84, 0, 0.6);
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease;
}

.login-form-section button.btn-primary:hover {
  background: linear-gradient(135deg, #ffd54f, #b35400);
  box-shadow: 0 10px 25px rgba(255, 213, 79, 0.8);
  transform: scale(1.05);
}

.login-form-section a.btn-link {
  margin-top: 16px;
  font-weight: 700;
  font-size: 1rem;
  color: #b35400;
  text-decoration: none;
  display: inline-block;
  text-align: right;
  transition: color 0.3s ease;
  letter-spacing: 0.7px;
}

.login-form-section a.btn-link:hover {
  color: #6b3100;
  text-decoration: underline;
}

.register-section {
  text-align: center;
  margin-top: 36px;
  font-size: 1.1rem;
  color: #6b3100;
  font-family: 'Georgia', serif;
}

.register-section a {
  color: #b35400;
  font-weight: 900;
  text-decoration: none;
  transition: color 0.3s ease;
  letter-spacing: 1px;
}

.register-section a:hover {
  color: #6b3100;
  text-decoration: underline;
}

/* Responsive tweaks */

@media (max-width: 480px) {
  .login-form-section {
    padding: 30px 20px;
    max-width: 90%;
  }
  
  .login-form-section h1 {
    font-size: 1.8rem;
  }
  
  .login-form-section button.btn-primary {
    font-size: 1.1rem;
    padding: 12px 18px;
  }
}

/* ========================================================================== */
/* 5. Register Page Styles - Devotional theme for Darshanam */
/* ========================================================================== */
.register-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px;
  background: #fff8f0;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(107, 49, 0, 0.2);
  text-align: center;
}

.register-title {
  color: #6b3100;
  font-size: 1.5rem;
  /* font-family: 'Georgia', serif; */
  margin-bottom: 20px;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.register-form .form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.register-form label {
  font-weight: 600;
  color: #b35400;
  margin-bottom: 5px;
}

.register-form input {
  width: 100%;
  padding: 10px 15px;
  border: 2px solid #ffd54f;
  border-radius: 8px;
  background-color: #fffaf3;
  transition: border-color 0.3s;
}

.register-form input:focus {
  border-color: #b35400;
  outline: none;
  box-shadow: 0 0 5px rgba(179, 84, 0, 0.3);
}

.btn-register {
  background: #b35400;
  color: #fff3c0;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-register:hover {
  background: #ffd54f;
  color: #6b3100;
  box-shadow: 0 0 10px #ffd54f;
}

.login-link {
  margin-top: 20px;
  color: #6b3100;
  font-size: 0.95rem;
}

.login-link a {
  color: #b35400;
  font-weight: bold;
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}

/* ==========================================================================
    Password Reset Link
   ========================================================================== */

.password-reset-container {
  max-width: 400px;
  margin: auto;
  background: #fef7e1; /* soft cream */
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(220, 180, 80, 0.3);
  color: #5b3a00; /* warm brown */
  text-align: center;
}

.devotional-title {
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
  font-weight: 700;
  color: #d98c00; /* saffron-like */
  text-shadow: 1px 1px 0 #fff7cc;
}

.devotional-subtitle,
.devotional-message {
  font-size: 1rem;
  margin-bottom: 1.8rem;
  font-style: italic;
  color: #7a5900;
}

.devotional-form label {
  display: block;
  text-align: left;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.devotional-form input[type="email"],
.devotional-form input[type="password"] {
  width: 100%;
  padding: 0.6rem 1rem;
  margin-bottom: 1.2rem;
  border: 2px solid #d9b233;
  border-radius: 12px;
  font-size: 1rem;
  color: #5b3a00;
  background-color: #fff9db;
  transition: border-color 0.3s ease;
  font-family: 'Georgia', serif;
}

.devotional-form input[type="email"]:focus,
.devotional-form input[type="password"]:focus {
  border-color: #f7c948;
  outline: none;
  background-color: #fffdf0;
}

.btn.devotional-btn {
  background-color: #d98c00;
  color: white;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 20px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(217, 140, 0, 0.6);
  transition: background-color 0.3s ease;
  font-family: 'Georgia', serif;
  text-transform: uppercase;
}

.btn.devotional-btn:hover {
  background-color: #f7c948;
  color: #5b3a00;
}

  
/* ==========================================================================
   6. Alert Messages (for Django messages)
   ========================================================================== */
.alert {
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}
.alert strong {
    margin-right: 5px;
}

/* Example: Add icons to alerts (requires Font Awesome or similar)
.alert::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}
.alert-danger::before { content: "\f071"; }
.alert-success::before { content: "\f058"; }
.alert-info::before { content: "\f05a"; }
.alert-warning::before { content: "\f06a"; }
*/

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

/* ========================================================================== */
/* 5. Devotte Page Styles - Devotional theme for Darshanam */
/* ========================================================================== */
/* Devotte Dashboard Styles */

.devotte-dashboard-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #f9f3ec, #f0e6d2);
  color: #4b3a2f;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* padding: 20px 40px; */
  /* width: 100vw; */
  box-sizing: border-box;
}

.devotte-dashboard-header {
  margin-bottom: 30px;
  border-bottom: 2px solid #bfa46f;
  padding-bottom: 10px;
  text-align: center;
}

.devotte-dashboard-title {
  font-weight: 700;
  font-size: 2.8rem;
  color: #8c6d1f;
  text-shadow: 1px 1px 2px #d2c695;
  letter-spacing: 2px;
}

.devotte-dashboard-body {
  display: flex;
  flex-grow: 1;
  gap: 20px;
}

/* Sidebar */

.devotte-sidebar {
  width: 280px;
  background: #fff8f0;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(204, 178, 124, 0.3);
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 20px;
  height: fit-content;
}

.devotte-user-profile {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  width: 100%;
  gap: 15px;
}

.devotte-profile-image i {
  font-size: 60px;
  color: #cfa947;
  filter: drop-shadow(0 0 1px #b38e3d);
}

.devotte-profile-info h4 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #5a4a32;
}

.devotte-profile-info p {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: #7a6f5a;
}

/* Navigation */

.devotte-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.devotte-nav-link {
  display: block;
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #6b582e;
  font-weight: 500;
  font-size: 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: inset 0 0 0 0 transparent;
}

.devotte-nav-link:hover,
.devotte-nav-link.active {
  background-color: #cfa947;
  color: #fff;
  box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 0.4);
}

/* Main Content */

.devotte-main-content {
  flex-grow: 1;
  background: #fffdf7;
  border-radius: 16px;
  box-shadow: 0 10px 18px rgba(194, 162, 62, 0.25);
  padding: 35px 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-height: 70vh;
}

/* Welcome Section */

.devotte-welcome-section h2 {
  font-size: 2.4rem;
  color: #8c6d1f;
  margin-bottom: 6px;
  font-weight: 700;
}

.devotte-welcome-section p {
  font-size: 1.1rem;
  color: #7a6f5a;
  margin: 0;
}

/* Summary Cards */

.devotte-summary-cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.devotte-summary-card {
  flex: 1;
  background: linear-gradient(135deg, #f0e6d2, #d9cfa3);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 14px rgba(191, 164, 111, 0.35);
  text-align: center;
  color: #5a4a32;
  transition: transform 0.25s ease;
}

.devotte-summary-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(191, 164, 111, 0.5);
}

.devotte-summary-card h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  font-weight: 600;
}

.devotte-count {
  font-size: 2.6rem;
  font-weight: 700;
  color: #8c6d1f;
  text-shadow: 0 0 6px #d6c67d;
}

/* Sections */

.devotte-section {
  background: #fff8f0;
  padding: 25px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(204, 178, 124, 0.25);
  color: #5a4a32;
}

.devotte-section h3 {
  font-size: 1.8rem;
  margin-bottom: 18px;
  font-weight: 700;
  color: #8c6d1f;
}

.devotte-section ul {
  list-style-type: disc;
  padding-left: 1.4em;
  margin-bottom: 15px;
  color: #6b582e;
}

.devotte-section li {
  margin-bottom: 10px;
  font-size: 1rem;
}

.devotte-link {
  font-weight: 600;
  color: #cfa947;
  text-decoration: none;
  transition: color 0.3s ease;
}

.devotte-link:hover {
  color: #a67822;
  text-decoration: underline;
}

/* Notifications */

.devotte-notifications-section {
  background: #fff8f0;
  padding: 25px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(204, 178, 124, 0.25);
  color: #5a4a32;
}

.devotte-notifications-section h3 {
  font-size: 1.8rem;
  margin-bottom: 18px;
  font-weight: 700;
  color: #8c6d1f;
}

.devotte-notification-list {
  list-style-type: none;
  padding-left: 0;
  color: #6b582e;
}

.devotte-notification-list li {
  margin-bottom: 12px;
  font-size: 1rem;
  padding-left: 18px;
  position: relative;
}

.devotte-notification-list li::before {
  content: "●";
  color: #cfa947;
  position: absolute;
  left: 0;
  font-size: 1.3rem;
  line-height: 1;
  top: 0.25em;
}

/* Responsive */

@media (max-width: 992px) {
  .devotte-dashboard-body {
    flex-direction: column;
  }
  .devotte-sidebar {
    width: 100%;
    position: relative;
    top: auto;
    margin-bottom: 30px;
  }
  .devotte-summary-cards {
    flex-direction: column;
    gap: 20px;
  }
  .devotte-summary-card {
    width: 100%;
  }
}

/* ========================================================================== */
/* 8. Fasting_days Page Styles - Devotional theme for Darshanam */
/* ========================================================================== */

.fasting-days {
  max-width: 900px;
  margin: 2rem auto 4rem;
  padding: 2.5rem 3rem;
  background: linear-gradient(135deg, #fff8e1 0%, #f6e4b8 100%);
  border: 3px solid #b68d40;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(182, 141, 64, 0.3);
  /* font-family: 'Georgia', serif; */
  color: #5b4510;
  text-align: center;
}

.fasting-days h1 {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 0.6rem;
  color: #8c6d1f;
  letter-spacing: 1.8px;
  text-shadow: 0 2px 5px rgba(140, 109, 31, 0.4);
  position: relative;
}

.fasting-days h1::after {
  content: "ॐ";
  position: absolute;
  right: -45px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4rem;
  color: #bf9b30;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(191, 155, 48, 0.7);
}

.fasting-intro p {
  font-style: italic;
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 3rem;
  color: #6f5720;
  line-height: 1.6;
}

.year-section {
  margin-bottom: 3.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px dotted #bf9b30;
  text-align: left;
}

.year-section h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #9c7c1a;
  border-left: 6px solid #bf9b30;
  padding-left: 15px;
  margin-bottom: 1.4rem;
  text-shadow: 0 1px 2px rgba(156, 124, 26, 0.45);
}

table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
  font-size: 1.05rem;
  background: transparent;
}

table.table thead tr {
  background: #bfae58cc;
  color: #3a2f00;
  font-weight: 700;
  border-radius: 14px;
}

table.table thead th {
  padding: 14px 18px;
  text-align: left;
  user-select: none;
}

table.table tbody tr {
  background: #f8f0bb;
  box-shadow: 0 8px 15px rgba(191, 155, 48, 0.25);
  border-radius: 10px;
  transition: all 0.35s ease;
  cursor: default;
}

table.table tbody tr:hover {
  background: #f2e79a;
  box-shadow: 0 15px 30px rgba(191, 155, 48, 0.5);
  transform: translateY(-4px);
}

table.table tbody td {
  padding: 12px 18px;
  border-left: 4px solid transparent;
  vertical-align: middle;
  color: #6b5514;
}

table.table tbody tr:hover td {
  border-left-color: #bf9b30;
}

table.table tbody td:first-child {
  font-weight: 600;
  color: #a88300;
  white-space: nowrap;
}

.fasting-tips {
  background: #fff8d9;
  margin-top: 4rem;
  padding: 1.8rem 2.5rem;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(182, 141, 64, 0.22);
  color: #7a5e00;
  font-size: 1.15rem;
  text-align: left;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Georgia', serif;
  line-height: 1.6;
  user-select: none;
}

.fasting-tips h3 {
  font-weight: 800;
  font-size: 1.9rem;
  margin-bottom: 1rem;
  text-shadow: 0 1px 3px rgba(156, 124, 26, 0.5);
  color: #9c7c1a;
}

.fasting-tips ul {
  padding-left: 1.5rem;
  list-style: none;
}

.fasting-tips ul li {
  position: relative;
  margin-bottom: 0.85rem;
  padding-left: 2.2rem;
  color: #6b5514;
  font-weight: 500;
}

.fasting-tips ul li::before {
  content: "🕉️";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: #bf9b30;
  text-shadow: 0 1px 2px rgba(156, 124, 26, 0.6);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .fasting-days {
    padding: 2rem 1.5rem;
    margin: 1.5rem auto 3rem;
  }
  .fasting-days h1 {
    font-size: 2.4rem;
  }
  .year-section h3 {
    font-size: 1.5rem;
  }
  table.table thead th,
  table.table tbody td {
    padding: 10px 12px;
  }
  .fasting-tips {
    padding: 1.5rem 1.8rem;
    font-size: 1rem;
  }
}

/* ==========================================================================
   11. Deekshas Styles
   ========================================================================== */
/* Deeksha Unique Devotional Styling - dk- prefix avoids class conflicts */

.dk-deekshas-content {
    /* font-family: 'Merriweather', serif; */
    background: linear-gradient(to bottom, #fdf6e3, #fffbe9);
    color: #4b3621;
    padding: 40px 20px;
    max-width: 1000px;
    margin: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(90, 70, 30, 0.08);
}

/* Headings */
.dk-deekshas-content h2,
.dk-deekshas-content h3,
.dk-deekshas-content h4 {
    color: #5a3b1d;
    font-weight: 600;
    margin-bottom: 10px;
}

/* AI Guided Section */
.dk-ai-guided-section {
    background-color: #fffdf4;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    border: 1px solid #e8d8bb;
}

/* Meditation Player */
.dk-meditation-player {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Player Controls */
.dk-player-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dk-start-meditation {
    background-color: #a87f4d;
    border: none;
    padding: 10px 24px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.dk-start-meditation:hover {
    background-color: #7d5f36;
}

/* Progress Bar */
.dk-progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dk-progress {
    width: 200px;
    background: #f0e0c5;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.dk-progress-bar {
    background-color: #b68a50;
    height: 100%;
    width: 0%;
    transition: width 0.4s ease-in-out;
}

.dk-time-display {
    font-size: 14px;
    font-weight: 600;
    color: #6b5135;
}

/* Meditation Options */
.dk-meditation-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dk-meditation-options select {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #cabfa5;
    font-size: 14px;
    background-color: #fffdf6;
}

/* Progress Tracking */
.dk-progress-tracking {
    background-color: #fff8ea;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    border: 1px solid #e9d9c0;
}

/* Stat Cards */
.dk-stats-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.dk-stat-card {
    background-color: #fdf9f0;
    border-radius: 8px;
    padding: 16px 20px;
    text-align: center;
    flex: 1 1 30%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.dk-stat-value {
    font-size: 20px;
    color: #9f774c;
    margin-top: 5px;
}

/* AI Insights */
.dk-ai-insights {
    margin-top: 20px;
    background-color: #fdf6e2;
    padding: 16px 20px;
    border-left: 4px solid #c3a472;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.5;
}

/* Resources Section */
.dk-resources-section {
    background-color: #faf3e6;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #e8d8c2;
}

.dk-resource-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.media-section .dk-resource-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 992px) {
    .dk-resource-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
    .dk-resource-list { grid-template-columns: 1fr; }
}

.dk-resource-card {
    flex: 0 1 280px;
    background: #fffaf0;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #eadac1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    min-height: 230px;
}

.dk-media-card {
    padding: 16px;
    border: 1px solid #e8d8c2;
    border-radius: 12px;
    background: linear-gradient(135deg,#fffaf0,#fff6e5);
}
.dk-media-card iframe { border: 0; border-radius: 10px; width: 100%; height: 100%; }

.dk-resource-card h4 {
    color: #5e3b1f;
    margin-bottom: 8px;
}

.dk-resource-card .fw-semibold {
    font-size: 1.2rem;
}

.dk-resource-card p {
    font-size: 14px;
    color: #6c4b2d;
    margin-bottom: 12px;
}

.dk-resource-card a.btn {
    border: 0;
    color: #ffffff;
    transition: all 0.25s ease-in-out;
    font-weight: 700;
    border-radius: 10px;
    padding: 8px 14px;
    min-width: 160px;
    max-width: 200px;
    align-self: center;
    margin-top: auto;
}
.dk-resource-card a.btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.dk-resource-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.dk-card-icon {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe7c2, #f3d6a8);
    color: #7a4e23;
    border: 3px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(0,0,0,0.05);
}
.dk-card-icon i { font-size: 26px; }

.dk-resource-card.card-purohits { border-top: 4px solid #d97706; }
.dk-resource-card.card-astro   { border-top: 4px solid #3b82f6; }
.dk-resource-card.card-mantra  { border-top: 4px solid #10b981; }
.dk-resource-card.card-yajna   { border-top: 4px solid #ef4444; }
.dk-resource-card.card-media   { border-top: 4px solid #8b5cf6; }
.dk-resource-card.card-books   { border-top: 4px solid #f59e0b; }

.dk-resource-card.card-purohits { background: linear-gradient(180deg, #fff7ed, #fff3e6); }
.dk-resource-card.card-astro   { background: linear-gradient(180deg, #eff6ff, #eaf2ff); }
.dk-resource-card.card-mantra  { background: linear-gradient(180deg, #ecfdf5, #e7faf3); }
.dk-resource-card.card-yajna   { background: linear-gradient(180deg, #fef2f2, #feeaea); }
.dk-resource-card.card-media   { background: linear-gradient(180deg, #f5f3ff, #f0eeff); }
.dk-resource-card.card-books   { background: linear-gradient(180deg, #fff7ed, #fff3db); }

.card-purohits .btn { background-image: linear-gradient(135deg,#b45309,#7c2d12); box-shadow: 0 4px 12px rgba(124,45,18,.35); }
.card-astro .btn    { background-image: linear-gradient(135deg,#1d4ed8,#1e3a8a); box-shadow: 0 4px 12px rgba(30,58,138,.35); }
.card-mantra .btn   { background-image: linear-gradient(135deg,#047857,#065f46); box-shadow: 0 4px 12px rgba(6,95,70,.35); }
.card-yajna .btn    { background-image: linear-gradient(135deg,#b91c1c,#7f1d1d); box-shadow: 0 4px 12px rgba(127,29,29,.35); }
.card-media .btn    { background-image: linear-gradient(135deg,#6d28d9,#4c1d95); box-shadow: 0 4px 12px rgba(76,29,149,.35); }
.card-books .btn    { background-image: linear-gradient(135deg,#b45309,#7c2d12); box-shadow: 0 4px 12px rgba(124,45,18,.35); }

.dk-resource-card .fw-semibold { font-size: 1.35rem; letter-spacing: .3px; font-weight: 700; }
.card-purohits .fw-semibold { color: #7a4e23; }
.card-astro .fw-semibold    { color: #1e3a8a; }
.card-mantra .fw-semibold   { color: #065f46; }
.card-yajna .fw-semibold    { color: #7f1d1d; }
.card-media .fw-semibold    { color: #4c1d95; }
.card-books .fw-semibold    { color: #7c2d12; }

.dk-card-icon.icon-purohits { background: linear-gradient(135deg,#ffe1b2,#f8c178); color:#7a4e23; }
.dk-card-icon.icon-astro    { background: linear-gradient(135deg,#dbeafe,#93c5fd); color:#1e3a8a; }
.dk-card-icon.icon-mantra   { background: linear-gradient(135deg,#d1fae5,#a7f3d0); color:#065f46; }
.dk-card-icon.icon-yajna    { background: linear-gradient(135deg,#fee2e2,#fecaca); color:#7f1d1d; }
.dk-card-icon.icon-media    { background: linear-gradient(135deg,#ede9fe,#ddd6fe); color:#4c1d95; }
.dk-card-icon.icon-books    { background: linear-gradient(135deg,#fff7ed,#fde68a); color:#7c2d12; }

/* ==========================================================================
   7. Footer Styles
   ========================================================================== */
   
.dk-festival-content {
    background: linear-gradient(to bottom, #fff8e1, #ffe0b2);
    padding: 50px 30px;
    font-family: 'Mukti Narrow', 'Serif', sans-serif;
}

.dk-festival-title {
    text-align: center;
    font-size: 2.8em;
    margin-bottom: 40px;
    color: #8b4513;
}

.dk-festival-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.dk-festival-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(169, 107, 19, 0.3);
    width: 300px;
    transition: transform 0.3s ease;
}

.dk-festival-card:hover {
    transform: translateY(-8px);
}

.dk-festival-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.dk-festival-info {
    padding: 20px;
    text-align: center;
}

.dk-festival-info h3 {
    font-size: 1.5em;
    color: #d2691e;
    margin-bottom: 10px;
}

.dk-festival-info p {
    font-size: 0.95em;
    color: #4e342e;
    margin: 5px 0;
}

.dk-festival-date {
    font-weight: bold;
    color: #6d4c41;
}

.dk-festival-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 18px;
    background-color: #a0522d;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.dk-festival-btn:hover {
    background-color: #8b4513;
}

/* ==========================================================================
   7. Footer Styles
   ========================================================================== */

.site-footer-main {
    background-color: #b35400;
    color: #fff3c0;
    padding: 60px 0 20px;
    margin-top: auto;
    font-size: 0.9rem;
    box-shadow: 0 -4px 12px rgba(179, 84, 0, 0.3);
}

.site-footer-main a {
    color: #ffd54f;
    transition: color 0.2s ease;
    text-decoration: none;
}
.site-footer-main a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.site-footer-main h3 {
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 25px;
    font-weight: 600;
    text-shadow: 1px 1px 2px #6b3100;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 40px;
    margin-bottom: 40px;
}

/* .footer-section block removed to fix empty ruleset warning */

.footer-section.contact-info p {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.footer-section.contact-info i { /* For Font Awesome icons */
    margin-right: 10px;
    color: var(--accent-color);
    width: 20px; /* Ensure consistent icon spacing */
    text-align: center;
}

.footer-section.quick-links ul,
.footer-section.social-links ul { /* Assuming you might add social links */
    list-style: none;
    padding: 0;
}

.footer-section.quick-links ul li,
.footer-section.social-links ul li {
    margin-bottom: 10px;
}
.footer-section.social-links ul {
    display: flex;
    gap: 15px;
}
.footer-section.social-links ul li a i {
    font-size: 1.5rem; /* Larger social icons */
}


.newsletter-form {
    display: flex;
    margin-top: 10px;
}

.newsletter-form input[type="email"] {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid #555;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    background-color: #444;
    color: #fff;
    font-size: 1rem;
}
.newsletter-form input[type="email"]::placeholder {
    color: #aaa;
}
.newsletter-form input[type="email"]:focus {
    border-color: var(--accent-color);
    outline: none;
}

.newsletter-form button {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: 12px 18px;
    flex-shrink: 0; /* Prevent button from shrinking */
}

.copyright {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #444; /* Slightly more visible border */
    font-size: 0.85rem;
    color: #bbb;
}


/* ==========================================================================
   8. YOUR ORIGINAL CSS STARTS HERE
   (Styles below are from your provided style.css, appended for other components
    and specific media queries. Review for conflicts or redundancy with above.)
   ========================================================================== */

/* This is where your original style.css content would be pasted.
   For brevity, I'm not re-pasting the ~800 lines here,
   but you should put your entire original CSS content below this comment.
   Example:
*/
/* Original header and footer if still used elsewhere without new classes */
/* Removed empty legacy placeholders to satisfy linter */

/* All other specific styles from your original CSS */
.border-fristsection img {
    width: 100%;
    height: auto;
    display: block;
}
.darsanam-bgpng {
    background-image: url("../images/darsanam-bg.png") !important;
}
.website-firstbg {
    background-image: url("../images/bannerImage.png") !important;
    height: 321px;
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
}

.website-main-logo {
    display: flex;
}

.py-30 {
    padding: 30px 0;
}

.website-main-logo img {
    height: 200px;
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3),
        0 6px 6px rgba(0, 0, 0, 0.2); */
}

.website-main-logo h2 {
    color: #fff;
    font-family: ui-serif;
        font-style: italic;
    margin-bottom: 0%;
    font-size: 40px;
}

.bg-nav {
    background-color: rgb(217 184 151);
    border-radius: 12px;
    padding: 10px;
}

.bg-nav.navbar-light .navbar-nav .nav-link {
    font-size: 14px;
    color: #500724;
    font-weight: 600;
    text-transform: uppercase;
}

.bg-nav.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
    padding: 10px;
    background-color: rgb(80 7 36);
    color: #fff;
    border-radius: 10px;
}

/* Temple Listing sizing */
.temple-listing {
    max-width: 960px;
    margin: 0 auto;
}
.temple-listing .search-bar {
    max-width: 840px;
}
.temple-listing h2 {
    font-size: 2rem;
    margin-bottom: 12px;
    color: #5e3b1f;
}
.temple-listing .list-group-item {
    padding: 18px;
}
.temple-listing .list-group-item img {
    width: 200px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}
.temple-thumb {
    width: 200px !important;
    height: 300px !important;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.temple-listing .fw-bold {
    font-size: 1.25rem;
}
.temple-listing .text-muted {
    font-size: 1rem;
}

.temple-list-item {
    border: 1px solid #eadac1;
    border-radius: 12px;
    background: #fffaf0;
    padding: 18px 20px;
    margin-bottom: 12px;
}
.temple-list-item:hover {
    background: #fff6e6;
}
.temple-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #5e3b1f;
}
.temple-meta {
    color: #7a6f5a;
    margin-bottom: 6px;
}
.temple-snippet {
    color: #6b582e;
    line-height: 1.6;
    margin-bottom: 6px;
}

.btn.btn-login { /* Note: .btn class from new styles will also apply. This makes it more specific. */
    background-color: #fdba74;
    color: #000000;
    font-size: 16px; /* May be overridden by .btn-sm or general .btn */
    font-weight: 600;
    padding: 14px; /* May be overridden */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 0%;
    border-bottom-right-radius: 0%;
    border-right: 2px solid #500724;
}

.btn.btn-login:focus {
    box-shadow: none;
}

.btn.btn-login:hover {
    border-color: #500724; /* Corrected color value */
    color: #fff;
}

.btn.btn-register { /* Note: .btn class from new styles will also apply. */
    background-color: #fdba74;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    border-top-left-radius: 0%;
    border-bottom-left-radius: 0%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.btn.btn-register:focus {
    box-shadow: none;
}

.btn.btn-register:hover {
    border-color: #500724; /* Corrected color value */
    color: #fff;
}

.bg-first-section {
    background-color: rgb(231 209 182);
}

.location-for-site {
    position: relative;
}

.box-design-for-muharat {
    background-color: rgb(246, 229, 199);
    padding: 10px 25px;
    border-radius: 14px;
}

.location-for-site .box-design-for-muharat {
    position: absolute;
    left: 0%;
    top: 0%;
    height: 270px;
    width: 260px;
}

.box-design-for-muharat img {
    max-width: 150px;
    width: 100%;
    height: 150px;
    display: flex;
    margin: auto;
}

.box-design-for-muharat h3 {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bolder;
    text-align: center;
    color: #500724;
    margin-bottom: 10px;
}

.box-design-for-muharat p {
    font-size: 18px;
    font-weight: bolder;
    text-align: center;
    color: #500724;
    margin-bottom: 10px;
}

.image-gallery {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    height: 100%;
}

.image-gallery img {
    border-radius: 12px;
    height: 300px;
    width: 100%;
}

.bg-astrological {
    background: linear-gradient(180deg, #fff7ed, #fff3e0);
    padding: 20px 16px 12px;
    border-radius: 20px;
    border: 1px solid #f0e0c2;
    box-shadow: 0 6px 18px rgba(124, 45, 18, 0.12);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.bg-astrological h3 {
    font-size: 21px;
    font-weight: 900;
    color: #500724;
}

.dk-astro-accent { height: 6px; width: 100%; border-radius: 6px; background-image: linear-gradient(135deg, #f59e0b, #b45309); margin-bottom: 10px; }

.dk-astro-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dk-astro-list { flex: 1 1 auto; }
.dk-astro-card {
    background: #ffffff;
    border: 1px solid #f0e0c2;
    border-top: 4px solid #b45309;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(124, 45, 18, 0.12);
}
.dk-astro-head { display: flex; align-items: center; gap: 12px; }
.dk-astro-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 2px solid #f0e0c2; box-shadow: 0 2px 6px rgba(124, 45, 18, 0.12); }
.dk-astro-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dk-astro-info { flex: 1; }
.dk-astro-name { font-weight: 700; color: #1f2937; }
.dk-astro-meta { font-size: 0.9rem; color: #4b5563; }
.dk-astro-rating { font-weight: 600; color: #b45309; }
.bg-astrological .dk-astro-actions .btn { min-width: 110px; padding: 6px 12px; border-radius: 24px; font-weight: 700; box-shadow: 0 3px 8px rgba(124, 45, 18, 0.18); }
.dk-astro-actions { margin-top: 6px; display: flex; justify-content: flex-end; }
.bg-astrological .dk-resource-btn { background-image: linear-gradient(135deg, #b45309, #7c2d12); color: #ffffff; border: 0; }
.bg-astrological .dk-astro-list { margin-bottom: 0; }
.dk-astro-footer { margin-top: auto; text-align: center; padding-top: 8px; }
.dk-astro-extra { font-size: 0.85rem; color: #6b7280; }

.bg-astrological h4 {
    color: #500724;
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 500;
}

.bg-astrological p {
    font-size: 12px;
    color: #500724;
    /* margin-bottom: 20px; */
    font-weight: 400;
}

.img-gallery-two {
    display: flex;
    position: relative;
    max-width: 180px;
    height: 180px;
    width: 100%;
    padding: 0 5px;

}

.img-gallery-two img {
    border-radius: 16px;
    width: 100%;
    object-fit: cover;
}

.img-gallery-two h3 {
    position: absolute;
    color: #fff;
    left: 41%; /* Consider using transform for better centering: left: 50%; top: 50%; transform: translate(-50%, -50%); */
    top: 16%;
    font-size: 12px;
    transform: translate(-50%, -50%) !important; /* This implies you want to override something, check context */
}

.bg-temple {
    background-color: #500724;
    border-radius: 14px;
    position: relative;
    height: 100%;
}

.bg-temple img {
    position: absolute;
    /* background-position: left; */
    right: 0%;
    bottom: 0%;
    height: -webkit-fill-available; /* Consider standard '100%' or 'auto' depending on context */
}

.text-temple {
    display: flex;
    padding: 50px;

}

.text-temple h3 {
    font-size: 21px;
    color: #fff;
    font-weight: 900;
    margin-right: 20px;
    /* display: flex; */
}

.text-temple img {
    /* background-color: aquamarine; */
    width: 10px; /* This seems very small for an image, verify its purpose */
}

.text-temple h4 {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
}

.border-left {
    border-left: 3px solid #ffffff;
}

.tt-text h5 {
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    margin: 60px 0;
}

.card-design {
    display: flex;
    align-items: center;
    border-radius: 16px;
    background-color: #78716C;
    padding: 30px 40px;
}

.card-imgs {
    margin-right: 30px;
    border-radius: 50%; /* Applied to container, img inside should also be rounded if this is for avatar effect */
}

.card-imgs img {
    /* width: 100%; */
    max-width: 200px;
    height: 200px;
    border: 8px solid #500724;
    /* display: flex; */
    border-radius: 50%;
    /* justify-content: center; */
    object-fit: cover;
}

.card-txt h3 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 16px;
    font-weight: 700;
}

.card-txt a {
    background-color: #ffffff;
    border: 2px solid #ffffff;
    padding: 12px 20px;
    width: auto;
    display: inline-block;
    border-radius: 30px;
    color: #500724;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.card-txt a:hover {
    background-color: #500724;
    border-color: #500724;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.book-btn {
    background-color: #fff;
    border: 2px solid #fff;
    padding: 4px 36px;
    /* width: 100%; */
    border-radius: 14px;
    color: #500724;
    font-size: 21px;
    font-weight: 600;
}

.book-btn:hover {
    background-color: #500724;
    color: #fff;
}

.second-card {
    background-color: rgb(193, 114, 75) !important;
}

.second-card-to {
    border-radius: 16px;
    padding: 40px;
    background-color: rgb(193, 114, 75);
    position: relative;
}

.second-card-to h5 {
    font-size: 21px;
    font-weight: bolder;
    color: #500724;
    text-align: center;
    margin-bottom: 20px;

}

.second-card-to img {
    position: absolute;
    right: 0%;
    bottom: 0%;
    /* height: -webkit-fill-available; */ /* Consider alternative like height: 100% */
    z-index: 1; /* Ensure this is needed and doesn't conflict with other positioned elements */
    width: 262px;
    height: 361px;
}

.calendar {
    width: 350px;
    background: transparent; /* Might be hard to read if background of parent is complex */
    padding: 20px;
    border-radius: 12px;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */ /* Consider adding a subtle shadow for depth */
}

/* Calendar header conflicts with general header tag style. Be specific */
.calendar > header { /* Style for header *inside* .calendar */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background-color: transparent; /* Explicitly set, as general header might have a bg */
    box-shadow: none;
    position: static;
    height: auto;
}


.calendar > header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.calendar .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    text-align: center;
}

.calendar .day-name {
    font-weight: bold;
    color: #ffffff; /* Ensure this has enough contrast on its background */
}

.calendar .day {
    /* background: #f0f0f0; */ /* Default bg commented out */
    padding: 10px 0;
    border-radius: 6px;
    cursor: pointer;
    color: #fff; /* Ensure contrast */
    transition: background 0.3s, color 0.3s; /* Added color transition */
}

.calendar .day:hover {
    background: #fff;
    color: var(--primary-color); /* Use a theme color for text on hover */
}

.bg-select {
    background-color: rgb(235, 169, 57);
    border-radius: 16px;
    position: relative;
    height: 100%; /* Ensure parent has height or this means nothing */
    padding: 40px;
    overflow: hidden;
}

.bg-select img {
    position: absolute;
    right: 12px;
    bottom: 12px;
    height: 140px;
    opacity: 0.15;
    pointer-events: none;
}

.bg-select h3 {
    font-size: 21px;
    font-weight: bolder;
    text-align: center;
}

.bg-select select,
.bg-select .form-control {
    background-color: #ffffff !important;
    border-color: #ead8b8 !important;
    color: #500724 !important;
    font-size: 18px;
}

.bg-select select:focus,
.bg-select .form-control:focus {
    box-shadow: 0 0 0 2px rgba(227, 193, 128, 0.35);
    border-color: #d9bd7a !important;
}

.bg-select input {
    background-image: none;
}

.bg-select input:focus { }
.bg-select form { position: relative; z-index: 1; }
.bg-select .form-label { color: #500724; font-weight: 600; }

.bg-red {
    background-color: rgb(193, 114, 75);
    border-radius: 16px;
    padding: 40px;
    height: 310px;
}

.bg-red img {
    background-color: #500724;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: flex; /* For centering content *inside* this element if it were a container */
    justify-content: center; /* Not effective on img tag itself */
    align-items: center;   /* Not effective on img tag itself */
    margin: auto; /* This centers the image block */
}

.bg-red h3 {
    font-size: 21px;
    font-weight: bold;
    color: #500724;
    text-align: center;
    margin-top: 20px;
}

.sss { /* Class name is not descriptive, consider renaming */
    background-color: #FDBA74;
}

.bg-brown {
    background-color: #500724;
    border-radius: 16px;
    padding: 20px;
}

.donate-img img {
    background-color: #fff; /* If image has transparency, this will be visible */
    border-radius: 16px;
    display: block; /* Changed from flex as it's an img tag */
    width: 100%;
    height: 500px; /* Consider max-height and object-fit if aspect ratio is an issue */
    margin: auto;
    object-fit: cover; /* Or contain, depending on desired effect */
}

.donate-icon img {
    background-color: #FED7AA;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    display: block; /* Changed from flex */
    margin: auto;
    object-fit: cover;
}

.donate-icon h3 {
    color: rgb(246, 229, 199);
    font-size: 21px;
    font-weight: bolder;
    text-align: center;
    margin-top: 30px;
}

.bg-brown h6 {
    margin-bottom: 0%;
    font-size: 40px;
    color: #fff;
    font-weight: bolder;
    text-align: center;
}

.bg-brown-two {
    background-color: #500724;
    border-radius: 16px;
    padding: 20px;
}

.bg-brown-two h3 {
    background-image: linear-gradient(135deg, #f8d68c, #eab308);
    padding: 20px;
    border-radius: 12px;
    font-size: 22px;
    color: #500724;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
}

/* Divine Store: five-per-row grid and smaller cards */
.bg-brown-two .dk-resource-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) {
    .bg-brown-two .dk-resource-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
    .bg-brown-two .dk-resource-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
    .bg-brown-two .dk-resource-list { grid-template-columns: 1fr; }
}

.bg-brown-two .product-card { padding: 10px; }
.bg-brown-two .dk-resource-card { min-height: 200px; }
.bg-brown-two .product-card .img-wrapper { height: 140px; }
.bg-brown-two .dk-resource-card .fw-semibold { font-size: 1rem; }
.bg-brown-two .dk-resource-card a.btn { min-width: 120px; padding: 8px 12px; }

/* Attractive gradient buttons for Divine Store */
.dk-resource-btn {
    background-image: linear-gradient(135deg, #b45309, #7c2d12);
    color: #ffffff;
    border: 0;
    box-shadow: 0 6px 14px rgba(124,45,18,0.35);
}
.dk-resource-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Ensure Panchang button inside card uses gradient styling */
.card-txt a.dk-resource-btn {
    background-image: linear-gradient(135deg, #b45309, #7c2d12);
    color: #ffffff;
    border: 0;
    box-shadow: 0 6px 14px rgba(124,45,18,0.35);
}
.card-txt a.dk-resource-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Ensure register form button keeps white text on hover when using gradient */
.btn-register.dk-resource-btn:hover {
    color: #ffffff;
    border: 0;
}

.divine {
    background-color: #FDBA74;
    border-radius: 30px;
    padding: 20px;
    margin: 0 20px;
}

.divine img {
    height: 150px;
    width: 150px;
    display: block; /* Changed from flex */
    margin: auto;
    object-fit: cover;
}

.divine h3 {
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
    margin-top: 20px;
}

.divine a {
    font-size: 21px;
    color: #500724;
    font-weight: bold;
    display: block; /* Good for link areas */
    text-align: center; /* If you want the link text centered */
}

.divine.compact {
    background-image: linear-gradient(135deg, #b45309, #7c2d12);
    border-radius: 16px;
    padding: 14px;
    margin: 0;
    box-shadow: 0 6px 14px rgba(96,64,32,0.15);
    max-width: 280px;
    border: 1px solid #e8d8c2;
    border-top: 4px solid #b45309;
    color: #ffffff;
}
.divine.compact img {
    height: 80px;
    width: 80px;
}
.divine.compact h3 {
    font-size: 12px;
    margin-top: 8px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.divine.compact .btn.dk-resource-btn {
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 20px;
    padding: 8px 12px;
    box-shadow: 0 6px 14px rgba(124,45,18,0.35);
    width: 100%;
    white-space: nowrap;
}

.footer-img img { /* This seems like a specific image for a footer, not the general site footer */
    border-radius: 16px;
    height: 100%; /* Will take height of parent or be 0 if parent has no height */
    display: block;
    margin: auto; /* If width is less than 100% */
}

.heading_label label {
    font-size: 21px;
    color: #fff; /* Ensure contrast with background */
    font-weight: bolder;
    text-transform: uppercase;
}

.checkbox label { /* This will style all labels inside .checkbox */
    color: #fff; /* Ensure contrast */
    /* size: 21px; */ /* 'size' is not a valid CSS property, use font-size */
    font-size: 1rem; /* Example size */
    text-transform: uppercase;
    display: inline-flex; /* For aligning checkbox and label nicely */
    align-items: center;
    cursor: pointer;
}
.checkbox input[type="checkbox"] {
    margin-right: 8px; /* Space between checkbox and label text */
    /* Consider custom styling for checkboxes for better appearance */
}

.checkbox input:focus {
    box-shadow: none; /* Removes default focus, ensure accessibility with other cues */
}

.checkbox textarea:focus {
    box-shadow: none;
}

.btn-one { /* This class is generic, does it clash with .btn from new styles? */
    font-size: 21px;
    font-weight: bolder;
    color: #fff; /* Ensure this button has a background or it might be invisible */
    /* Consider adding padding, background-color, border-radius if it's a button */
}

.btn-one:focus {
    box-shadow: none;
}

.bg-min-yellow {
    background-color: rgb(246, 229, 199);
    border-radius: 16px;
}

.bg-community {
    background-color: rgb(205, 163, 108);
    padding: 40px;
    border-radius: 16px;
}

.comunity-txt h3 {
    font-size: 21px;
    color: #500724;
    margin-bottom: 10px;
    font-weight: bolder;
}

.comunity-txt p {
    font-size: 14px;
    font-weight: 400;
}

.community-threat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.community-threat img {
    height: 165px;
    width: 250px;
    border-radius: 16px;
    object-fit: cover;
}

.threat-details {
    background-color: rgb(246, 229, 199);
    border-radius: 16px;
    padding: 20px 10px;
    margin-left: 10px;
    flex-grow: 1; /* Allow it to take remaining space if .community-threat is flex */
}

.threat-details h3 {
    font-size: 16px;
    margin-bottom: 20px;
}

.threat-details p {
    font-size: 12px;
    margin-bottom: 0%;
}

.hindu {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid #eadac1;
    border-radius: 12px;
    padding: 12px;
    background: #fffaf0;
    margin-bottom: 12px;
}

.hindu-icon img {
    border-radius: 50%;
    max-width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 16px;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.hindu h3 { /* Assuming this is a child of .hindu */
    font-size: 18px;
    padding-top: 0;
    margin-bottom: 12px;
    color: #15803D;
}

.hindu h4 {
    color: #3f3f46;
    font-size: 14px;
    margin-bottom: 10px;
}

.hindu h5 {
    font-size: 14px;
    color: #3f3f46;
    margin-bottom: 6px;
}

.hindu-img img {
    border-radius: 16px;
    height: 180px;
    max-width: 220px;
    object-fit: cover;
    margin-left: 0;
}

.bg-onee {
    background-color: #D6D3D1;
    padding: 15px;
}

.bg-onee input {
    font-size: 18px; /* This styles ALL inputs inside .bg-onee */
}

.bg-onee label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0%;
    color: #000000;
}

.bg-two {
    background-color: #a8a29e;
    padding: 15px;
}

.bg-two input {
    font-size: 18px;
}

.bg-two label {
    font-size: 21px; /* Larger than .bg-onee label */
    font-weight: 600;
    margin-bottom: 0%;
    color: #000000;
}

.bg-three {
    background-color: #78716c;
    padding: 15px;
}

.bg-three input {
    font-size: 18px;
}

.bg-three label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0%;
    color: #000000;
}

.bg-four {
    background-color: #854d0e;
    padding: 15px;
}

.bg-four input {
    font-size: 18px;
}

.bg-four label {
    font-size: 16px;
    font-weight: bolder;
    margin-bottom: 0%;
    color: #000000;
}

.bg-five {
    background-color: #500724;
    padding: 15px;
}

.bg-five input {
    font-size: 18px;
}

.bg-five label {
    color: #fff;
    font-size: 30px; /* Very large label */
    font-weight: bolder;
    margin-bottom: 0%;
}

.footer-link h5 { /* This seems for a different footer structure than .site-footer-main */
    font-size: 24px;
    font-weight: 700;
    color: #500724;
    margin-bottom: 10px;
}

.footer-link ul {
    list-style: none; /* Good practice */
    padding-left: 0; /* Remove default padding */
}
.footer-link ul li a {
    color: #000000;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
}

.footer-bottom h3 { /* Another footer specific style */
    color: #000000;
    font-size: 18px;
    margin-bottom: 0%;
    text-align: center;
}

.footer-bottom h3 a {
    color: #000000;
}

.fro-nav { /* "fro" might be a typo for "form-nav" or "from-nav"? Descriptive names help. */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkbox-sp {
    display: flex;
    justify-content: space-between;
}
.checkbox-padding{
    padding-top: 2px;
}

.ff-three { /* Not descriptive */
    display: flex;
}
.green-bg{
    background-color: #15803D;
    border-radius: 16px;
}
.silver-bg{
    background-color: #78716c;
    border-radius: 16px;
}


/* ==========================================================================
   Original Media Queries
   ========================================================================== */

/* 1680 */
@media (max-width: 1700px) {
    .card-imgs img {
        max-width: 140px;
        height: 140px;
    }

    .image-gallery img {
        height: 260px;
        /* width: 100%; */ /* Already set globally for img */
    }
}

/* 1500 */
@media (max-width: 1679px) { /* Typo: 1679px, should be 1599px if next is 1440? Or is it overlapping? */
    .website-main-logo h2 {
        font-size: 36px;
        /* font-family: ui-serif; */ /* Already set */
    }

    .card-design {
        padding: 15px;
    }

    .image-gallery img {
        height: 240px;
        /* width: 100%; */
    }
}

/* 1440 */
@media (max-width: 1499px) { /* Should be 1439px if using standard breakpoints */
    .img-gallery-two {
        max-width: 150px;
        height: 150px;
    }

    .donate-icon img {
        height: 180px;
        width: 180px;
    }

    .bg-onee label, /* Grouping these selectors */
    .bg-two label,
    .bg-three label,
    .bg-four label,
    .bg-five label {
        font-size: 21px;
    }


    .footer-link h5 {
        font-size: 21px;
    }

    .image-gallery img {
        height: 210px;
        /* width: 100%; */
    }
}

/* 1280 */
@media (max-width: 1439px) { /* This is fine if 1499px above was intended to be 1440px max-width */
    .website-main-logo h2 {
        font-size: 30px;
        /* font-family: ui-serif; */
    }

    .website-main-logo img {
        height: 180px;
    }

    .image-gallery img {
        height: 190px;
    }

    .card-imgs img {
        max-width: 120px;
        height: 120px;
    }

    .card-txt a {
        padding: 0px 40px; /* This padding is unusual (0 top/bottom), verify */
        font-size: 14px;
    }

    .card-txt h3 {
        font-size: 21px;
        margin-bottom: 20px;
    }

    .donate-img img {
        height: 271px;
    }


    .bg-brown h6 {
        font-size: 21px;
    }

    .divine h3 {
        font-size: 16px;
    }

    .divine {
        padding: 14px;
        margin: 0 8px;
    }

    .checkbox label {
        font-size: 14px;
    }

    .btn-one {
        font-size: 14px;
    }

    .bg-community {
        padding: 26px;
    }

    .comunity-txt h3 {
        font-size: 21px;
    }

    .bg-onee label,
    .bg-two label,
    .bg-three label,
    .bg-four label,
    .bg-five label {
        font-size: 16px;
    }
}

/* 1025 (often 1024px) */
@media (max-width: 1279px) {
    .services-img img {
        margin-bottom: 10px;
    }

    .bg-nav.navbar-light .navbar-nav .nav-link {
        font-size: 17px; /* Consider if this specific nav is still used with new .site-header */
    }

    .btn.btn-login,
    .btn.btn-register {
        font-size: 17px;
    }

    /* .card-txt a - already styled above */

    .card-design {
        padding: 20px;
        /* display: flex; */ /* Already flex */
        justify-content: space-evenly;
    }

    .bg-select {
        padding: 90px 40px; /* Very large padding */
    }

    .donate-img img {
        height: 330px;
    }

    .bg-brown h6 {
        font-size: 18px;
    }

    .donate-icon h3 {
        font-size: 16px;
    }

    .bg-red {
        padding: 20px;
    }

    .bg-red h3 {
        font-size: 16px;
    }

    .bg-brown-two h3 {
        font-size: 21px;
    }

    .divine h3 {
        font-size: 14px;
    }

    .divine a {
        font-size: 16px;
    }

    .footer-img img {
        height: 400px;
        /* display: flex; */ /* img tag doesn't take flex for its own layout */
        margin: auto;
        margin-bottom: 20px;
    }

    .checkbox {
        margin-bottom: 20px; /* Container for checkboxes */
    }

    .community-threat img {
        width: 220px;
    }

    .bg-onee label,
    .bg-two label,
    .bg-three label,
    .bg-four label,
    .bg-five label {
        font-size: 14px;
        font-weight: 600;
    }

    .bg-onee input, /* These rules apply to all inputs within these wrappers */
    .bg-two input,
    .bg-three input,
    .bg-four input,
    .bg-five input {
        margin-top: 0%; /* Default is 0 anyway unless other styles apply */
    }

    .footer-link h5 {
        font-size: 21px;
    }

    .footer-link ul li a {
        font-size: 14px;
    }
}

/* 992 (often 991px for end of medium devices) */
@media (max-width: 1024px) {
    /* Styles specific to this breakpoint, e.g., tablet portrait */
    /* The mobile nav toggle in new CSS activates at 991px, this is slightly larger */
}

/* 768 (often 767px for end of small devices/tablets) */
@media (max-width: 991px) {
    /* This overlaps with new mobile nav. Original styles here might affect it. */
    .website-main-logo img {
        height: 160px;
    }

    .website-main-logo h2 {
        font-size: 28px;
        text-align: center;
    }

    .fro-nav {
        align-items: flex-start; /* Changed from center */
        margin-top: 10px;
    }

    .bg-nav.navbar-light .navbar-nav .nav-link {
        font-size: 16px;
    }

    .bg-nav.navbar-light .navbar-nav .nav-link.active,
    .navbar-light .navbar-nav .show>.nav-link {
        border-radius: 3px;
    }

    .btn.btn-login,
    .btn.btn-register {
        font-size: 16px;
        padding: 12px 20px;
    }

    .text-temple {
        padding: 30px;
    }

    .text-temple h4 {
        font-size: 16px;
    }

    .text-temple h3 {
        font-size: 18px;
    }

    .second-card-to {
        padding: 20px;
    }

    .calendar .days {
        gap: 6px;
    }

    .bg-red {
        height: -webkit-fill-available; /* Consider alternatives */
    }

    .donate-icon img {
        height: 140px;
        width: 140px;
    }

    .donate-icon h3 {
        font-size: 14px;
        margin-top: 5px;
    }

    .donate-img img {
        height: 275px;
    }

    .bg-brown h6 {
        font-size: 16px;
    }

    .bg-brown-two h3 {
        font-size: 16px;
        padding: 20px;
        margin-bottom: 0% !important;
    }

    .bg-brown-two {
        margin-bottom: 14px;
    }

    .divine a {
        font-size: 16px;
        padding: 0%; /* No padding */
    }

    .footer-img img {
        height: 340px;
    }

    /* .checkbox label - already styled */

    .hindu h3 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .hindu h5 {
        font-size: 14px;
    }

    .hindu-img img {
        border-radius: 16px;
        height: -webkit-fill-available;
        max-width: 200px;
    }

    .checkbox-sp {
        flex-direction: column;
    }

    .checkbox-sp .form-check { /* Bootstrap class, ensure you're using Bootstrap if this is intended */
        margin-bottom: 10px;
    }
}

/* 576 (often 575px for end of extra-small devices) */
@media (max-width: 767px) {
    .website-main-logo img {
        height: 120px;
    }

    .website-main-logo h2 {
        font-size: 20px;
        text-align: center;
    }

    .box-design-for-muharat img {
        max-width: 80px;
        height: 80px;
    }

    .box-design-for-muharat h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .box-design-for-muharat p {
        font-size: 16px;
    }

    .box-design-for-muharat {
        height: 220px;
        width: 200px;
        position: static; /* Consider if absolute positioning is needed on small screens */
        margin-bottom: 20px; /* If static, add margin */
    }

    .image-gallery {
        flex-direction: row;
        /* height: 190px; */ /* Let content dictate height or use auto */
        width: 100%;
        justify-content: space-around; /* Or space-between */
        margin-bottom: 10px;
        flex-wrap: wrap; /* Allow wrapping if images are too wide */
    }

    .image-gallery img {
        height: 190px;
        max-width: 180px !important; /* !important suggests override issues */
        flex-basis: calc(50% - 10px); /* Example for 2 images per row */
        margin-bottom: 10px;
    }

    .services-img {
        flex-direction: column; /* Stack image and text */
        align-items: center;
    }
    .services-img img {
        /* height: 150px; */ /* auto height based on width */
        max-width: 150px;
        margin-right: 0; /* Reset margin */
        margin-bottom: 10px; /* Space below image */
        border-radius: 10px;
    }

    .bg-astrological {
        padding: 20px 10px;
    }

    .bg-astrological h3 {
        font-size: 1.2rem; /* Increased for readability */
        margin-bottom: 10px; /* Added margin */
    }

    .bg-astrological h4 {
        font-size: 1rem;
    }

    .bg-astrological p { margin-bottom: 10px; }
    .dk-astro-list { gap: 10px; }
    .dk-astro-avatar { width: 50px; height: 50px; }

    .bg-temple img {
        height: 35vh !important; /* vh units can be tricky, test thoroughly */
        position: relative; /* If it's just a background decoration */
        width: 100%;
        object-fit: cover;
    }
    .bg-temple {
        display: flex; /* To manage content over bg image */
        flex-direction: column;
    }

    .tt-text h5 {
        font-size: 12px;
        margin: 30px 0; /* Reduced margin */
    }

    .card-design {
        flex-direction: column; /* Stack elements */
        text-align: center;
    }
    .card-txt h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .card-txt a {
        padding: 10px 25px; /* More balanced padding */
        font-size: 14px;
        display: inline-block; /* For button like behavior */
        width: auto; /* Not full width */
    }
    .card-imgs {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .card-imgs img {
        max-width: 90px;
        height: 90px;
    }

    .second-card-to img {
        /* height: -webkit-fill-available; */
        bottom: 0% !important;
        height: 46vh !important;
        top: auto;
        position: relative; /* Or hide on small screens if too complex */
        display: block;
        margin: 20px auto 0;
    }
    .second-card-to {
        text-align: center;
    }

.calendar {
    width: 100%; /* Full width on small screens */
    max-width: 300px; /* Max width for calendar itself */
    margin: 0 auto; /* Center it */
    padding: 10px;
}

    .calendar .days {
        gap: 2px; /* Reduced gap */
    }
    .calendar .day {
        padding: 8px 0;
    }

    .second-card-to h5 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .bg-select {
        padding: 20px;
    }
    .bg-select h3 {
        font-size: 16px;
        text-align: left; /* Or center */
    }

    .bg-select select,
    .bg-select input {
        font-size: 14px;
        width: 100%; /* Make selects/inputs full width */
        margin-bottom: 10px;
    }

    .book-btn {
        padding: 10px 20px; /* Adjusted padding */
        border-radius: var(--border-radius); /* Use variable */
        font-size: 1rem;
        display: block; /* Full width button */
        width: 100%;
        max-width: 250px;
        margin: 10px auto 0;
    }

    .bg-red img {
        width: 100px;
        height: 100px;
    }

    .bg-red h3 {
        font-size: 16px; /* Consistent with other h3s at this size */
    }

    .donate-img img {
        height: auto; /* Let width control height to maintain aspect ratio */
        max-width: 210px; /* Keep it constrained */
        margin: 0 auto 20px; /* Center and add bottom margin */
    }

    .donate-icon img {
        height: 100px;
        width: 100px;
    }

    /* .bg-red h3 - already styled */

    .bg-brown h6 {
        font-size: 14px;
    }

    .bg-brown-two h3 {
        font-size: 14px;
        padding: 14px;
        margin-bottom: 20px !important; /* Reduced margin */
    }

    .bg-brown-two {
        padding-bottom: 30px; /* Significantly reduced */
    }

    .divine h3 {
        font-size: 14px;
    }

    .divine a {
        font-size: 14px;
        /* padding: 0%; */
    }

    .heading_label label {
        font-size: 18px;
        margin-bottom: 10px; /* Add some space */
    }

    .checkbox label {
        font-size: 12px;
    }

    .btn-one {
        font-size: 16px;
        padding: 10px 15px; /* Add padding if it's a button */
        display: block;
        text-align: center;
        /* background-color: var(--accent-color); */ /* Example if it's a button */
        /* color: var(--primary-color); */
    }

    .comunity-txt h3 {
        font-size: 16px;
    }

    .community-threat {
        flex-direction: column; /* Stack image and text */
    }
    .community-threat img {
        width: 100%; /* Full width image */
        max-width: 275px; /* Max width */
        height: auto;
        margin: 0 auto 15px; /* Center and add bottom margin */
    }
    .threat-details {
        margin-left: 0; /* Reset margin */
        padding: 15px;
    }

    .threat-details h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .comunity-txt {
        margin-top: 16px;
    }

    .hindu {
        flex-direction: column; /* Stack elements */
        align-items: center;
        text-align: center;
    }
    .hindu-icon img {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .hindu h3 {
        font-size: 1rem; /* Standardized */
        padding-top: 0; /* Reset */
    }

    .hindu h4 {
        font-size: 0.9rem;
    }

    .hindu h5 {
        font-size: 0.85rem;
    }
    .hindu-img {
        margin-top: 15px;
    }
    .hindu-img img {
        margin: 0 auto; /* Center image if it's in its own block */
    }

    .footer-link h5 {
        font-size: 16px;
    }

    .footer-link ul li a {
        font-size: 14px;
    }

    .footer-bottom h3 {
        font-size: 16px;
    }
}

/* 525 (Adjusting from 575px to 524px for more granular control) */
@media (max-width: 575px) { /* This combines with previous 767px if ranges overlap */
    .image-gallery img {
        height: 140px;
        max-width: 140px !important;
        flex-basis: calc(50% - 5px); /* Tighter spacing for 2-up */
    }
    .maptwo_imagehide{ /* Assuming this class hides an element */
        display: none;
    }

    .bg-temple img {
        height: 26vh !important;
    }

    .second-card-to img {
        height: 35vh !important;
    }

    .bg-select img {
        /* height: 65vh; */ /* This can make section very tall */
        display: none; /* Often better to hide complex bg images on small screens */
    }

    .btn-one {
        font-size: 1rem; /* Standardized */
        padding: 12px 20px; /* Standardized */
    }

    /* .comunity-txt - already handled */

    .community-threat img {
        /* width: 250px; */ /* Let it be 100% of container up to max-width */
        height: auto;
    }

    .hindu-img img {
        max-width: 150px;
    }

    .hindu-icon img {
        max-width: 80px;
        height: 80px;
    }
}

/* 480 (Adjusting to 479px) */
@media (max-width: 524px) { /* Combining with 480 styles */
    .website-main-logo h2 {
        font-size: 18px;
    }

    .website-main-logo img {
        height: 90px;
    }

    .navbar-toggler { /* Bootstrap class, ensure it's used in your HTML */
        font-size: 0.95rem;
    }

    .text-temple {
        padding: 20px 10px; /* Reduced padding */
    }

    .text-temple h3 {
        font-size: 1rem;
    }

    .text-temple h4 {
        font-size: 0.9rem;
    }

    .ff-three { /* Not descriptive */
        flex-direction: column;
    }

    .tt-text h5 {
        font-size: 10px;
        margin: 25px 0; /* Reduced */
    }

    .bg-temple img {
        height: 20vh !important;
    }

    /* Removed empty .checkbox container rule */
    .checkbox label {
        display: block; /* Stack labels if multiple checkboxes are direct children of .checkbox */
        margin-bottom: 10px;
    }


    .btn-one { /* This has been styled multiple times, ensure consistency */
        font-size: 0.9rem;
        padding: 10px 15px;
        background: var(--accent-color); /* Added for visibility */
        color: var(--primary-color);
    }
}

/* 425 (Adjusting to 424px) */
@media (max-width: 479px) {
    .box-design-for-muharat img {
        max-width: 50px;
        height: 50px;
    }

    .box-design-for-muharat {
        height: auto; /* Auto height */
        width: 100%; /* Full width */
        padding: 15px;
    }

    .image-gallery img {
        height: 120px;
        max-width: 120px !important;
        flex-basis: 100%; /* Stack images */
    }

    .img-gallery-two {
        max-width: 110px;
        height: 100px;
        margin: 0 auto 10px; /* Center if stacked */
    }

    .bg-astrological h3 {
        font-size: 1rem; /* Consistent */
        /* margin-bottom: 0%; */ /* Default h3 has margin */
    }

    .second-card-to img {
        display: none; /* Hide complex image */
    }

    .bg-select img{
        display: none;
    }
    .bg-red {
        height: fit-content; /* Or auto */
        padding: 20px;
    }
    .btn-one {
        /* font-size: 12px; */ /* Already set to 0.9rem */
        /* padding: 10px; */
        /* background: #fdba74; */
        margin: 0 5px 10px; /* Add bottom margin if stacking */
    }
    .community-threat img {
        /* width: 250px; */ /* Using 100% and max-width from above */
        height: auto; /* Changed from 90px */
    }
}

/* 375 (No changes from original, review if specific styles needed) */
@media (max-width: 424px) {}

/* 320 (No changes from original, review if specific styles needed) */
@media (max-width: 374px) {}

/* 280 (No changes from original, review if specific styles needed) */
@media (max-width: 319px) {}
.temple-detail {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px 24px 24px;
}
.temple-description {
    max-width: 840px;
    margin: 0 auto;
}
.temple-detail-hero img {
    height: 360px;
    object-fit: cover;
}
.temple-detail-title h1 {
    color: #5e3b1f;
}
.temple-detail-content {
    max-width: 840px;
    margin: 0 auto;
}
.temple-detail-grid {
    margin-top: 10px;
}
.temple-sidebar {
    position: sticky;
    top: 80px;
}
.temple-gallery-side img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}
/* Divine Store Layout */
.store-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}

.category-sidebar {
  background: #fffaf0;
  border: 1px solid #ead8b8;
  border-radius: 12px;
  padding: 16px;
  position: sticky;
  top: 20px;
}
.category-sidebar h2 {
  font-size: 18px;
  margin: 0 0 12px;
  color: #6b5135;
}
.category-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.category-sidebar li + li { margin-top: 8px; }
.category-sidebar a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #5a3b1d;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e8d5b0;
}
.category-sidebar a:hover { background: #fff4e0; }
.category-sidebar a.active {
  background: #f3e3bf;
  border-color: #d9bd7a;
  font-weight: 600;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.product-card {
  background: #ffffff;
  border: 1px solid #ead8b8;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(191, 155, 48, 0.12);
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.product-card .img-wrapper {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff8e5;
  border: 1px solid #f0e0c2;
  margin-bottom: 10px;
}
.product-card .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card .product-title {
  font-size: 16px;
  font-weight: 600;
  color: #6b5135;
  margin: 6px 0 8px;
}
.product-card .price {
  color: #9c7c1a;
  font-weight: 700;
  margin-bottom: 10px;
}
.product-card .btn {
  margin-top: auto;
}

.no-results {
  grid-column: 1 / -1;
  background: #fff8ea;
  border: 1px solid #ead8b8;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  color: #6b5135;
}

@media (max-width: 992px) {
  .store-layout { grid-template-columns: 1fr; }
  .category-sidebar { position: relative; top: 0; }
}
.pooja-booking {
    max-width: 900px;
    margin: 0 auto;
}

.appointment-booking {
    max-width: 900px;
    margin: 0 auto;
}

.hidden {
    display: none !important;
}

.booking-steps {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 16px 0 24px;
}
.booking-steps .step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e8d8c2;
    border-radius: 8px;
    background: #fffaf0;
    color: #5e3b1f;
    font-weight: 600;
}
.booking-steps .step.active {
    border-color: #b3824c;
    background: #fff3e0;
}
.booking-steps .step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #b3824c;
    color: #fff;
    font-weight: 700;
}

.pooja-booking #step-2 {
  padding-bottom: 90px;
}
.pooja-booking #step-1 {
  padding-bottom: 90px;
}

.pooja-booking .sticky-actions {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  width: 100%;
  max-width: 900px;
  background: rgba(255, 250, 240, 0.94);
  border: 1px solid #e8d8c2;
  border-radius: 10px;
  padding: 10px 14px;
  z-index: 1000;
}
.pooja-booking .pooja-card.selected {
  border-color: #b3824c;
  box-shadow: 0 0 0 2px rgba(179,130,76,0.25);
}
.booking-steps .step p {
    margin: 0;
    font-weight: 700;
}

.appointment-step {
    background-color: #faf3e6;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e8d8c2;
    margin-bottom: 16px;
}

.astrologer-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 992px) {
    .astrologer-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
    .astrologer-cards { grid-template-columns: 1fr; }
}

.astrologer-card {
    background: #fffaf0;
    border: 1px solid #eadac1;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.astrologer-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}
.astrologer-card h3 {
    font-size: 1.1rem;
    color: #5e3b1f;
    margin: 6px 0;
}
.astrologer-card p { color: #6c4b2d; margin-bottom: 6px; }
.astrologer-card .rating { color: #b3824c; margin-bottom: 10px; }
.astrologer-card.selected { border-color: #b3824c; box-shadow: 0 0 0 3px rgba(179,130,76,0.15); }
.booking-step {
    background-color: #faf3e6;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e8d8c2;
    margin-bottom: 16px;
}

.booking-summary {
    background: #fffaf0;
    border: 1px solid #eadac1;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
}

.booking-summary .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #eadac1;
}
.booking-summary .summary-item:last-child { border-bottom: 0; }
.booking-summary .summary-item.total span:last-child { font-weight: 700; color: #5e3b1f; }
/* Homepage: Professional cards for Rare/Ancient/Donations */
.dk-resource-card.card-rare    { border-top: 4px solid #8b5cf6; background: linear-gradient(180deg,#f5f3ff,#f0eeff); }
.dk-resource-card.card-ancient { border-top: 4px solid #b45309; background: linear-gradient(180deg,#fff7ed,#fff3e0); }
.dk-resource-card.card-ehundi  { border-top: 4px solid #10b981; background: linear-gradient(180deg,#ecfdf5,#e7faf3); }
.dk-resource-card.card-trust   { border-top: 4px solid #1d4ed8; background: linear-gradient(180deg,#eff6ff,#eaf2ff); }
.dk-resource-card.card-donate  { border-top: 4px solid #b91c1c; background: linear-gradient(180deg,#fef2f2,#feeaea); }

/* Ensure consistent image presentation inside resource cards */
.dk-resource-card .img-wrapper {
  width: 100%;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff8e5;
  border: 1px solid #f0e0c2;
}
.dk-resource-card .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card-specific button accents */
.card-rare .btn   { background-image: linear-gradient(135deg,#6d28d9,#4c1d95); box-shadow: 0 4px 12px rgba(76,29,149,.35); }
.card-ancient .btn{ background-image: linear-gradient(135deg,#b45309,#7c2d12); box-shadow: 0 4px 12px rgba(124,45,18,.35); }
.card-ehundi .btn { background-image: linear-gradient(135deg,#047857,#065f46); box-shadow: 0 4px 12px rgba(6,95,70,.35); }
.card-trust .btn  { background-image: linear-gradient(135deg,#1d4ed8,#1e3a8a); box-shadow: 0 4px 12px rgba(30,58,138,.35); }
.card-donate .btn { background-image: linear-gradient(135deg,#b91c1c,#7f1d1d); box-shadow: 0 4px 12px rgba(127,29,29,.35); }
.dk-muhurat-box {
    background: linear-gradient(135deg, #fff6e5, #ffe9c2);
    border: 1px solid #e8d8c2;
    box-shadow: 0 6px 18px rgba(96,64,32,0.12);
    border-top: 4px solid #b45309;
}
.dk-muhurat-accent {
    height: 6px;
    width: 100%;
    border-radius: 6px;
    background-image: linear-gradient(135deg,#f59e0b,#b45309);
    margin-bottom: 10px;
}
.dk-muhurat-box h3 { color: #500724; font-weight: 700; }
.dk-muhurat-box .btn { min-width: 160px; padding: 10px 14px; border-radius: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; margin-top: 8px; position: relative; z-index: 1; }
.dk-muhurat-box .btn.dk-resource-btn { background-image: linear-gradient(135deg,#b45309,#7c2d12); color:#ffffff !important; box-shadow: 0 6px 14px rgba(124,45,18,0.35); }
.dk-muhurat-box .btn.dk-resource-btn i { color: inherit; }
.astro-register-title { white-space: nowrap; }
.astro-link { white-space: nowrap; }

.second-card .card-txt { text-align: left; }
.second-card .card-txt .astro-register-title { font-size: 18px; margin-bottom: 8px; }

@keyframes astroBlink { 0%,100%{ opacity: 1; } 50%{ opacity: 0.6; } }
.second-card .card-txt a.dk-resource-btn { animation: astroBlink 1.1s ease-in-out infinite; }
.calendar-header { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 10px; }
.calendar-header .cal-title { font-weight: 900; color: #500724; font-size: 2rem; text-align: center; }
.calendar-header .calendar-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; column-gap: 14px; }
.calendar-header .cal-prev { justify-self: start; padding-right: 6px; }
.calendar-header .cal-next { justify-self: end; padding-left: 10px; }
.calendar-header .month-subtitle { justify-self: center; font-weight: 800; color: #7c2d12; font-size: 1.2rem; }
.calendar-header .cal-prev, .calendar-header .cal-next { font-weight: 700; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); text-decoration: none; }
.calendar-header .cal-prev:hover, .calendar-header .cal-next:hover { text-decoration: underline; }
.calendar-festivals { margin-top: 10px; }
.calendar-festivals-title { font-weight: 800; color: #500724; margin-bottom: 6px; }
.calendar-festivals ul { padding-left: 10px; margin: 0; }
.calendar-festivals li { color: #500724; font-size: 1rem; line-height: 1.4; font-weight: 500; }
.calendar-festivals .fest-date { color: #b45309; font-weight: 700; }
.calendar-festivals .fest-date { display: inline-block; padding: 2px 8px; border-radius: 12px; background: linear-gradient(135deg,#f8d68c,#eab308); color: #500724; margin-right: 6px; }

/* Compact calendar sizing */
.calendar { width: 100%; max-width: 320px; padding: 8px; margin: 0; }
/* Left align the calendar section inside the card */
.second-card-to { text-align: left; }

/* Rectangular ad block */
.dk-ad-rect { width: 100%; height: 160px; border-radius: 12px; background: linear-gradient(135deg,#fff6e5,#ffe9c2); border: 1px solid #e8d8c2; display: flex; align-items: center; justify-content: center; color: #7c2d12; font-weight: 800; letter-spacing: 0.5px; }
.calendar .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar .day-name { font-weight: 700; color: #6b4b2d; text-align: center; }
.calendar .day { text-align: center; padding: 8px 0; border-radius: 8px; }
.calendar .day.calendar-today { background: linear-gradient(135deg,#f8d68c,#eab308); color: #500724; font-weight: 800; box-shadow: 0 2px 8px rgba(124,45,18,0.18); }
.hindu-body { flex: 1; min-width: 0; }
.hindu-img { display: flex; align-items: center; flex-shrink: 0; }
.dk-ad-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fffaf0;
  border: 1px solid #ead8b8;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 14px rgba(191, 155, 48, 0.12);
  flex-wrap: wrap;
}
.dk-ad-content { flex: 1 1 300px; }
.dk-ad-content h3 { color: #6b5135; font-weight: 800; }
.dk-ad-image { flex: 0 0 auto; display: flex; align-items: center; }
.dk-ad-image img { height: 180px; max-width: 320px; object-fit: cover; border-radius: 12px; }

@media (max-width: 768px) {
  .dk-ad-image img { height: 140px; max-width: 100%; }
}