/*** Spinner Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
/*** Spinner End ***/

/*** Navbar Start New Header Yellow ***/

/* ================= HEADER CSS ================= */

.breadcrumb-section {
    background-color: #fff8f3 !important; /* change to any color */
    height: 50px;            /* set the height you want */
    display: flex;
    align-items: center;      /* vertically center content */
}


.logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logo-wrapper span {
    font-size: 20px;
    font-weight: bold;
}


/* LOGO */
.main-logo {
    height: 80px !important;
}


@media (max-width: 768px) {

  .main-logo {
    height: 50px !important;
  }

  .logo-wrapper span {
    font-size: 10px;
    font-weight: bold;
}

}

/* Lang Dropdown */

.dropdown-menu {
    z-index: 99999;
}

/* Hide Google Translate top banner iframe */
iframe.goog-te-banner-frame {
  display: none !important;
}

/* Prevent page from shifting down */
html, body {
  margin-top: 0 !important;
  top: 0 !important;
}

/* Hide Google translate tooltip */
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

/* Hide Google logo & branding */
.goog-logo-link {
  display: none !important;
}

.goog-te-gadget {
  height: 0 !important;
  overflow: hidden !important;
}


/* Header Dropdown */

.user-dropdown {
    position: relative;
    display: inline-block;
    
}

.user-dropdown::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px; /* Adjust this value as needed */
    background: transparent;
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    width: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none;
    z-index: 99999;
    
}

.user-dropdown:hover .user-dropdown-menu {
    display: block;
}

.user-dropdown-menu a {
    padding: 10px 20px;
    display: block;
    color: #333;
    text-decoration: none;
    font-size: 15px;
}

.user-dropdown-menu a:hover {
    background: #f2f2f2;
}

.user-dropdown:hover .user-dropdown-menu {
    display: block;
}

.user-btn {
    background: #ffbf00;
    padding: 8px 20px;
    border-radius: 20px;
    color: #ffffff;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

@media (max-width: 769px) {
    .user-btn {
        padding: 4px 10px;
    }
    
}

@media (max-width: 576px) {

    /* Reduce button padding + font size */
    .mobile-top-btn {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    /* Icon size inside buttons */
    .mobile-top-btn i {
        font-size: 14px !important;
    }

    /* Cart badge smaller on mobile */
    .cart-badge-sm {
        font-size: 10px !important;
        padding: 3px 5px !important;
    }
}

/* Default: desktop shows full name */
.user-btn .name-mobile {
    display: none !important;
}



/* Mobile: show only short name */
@media (max-width: 576px) {
    .user-btn .name-desktop {
        display: none !important;
    }
    .user-btn .name-mobile {
        display: inline !important;
    }
} 

/* Divider Line */
.header-divider {
    border-bottom: 1px solid #e4e4e4;
}

/* MENU BAR */
.menu-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.menu-bar .nav-link {
    color: #444;
    font-weight: 500;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.menu-bar .nav-link:hover,
.menu-bar .nav-link.active {
    color: #000;
}

/* Dropdown above banner */
.nav-item .dropdown-menu {
    position: absolute !important;
    z-index: 99999 !important;
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

nav, header, .menu-bar {
    position: relative;
    z-index: 9999;
}

/* BADGES */
.menu-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 4px;
}

.menu-badge.new {
    background: #ffd100;
    color: #000;
}

/* MOBILE SCROLL */

/* Only allow horizontal scroll on mobile */
@media (max-width: 768px) {
    .menu-bar {
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (min-width: 769px) {
    .menu-bar {
        overflow: visible !important;
        white-space: normal;
    }
}


.menu-bar::-webkit-scrollbar {
    display: none;
}

/* MOBILE DRAWER */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100vh;
    background: #fff;
    padding: 15px;
    transition: 0.35s ease;
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
    z-index: 99999;
}

.mobile-drawer.open {
    left: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.drawer-menu li {
    margin-bottom: 12px;
}

.drawer-menu a {
    text-decoration: none;
    color: #444;
    font-size: 15px;
    display: block;
}

.dropdown-mobile .inner-dropdown {
    display: none;
    margin-top: 6px;
    padding-left: 15px;
}

.dropdown-mobile.open .inner-dropdown {
    display: block;
}

/* OVERLAY */
.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
}

.drawer-overlay.show {
    display: block;
}



/* Banner New*/

/* Banner Section */
#banner-section {
  background: #fef5ef;
  padding: 0px 0;          /* Vertical spacing */
  margin-top: 3px;
  margin-bottom: 10px; 
        
}

/* Slider wrapper */
.banner-slider {
  position: relative;
  width: 100%;        
  margin: 0;           /* Center the banner */
  padding: 5px;        /* Space around the images */
  height: 350px;          
}

/* Banner images */
.banner-slider img {
  position: absolute;
  top: 0;
  left: 0;                  /* No left:50% overflow issues */
  width: 100%;              /* Responsive */
  height: 100%;
  object-fit: cover;
  opacity: 0;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transform: scale(1.02);
}

/* Active image */
.banner-slider img.active {
  opacity: 1;
  transform: scale(1);      /* Smooth fade + zoom */
}

/* ------------------------------------- */
/* 📱 MOBILE RESPONSIVE BANNER HEIGHTS   */
/* ------------------------------------- */

/* Tablet */
@media (max-width: 992px) {
  .banner-slider {
    height: 280px;
    object-fit: cover;
  }
}

/* Large phones */
@media (max-width: 768px) {
  .banner-slider {
    height: 220px;
    
  }
}

/* Small phones */
@media (max-width: 576px) {
  .banner-slider {
    height: 100px;
    padding: 5px;
  }

  .banner-slider img {
    border-radius: 12px; /* smaller radius for small screens */
    object-fit: cover;
  }
}

/* Extra small phones (old Android, iPhone SE) */
@media (max-width: 420px) {
  .banner-slider {
    height: 100px;
    object-fit: cover;
  }
}

/* 2 Image styling */






/* Purple background for service section */
#services-section {
  background: #6a0dad;
  color: #fff;
  
  
}

/* Service Box */
.service-box {
  background: #ffffff;
  border-radius: 10px;
  padding: 30px 20px;
  text-align: center;
  color: #000 !important;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
  transition: transform .3s;
}

.service-box h6 {
  color: #000 !important;  /* force heading text to black */
}

.service-icon {
  font-size: 40px; /* increase size */
  display: block;
  margin-bottom: 10px;
}

.service-box:hover {
  transform: translateY(-5px);
}

/*** Rashifal ***/
#daily-rashifal {
  background: #fff;
}

#daily-rashifal h2 {
  color: #3d3d3d;
}

.zodiac-img {
  width: 180px;
  height: 150px;
  object-fit: contain;
  border-radius: 50%;
  padding: 10px;
  transition: 0.3s ease;
}

.zodiac-img:hover {
  transform: scale(1.1);
}

.date-text {
  font-size: 13px;
  color: #555;
  margin-top: -4px;
}

/* Card design */


/* Title */
.zodiac-box h6 {
  color: #a68448;
  font-weight: 600;
}

/* ⭐ Border only on mobile devices */
@media (max-width: 768px) {
  .zodiac-box {
  padding: 15px;
  border: 1px solid #e9e6df;
  border-radius: 12px;
  background: #fff;
  transition: 0.3s ease;
  }
  .zodiac-img {
  width: 100px;
  height: 120px;
  object-fit: cover;
}
}

/*** Astrology Readings ***/

#astrology-readings {
    background: #fff8e6;
}

.astro-box img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.astro-box p.astro-title {
    margin-top: 10px;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
}



/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(1, 95, 201, 0.9), rgba(0, 0, 0, 0.2)), url(../img/bg-breadcrumb.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0 60px 0;
    transition: 0.5s;
}

.bg-breadcrumb .breadcrumb {
    position: relative;
}

.bg-breadcrumb .breadcrumb .breadcrumb-item a {
    color: var(--bs-white);
}
/*** Single Page Hero Header End ***/


/*** Feature Start ***/
#astro-section {
  background: #fff5e6;
}

.consult-box {
  background: #f4d3a1;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.image-btn .btn-image {
  width: 500px;      /* adjust size */
  height: 400px;
  cursor: pointer;
  transition: 0.3s;
}

.image-btn .btn-image:hover {
  transform: scale(1.05);  /* small hover zoom */
}


.section-title {
  color: #7a1f1f;
  font-weight: 700;
}

.legacy-title {
  color: #cc6a00;
  font-weight: 700;
}

.legacy-sub {
  font-size: 1rem;
  color: #333;
}

/*** Feature End ***/


/*** Service Start ***/
/* Section Background */
#astro-services {
    background: #fef5ef;   /* soft peach background */
    padding: 70px 0;
}

#astro-services h4 {
    font-size: 32px;
    font-weight: 700;
}

/* Service Card */
.service-item {
    background: #ffffff;
    border-radius: 18px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.service-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Circle Icon Container */
.service-img {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 25px auto;
    border: 4px solid #ff6a00;   /* orange border */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;            /* optional background */
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* makes image fill circle perfectly */
    border-radius: 50%;
}

/* Title */
.service-content-inner a.h4 {
    font-size: 22px;
    font-weight: 700;
    color: #7a0606;     /* deep red similar to sample */
    text-decoration: none;
    display: block;
    margin-bottom: 15px;
}

/* Description */
.service-content-inner p {
    color: #444;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Button */
.service-content-inner .btn {
    background: #a60000 !important;   /* dark red */
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
}

.service-content-inner .btn:hover {
    background: #7a0000 !important;
}

/*** Service End ***/

/*** Book Consultation ***/

#astro-consult-section {
  background: #fff8f3;
}

#astro-consult-section h2 {
  color: #7a0000 !important;
}

#astro-consult-section .img-frame {
  padding: 12px;
  background: #ffffff;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

#astro-consult-section .img-frame:hover {
  transform: scale(1.03);
}

.decorated-image {
  border-radius: 15px;
  box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
}

/* Astro Features */
#astro-features {
  background: #fff8f3;
}

/* Main box */
#astro-features .feature-box {
  background: #8a1f1f;
  background-image: url('your-background-pattern.png'); /* Optional */
  background-size: cover;
  background-position: center;
  color: #ffffff;
  border-radius: 16px;
}

/* Circle around icons */
#astro-features .icon-circle {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8a1f1f;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

#astro-features .icon-circle:hover {
  transform: scale(1.08);
}

#astro-features h6 {
  color: #ffffff;
}

/*** Testimonial Start ***/
#testimonial-section {
  background: #f7f7f7;
}

#testimonial-section .review-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e3e3e3;
  min-height: 230px;
}

#testimonial-section .review-user {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#testimonial-section .user-icon {
  width: 36px;
  height: 36px;
  background: #ff5a4f;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
  font-size: 18px;
}

#testimonialCarousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #6d6b6b !important;  /* inactive indicator color */
  
}

#testimonialCarousel .carousel-indicators .active {
  background-color: #e0b100 !important;
}

/*** Testimonial Start End ***/


/*** FAQs Start ***/
#faq-section .accordion-item {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

#faq-section .accordion-button {
  background-color: #fffdf7;
  font-weight: 600;
  padding: 15px;
  border-radius: 0 !important;
  color: #000;
}

#faq-section .accordion-button:not(.collapsed) {
  background-color: #fff3cc;
  color: #000;
  border-bottom: 1px solid #e3c56c;
  box-shadow: none;
}

#faq-section .accordion-button:focus {
  box-shadow: none;
}

#faq-section .accordion-body {
  background: #ffffff;
  padding: 20px;
  color: #444;
  line-height: 1.6;
}

/*** FAQs End ***/

/***Astro Content***/

#astro-content {
    background: #fafafa;
    font-family: "Roboto", sans-serif;
}

#astro-content .section-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: #1b1b1b;
}

#astro-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

#astro-content .sub-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #7a0000;
}

#astro-content ul li {
    margin-bottom: 8px;
    font-size: 1.05rem;
}



/*** Blog Start ***/
.blog .blog-item {
    border-radius: 10px;
    transition: 0.5s;
}

.blog .blog-item:hover {
    box-shadow: 0 0 45px rgba(0, 0, 0, .1);
}

.blog .blog-item:hover .blog-content {
    background: var(--bs-white);
}

.blog .blog-item .blog-img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    overflow: hidden;
}

.blog .blog-item .blog-img img {
    transition: 0.5s;
}

.blog .blog-item:hover .blog-img img {
    transform: scale(1.2);
}

.blog .blog-item .blog-img::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: rgba(1, 95, 201, .2);
    transition: 0.5s;
    z-index: 1;
}

.blog .blog-item:hover .blog-img::after {
    height: 100%;
}

.blog .blog-item .blog-img .blog-categiry {
    position: absolute;
    bottom: 0;
    right: 0;
    border-top-left-radius: 10px;
    display: inline-flex;
    color: var(--bs-white);
    background: var(--bs-primary);
    z-index: 9;
}

.blog .blog-item .blog-content {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: var(--bs-light);
}

.blog .blog-item .blog-content a.btn {
    color: var(--bs-dark);
}

.blog .blog-item:hover .blog-content a.btn:hover {
    color: var(--bs-primary);
}
/*** Blog End ***/



/*** Contact Start ***/
.contact {
    background: #fff8f3;
}
.contact .contact-img {
    position: relative;
    width: 500px;
    height: 500px;
    
}

.contact .contact-img::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1;
    animation-name: image-efects;
    animation-duration: 10s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: 0.5s
}

.contact h4 {
    color: #7a0000 !important;
}

.contact .contact-icon {
    color: #7a0000 !important;
}

@keyframes image-efects {
    0%  {border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;}

    25% {border-radius: 35% 65% 27% 73% / 71% 25% 75% 29%;}

    50% {border-radius: 41% 59% 45% 55% / 32% 21% 79% 68%;}

    75% {border-radius: 69% 31% 39% 61% / 70% 83% 17% 30%;}

    100% {border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;}
}

.contact .contact-img .contact-img-inner {
    position: relative;
    z-index: 9;
    
    
}

.contact .btn {
  background-color: #7a0000 !important;
  color: #fff;
}
/*** Contact End ***/


/*** Footer Start ***/
.footer {
    background: #3d3d3d;
}

.footer .footer-item {
    display: flex;
    flex-direction: column;
}

.footer .footer-item a {
    line-height: 35px;
    color: var(--bs-body);
    transition: 0.5s;
}

.footer .footer-item p {
    line-height: 35px;
}

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

.footer .footer-item .footer-btn a,
.footer .footer-item .footer-btn a i {
    transition: 0.5s;
}

.footer .footer-item .footer-btn a:hover {
    background: var(--bs-white);
}

.footer .footer-item .footer-btn a:hover i {
    color: var(--bs-primary);
}


.footer .footer-item .footer-instagram {
    position: relative;
    overflow: hidden;
}

.footer .footer-item .footer-instagram img {
    transition: 0.5s;
}

.footer .footer-item .footer-instagram:hover img {
    transform: scale(1.2);
}



.footer .footer-item .footer-btn a {
    background: var(--bs-light) !important; /* white */
    color: var(--bs-primary) !important;    /* icon color */
}

.footer .footer-item .footer-btn a:hover {
    background: var(--bs-primary) !important;
}

.footer .footer-item .footer-btn a:hover i {
    color: var(--bs-white) !important;
}

/*** Footer End ***/


/*** copyright Start ***/
.copyright {
    background: #3d3d3d;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
/*** copyright end ***/


/***Panchang***/

#panchang-section {
    font-family: 'Noto Sans Devanagari', sans-serif;
    background-color: #fff8f3; /* Light beige (you can change it) */
    padding: 20px 0;
    
}



.panchang-table th {
    width: 30%;
    background: #fafafa;
    font-weight: 600;
}

.panchang-table td {
    background: #fff;
}

.location {
    font-size: 1.1rem;
    font-weight: 500;
}

#panchang-section .container {
    border: 1px solid #e0e0e0;
}

h4, h5 {
    font-weight: 600;
}

/***Panchang End***/

/***Panchang Details***/

#panchang-guide {
      background: #fff8f3;
          
    }

#panchang-guide .content-box {
      max-width: 1200px;
      margin: auto;
    }
    .panchang-guide h2 {
      color: #35477d;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .panchang-guide p {
      font-size: 1.05rem;
      line-height: 1.7;
      color: #333;
    }

/***Panchang Details End***/    

/*** About Us ***/ 
#about-section {
    background: #ffffff;
}

.about-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #7b1d18; /* deep red similar to screenshot */
    font-family: 'Georgia', serif;
}

.title-underline {
    width: 180px;
    height: 3px;
    background: #d35b4f; /* soft red line */
    margin: 0 auto;
}

.about-intro {
    max-width: 900px;
    margin: 0 auto;
    color: #000;
    font-size: 1.1rem;
}

.about-description {
    max-width: 1000px;
    margin: 0 auto;
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
}


/* Section spacing */
#life-solutions {
    background: #ffffff;
}

/* Title styling */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #7d1d15; /* dark red tone */
    font-family: 'Georgia', serif;
}

/* Bullet list styling */
.solution-list {
    list-style-type: none;
    padding-left: 0;
}

.solution-list li {
    margin-bottom: 15px;
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
}

.solution-list strong {
    color: #7d1d15;
    font-weight: 600;
}

/* Image with decorative background frame */
.solution-list .img-frame {
    position: absolute;
    top: 15px;
    left: 20px;
    width: 80%;
    height: 90%;
    background: #9a4500; /* brownish tone */
    border-radius: 25px;
    z-index: 1;
}

.solution-list .custom-img {
    position: relative;
    z-index: 2;
    border-radius: 25px;
}

/* Why Us */

#why-us {
    background: #ffffff;
}

/* Title */
.why-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #7b1d18; /* deep red tone */
    font-family: 'Georgia', serif;
}

/* Text Styling */
.why-text {
    color: #444;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Circular Image Frame */
.img-wrapper {
    width: 320px;
    height: 320px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(180deg, #b34c0a 0%, #7a2f00 100%);
    padding: 10px;
    position: relative;
}

.profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
}

/* Why Us End */

/* kundli Matching */

#kundli-section {
    background-color: #fef5ef;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.kundli-box {
    max-width: 900px;
    margin: auto;
    border-radius: 20px;
}

.nav-tabs .nav-link {
    font-weight: 600;
    color: #666;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 20px;
}

.nav-tabs .nav-link.active {
    color: #d4a017;
    border-bottom: 3px solid #d4a017;
    background: none;
}

.btn-warning {
    background-color: #ffc400;
    border: none;
    font-size: 1.1rem;
    border-radius: 8px;
}

.btn-warning:hover {
    background-color: #ffb300;
}

/* kundli Matching info */

#kundli-info {
    background-color: #fef5ef; /* Optional – remove if not needed */
}

#kundli-info .section-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
}

#kundli-info .info-text {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 15px;
}

/* kundli Matching info */


/* products page */

/* ===============================
   Products Section Styling
================================== */
#products-section {
    background: #fef5ef;
    font-family: Arial;
}

/* Sidebar Section */
#products-section .product-categories,
#products-section .price {
    background: #ffffff;
    padding: 20px 22px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

#products-section .product-categories h4,
#products-section .price h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333 !important;
}

#products-section .product-categories ul li a {
    display: block;
    padding: 6px 0;
    font-size: 16px;
    text-decoration: none;
    color: #444;
    transition: 0.3s;
}

#products-section .product-categories ul li a:hover {
    color: #a60000;
    padding-left: 5px;
}

#products-section .price input[type="range"] {
    margin-top: 10px;
    color: #a60000;
}

#products-section output {
    font-size: 18px;
    color: #a60000;
    font-weight: bold;
}

/* ===============================
   Product Grid
================================== */
#products-section .product-item {
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: 0.3s ease-in-out;
}

#products-section .product-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Product Image */


/* Fix unequal product box size */
.product-item-inner {
    width: 100%;
    height: 260px; /* fixed height for all product images */
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    position: relative;
}

/* Make image always fill area equally */
.product-item-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crops image uniformly */
    object-position: center; /* centers the crop */
    display: block;
}

/* NEW Badge */
#products-section .product-new {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ff4d4d;
    color: #fff;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 5px;
    font-weight: 600;
}

/* Eye Icon */
#products-section .product-details {
    position: absolute;
    top: 12px;
    right: 12px;
}

#products-section .product-details a {
    color: #fff;
    background: #0d6efd;
    padding: 6px 10px;
    border-radius: 40px;
    transition: 0.3s;
}

#products-section .product-details a:hover {
    background: #0a58ca;
}

/* Pricing + Titles */
#products-section .ps-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
    transition: 0.2s;
}

#products-section .ps-title:hover {
    color: #0d6efd;
}

#products-section del {
    color: #888;
}

#products-section .text-primary {
    color: #a60000 !important;
    font-size: 20px;
    font-weight: 700;
}

/* Add to Cart Button */
#products-section .product-item-add .btn {
    background: #a60000;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    padding: 10px 20px;
    transition: 0.3s;
}

#products-section .product-item-add .btn:hover {
    background: #a60000;
    transform: scale(1.05);
}

/* Pagination */
#products-section .pagination a {
    margin: 0 5px;
    padding: 10px 16px;
    background: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    border: 1px solid #ddd;
    transition: 0.3s;
}

#products-section .pagination a.active,
#products-section .pagination a:hover {
    background: #a60000;
    color: #fff;
    border-color: #a60000;
}

.pagination a,
.pagination span {
    padding: 10px 15px;
    margin: 0 4px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
}

.pagination a:hover {
    background: #0d6efd;
    color: #fff;
}

.pagination .active {
    background: #0d6efd;
    color: #fff !important;
    border-color: #0d6efd;
}

.pagination .disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* Search Box */
#products-section .input-group .form-control {
    border-radius: 8px 0 0 8px;
    border: 1px solid #ccc;
}

#products-section .input-group-text {
    background: #a60000;
    border-radius: 0 8px 8px 0;
    color: #fff;
    border: none;
}

/* Responsive */
@media (max-width: 991px) {
    #products-section .products-categories,
    #products-section .price {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    #products-section .product-item-inner-item img {
        height: 190px;
    }
}





/*Single Product Details*/

/* SECTION */
#single-product {
    background: #fef5ef;
    padding: 40px 0;
    font-family: Arial;
}

#single-product .product-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.5px;
}

.product-category {
    color: #777;
}

/* PRICE */
.product-price .new-price {
    font-size: 26px;
    font-weight: 700;
    color: #e63946;
}

.product-price .old-price {
    text-decoration: line-through;
    color: #999;
    margin-left: 10px;
}

.discount-badge {
    background: #e63946;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 10px;
    font-size: 12px;
}

/* GALLERY */
.product-gallery .main-image img {
    width: 100%;
    border-radius: 12px;
}

.thumb-row {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.thumb-row .thumb {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.25s;
    border: 2px solid transparent;
}

.thumb-row .thumb.active,
.thumb-row .thumb:hover {
    border-color: #a60000;
}

/* Horizontal row for main image + zoom preview */
.zoom-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    white-space: nowrap;       /* Prevents wrapping */
}

/* Main Image Area (fixed size) */
.main-image {
    position: relative;
    width: 520px;
    height: 520px;
    flex-shrink: 0;            /* Prevents shrinking */
    overflow: hidden;
}

.main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;      /* prevents accidental drag */
}

.main-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ff4c4c;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    text-transform: uppercase;
    z-index: 10;
}

/* Zoom Box (right side) */
.zoom-preview-box {
    width: 520px;
    height: 520px;
    border: 1px solid #ddd;
    display: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200%;
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.15);
    flex-shrink: 0;            /* Prevents shrinking */
    z-index: 999;
}

/* Zoom lens */
#zoomLens {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid #aaa;
    background: rgba(255,255,255,0.3);
    display: none;
    pointer-events: none;
    z-index: 999;
}

/* Thumbnails */
.thumb-row {
    display: flex;
    gap: 10px;
}

.thumb {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
}

.thumb.active {
    border-color: #e63946;
}

/* FIX: Prevent mobile white space caused by zoom row */
@media (max-width: 767px) {

    .zoom-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .main-image {
        width: 100% !important;
        height: auto !important;
    }

    .main-img {
        width: 100% !important;
        height: auto !important;
    }

    /* Hide zoom box completely on mobile */
    #zoomResult,
    #zoomLens {
        display: none !important;
    }

    /* Prevent page from stretching */
    body, html {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}





/* SHARE BUTTONS */
.share-buttons .btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 50px;
}

.share.fb {
    background: #4267B2;
    color: #fff;
}

.share.wa {
    background: #25D366;
    color: #fff;
}

/* QUANTITY */
.quantity-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-btn {
    width: 38px;
    height: 38px;
    background: #f1f1f1;
    border-radius: 50%;
    border: 1px solid #ddd;
    font-size: 20px;
}

.qty-input {
    width: 60px;
    text-align: center;
    font-size: 16px;
    border: 1px solid #ddd;
    height: 38px;
    border-radius: 6px;
}

/* ADD TO CART */


.add-cart-btn {
    background: linear-gradient(45deg, #ff9e2c, #a60000);
    color: #fff;
    padding: 12px 35px;
    border-radius: 50px;
    font-size: 16px;
    border: none;
    transition: 0.3s ease;
}

.add-cart-btn:hover {
    opacity: .85;
    color: #fff;
}

/* DESCRIPTION TAB */
#prodTabs .nav-link {
    font-weight: 600;
    color: #555;
}

#prodTabs .nav-link.active {
    color: #000;
}

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

    #single-product .product-title {
        font-size: 22px;
    }

    .thumb-row .thumb {
        width: 60px;
        height: 60px;
    }

    .add-cart-btn {
        width: 100%;
        text-align: center;
    }
}


/*Related Product Bottom single page */

.related-products {
    background-color: #fef5ef;
}

/* Section Titles */
.section-title {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
}

.section-subtitle {
    font-size: 15px;
    color: #666;
}

/* Card Wrapper */
.rp-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.rp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 18px rgba(0,0,0,0.12);
}

/* Image Area */
.rp-img-box {
    position: relative;
    overflow: hidden;
}
.rp-img-box {
    width: 100%;
    height: 260px;       /* Fixed height for all product images */
    overflow: hidden;
    border-radius: 10px;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rp-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Ensures images fill area without distortion */
    border-radius: 10px;
}

.rp-img {
    width: 100%;
    border-bottom: 1px solid #eee;
    transition: transform 0.4s ease;
}

.rp-card:hover .rp-img {
    transform: scale(1.05);
}

/* Badge */
.rp-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff4d4d;
    color: white;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

/* Info */
.rp-info {
    padding: 15px;
}

.rp-name {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    height: 42px;
    overflow: hidden;
}

/* Price */
.rp-price {
    margin: 10px 0;
}

.rp-old {
    text-decoration: line-through;
    color: #888;
    margin-right: 6px;
}

.rp-new {
    color: #ff7a00;
    font-weight: 700;
    font-size: 18px;
}

/* Add to cart button */
.rp-btn {
    background: #a60000;
    border: none;
    color: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    transition: 0.3s ease;
    width: 100%;
}

.rp-btn:hover {
    background: #e26800;
}



/*Create Account*/


        .register-box {
            max-width: 950px;
            margin: 40px auto;
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .left-panel {
            background: #ffc400;
            color: #fff;
            padding: 40px;
        }
        .left-panel h2 {
            font-weight: 700;
        }
        .register-btn {
            background: #ffc400;
            border: none;
        }

/*Login Account*/

.login-box {
            max-width: 900px;
            margin: 40px auto;
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .left-panel {
            background: #ffc400;
            color: #fff;
            padding: 40px;
        }
        .left-panel h2 {
            font-weight: 700;
        }
        .login-btn {
            background: #ffc400;
            border: none;
        }

/*Checkout*/  

#checkout-section {
    background: #fef5ef;
    padding: 60px 0;
}

#checkout-form .form-item label {
    font-weight: 600;
}

#order-summary table th,
#order-summary table td {
    vertical-align: middle;
}

#order-summary .total-row {
    font-weight: bold;
    border-top: 2px solid #222;
}

#place-order-btn {
    font-size: 18px;
    letter-spacing: 1px;
}


/*My Account User Details*/
#my-account-section {
        background: #fef5ef;  /* Light grey background OUTSIDE card */
        padding: 50px 0;
    }

    /* Card container */
    #my-account-card {
        background: #ffffff;
        border-radius: 14px;
        padding: 30px 25px;
        max-width: 900px;
        margin: auto;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    #my-account-card .info-title {
        font-size: 13px;
        color: #777;
        font-weight: 600;
        margin-bottom: 2px;
    }

    #my-account-card .info-value {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 18px;
    }

    #my-account-card .btn-block {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 10px;
    }

    #my-account-card hr {
        margin: 25px 0;
        opacity: 0.4;
    }


    /*My Orders*/

    #my-orders {
            background: #fef5ef;
            padding: 40px 0;
        }

        #my-orders .order-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 18px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        #my-orders .order-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }

        #my-orders .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #my-orders .order-id {
            font-size: 1.2rem;
            font-weight: 600;
            color: #2b2b2b;
        }

        #my-orders .order-date {
            color: #777;
            font-size: 0.9rem;
        }

        #my-orders .order-status {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: capitalize;
        }

        .status-pending { background: #fff3cd; color: #856404; }
        .status-processing { background: #cce5ff; color: #004085; }
        .status-shipped { background: #d4edda; color: #155724; }
        .status-delivered { background: #c3e6cb; color: #155724; }
        .status-cancelled { background: #f8d7da; color: #721c24; }

        #my-orders .order-footer {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #my-orders .total-amount {
            font-weight: 600;
            color: #333;
            font-size: 1rem;
        }

        #my-orders .view-btn {
            padding: 7px 20px;
            border-radius: 6px;
            background: #343a40;
            color: #fff;
            text-decoration: none;
            transition: 0.2s;
        }

        #my-orders .view-btn:hover {
            background: #000;
        }


        /*Order Details*/

        
        
        #order-details { 
            padding: 40px 0;
            background-color: #fef5ef; 
        
        }
        #order-details .card {
            border-radius: 14px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }
        #order-details .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        #order-details .order-id {
            font-size: 1.3rem;
            font-weight: 600;
        }
        #order-details .order-date {
            color: #777;
        }
        #order-details .order-status {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: capitalize;
        }
        .status-pending { background: #fff3cd; color: #856404; }
        .status-processing { background: #cce5ff; color: #004085; }
        .status-shipped { background: #d4edda; color: #155724; }
        .status-delivered { background: #c8d3cb; color: #155724; }
        .status-cancelled { background: #f8d7da; color: #721c24; }

        #order-details table img {
            border-radius: 8px;
        }
   
        #order-details .total-row { font-weight: 600; font-size: 1.1rem; background: #f8f9fa; }    
        .order-card { padding: 30px; border-radius: 12px; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.1); }
        .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
        .order-status { padding: 6px 12px; border-radius: 20px; color: #fff; text-transform: capitalize; font-weight: 500; }
        .status-pending { background: #ffc107; }
        .status-processing { background: #17a2b8; }
        .status-shipped { background: #007bff; }
        .status-delivered { background: #28a745; }
        .status-cancelled { background: #dc3545; }
        .billing-address { background: #f1f3f5; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
        .billing-address h5 { margin-bottom: 10px; }
        .total-row { font-weight: bold; background: #f8f9fa; }
        
        
.horoscope-section {
  background: #f8f9fa;
}

.horoscope-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  height: 100%;
}

.horoscope-card h5 {
  font-weight: 600;
}

.nav-pills .nav-link.active {
  background-color: #ff9800;
} 


.horoscope-section {
  background: #fef5ef;
}

/* Header */
        .page-title {
            font-size: 28px;
            font-weight: 700;
            color: #333;
        }

        /* Zodiac icons */
        .zodiac-box {
            background: #fff;
            border-radius: 10px;
            text-align: center;
            transition: 0.3s;
            cursor: pointer;
            min-width: 80px;
            min-height: 80px;
            padding: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            gap: 4px;
        }

        .zodiac-box:hover {
            background: #ffe08a;
        }

        .zodiac-icon {
            font-size: 28px;
        }

        .zodiac-name {
            font-size: 14px;
            margin-top: 5px;
            font-weight: 600;
        }
        
        :lang(kn) .zodiac-name {
         font-family: "Noto Sans Kannada", sans-serif;
         }

        :lang(te) .zodiac-name {
         font-family: "Noto Sans Telugu", sans-serif;
         }

         :lang(ta) .zodiac-name {
         font-family: "Noto Sans Tamil", sans-serif;
         }

        
        
        @media (max-width: 576px) {
         .zodiac-name {
          font-size: 11px;
          }

         .zodiac-box {
          min-height: 76px;
           }
          }
          
          .notranslate {
           translate: no;
          }


        /* Main content */
        .content-card {
            background: #fff;
            padding: 20px;
            border-radius: 12px;
        }

        /* Buttons */
        .tab-btn {
            border-radius: 20px;
            font-weight: 600;
        }

        /* Sidebar */
        .sidebar-card {
            background: #fff;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .sidebar-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .zodiac-box.active {
        background: #ffc107;
        color: #000;
        font-weight: 700;
        }

        .category-btn.active {
         background-color: #ffc107;
         border-color: #ffc107;
        color: #000;
        }
        
        


/* 404 Page Wrapper */
#notfoundpage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: #fef5ef !important;
}

/* Icon styling */
#notfoundpage i {
    font-size: 5rem;
    color: #0d6efd;
}

/* 404 Number */
#notfoundpage h1.display-1 {
    font-size: 6rem;
    font-weight: 800;
    color: #212529;
}

/* Page title */
#notfoundpage h1.mb-4 {
    font-weight: 600;
}

/* Description text */
#notfoundpage p {
    color: #6c757d;
    font-size: 1.05rem;
}

/* Button hover effect */
#notfoundpage .btn-primary {
    transition: all 0.3s ease;
    background-color: #a60000 !important;
}

#notfoundpage .btn-primary:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
}

/* Silver and Gold price */

/* Center whole section */
#metal-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0px 0px;
    background: #fef5ef;
}

/* Main container */
.metal-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Wrapper width control */
.metal-wrapper {
    max-width: 1000px;   /* 👈 controls center width */
    width: 100%;
}

/* Row centered */
.metal-row {
    display: flex;
    justify-content: center; /* 👈 center cards */
    gap: 20px;
    flex-wrap: wrap;
}

/* Cards */
.metal-box {
    flex: 1;
    max-width: 280px;   /* 👈 keeps them compact */
    min-width: 240px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    position: relative;
}

/* Typography */
.metal-title {
    font-size: 14px;
    color: #666;
}

.metal-price {
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin-top: 6px;
}

.metal-note {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
    color: #777;
}

/* Borders */
.metal-box.gold { border-left: 4px solid #d4af37; }
.metal-box.silver { border-left: 4px solid #9e9e9e; }

/* Arrows */
.metal-change {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 16px;
}

.metal-change.up { color: #2e7d32; }
.metal-change.down { color: #c62828; }

/* Mobile */
@media (max-width: 768px) {
    .metal-row {
        flex-direction: column;
        align-items: center;
    }

    .metal-box {
        max-width: 100%;
    }
}