:root {
  --primary: #ff4500;
  --background: #ffefe5;
  --card-bg: rgba(250, 249, 248, 0.84);
  --text: #333333;
  --text-secondary: #666666;
  --border: #e0e0e0;
  --header-bg: rgba(255, 255, 255, 0.8);
  --footer-bg: rgba(255, 255, 255, 0.584);
  --shadow: rgba(0, 0, 0, 0.05);
  --menu-bg: rgba(255, 255, 255, 0.95);
  --nav-height: 70px;
  --bg-dark: #080814;
  --bg1: #fffcfc;
}

[data-theme="dark"] {
  --background: #111121;
  --card-bg: rgba(0, 0, 0, 0.392);
  --text: #f1f1f1;
  --text-secondary: #cccccc;
  --border: #333333;
  --header-bg: rgba(0, 0, 0, 0.466);
  --footer-bg: rgba(0, 0, 0, 0.586);
  --shadow: rgba(0, 0, 0, 0.2);
  --menu-bg: rgba(0, 0, 0, 0.95);
  --bg1: #131313;
}

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

body {
  font-family: "Noto Sans Devanagari", sans-serif;
  background-color: var(--background);
  color: var(--text);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding-top: var(--nav-height);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Styles */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  border-top: 3px solid var(--primary);
  border-bottom: 1px solid var(--border);
  height: var(--nav-height);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  display: flex;
  gap: 1px;
  align-items: center;
}

.logo img {
  height: 50px;
  width: auto;
}

/* Main Navigation */
.main-nav {
  display: flex;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 30px;
  align-items: center;
}

.nav-link {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  transition: color 0.3s ease;
  padding: 5px 0;
  position: relative;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: transform 0.3s ease;
  font-size: 22px;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  position: relative;
  color: var(--text);
  font-size: 22px;
}

.hero {
  padding: 50px 0 40px;
  position: relative; /* This is crucial for positioning the pseudo-element */
  background-image: url("/assets/images/bg.webp");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    0,
    0,
    0,
    0.7
  ); /* The 0.5 value creates 50% transparency */
  z-index: 1; /* Puts the overlay on top of the background, but beneath the hero content */
}

/* Add this to ensure the hero's content is visible on top of the overlay */
.hero > * {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  line-height: 1.2;
  color: #fff;
}

.hero p {
  font-size: 1.1rem;
  color: #fff;
}

.btn-group {
  display: flex;
  margin-top: 1em;
  gap: 15px;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  cursor: pointer;
  border: none;
  font-size: 1.3rem;
}

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

.btn-primary:hover {
  background-color: #e03d00;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 69, 0, 0.2);
}

.btn-secondary {
  background-color: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background-color: var(--background);
  transform: translateY(-2px);
}

/* Cards Section */
.cards {
  padding: 50px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.2rem;
}

/* Astrology Dark Gradient Backgrounds - Perfect for white text */

.bg1 {
  background: linear-gradient(305deg, #3f050c 0%, #6c0d00 100%);
}
.bg2 {
  background: linear-gradient(135deg, #1f163e 0%, #2f0f60 100%);
}
.bg3 {
  background: linear-gradient(135deg, #1e3c72 0%, #051f4b 100%);
}
.bg4 {
  background: linear-gradient(135deg, #2d1b69 0%, #154642 100%);
}
.bg5 {
  background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
}

.bg6 {
  background: linear-gradient(135deg, #232526 0%, #414345 100%);
}
.bg7 {
  background: linear-gradient(135deg, #1f1c2c 0%, #363249 100%);
}
.bg8 {
  background: linear-gradient(135deg, #2c3e50 0%, #053758 100%);
}
.bg9 {
  background: linear-gradient(135deg, #000428 0%, #004e92 100%);
}
.bg10 {
  background: linear-gradient(135deg, #07414e 0%, #631f85 30%, #57050b 100%);
}

.bg11 {
  background: linear-gradient(135deg, #111a41 0%, #392250 100%);
}
.bg12 {
  background: linear-gradient(135deg, #2193b0 0%, #112225 100%);
}
.bg13 {
  background: linear-gradient(135deg, #cc2b5e 0%, #753a88 100%);
}
.bg14 {
  background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
}
.bg15 {
  background: linear-gradient(135deg, #134e5e 0%, #25412c 100%);
}

.bg16 {
  background: linear-gradient(135deg, #5c258d 0%, #244956 100%);
}
.bg17 {
  background: linear-gradient(135deg, #25272e 0%, #434a57 100%);
}
.bg18 {
  background: linear-gradient(135deg, #232526 0%, #260f36 100%);
}
.bg19 {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
.bg20 {
  background: linear-gradient(135deg, #523980 0%, #0b2540 100%);
}

.bg21 {
  background: linear-gradient(135deg, #172a7c 0%, #764ba2 100%);
}
.bg22 {
  background: linear-gradient(135deg, #6a0075 0%, #f5576c 100%);
}
.bg23 {
  background: linear-gradient(135deg, #003869 0%, #004e52 100%);
}
.bg24 {
  background: linear-gradient(135deg, #00531c 0%, #023b30 100%);
}
.bg25 {
  background: linear-gradient(135deg, #50051b 0%, #4b4000 100%);
}

.bg26 {
  background: linear-gradient(195deg, #062c2a 0%, #3a0617 100%);
}
.bg27 {
  background: linear-gradient(135deg, #963236 0%, #862066 100%);
}
.bg28 {
  background: linear-gradient(135deg, #2f1c01 0%, #751f03 100%);
}
.bg29 {
  background: linear-gradient(135deg, #1d025c 0%, #4c0036 100%);
}
.bg30 {
  background: linear-gradient(135deg, #460f00 0%, #620062 100%);
}

.bg31 {
  background: linear-gradient(135deg, #2d1b69 0%, #11998e 100%);
}
.bg32 {
  background: linear-gradient(135deg, #360033 0%, #0b8793 100%);
}
.bg33 {
  background: linear-gradient(135deg, #159957 0%, #155799 100%);
}
.bg34 {
  background: linear-gradient(135deg, #000428 0%, #004e92 100%);
}
.bg35 {
  background: linear-gradient(135deg, #56ab2f 0%, #014b30 100%);
}

.bg36 {
  background: linear-gradient(135deg, #b92b27 0%, #1565c0 100%);
}
.bg37 {
  background: linear-gradient(135deg, #8a2387 0%, #e94057 50%, #f27121 100%);
}
.bg38 {
  background: linear-gradient(135deg, #16222a 0%, #3a6073 100%);
}
.bg39 {
  background: linear-gradient(135deg, #1488cc 0%, #2b32b2 100%);
}
.bg40 {
  background: linear-gradient(135deg, #50377f 0%, #006d4a 100%);
}

.bg41 {
  background: linear-gradient(135deg, #3c1053 0%, #820550 100%);
}
.bg42 {
  background: linear-gradient(135deg, #214392 0%, #182848 100%);
}
.bg43 {
  background: linear-gradient(135deg, #61002f 0%, #753300 100%);
}
.bg44 {
  background: linear-gradient(135deg, #002e3b 0%, #003d88 100%);
}
.bg45 {
  background: linear-gradient(135deg, #6a0124 0%, #8c2300 100%);
}

.bg46 {
  background: linear-gradient(135deg, #2e0466 0%, #34034e 50%, #481601 100%);
}
.bg47 {
  background: linear-gradient(135deg, #542d6a 0%, #45032f 100%);
}
.bg48 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.bg49 {
  background: linear-gradient(135deg, #521f58 0%, #6b1521 100%);
}
.bg50 {
  background: linear-gradient(135deg, #193650 0%, #0b5c61 100%);
}
.bg51 {
  background: linear-gradient(135deg, #284d70 0%, #212153 100%);
}
.bg52 {
  background: linear-gradient(135deg, #496700 0%, #668e00 100%);
}
.bg53 {
  background: linear-gradient(-35deg, #170053 0%, #00808e 100%);
}

/* Optional: Add some mystical patterns for enhanced astrology theme */
.bg1,
.bg2,
.bg3,
.bg4,
.bg5 {
  position: relative;
}

.bg1::before,
.bg2::before,
.bg3::before,
.bg4::before,
.bg5::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 40% 60%,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    );
  background-size: 200px 200px, 180px 180px, 220px 220px;
  pointer-events: none;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.card-grid a {
  border-radius: 12px;
  padding: 30px 10px;
  box-shadow: 0 4px 12px var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border: 1px solid var(--border);
}

.card-grid a:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px var(--shadow);
}

.card-grid h2 {
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.card-grid p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  opacity: 0.8;
}

/* API Data Section */
.api-section {
  padding: 60px 0;
  background-color: var(--card-bg);
}

.horoscope-placeholder {
  padding: 40px;
  background-color: var(--background);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow);
  margin-top: 30px;
}

/* FAQ Section */
.faq {
  padding: 80px 0;
}

.faq-item {
  margin-bottom: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  background-color: var(--card-bg);
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: var(--background);
}

.faq-question::after {
  content: "↓";
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: var(--text-secondary);
}

.faq-item.active .faq-answer {
  padding: 20px;
  max-height: 200px;
}

/* Footer */
footer {
  background-color: var(--footer-bg);
  padding: 60px 0 20px;
  border-top: 1px solid var(--border);
  margin-top: 2em;
}

.footer-content {
  display: grid;

  gap: 40px;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "first first"
      "second third";
  }

  .footer-content > div:nth-child(1) {
    grid-area: first;
  }
  .footer-content > div:nth-child(2) {
    grid-area: second;
  }
  .footer-content > div:nth-child(3) {
    grid-area: third;
  }
}

.footer-about {
  grid-column: 1;
}

.footer-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 15px;
  display: block;
}

.footer-about p {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.footer-links h3 {
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.footer-links ul {
  list-style: none;
}

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

.footer-links a {
  text-decoration: none;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--primary);
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Responsive Styles */
@media (max-width: 991px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--menu-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px var(--shadow);
    border-top: 1px solid var(--border);
    z-index: 999;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .main-nav.active {
    max-height: 300px;
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
    padding: 15px 0;
  }

  .nav-list li {
    width: 100%;
  }

  .nav-link {
    display: block;
    padding: 12px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .nav-link:hover {
    background-color: var(--primary);
    color: white;
  }

  .nav-link::after {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
  }
}

@media (min-width: 992px) {
  .mobile-menu-toggle {
    display: none;
  }
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-content {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .footer-about {
    grid-column: auto;
  }
}

.marginBlock {
  margin-block: 20px;
}

.ZodiacSigns {
  text-align: center;
  padding: 2em 0;
}

.zodiac-signs-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  padding: 20px;
  text-align: center;
}

.zodiac-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--text);
}

.zodiac-sign:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.zodiac-sign .zodiac-image {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-bottom: 10px;
}

.zodiac-sign h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.zodiac-sign p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .zodiac-signs-links {
    grid-template-columns: repeat(2, 1fr);
    padding: 5px;
    gap: 15px;
  }

  .zodiac-sign {
    padding: 12px;
  }

  .zodiac-sign .zodiac-image {
    width: 55px;
    height: 55px;
  }

  .zodiac-sign p {
    font-size: 12px;
  }
}

.hero-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.hero-left {
  flex: 0 0 70%;
}

.hero-right {
  flex: 0 0 30%;
}

.hero-right img {
  width: 100%;
  height: auto;
  animation-name: spin;
  animation-duration: 30s; /* Adjust this value for slower/faster spin */
  animation-iteration-count: infinite; /* Keeps the animation going forever */
  animation-timing-function: linear; /* Ensures a constant speed */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .hero-left,
  .hero-right {
    flex: 0 0 100%;
  }
}

.zodiac-sign-detail {
  text-align: center;
  padding: 5px 2em 2em 2em;
  border: var(--border) solid 1px;
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow);
  background-color: var(--background);
  color: var(--text);
}

.sidebar-sign {
  padding: 1em;
  border: var(--border) solid 1px;
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow);
  background-color: var(--card-bg);
}

.zodiac-sign-detail h2 {
  margin: 0px;
  padding: 0px;
}

.zodiac-content {
  margin-top: 1em;
}

.view {
  display: flex; /* Use flexbox for easy layout */
  flex-direction: row; /* Arrange items in a row on desktop */
  gap: 1em;
}

.view_one {
  width: 70%;
}

.view_two {
  width: 30%;
}

.view_two a,
.view_sidebar a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  transition: color 0.3s ease;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
}

.view_two a:hover {
  color: var(--primary);
}

.view_two a.active,
.view_sidebar a.active {
  color: var(--primary);
}

.sign_related {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-block: 2em;
  flex-wrap: wrap;
}

.sign_related a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1em;
  text-decoration: none;
  color: var(--text);
  padding: 1em;
  border: var(--border) solid 1px;
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow);
  min-width: 200px;
}

.sign_related a:hover {
  color: var(--primary);
}

.sign_related a i {
  font-size: 3em;
}

.main-title {
  text-align: center;
  margin-top: 1em;
}

.ish3 {
  text-align: center;
  margin: 0px;
  padding: 0px;
  margin-bottom: 10px;
}

.main-paragraph {
  text-align: center;
  margin-bottom: 1em;
}

.zodiac-content {
  max-height: 200px; /* default for desktop */
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease;
}

.fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--background));
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.read-more-btn,
.save-img-btn {
  margin-top: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.read-more-btn:hover,
.save-img-btn:hover {
  background: #333;
}

.btn-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.nakshatra {
  margin-bottom: 2em;
}
.nakshatra-content {
  padding: 5px 2em 2em 2em;
  border: var(--border) solid 1px;
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow);
  background-color: var(--background);
  color: var(--text);
}

/* Headings */
.nakshatra-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 1.2em 0 0;
  line-height: 1.3;
  display: inline-block;
  padding-bottom: 0.2em;
}
/* Headings */
.nakshatra-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.2em 0 0.6em;
  line-height: 1.3;
  border-bottom: 2px solid currentColor;
  display: inline-block;
  padding-bottom: 0.2em;
}

/* Paragraphs */
.nakshatra-content p {
  margin: 0.8em 0;
  text-align: justify;
}

/* Tables */
.nakshatra-content table,
.two table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 0.95rem;
}

.nakshatra-content table th,
.nakshatra-content table td,
.two table th,
.two table td {
  border: 1px solid var(--border);
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
}

.nakshatra-content table th {
  font-weight: 600;
}

.nakshatra-content table tr:nth-child(even) {
  opacity: 0.9; /* keeps it subtle, works in both light & dark */
}

.nakshatra_img_name {
  display: flex;
  align-items: center;
  gap: 5px;
}

.nakshatra_img_name img {
  width: 35px;
  border-radius: 50%;
  border: 1px solid var(--border);
}
.nakshatra-image {
  border-radius: 50%;
  border: 1px solid var(--border);
}
/* Media query for mobile devices */
@media screen and (max-width: 768px) {
  .nakshatra-content {
    padding: 0px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
  }

  .nakshatra-content table {
    font-size: 0.75rem;
  }

  .view {
    flex-direction: column; /* Stack items vertically on mobile */
  }
  .view_one,
  .view_two {
    width: 100%; /* Make both sections full width on mobile */
  }

  .sign_related a {
    gap: 2px;

    padding: 10px 5px;
    font-size: 15px;
    min-width: 130px;
  }

  .container {
    width: 100%;

    padding: 0 1em;
  }

  .zodiac-content {
    max-height: 500px;
  }

  .fade-overlay {
    height: 150px;
  }
}

/* Headings */
.main_content h2,
.main_content h3,
.main_content h4,
.main_content h5 {
  margin: 1.25em 0 0.5em;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  scroll-margin-top: 90px; /* helpful for anchor links under fixed headers */
}

/* Proportional sizes using clamp for responsiveness */
.main_content h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
}
.main_content h3 {
  font-size: clamp(1.125rem, 1.9vw, 1.4rem);
}
.main_content h4 {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
}
.main_content h5 {
  font-size: clamp(0.95rem, 1.3vw, 1rem);
}

.main_content p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.7;
}

.main_content ul,
.main_content ol {
  margin: 0 0 1rem 1.25rem;
  padding: 0;
  line-height: 1.6;
}

.ch-col {
  background-color: var(--card-bg);
  display: flex;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  padding: 1em;
  border: 2px dashed var(--border);
  border-radius: 10px;
}

.is_center {
  text-align: center;
  margin-block: 1em;
}

.tithi_content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

.tithi_content .one img {
  width: 150px;
  height: auto;
  display: block;
  border-radius: 50%;
}
.tithi_content .one {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Mobile: single column */
@media (max-width: 768px) {
  .tithi_content {
    grid-template-columns: 1fr;
  }
}
#chweb_result.loading .tithi_content,
#chweb_result.loading .pravishte-gate,
#chweb_result.loading #table-data {
  opacity: 0.1;
}
#chweb_result.loading {
  pointer-events: none;
  position: relative;
}

#chweb_result.loading::after {
  content: "⏳ Loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;

  animation: blinker 0.4s linear infinite;
}

.ch_form {
  display: flex;
  flex-wrap: wrap; /* side by side on desktop, stack on mobile */
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 500px;
  margin: 40px auto;
  padding: 10px;
  box-sizing: border-box;
}

/* Style date input */
.ch_form input[type="date"] {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s, color 0.3s;
}

/* Remove default icon space */
.ch_form input[type="date"]::-webkit-inner-spin-button,
.ch_form input[type="date"]::-webkit-clear-button {
  display: none;
}

.ch_form input[type="date"]::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml;utf8,<svg fill='%23ccc' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-1.99.9-1.99 2L3 20c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/></svg>")
    no-repeat center;
  background-size: 20px 20px;
  opacity: 0.7;
  cursor: pointer;
  border-radius: 4px;
}

/* Dark mode icon (white) */
[data-theme="dark"]
  .ch_form
  input[type="date"]::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml;utf8,<svg fill='%23f1f1f1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-1.99.9-1.99 2L3 20c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/></svg>")
    no-repeat center;
  background-size: 20px 20px;
  opacity: 0.9;
}

/* Popup calendar background (Firefox only) */
[data-theme="dark"] input[type="date"] {
  color-scheme: dark;
}

.ch_form .submit_button,
.sbtn {
  padding: 12px 5px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
  flex-shrink: 0; /* keeps button size consistent */
  min-width: 110px;
}

.ch_form .submit_button:hover,
.sbtn:hover {
  filter: brightness(0.9);
}

.ch_form .submit_button:disabled,
.sbtn:disabled {
  background-color: #8e8e8e;
  pointer-events: none;
  cursor: not-allowed;
}

/* Mobile: stack vertically */
@media (max-width: 480px) {
  .ch_form {
    flex-direction: column;
    align-items: stretch;
  }

  .ch_form .submit_button {
    width: 100%;
  }
}

.blink {
  animation: blinker 0.4s linear infinite;
}

@keyframes blinker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.cricle {
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.pravishte-gate {
  text-align: center;
  padding: 2em 1em;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: rgba(255, 68, 0, 0.306);
  margin-bottom: 2em;
}

.pravishte-gate .number {
  font-size: 4em;
  font-weight: 700;
}

.yoga {
  font-size: 2.5em;
  font-weight: 700;
}

.karan {
  font-size: 2em;
  font-weight: 700;
  max-width: 700px;
  margin: 1em auto;
}

/* Scope styles only to .main_ch_form */
.main_ch_form {
  background: var(--card-bg);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 6px var(--shadow);

  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Flex container */
.main_ch_form .ch_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Default (desktop) → 33% each */
.main_ch_form .ch_flex > div {
  flex: 0 0 calc(33.33% - 12px);
  max-width: 33.33%;
  position: relative; /* for dropdown */
}

.main_ch_form label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  display: block;
}

.main_ch_form input[type="text"],
.main_ch_form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  color: var(--text);
  background: var(--background);
  box-sizing: border-box;
}

.main_ch_form input[type="text"]::placeholder {
  color: var(--text-secondary);
}

/* Autocomplete dropdown positioned under city input */
.main_ch_form #cltyResult {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: var(--background);
  display: none;
  z-index: 1000;
}

.main_ch_form #cltyResult div {
  padding: 10px;
  cursor: pointer;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.main_ch_form #cltyResult div:last-child {
  border-bottom: none;
}

.main_ch_form #cltyResult div:hover {
  background: var(--card-bg);
}

/* Submit button */
.main_ch_form .submit_button {
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  max-width: 300px;
  min-width: 250px;
  margin: auto;
  transition: background 0.3s ease;
}

.main_ch_form .submit_button:hover {
  background: #e03e00;
}

.main_ch_form .submit_button:disabled {
  background-color: #8e8e8e;
  pointer-events: none;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  /* City full width */
  .main_ch_form .ch_flex > div:first-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Month + Year half width each */
  .main_ch_form .ch_flex > div.year,
  .main_ch_form .ch_flex > div.month {
    flex: 0 0 calc(50% - 12px);
    max-width: 50%;
  }
}

/* Calendar Table Styles - Only applies under .ch_table */
.ch_table {
  color: var(--text);
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--shadow);
}

.ch_table .table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  background-color: var(--card-bg);
  color: var(--text);
}

.ch_table .table-bordered {
  border: 1px solid var(--border);
}

.ch_table .table-bordered th,
.ch_table .table-bordered td {
  border: 1px solid var(--border);
  padding: 12px 8px;
  vertical-align: top;
}

/* Header styling */
.ch_table thead th {
  background-color: var(--primary);
  color: white;
  font-weight: 600;
  text-align: center;
  padding: 15px 8px;
  font-size: 14px;
  border-color: var(--primary);
}

/* Cell content styling */
.ch_table td {
  position: relative;
  min-height: 150px;
  background-color: var(--card-bg);
  color: var(--text);
}

.ch_table td .number {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ch_table td .number span {
  display: flex;
  gap: 5px;
  align-items: center;
}

.number span:nth-child(1) {
  color: var(--primary);
  opacity: 0.5;
}
.number span:nth-child(2) {
  font-size: 30px;
}

/* Small text details */
.ch_table .small-text {
  font-size: 11px;
  line-height: 1.3;
  margin-top: 8px;
  color: var(--text-secondary);
}

.ch_table .small-text b {
  color: var(--text);
  font-weight: 600;
}

.ch_table .small-text span {
  color: var(--primary);
}

/* Old day styling - disabled appearance */
.ch_table .old-day {
  opacity: 0.5;
  background-color: var(--background);
  color: var(--text-secondary);
}

.ch_table .old-day .small-text {
  opacity: 0.7;
}

.ch_table .old-day .small-text b {
  color: var(--text-secondary);
}

.ch_table .old-day .small-text span {
  color: var(--text-secondary);
}

/* Today highlighting */
.ch_table .today-day {
  background-color: rgba(255, 69, 0, 0.1);
  border: 2px solid var(--primary);
  font-weight: bold;
}

/* Moon phase icons */
.ch_table img {
  vertical-align: middle;
  margin-right: 5px;
  opacity: 0.8;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .hideonmobile {
    display: none;
  }

  .table-responsive .ch_table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  .ch_table .table {
    min-width: 700px; /* Ensure table doesn't shrink too much */
  }

  .ch_table .table-bordered th,
  .ch_table .table-bordered td {
    padding: 10px 6px;
    min-width: 100px;
  }

  .ch_table .small-text {
    font-size: 10px;
    text-align: left;
    margin-top: 6px;
  }

  .ch_table thead th {
    font-size: 12px;
    padding: 12px 6px;
  }
}

@media (max-width: 480px) {
  .ch_table .table-bordered th,
  .ch_table .table-bordered td {
    padding: 8px 4px;
    min-width: 90px;
  }

  .ch_table .small-text {
    font-size: 9px;
  }

  .ch_table thead th {
    font-size: 11px;
    padding: 10px 4px;
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .ch_table .today-day {
  background-color: rgba(255, 69, 0, 0.2);
}

[data-theme="dark"] .ch_table img {
  filter: brightness(0.8);
}

/* Ensure proper text contrast in dark mode */
[data-theme="dark"] .ch_table .old-day {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Scrollbar styling for better UX */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: var(--background);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

#table-data table {
  border-collapse: collapse;
  width: 100%;
  margin-block: 1em;
  box-shadow: var(--border) 0px 1px 4px, var(--border) 0px 0px 0px 3px;
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 1em;
}

#table-data td,
#table-data th {
  border: 1px solid var(--border);
  padding: 8px;
}

#table-data tr:nth-child(even) {
  background-color: var(--card-bg);
}

#table-data th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--bg-dark);
  color: #fff;
}

.is_center {
  text-align: center;
}

.chv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background-color: var(--card-bg);
  padding: 1em;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 1em;
}

.chv .side2 > div {
  text-align: center;
  width: 130px;
  padding: 6px;
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(11, 116, 222, 0.06),
    rgba(11, 116, 222, 0.02)
  );
}

.chv .side2 h2 {
  margin: 0;
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
}

.side1 div h4:first-child {
  font-size: 20px;
}

.view_content {
  display: flex;
  gap: 20px;
  margin-block: 1em;
}

.view_main {
  flex: 1;
  width: 70%;
}

.view_sidebar {
  width: 30%;
  position: sticky;
  top: 80px;
  height: fit-content;
  margin-top: 1em;
}

/* Mobile styles */
@media (max-width: 768px) {
  .view_content {
    flex-direction: column;
    gap: 10px; /* Optional: smaller gap on mobile */
  }

  .view_main {
    width: 100%;
    flex: none;
  }

  .view_sidebar {
    width: 100%;
    position: relative; /* Remove sticky on mobile */
    top: auto;
  }
}
/* Astrology Quote Styling */
.astro-quote-block {
  text-align: center;
  margin: 1em 1px 2em 1px;
  padding: 20px;
  border-left: 4px solid var(--primary);
  border-right: 4px solid var(--primary);
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255, 157, 130, 0.3);
}

.astro-quote-block h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: var(--primary);
}

.astro-quote {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--primary);
  margin: 10px 0;
  position: relative;
}

.astro-quote::before,
.astro-quote::after {
  content: "✦";
  color: var(--primary);
  font-size: 1.4rem;
  margin: 0 6px;
}

.astro-author {
  font-size: 1rem;
  font-style: italic;
  color: #2d71aa;
  margin-top: 12px;
}

.lytics-category-title {
  font-size: 24px;
  margin: 30px 0 15px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 5px;
  color: var(--primary);
}

.lytics-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centers items in each row */
  gap: 20px;
}

.lytics-card-grid a {
  flex: 1 1 220px; /* minimum 220px, grows if space */
  max-width: 250px;

  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  text-align: left;
}
.lytics-card-grid a:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.lytics-card-img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
}

.lyrics {
  flex: 1;
  font-size: 1rem;
  color: var(--text);
  margin: 0;
  line-height: 2;
  font-weight: 600;
}

.ag {
  margin: 2em 0;
}

.is_lyrics {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text);
  margin: 1em auto;

  padding: 0 1em;
  font-weight: 500;
  background: #ffebe3;
  border-radius: 12px;
  border: 4px solid var(--primary);
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

hr.dpHorizontalLine {
  border-top: 1px solid red;
  margin-bottom: 2em;
}

#table-data table {
  margin-bottom: 2em;
}

.is_lyrics h1,
.is_lyrics img {
  margin-bottom: 1em;
}

.related_one {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  padding: 1em 10px 2em 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow);

  transition: transform 0.2s, box-shadow 0.2s;
}

.related_one h2 {
  font-weight: 700;
  text-align: center;
  color: var(--primary);
  margin-bottom: 1em;
}

.ch_container_404 {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-block: 2em;
}

.ch_content_404 {
  text-align: center;

  padding: 40px;
}

.ch_code_404 {
  font-size: 8rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.ch_message_404 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}

.ch_desc_404 {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
  line-height: 1.6;
}

.ch_button_404 {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--primary);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.ch_button_404:hover {
  background-color: #e03d00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.3);
}

.ch_button_404:active {
  transform: translateY(0);
}
.is_content {
  margin-top: 2em;
}

.is_content p {
  margin-bottom: 2em;
}

.is_content ul {
  list-style-type: disc; /* Options: disc, circle, square, none */
  margin: 1em 0; /* Vertical margin for spacing */
  padding-left: 2em; /* Indentation for list items */
  font-size: 16px; /* Font size for list items */
  line-height: 1.5; /* Line height for readability */
  color: #333; /* Text color */
}

/* Styling for list items in unordered lists */
.is_content ul li {
  margin-bottom: 0.5em; /* Space between list items */
}

/* Styling for nested unordered lists */
.is_content ul ul {
  list-style-type: circle; /* Different marker for nested lists */
  padding-left: 1.5em; /* Indent nested lists further */
}

/* General styling for ordered lists (<ol>) */
.is_content ol {
  list-style-type: decimal; /* Options: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none */
  margin: 1em 0; /* Vertical margin for spacing */
  padding-left: 2em; /* Indentation for list items */
  font-size: 16px; /* Font size for list items */
  line-height: 1.5; /* Line height for readability */
  color: #333; /* Text color */
}

/* Styling for list items in ordered lists */
.is_content ol li {
  margin-bottom: 0.5em; /* Space between list items */
}

/* Styling for nested ordered lists */
.is_content ol ol {
  list-style-type: lower-alpha; /* Different numbering for nested lists */
  padding-left: 1.5em; /* Indent nested lists further */
}

.toc {
  background: var(--card-bg);
  border-left: 4px solid var(--primary);
  padding: 12px 16px;
  border-radius: 6px;
}
.toc a {
  display: block;
  padding: 6px 0;
  color: var(--text);
  text-decoration: none;
}
.ch_mantra {
  border-left: 4px solid var(--primary);
  padding: 12px 18px;
  margin: 18px 0;
  background: var(--card-bg);
  border-radius: 6px;
}
.mantra {
  font-weight: 600;
  font-size: 1.05rem;
  margin: 8px 0;
}
.sub {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-top: 8px;
}
pre {
  background: var(--background);
  padding: 12px;
  border-radius: 6px;
  overflow: auto;
  white-space: pre-wrap;
}
a {
  color: var(--primary);
  text-decoration: none;
}
.note {
  font-size: 0.93rem;
  color: var(--text-secondary);
  margin-top: 10px;
}

/* Scope everything to .zodiac-form */
.zodiac-form {
  margin: 20px auto;
  max-width: 900px;
}

.zodiac-form .zf-container {
  display: flex;
  justify-content: center;
}

.zodiac-form .zf-card {
  background: var(--card-bg);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow);
  text-align: center;
  width: 100%;
}

.zodiac-form .zf-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.zodiac-form .zf-col {
  flex: 1 1 40%;
  margin: 10px;
}

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

.zodiac-form .zf-img {
  margin-bottom: 10px;
}

.zodiac-form .zf-select-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.zodiac-form select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}

.zodiac-form .zf-radio-group {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

.zodiac-form .zf-radio-group label {
  cursor: pointer;
}

.zodiac-form .zf-heart {
  flex: 0 1 60px;
  font-size: 2rem;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.zodiac-form .zf-submit {
  margin-top: 20px;
}

.zodiac-form .zf-submit button {
  background: #fbc02d;
  color: #333;
  border: none;
  padding: 10px 25px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s ease;
}

.zodiac-form .zf-submit button:hover {
  background: #f9a825;
}

/* Responsive */
@media (max-width: 768px) {
  .zodiac-form .zf-row {
    flex-direction: column;
  }
  .zodiac-form .zf-col {
    width: 100%;
  }
  .zodiac-form .zf-heart {
    margin: 20px 0;
  }
}

.error {
  text-align: center;
  padding: 10px;
  color: red;
}

.compatibility h2 {
  color: var(--primary);
}

.compatibility p {
  margin: 0.6em 0;
  text-align: justify;
  line-height: 1.6;
}

.compatibility {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1em;
  box-shadow: 0 4px 12px var(--shadow);
  margin-top: 1em;
}

.isDate {
  min-width: 230px;
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  color: var(--text);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s, color 0.3s;
}

.suns {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 2em;
  flex-wrap: wrap;
}

.sun {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.1rem;
}

.highlight {
  text-align: center;
  font-size: 2em;
  color: var(--primary);
  font-weight: 700;
}

.is_date {
  text-align: center;
  font-size: 1.5em;

  font-weight: 700;
}

.rahukaal-highlight {
  background-color: rgba(255, 68, 0, 0.1);
  border: 2px solid var(--primary);
  font-weight: bold;
  border-radius: 6px;
  padding: 1.5em 1em;
  margin-top: 4px;
}

.duration {
  text-align: center;
  font-size: 1.2em;
  margin-top: 1em;
}
@media screen and (max-width: 480px) {
  .suns {
    flex-direction: column;
    gap: 15px;
    margin-top: 2em;
  }

  .isDate {
    min-width: 100% !important;
  }
}

.itsFlex {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.itsFlex table {
  color: #fff;
  font-weight: 600;
}

.legend {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-bottom: 2em;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 16px;
}
.color-box {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 1px solid #ccc;
}
.most-auspicious {
  background-color: #8bc34a; /* Light Green */
}
.good {
  background-color: #ffc107; /* Amber */
}
.inauspicious-orange {
  background-color: #ff5722; /* Deep Orange */
}
.inauspicious-gray {
  background-color: #78909c; /* Blue Gray */
}

.selectCity {
  position: relative; /* for dropdown */
}

.selectCity #cltyResult {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: var(--background);
  display: none;
  z-index: 1000;
}

.selectCity #cltyResult div {
  padding: 10px;
  cursor: pointer;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.selectCity #cltyResult div:last-child {
  border-bottom: none;
}

.selectCity #cltyResult div:hover {
  background: var(--card-bg);
}

.birth_details_form input,
.birth_details_form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  color: var(--text);
  background: var(--background);
  box-sizing: border-box;
}

.selectgird {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

.birth_form {
  background: var(--card-bg);
  padding: 16px 2em;
  border-radius: 12px;
  box-shadow: 0 2px 6px var(--shadow);

  margin: 0 auto 2em;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.birth_form h2 {
  margin: 0px;
}

.birth_form .label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  margin-top: 1em;
  display: block;
}

.genderOptions {
  display: flex;
  gap: 15px;
}

.genderOptions label {
  cursor: pointer;
  display: flex;
  gap: 5px;
  background-color: var(--background);
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid var(--border);
  align-items: center;
  font-weight: 500;
  color: var(--text);
}

.manglik ul {
  padding-left: 1em;
}

.manglik-status {
  padding: 10px 14px;
  border-radius: 6px;
  display: block;
  font-weight: 600;
  text-align: center;
}

.manglik-yes {
  background: #ffe6e6;
  color: #b30000;
  border: 1px solid #ffb3b3;
}

.manglik-no {
  background: #e9ffea;
  color: #006600;
  border: 1px solid #b8ffcb;
}

.manglik-yes ~ p,
.manglik-yes ~ ul {
  opacity: 0.95;
}
.manglik-no ~ p,
.manglik-no ~ ul {
  opacity: 1;
}

.nakshatraResult h2 {
  margin: 0px;
  padding: 0px;
  font-size: 1.6em;
}

.ImageTabs {
  text-align: center;
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.ImageTabs img {
  max-width: 100%;
  height: auto;

  box-shadow: 0 4px 12px var(--shadow);
}

.ImageTabs div[id^="img"] {
  display: none;
}

.ImageTabs div[id^="img"]:first-child {
  display: block;
}

.ImageTabs button {
  padding: 8px 16px;
  margin: 0 4px;
  border: 1px solid var(--border);
  background: var(--background);
  cursor: pointer;
  color: var(--text);
}

.ImageTabs button.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.birthstoneContent table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

.birthstoneContent table th {
  text-align: left;
  padding: 12px 15px;
  background: var(--card-bg);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border);
  width: 30%;
}

.birthstoneContent table td {
  padding: 12px 15px;
  border: 1px solid var(--border);
  vertical-align: middle;
}

.birthstoneContent .stoneBox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  margin: 2px 1px;
}

.birthstoneContent .stoneBox img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--background);
}

.birthstoneContent .stoneBox .b {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}

.sadesatiContent {
  text-align: center;

  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  justify-content: center;
  background-color: var(--card-bg);
  border: 2px solid var(--border);
  padding: 1.5em;
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow);
}

.sadesatiContent span:nth-child(2) {
  font-size: 2em;
  font-weight: 700;
  color: red;
}
.sadesatiContent span.no {
  font-size: 2em;
  font-weight: 700;
  color: green;
}

.month-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
  justify-content: space-between;
}

.month-buttons button {
  padding: 6px 12px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.3s;
}

.month-buttons button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

[id^="tab-month-"] {
  display: none;
}

.grah-gochar ul {
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grah-gochar li {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.grah-gochar li span:first-child {
  font-size: 1.2em;
  font-weight: bold;

  display: block;
  margin-bottom: 5px;
}

.grah-gochar li span:not(:first-child) {
  font-weight: bold;
}

.grah-gochar li:not(:first-child) {
  font-size: 0.95em;

  line-height: 1.5;
}

.grah-gochar em {
  font-style: italic;
  color: var(--primary);
}

.grah-gochar u {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .grah-gochar li {
    padding: 10px;
  }

  .grah-gochar li span:first-child {
    font-size: 1.1em;
  }
}

.showcase img {
  width: 100%;
  border-radius: 20px;
}

.grid-container {
  display: grid;
  gap: 20px;
  padding: 10px;
}

/* Default (mobile: stack) */
.column-1,
.column-2 {
  grid-column: 1 / -1;
}

/* Desktop */
@media (min-width: 768px) {
  .grid-container.layout-30-70 {
    grid-template-columns: 30% 70%;
  }

  .grid-container.layout-70-30 {
    grid-template-columns: 70% 30%;
  }

  .column-1,
  .column-2 {
    grid-column: auto;
  }
}

.about {
  background-image: repeating-radial-gradient(
      circle at center center,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 3px,
      transparent 3px,
      transparent 5px,
      rgba(0, 0, 0, 0.03) 5px,
      rgba(0, 0, 0, 0.03) 7px
    ),
    repeating-radial-gradient(
      circle at center center,
      rgb(255, 228, 216) 0px,
      rgb(255, 228, 216) 9px,
      rgb(255, 228, 216) 9px,
      rgb(255, 228, 216) 21px,
      rgb(255, 228, 216) 21px,
      rgb(255, 228, 216) 31px,
      rgb(255, 228, 216) 31px,
      rgb(255, 228, 216) 40px
    );
  background-size: 20px 20px;
  padding-block: 2em;
  color: #000428;
}

.bg-custom-1 {
  background: rgb(223, 230, 233);
}
.bg-custom-2 {
  background: rgb(223, 207, 167);
}
.bg-custom-3 {
  background: rgb(255, 234, 167);
}
.bg-custom-4 {
  background: rgb(253, 203, 110);
}
.bg-custom-5 {
  background: rgb(85, 239, 196);
}
.bg-custom-6 {
  background: rgb(233, 224, 213);
}
.bg-custom-7 {
  background: rgb(186, 181, 255);
}
.bg-custom-8 {
  background: rgb(165, 210, 255);
}
.bg-custom-9 {
  background: rgb(163, 227, 236);
}
.bg-custom-10 {
  background: rgb(250, 177, 160);
}
.bg-custom-11 {
  background: rgb(129, 236, 236);
}
.bg-custom-12 {
  background: rgb(236, 234, 129);
}
.bg-custom-13 {
  background: rgb(177, 252, 194);
}
.vediclinks {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vedicLink {
  color: #000;
  padding: 10px 15px;
  border-radius: 10px;
  display: flex;
  min-width: 150px;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  border: 1px solid var(--border);
}

.vedicLink span {
  font-size: 20px;
}

.vedicContent {
  background-color: var(--card-bg);
  padding: 2em;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-block: 1em;
}

.vedicContent .mantra {
  background-color: var(--background);
  padding: 1.2em;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 0px;
}

.vedicContent h2 {
  margin-top: 2em;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.vedicContent h2:nth-child(1) {
  margin-top: 0.2em;
}
.vedicContent h3 {
  font-size: 18px;
  margin-top: 3em;
  margin-bottom: 0px;
}

.vedicContent h3::before {
  content: "↪ "; /* put your emoji here */
  margin-right: 6px; /* spacing between emoji and text */
}

.vedichome h2 {
  margin-bottom: 0.1em;
  font-size: 4ch;
}

.vedichome p {
  margin-bottom: 1.5em;
}

.vedichome img {
  width: 100%;
  border-radius: 50%;
}

.audio .category {
  margin-bottom: 30px;
}

.audio .category h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: var(--text);
}

.audio .audio-item {
  background: var(--card-bg);
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.audio .details {
  flex: 1;
}

.audio .title {
  font-weight: bold;
  margin-bottom: 5px;
}

.audio .meta {
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 1em;
}
.audio .meta div {
  display: flex;
  align-items: center;
  gap: 3px;
}

.audio .buttons {
  display: flex;
  gap: 10px;
}

.audio button,
.audio a.download-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  min-width: 120px;
}

.audio .play-btn {
  background: var(--primary);
  color: #fff;
}

.audio .play-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.audio .download-btn {
  background: #28a745;
  color: #fff;
}

.audio-content ul {
  padding-left: 1.2em;
  margin-block: 1em;
}

.audio-content h2 {
  margin-block: 1em;
}

.audio-section {
  padding: 60px 0px;
  color: #000;
  background-image: radial-gradient(
      circle at center center,
      rgba(46, 46, 46, 0.05) 0%,
      rgba(46, 46, 46, 0.05) 22%,
      rgba(136, 136, 136, 0.05) 22%,
      rgba(136, 136, 136, 0.05) 26%,
      rgba(106, 106, 106, 0.05) 26%,
      rgba(106, 106, 106, 0.05) 66%,
      rgba(196, 196, 196, 0.05) 66%,
      rgba(196, 196, 196, 0.05) 77%,
      rgba(166, 166, 166, 0.05) 77%,
      rgba(166, 166, 166, 0.05) 93%,
      rgba(76, 76, 76, 0.05) 93%,
      rgba(76, 76, 76, 0.05) 100%
    ),
    radial-gradient(
      circle at center center,
      rgb(255, 195, 158) 0%,
      rgb(255, 195, 158) 8%,
      rgb(255, 195, 158) 8%,
      rgb(255, 195, 158) 46%,
      rgb(255, 195, 158) 46%,
      rgb(255, 195, 158) 60%,
      rgb(255, 195, 158) 60%,
      rgb(255, 195, 158) 80%,
      rgb(255, 195, 158) 80%,
      rgb(255, 195, 158) 82%,
      rgb(255, 195, 158) 82%,
      rgb(255, 195, 158) 100%
    );
  background-size: 43px 43px;
}

/* Method 1: Rotating Gradient Border */
.gradient-border-1 {
  position: relative;
  padding: 6px;
  border-radius: 15px;
  background: linear-gradient(45deg, #ff6200, #ff8c00, #ff6262, #ff0080);
  background-size: 300% 300%;
  animation: gradientRotate 1s ease-in-out infinite;
}

.gradient-border-1 img {
  width: 100%;
  object-fit: cover;
  border-radius: 11px;
  display: block;
}

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

/* Method 2: Spinning Border Effect */
.gradient-border-2 {
  position: relative;
  width: 208px;
  height: 208px;
  border-radius: 15px;
  overflow: hidden;
}

.gradient-border-2::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    #ff6b6b,
    #4ecdc4,
    #45b7d1,
    #96ceb4,
    #feca57,
    #ff9ff3,
    #ff6b6b
  );
  animation: spin 4s linear infinite;
  z-index: -1;
}

.gradient-border-2 img {
  position: relative;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 11px;
  margin: 4px;
  z-index: 1;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Method 3: Pulsing Gradient Border */
.gradient-border-3 {
  position: relative;
  padding: 1px;

  border-radius: 50%;
  background: linear-gradient(45deg, #fb7030, #ff4d00, #fec300);
  background-size: 400% 400%;
  animation: gradientPulse 0.5s ease-in-out infinite alternate;
}

.gradient-border-3 img {
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.8;
  display: block;
}

@keyframes gradientPulse {
  0% {
    background-position: 0% 50%;
    filter: brightness(1);
  }
  100% {
    background-position: 100% 50%;
    filter: brightness(1.2);
  }
}

/* Method 4: Multi-layer Rotating Border */
.gradient-border-4 {
  position: relative;
  width: 208px;
  height: 208px;
  border-radius: 15px;
  overflow: hidden;
}

.gradient-border-4::before,
.gradient-border-4::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;
}

.gradient-border-4::before {
  background: conic-gradient(
    from 0deg,
    transparent,
    #ff0080,
    transparent,
    #00ff80,
    transparent
  );
  animation: spin 3s linear infinite;
}

.gradient-border-4::after {
  background: conic-gradient(
    from 90deg,
    transparent,
    #0080ff,
    transparent,
    #ff8000,
    transparent
  );
  animation: spin 3s linear infinite reverse;
}

.gradient-border-4 img {
  position: relative;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 11px;
  margin: 4px;
  z-index: 1;
}

/* Method 5: Neon Glow Effect */
.gradient-border-5 {
  position: relative;
  padding: 4px;
  border-radius: 15px;
  background: linear-gradient(
    45deg,
    #00ff88,
    #00aaff,
    #aa00ff,
    #ff0088,
    #00ff88
  );
  background-size: 300% 300%;
  animation: neonGlow 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.3));
}

.gradient-border-5 img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 11px;
  display: block;
}

@keyframes neonGlow {
  0%,
  100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.3));
  }
  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 30px rgba(170, 0, 255, 0.5));
  }
}

/* Method 6: Wave Border Effect */
.gradient-border-6 {
  position: relative;
  padding: 4px;
  border-radius: 15px;
  background: linear-gradient(
    90deg,
    #ff006e,
    #8338ec,
    #3a86ff,
    #06ffa5,
    #ffbe0b,
    #fb5607,
    #ff006e
  );
  background-size: 500% 100%;
  animation: waveMove 4s ease-in-out infinite;
}

.gradient-border-6 img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 11px;
  display: block;
}

@keyframes waveMove {
  0%,
  100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
}

@keyframes floatBasic {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes waveFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(1deg);
  }
  50% {
    transform: translateY(-25px) rotate(0deg);
  }
  75% {
    transform: translateY(-15px) rotate(-1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes oceanWave {
  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  16.66% {
    transform: translateY(-10px) translateX(5px) rotate(1deg);
  }
  33.33% {
    transform: translateY(-20px) translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) translateX(-5px) rotate(-1deg);
  }
  66.66% {
    transform: translateY(-25px) translateX(0px) rotate(0deg);
  }
  83.33% {
    transform: translateY(-10px) translateX(3px) rotate(0.5deg);
  }
}

@keyframes bubbleFloat {
  0%,
  100% {
    transform: translateY(0px) scale(1);
  }
  25% {
    transform: translateY(-30px) scale(1.02);
  }
  50% {
    transform: translateY(-45px) scale(0.98);
  }
  75% {
    transform: translateY(-30px) scale(1.01);
  }
}

@keyframes gentleSway {
  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  20% {
    transform: translateY(-8px) translateX(-3px) rotate(-0.5deg);
  }
  40% {
    transform: translateY(-15px) translateX(0px) rotate(0deg);
  }
  60% {
    transform: translateY(-20px) translateX(3px) rotate(0.5deg);
  }
  80% {
    transform: translateY(-12px) translateX(-1px) rotate(-0.2deg);
  }
}

/* Basic Floating Effect */
.float-basic {
  animation: floatBasic 3s ease-in-out infinite;
}
/* Wave Motion Effect */
.float-wave {
  animation: waveFloat 4s ease-in-out infinite;
} /* Ocean Wave Effect */
.float-ocean {
  animation: oceanWave 6s ease-in-out infinite;
}

/* Bubble Float Effect */
.float-bubble {
  animation: bubbleFloat 5s ease-in-out infinite;
}

/* Gentle Sway Effect */
.float-sway {
  animation: gentleSway 8s ease-in-out infinite;
}

.isinput input {
  display: grid;
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  outline: none;
}

.gender {
  max-width: 250px;
  margin: auto;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

  border-radius: 10px;
}

.gender img {
  width: 100%;
  border-radius: 10px;
  display: block;
  margin: 0px;
  padding: 0px;
}

.itsplanet li::before {
  content: "➔ "; /* Right arrow */
  color: #333; /* Arrow color (change as needed) */
  font-weight: bold;
  margin-right: 6px;
}

.itsplanet ul {
  list-style: none;
  padding-left: 0;
  background-color: var(--card-bg);
  padding: 1em;
  border-radius: 10px;
}

.itsplanet h2 {
  text-transform: capitalize;
  margin-top: 1em;
}

.pastlife {
  background-color: var(--card-bg);
  padding: 1em;
  border-radius: 10px;
}

/* Container */
.match_container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  text-align: left;
}

/* Column */
.match_col {
  flex: 1;
  min-width: 280px;
}

.match_col > h3 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0px;
  padding: 0;
  margin-block: 1em;
}

.match_col:nth-child(1) {
  border-right: 1px solid var(--border);
  padding-right: 1em;
}
.match_selectGroup {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Labels */
.match_col label {
  display: block;
  font-weight: bold;
  margin: 8px 0 4px;
}

/* Inputs */
.match_col input,
.match_col select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--background);
  color: var(--text);
}

/* Suggestions dropdown */
.match_suggestions {
  border: 1px solid var(--border);
  max-height: 150px;
  overflow-y: auto;
  background: var(--bg1);
  color: var(--text);
  position: absolute;
  z-index: 1000;
  max-width: 260px;
}

.match_suggestions div {
  padding: 8px;
  cursor: pointer;
}

.match_suggestions div:hover {
  background: var(--primary);
  color: #fff;
}

.kundalimatching {
  background: var(--card-bg);
  padding: 16px 2em;
  border-radius: 12px;
  box-shadow: 0 2px 6px var(--shadow);

  margin: 0 auto 2em;
  text-align: center;
}

@media (max-width: 600px) {
  .match_container {
    flex-direction: column;
  }

  .match_col:nth-child(1) {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0px;
    padding-bottom: 3em;
  }

  .kundalimatching {
    padding: 16px 1em 16px 1em;
  }
}

.alert-danger,
.text-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
}

.alert-success,
.text-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
}

.alert-danger h2,
.alert-success h2 {
  padding: 0;
  margin: 0;
}

.chartimage {
  display: flex;
  gap: 10px;
  text-align: center;
}

.chartimage h3 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0px;
  padding: 0;
  justify-content: center;
}

.chartimage img {
  width: 100%;
}

.ch_table_responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on mobile */
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.ch_table_responsive table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* ensures scroll on very small screens */
}

.ch_table_responsive th,
.ch_table_responsive td {
  padding: 10px;
  text-align: left;
  border: 1px solid var(--border);
  font-size: 15px;
  white-space: nowrap; /* prevents breaking words */
}

.ch_table_responsive thead {
  background: var(--footer-bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.ch_table_responsive th {
  font-weight: 600;
  color: var(--text);
}

.ch_table_responsive tr:nth-child(even) {
  background: var(--card-bg);
}

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

@media (max-width: 480px) {
  .ch_table_responsive th,
  .ch_table_responsive td {
    padding: 6px;
    font-size: 13px;
  }
}

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

.tab_button {
  padding: 8px 10px;

  background: var(--card-bg);
  cursor: pointer;
  transition: background 0.3s;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.tab_button:hover {
  background: #e0e0e0;
}

.tab_button.active {
  background: var(--primary);
  color: #fff;
  font-weight: bold;
}

.tab_content {
  display: none;

  animation: fadeEffect 0.4s;
}

.tab_content.active {
  display: block;
}

/* Smooth fade */
@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.latter {
  font-size: 80px;
  background-color: #fff45aff;
  padding: 10px 10px 0 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  aspect-ratio: 1/1;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.isname {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: var(--card-bg);
  border-radius: 10px;
  padding: 1em;
}

.isname h2 {
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}

/* Card styling */
.daypanchang .card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
  background: var(--card-bg);
  margin-top: 1em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.daypanchang .card h4 {
  margin-bottom: 12px;
  font-size: 18px;
  color: var(--text);
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
}

/* ROW system */
.daypanchang .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}

.daypanchang [class*="col-"] {
  padding: 0 8px;
  box-sizing: border-box;
}

/* Column widths */
.daypanchang .col-sm-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.daypanchang .col-sm-4 {
  flex: 0 0 33.33%;
  max-width: 33.33%;
}

.daypanchang .col-sm-8 {
  flex: 0 0 66.66%;
  max-width: 66.66%;
}

.daypanchang .col-xs-5 {
  flex: 0 0 40%;
  max-width: 40%;
}

.daypanchang .col-xs-7 {
  flex: 0 0 60%;
  max-width: 60%;
}

/* Pan-row */
.daypanchang .pan-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 6px;
  font-size: 15px;
}

.daypanchang .pan-row b {
  color: var(--text);
}

/* Table styling */
.daypanchang .table-responsive {
  overflow-x: auto;
}

.daypanchang .table-responsive table {
  background-color: var(--card-bg);
}

/* MOBILE responsive */
@media (max-width: 768px) {
  .daypanchang .col-sm-6,
  .daypanchang .col-sm-4,
  .daypanchang .col-sm-8,
  .daypanchang .col-xs-5,
  .daypanchang .col-xs-7 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .daypanchang .pan-row {
    flex-direction: column;
  }

  .daypanchang .pan-row > div {
    width: 100% !important;
  }
}

.twocol {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.twocol .audio-item {
  display: block;
}

.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination a {
  display: inline-block;
  padding: 8px 12px;
  margin: 2px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  border-radius: 4px;
}

.pagination a.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  cursor: default;
  pointer-events: none;
}

.pagination a:hover {
  background: var(--card-bg);
  color: var(--text);
}

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

/* Card */
.product_card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Image */
.product_image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 6px;
  aspect-ratio: 1/1;
}

/* Title */
.product_title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
}

/* Price */
.product_price {
  font-size: 16px;
  font-weight: bold;
  color: #d32f2f;
  margin-bottom: 6px;
}

/* Stars & Reviews */
.product_rating {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

/* Button */
.product_link {
  display: inline-block;
  text-decoration: none;
  background: #ff9900;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  transition: background 0.2s ease;
}

.product_link:hover {
  background: #e68a00;
}

.related_card_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.related_card_grid a {
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 12px var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  background-color: var(--card-bg);
}

.related_card_grid .border1 {
  border: 2px solid #e63946;
}
.related_card_grid .border2 {
  border: 2px solid #1d3557;
}
.related_card_grid .border3 {
  border: 2px solid #457b9d;
}
.related_card_grid .border4 {
  border: 2px solid #2a9d8f;
}
.related_card_grid .border5 {
  border: 2px solid #264653;
}
.related_card_grid .border6 {
  border: 2px solid #f4a261;
}
.related_card_grid .border7 {
  border: 2px solid #e9c46a;
}
.related_card_grid .border8 {
  border: 2px solid #8d99ae;
}
.related_card_grid .border9 {
  border: 2px solid #6a4c93;
}
.related_card_grid .border10 {
  border: 2px solid #d62828;
}
.related_card_grid .border11 {
  border: 2px solid #003566;
}
.related_card_grid .border12 {
  border: 2px solid #06d6a0;
}
.related_card_grid .border13 {
  border: 2px solid #ef476f;
}
.related_card_grid .border14 {
  border: 2px solid #118ab2;
} /* Cyan */
.related_card_grid .border15 {
  border: 2px solid #073b4c;
} /* Deep Navy */
.related_card_grid .border16 {
  border: 2px solid #90be6d;
} /* Green */
.related_card_grid .border17 {
  border: 2px solid #ffb703;
} /* Bright Yellow */
.related_card_grid .border18 {
  border: 2px solid #fb8500;
} /* Orange */
.related_card_grid .border19 {
  border: 2px solid #7209b7;
} /* Violet */
.related_card_grid .border20 {
  border: 2px solid #4361ee;
} /* Blue */

.related_card_grid a:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px var(--shadow);
}

.related_card_grid h2 {
  margin-bottom: 5px;
  font-size: 1.1rem;
}

.related_card_grid p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13px;
  opacity: 0.8;
}

.headingtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}

/* default smooth continuous spin */
.spin {
  display: inline-block; /* allow transform on inline SVG/icon */
  transform-origin: 50% 50%; /* center of the element */
  will-change: transform; /* hint for better performance */
  --spin-duration: 1.2s; /* change this to speed up / slow down */
  --spin-direction: normal; /* use 'reverse' to spin the other way */
  animation: ch-spin var(--spin-duration) linear infinite;
}

/* optional smaller/faster variants */
.spin--slow {
  --spin-duration: 3s;
}
.spin--fast {
  --spin-duration: 0.6s;
}
.spin--rev {
  --spin-direction: reverse;
  animation-direction: reverse;
}

/* keyframes for continuous smooth rotation */
@keyframes ch-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spin {
    animation: none;
  }
}

.relatedextra {
  background-color: var(--card-bg);
  padding: 1px 30px 30px 30px;
  border-radius: 10px;
  margin-block: 1em;
}

.relatedextra img {
  width: 100%;
  border-radius: 10px;
}

.textdatamain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}
.textdata {
  padding: 30px 0px 0px 0px;
  background-image: radial-gradient(
    circle at center right,
    rgba(253, 97, 39, 0.55) 0%,
    rgba(253, 97, 39, 0.55) 14.286%,
    rgba(251, 108, 38, 0.55) 14.286%,
    rgba(251, 108, 38, 0.55) 28.572%,
    rgba(249, 118, 37, 0.55) 28.572%,
    rgba(249, 118, 37, 0.55) 42.858%,
    rgba(247, 129, 37, 0.55) 42.858%,
    rgba(247, 129, 37, 0.55) 57.144%,
    rgba(245, 140, 36, 0.55) 57.144%,
    rgba(245, 140, 36, 0.55) 71.43%,
    rgba(243, 150, 35, 0.55) 71.43%,
    rgba(243, 150, 35, 0.55) 85.716%,
    rgba(241, 161, 34, 0.55) 85.716%,
    rgba(241, 161, 34, 0.55) 100.002%
  );
  color: #1d0032;
  background-size: 200% 200%;
  animation: moveBg 20s linear infinite;
}

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

.textdata p {
  margin-block: 1em;
}

.textdatamain a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: var(--card-bg);
  color: var(--text);
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  gap: 10px;
}
.textdatamain img {
  width: 50px;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.textdatamain h3,
.textdatamain span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-width: 180px;
}
.textdatamain h3 {
  font-size: 16px;
}
.textdatamain span {
  font-size: 14px;
}

.textdataimg img {
  width: 100%;
}

.itsflex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;
}

.hideonpc {
  display: none;
}

@media (max-width: 768px) {
  .cards .section-title {
    font-size: 30px;
    margin: 0px;
  }
  .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  .card-grid a {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
  }

  .card-grid h2 {
    margin: 0px;
    padding: 0px;
    font-size: 1rem;
  }

  .card-grid p {
    display: none;
  }

  .textdata {
    padding: 30px 0px 20px 0px;
  }
  .grid-container {
    padding: 0;
  }
  .textdatamain h3,
  .textdatamain span {
    max-width: auto;
  }
  .hideonpc {
    display: inline;
  }
  .textdatamain a {
    justify-content: space-between;
  }

  .vedichome h2 {
    margin-bottom: 0.1em;
    font-size: 2em;
  }

  .section-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2rem;
  }
}

.astro-result {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px;

  margin: 20px auto;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.astro-heading {
  color: var(--primary);
  text-align: center;
  margin-bottom: 15px;
}

.astro-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.astro-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}

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

.astro-prediction {
  margin-top: 20px;
  padding: 15px;
  background: var(--background);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
}

.astro-prediction h3 {
  margin-top: 0;
  color: var(--primary);
}