body {
     color: #ffffff;
     /* overflow-x: hidden; */
     background-color: #04010a;
     background-image: url("images/greg-rakozy-oMpAz-DN-9I-unsplash.jpg");
     background-size: cover;
     background-position: center;
     background-repeat: repeat;
     background-attachment: fixed;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
   }

   h2,
   h1,
   h1 span,
   h2 span {
     font-family: 'Cinzel', serif;
     font-size: 2.8rem;
     letter-spacing: 1.4px;
     text-shadow: 0 0 20px rgba(247, 201, 72, 0.4);
   }



   p {
     font-family: "Poppins", sans-serif;
     font-weight: 400;
     font-style: normal;
   }



   section {
     background-color: #000000a3;
   }

   .astro-logo img {
     width: 280px;
   }



   .astro-dropdown {
     background: linear-gradient(to right,
         rgba(6, 5, 18, 0.95),
         rgba(12, 10, 30, 0.95));
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 10px;
     padding: 8px 0;
     margin-top: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
   }

   /* Dropdown links */
   .astro-dropdown .dropdown-item {
     color: #ffffff;
     font-size: 14px;
     padding: 10px 18px;
     opacity: 0.85;
     transition: all 0.3s ease;
     width: 250px;
   }

   /* Hover effect */
   .astro-dropdown .dropdown-item:hover {
     background: transparent;
     color: #f7c948;
     opacity: 1;
     padding-left: 24px;
   }

   /* Remove default Bootstrap arrow focus */
   .navbar .dropdown-toggle::after {
     border-top-color: #f7c948;
   }

   .navbar-nav .dropdown-toggle::after {
     display: none !important;
   }

   /* Mobile fix */
   @media (max-width: 991px) {
     .astro-dropdown {
       margin-top: 6px;
     }
   }

   @media (min-width: 992px) {

     /* Pull dropdown closer to Services */
     .navbar .dropdown-menu {
       margin-top: 1px !important;
       /* was ~12px */
     }
   }

   @media(max-width:768px) {
     .hero-content h1 {
       font-size: 30px !important;
     }

     .hero-content h1 span {
       font-size: 30px;
     }
   }

   /* ===== Desktop hover dropdown ===== */
   @media (min-width: 992px) {

     .navbar .dropdown:hover>.dropdown-menu {
       display: block;
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
       pointer-events: auto;
     }

     .navbar .dropdown-menu {
       display: block;
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
       transition: all 0.25s ease;
       pointer-events: none;
     }
   }

    .navbar{
        padding:0px!important;
    }

   .astro-header {
     position: sticky;
     top: 0;
     z-index: 9999;
     /*background: linear-gradient(to right,*/
     /*    rgba(6, 5, 18, 0.9),*/
     /*    rgba(12, 10, 30, 0.9));*/
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     /*border-bottom: 1px solid rgba(255, 255, 255, 0.08);*/
     padding: 0;
   }

   /* Logo */
   .astro-logo {
     font-size: 26px;
     font-weight: 700;
     color: #f7c948 !important;
     letter-spacing: 1px;
   }

   .astro-logo span {
     color: #ffffff;
     font-weight: 500;
   }

   .astro-logo i {
     color: #f7c948;
   }

   /* Nav Links */
   .navbar-nav .nav-link {
     position: relative;
     color: #ffffff !important;
     font-size: 14.5px;
     font-weight: 500;
     margin-left: 18px;
     opacity: 0.85;
     transition: all 0.3s ease;
   }

   .navbar-nav .nav-link i {
     color: #f7c948;
     font-size: 13px;
   }

   /* Hover underline animation */
   .navbar-nav .nav-link::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: -6px;
     width: 0;
     height: 2px;
     background: #f7c948;
     transition: 0.3s ease;
     transform: translateX(-50%);
   }

   .navbar-nav .nav-link:hover,
   .navbar-nav .nav-link.active {
     color: #f7c948 !important;
     opacity: 1;
   }

   .navbar-nav .nav-link:hover::after,
   .navbar-nav .nav-link.active::after {
     width: 60%;
   }

   /* Mobile */
   @media (max-width: 991px) {
     .navbar-nav .nav-link {
       margin: 10px 0;
     }
   }

   /* =========================================== Hero Section ======================================= */

   .hero-section {
     min-height: calc(100vh - 140px);
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
   }

   /* Soft glow background */
   .hero-section::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at top,
         rgba(247, 201, 72, 0.12),
         transparent 60%);
     z-index: -1;
   }

   /* Content */
   .hero-content h1 {
     font-size: 52px;
     font-weight: 700;
     margin: 20px 0;
   }

   .hero-content h1 span {
     color: #f7c948;
     text-shadow: 0 0 25px rgba(247, 201, 72, 0.6);
   }

   .hero-content p {
     max-width: 520px;
     opacity: 0.9;
     line-height: 1.8;
     font-size: 15.5px;
   }

   /* Badge */
   .hero-badge {
     display: inline-block;
     padding: 8px 18px;
     font-size: 13px;
     border-radius: 20px;
     background: rgba(247, 201, 72, 0.15);
     color: #f7c948;
     letter-spacing: 1px;
   }

   /* Buttons */
   .hero-buttons {
     margin-top: 35px;
     display: flex;
     gap: 18px;
     flex-wrap: wrap;
   }

   .btn-main {
     padding: 14px 36px;
     border-radius: 30px;
     font-weight: 600;
     background: linear-gradient(135deg, #f7c948, #f9844a);
     color: #000;
     border: none;
     transition: 0.3s;
   }

   @media (max-width : 768px) {
     .btn-main {
       padding: 14px 93px;
       /* margin-left: 20px; */
       font-size: 13px;
     }

     .btn-outline {
       padding: 14px 102px !important;
       /* margin-left: 20px; */
       font-size: 13px;
     }
   }

   .btn-main:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(247, 201, 72, 0.5);
   }

   .btn-outline {
     padding: 14px 34px;
     border-radius: 30px;
     border: 1px solid rgba(247, 201, 72, 0.6);
     color: #f7c948;
     background: transparent;
     transition: 0.3s;
   }

   .btn-outline:hover {
     background: rgba(247, 201, 72, 0.15);
     color: #f7c948;
   }

   /* Right Side Planet */
   .hero-visual {
     position: relative;
   }

   .planet-orbit {
     width: 260px;
     height: 260px;
     border-radius: 50%;
     border: 1px dashed rgba(247, 201, 72, 0.4);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: auto;
     animation: rotate 18s linear infinite;
   }

   .planet-orbit i {
     font-size: 70px;
     color: #f7c948;
     animation: pulse 3s infinite ease-in-out;
   }

   /* Wrapper to control layers */
   .planet-wrapper {
     position: relative;
     width: 260px;
     height: 260px;
     margin: auto;
   }

   /* Palm stays FIXED */
   .palm-overlay {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 330px;
     transform: translate(-50%, -50%);
     z-index: 3;
     pointer-events: none;
     filter: drop-shadow(0 0 20px rgba(247, 201, 72, 0.4));
   }

   /* Orbit stays BEHIND palm */
   .planet-orbit {
     position: absolute;
     inset: 0;
     z-index: 1;
   }

   /* Optional moon */
   .real-moon {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     background: radial-gradient(circle at 30% 30%, #fff, #ccc);
     box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
     position: relative;
     z-index: 2;
   }


   /* Zodiac ring rotating in opposite direction */
   .zodiac-ring {
     position: absolute;
     inset: -120px;
     /* slightly bigger than orbit */
     width: 180%;
     height: 180%;
     margin: auto;
     z-index: 0;
     /* behind everything */
     opacity: 0.55;
     animation: rotateReverse 22s linear infinite;
     pointer-events: none;
     filter: drop-shadow(0 0 18px rgba(247, 201, 72, 0.25));
   }

   /* Mobile responsive  */
   @media (max-width:768px) {
     .zodiac-ring {
       margin-top: 60%;
       width: 110%;
       height: 110%;
     }

     .planet-orbit {
       margin-top: 31%;
       height: 75%;
       width: 75%;
     }

   }

   /* Reverse rotation */
   @keyframes rotateReverse {
     from {
       transform: rotate(360deg);
     }

     to {
       transform: rotate(0deg);
     }
   }


   /* Animations */
   @keyframes rotate {
     from {
       transform: rotate(0deg);
     }

     to {
       transform: rotate(360deg);
     }
   }

   @keyframes pulse {

     0%,
     100% {
       transform: scale(1);
       opacity: 0.9;
     }

     50% {
       transform: scale(1.15);
       opacity: 1;
     }
   }

   /* Mobile */
   @media (max-width: 991px) {
     .hero-content h1 {
       font-size: 40px;
     }

     .hero-content p {
       margin: auto;
     }
   }

   section {
     padding: 90px 70px;
   }

   .section-title {
     text-align: center;
     font-size: 38px;
     margin-bottom: 55px;
   }

   /* ======================================================= About Section================================= ================= */

   .about-section {
     position: relative;
   }

   .down-btn a {
     text-decoration: none;
     margin-top: 30px;
     padding: 12px 28px;
     border-radius: 30px;
     border: 1px solid rgba(247, 201, 72, 0.6);
     background: transparent;
     color: #f7c948;
     font-weight: 500;
     transition: 0.3s;
     -webkit-border-radius: 30px;
     -moz-border-radius: 30px;
     -ms-border-radius: 30px;
     -o-border-radius: 30px;
   }

   .about-section .section-title span {
     color: #f7c948;
   }

   /* Glass Card */
   .about-glass {
     background: rgba(255, 255, 255, 0.22);
     backdrop-filter: blur(12px);
     border-radius: 22px;
     padding: 28px;
     border: 1px solid rgba(255, 255, 255, 0.18);
     transition: 0.4s ease;
   }

   .about-glass:hover {
     transform: translateY(-6px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
   }

   .section-title span {
     color: #f7c948;
     text-shadow:
       0 0 10px rgba(21, 20, 15, 0.6),
       0 0 25px rgba(55, 52, 44, 0.45),
       0 0 45px rgba(57, 52, 37, 0.25);
   }

   /* Headings */
   .about-glass h3 {
     font-size: 22px;
     margin-bottom: 16px;
     color: #ffffff;
   }

   .about-glass i {
     color: #f7c948;
   }

   /* Text */
   .about-glass p {
     font-size: 14.8px;
     line-height: 1.9;
     opacity: 0.9;
   }

   /* Bullet Points */
   .about-points {
     margin-top: 20px;
   }

   .about-points div {
     font-size: 14px;
     margin-bottom: 10px;
   }

   .about-points i {
     color: #f7c948;
     margin-right: 8px;
   }

   /* Highlight Card */
   .about-glass.highlight {
     background: linear-gradient(135deg,
         rgba(247, 201, 72, 0.22),
         rgba(255, 255, 255, 0.18));
   }

   /* Stats */
   .mission-stats {
     display: flex;
     justify-content: space-between;
     margin-top: 30px;
   }

   .mission-stats div {
     text-align: center;
   }

   .mission-stats h4 {
     font-size: 30px;
     color: #f7c948;
     margin-bottom: 6px;
   }

   .mission-stats span {
     font-size: 13px;
     opacity: 0.85;
   }

   /* Mobile */
   @media (max-width: 991px) {
     .mission-stats {
       gap: 25px;
       justify-content: center;
     }
   }

   .section-title {
     text-align: center;
     font-size: 42px;
     margin-bottom: 70px;
     font-family: 'Cinzel', serif;
     letter-spacing: 1px;
   }

   .section-title::after {
     content: "✦ ✧ ✦";
     display: block;
     margin-top: 14px;
     font-size: 14px;
     color: rgba(247, 201, 72, 0.7);
     letter-spacing: 8px;
   }

   /* ABOUT IMAGE */
   .about-image {
     position: relative;
     border-radius: 26px;
     overflow: hidden;
   }

   .about-image img {
     width: 100%;
     border-radius: 26px;
     filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
   }

   /* GLASS CARD */
   .about-glass {
     background: rgba(255, 255, 255, 0.18);
     backdrop-filter: blur(16px);
     border-radius: 26px;
     padding: 28px;
     border: 1px solid rgba(255, 255, 255, 0.18);
     box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
   }

   /* TABS */
   .about-tabs {
     display: flex;
     gap: 14px;
     margin-bottom: 28px;
   }

   .tab-btn {
     padding: 10px 28px;
     border-radius: 30px;
     border: 1px solid rgba(247, 201, 72, 0.6);
     background: transparent;
     color: #f7c948;
     font-size: 14px;
     cursor: pointer;
     transition: 0.35s;
   }

   .tab-btn.active,
   .tab-btn:hover {
     background: linear-gradient(135deg, #f7c948, #f9844a);
     color: #000;
     box-shadow: 0 10px 25px rgba(247, 201, 72, 0.45);
   }

   /* CONTENT */
   .tab-content {
     display: none;
     animation: fadeUp 0.45s ease;
   }

   .tab-content.active {
     display: block;
   }

   .about-glass h3 {
     font-size: 22px;
     margin-bottom: 14px;
   }

   .about-glass i {
     color: #f7c948;
     margin-right: 8px;
   }

   .about-glass p {
     font-size: 15px;
     line-height: 1.9;
     opacity: 0.92;
   }

   /* LIST */
   .about-list {
     margin-top: 18px;
     padding-left: 0;
   }

   .about-list li {
     list-style: none;
     margin-bottom: 10px;
     font-size: 14px;
     position: relative;
     padding-left: 22px;
   }

   .about-list li::before {
     content: "✦";
     position: absolute;
     left: 0;
     color: #f7c948;
   }

   @media (max-width: 768px) {
     .about-section .section-title span {
       font-size: 38px;
     }
   }

   /* ANIMATION */
   @keyframes fadeUp {
     from {
       opacity: 0;
       transform: translateY(15px);
     }

     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

   /* MOBILE */
   @media (max-width: 991px) {
     .about-glass {
       padding: 35px;
     }

     .about-tabs {
       justify-content: center;
     }
   }

   .about-tabs {
     position: relative;
     z-index: 5;
   }

   .tab-btn {
     position: relative;
     z-index: 6;
     pointer-events: auto;
   }

   /* FORCE REMOVE CLICK BLOCKERS */
   .about-section *,
   .about-glass *,
   .about-tabs *,
   .tab-btn {
     pointer-events: auto !important;
   }

   /* Disable overlays from capturing clicks */
   .about-section::before,
   .about-section::after,
   .about-glass::before,
   .about-glass::after {
     pointer-events: none !important;
   }

   .tab-content {
     display: none;
   }

   .tab-content.active {
     display: block;
   }



   /* ================================================ Services Section ================================ */
   .services-section {
     padding: 100px 0;
     text-align: center;
   }

   .section-title {
     font-size: 42px;
     margin-bottom: 50px;
   }

   .section-title span {
     color: #f7c948;
   }

   /* WHEEL */
   .services-wheel {
     position: relative;
     width: 1000px;
     height: 450px;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: visible;
   }

   .wheel-scene {
     width: 900px;
     height: 420px;
     perspective: 1200px;
     margin: auto;
     position: relative;
   }


   .wheel-carousel {
     position: absolute;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
     transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
   }


   /* CARD */
   .service-card {
     position: absolute;
     /* These next 4 lines are CRITICAL for stability */
     left: 50%;
     top: 50%;
     width: 280px;
     /* Your card width */
     height: 340px;
     /* Your card height */
     margin-left: -140px;
     /* Half of width */
     margin-top: -170px;
     /* Half of height */
     transform-style: preserve-3d;
     backface-visibility: hidden;
     /* Keeps things clean during rotation */
   }

   .card-inner {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 100%;
     height: 100%;
     transform: translate(-50%, -50%);
     padding: 40px 30px;
     border-radius: 22px;
     background: rgba(20, 10, 40, 0.4);
     /* Deep space purple/black */
     backdrop-filter: blur(15px);
     border: 1px solid rgba(247, 201, 72, 0.3);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
     transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
     overflow: hidden;
   }

   @media(max-width: 768px) {
     .card-inner {
       width: 80%;
       height: 95%;
     }

     .services-wheel {
       width: 365px;
       height: 345px;
     }

     .wheel-btn {
       top: 60% !important;
       width: 45px !important;
       height: 45px !important;
     }
   }

   /* ICON */
   .icon-circle {
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     /* Simple shadow initially */
   }

   .icon-circle i {
     font-size: 28px;
     color: #000;
   }

   .service-tag {
     font-size: 11px;
     letter-spacing: 1px;
     color: #f7c948;
     margin-bottom: 15px;
     display: inline-block;
   }

   .service-card h3 {
     margin-bottom: 12px;
   }

   .service-card p {
     opacity: 0;
     transform: translateY(15px);
     transition: 0.5s ease;
     font-size: 15px;
   }

   /* HOVER */
   .card-inner:hover {
     transform: translate(-50%, -55%) scale(1.03);
     /* Smaller scale for stability */
     border-color: rgba(247, 201, 72, 0.6);
     /* Softer border */

     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6),
       0 0 20px rgba(247, 201, 72, 0.15);
   }

   .card-inner::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at center, rgba(247, 201, 72, 0.05) 0%, transparent 80%);
     opacity: 0;
     transition: opacity 0.8s ease;
     pointer-events: none;
   }

   .card-inner:hover::before {
     opacity: 1;
   }

   .card-inner h3 {
     transition: color 0.4s ease;
   }

   .card-inner:hover h3 {
     color: #f7c948;
     text-shadow: 0 0 10px rgba(247, 201, 72, 0.5);
   }

   .icon-circle {
     width: 72px;
     height: 72px;
     margin: 0 auto 20px;
     border-radius: 50%;
     background: transparent;
     /* Removed the radial gradient background */
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.5s ease;
   }

   .icon-circle i {
     font-size: 32px;
     color: #f7c948;
     /* Gold color for the icon */
     transition: all 0.5s ease;
     /* Initial subtle glow */
     filter: drop-shadow(0 0 5px rgba(247, 201, 72, 0.3));
   }

   .card-inner:hover .icon-circle i {
     transform: scale(1.2);
     color: #fff;
     /* Optional: turn white for contrast when glowing */
     /* This creates a glow that follows the shape of the icon */
     filter: drop-shadow(0 0 8px #f7c948) drop-shadow(0 0 15px #f7c948);
   }

   .card-inner:hover .icon-circle {
     transform: translateY(-5px);
     /* Less dramatic jump */
     /* Soft glow only around the icon, not the whole card */
     box-shadow: 0 0 15px rgba(247, 201, 72, 0.4);
   }

   .card-inner:hover p {
     opacity: 1;
     transform: translateY(0);
   }

   /* BUTTONS */
   .wheel-btn {
     background: rgba(247, 201, 72, 0.1);
     backdrop-filter: blur(5px);
     border: 1px solid #f7c948;
     color: #f7c948;
     transition: 0.3s;
     z-index: 50;
     position: absolute;
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background: transparent;
     top: 50%;
     transform: translateY(-50%);

   }

   .wheel-btn:hover {
     background: #f7c948;
     color: #000;
     box-shadow: 0 0 20px #f7c948;
   }

   .prev-btn {
     left: 0px;
   }

   .next-btn {
     right: 0px;
   }

   /* ========================================== Horoscope Section===================== ================= */

   :root {
     --gold-glow: #f7c948;
     --cosmic-purple: #2d1b4e;
     --deep-space: #0f0c29;
   }

   /* --- 1. STARFIELD ANIMATION --- */
   @keyframes animStar {
     from {
       transform: translateY(0px);
     }

     to {
       transform: translateY(-2000px);
     }
   }

   #stars,
   #stars2,
   #stars3 {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     pointer-events: none;
     z-index: 0;
   }

   #stars {
     width: 1px;
     height: 1px;
     background: transparent;
     box-shadow: 442px 122px #FFF, 123px 443px #FFF, 890px 100px #FFF, 1500px 300px #FFF, 600px 800px #FFF, 200px 1200px #FFF;
     animation: animStar 50s linear infinite;
   }

   #stars2 {
     width: 2px;
     height: 2px;
     background: transparent;
     box-shadow: 221px 500px #FFF, 900px 200px #FFF, 1200px 700px #FFF, 400px 1400px #FFF;
     animation: animStar 100s linear infinite;
   }

   /* --- 2. SECTION & CARD --- */
   .horoscope-section {
     padding: 80px 0;
     /* background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); */
     position: relative;
     overflow: hidden;
     color: #fff;
     min-height: 100vh;
   }

   .horoscope-card {
     max-width: 850px;
     margin: auto;
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-radius: 30px;
     padding: 60px 50px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
     position: relative;
     z-index: 2;
   }

   /* --- 3. ORNAMENT POSITIONS --- */
   .ornament {
     position: absolute;
     font-size: 22px;
     filter: drop-shadow(0 0 8px var(--gold-glow));
     opacity: 0.8;
   }

   .top-left {
     top: 25px;
     left: 25px;
   }

   .bottom-right {
     bottom: 25px;
     right: 25px;
   }

   /* --- 4. INPUT FIELD FIXES (No White Space) --- */
   .input-wrapper label {
     display: block;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 8px;
     color: var(--gold-glow);
   }

   .input-group-custom {
     background: rgba(0, 0, 0, 0.4) !important;
     /* 1px Gold Border */
     border: 1px solid rgba(247, 201, 72, 0.3) !important;
     border-radius: 12px;
     display: flex;
     align-items: center;
     padding: 0 15px;
     transition: 0.3s;
   }

   .input-group-custom:focus-within {
     border-color: var(--gold-glow) !important;
     box-shadow: 0 0 12px rgba(247, 201, 72, 0.2);
   }

   .input-icon {
     color: var(--gold-glow);
     font-size: 16px;
     margin-right: 10px;
   }

 .input-group-custom input {
    background:transparent!important;
    border: none !important;
    color: #6e6b6b !important;  
    font-size: 14px;
    text-transform: lowercase;
    padding: 12px 0;
    width: 100%;
    outline: none !important;
}
input:-internal-autofill-selected {
     background: #13171c !important;
    background-color: light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: fieldtext !important;
}
   /* Calendar & Clock Icon Fix */
   input::-webkit-calendar-picker-indicator {
     filter: invert(1);
     cursor: pointer;
     opacity: 0.7;
   }

   /* --- 5. BUTTON --- */
   .btn-cosmic {
     position: relative;
     padding: 18px 50px;
     background: transparent;
     color: white;
     border: 2px solid var(--gold-glow);
     border-radius: 50px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     cursor: pointer;
     transition: 0.4s;
     overflow: hidden;
   }

   .btn-cosmic:hover {
     background: var(--gold-glow);
     color: #000;
     box-shadow: 0 0 30px var(--gold-glow);
   }

   /* Section Title decoration */
   .section-title span {
     color: rgb(251 191 36);
     text-shadow: 0 0 15px rgb(247 201 72 / 66%);
   }

   /* Testimonials Section */

   /* =========================================== Testimonials Section========================== ================= */
   .testimonial-section {
     padding: 100px 0;
     /* background: transparent; */
     position: relative;
     overflow: hidden;
   }

   /* Background Atmosphere */
   .celestial-glow {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(247, 201, 72, 0.05) 0%, transparent 70%);
     transform: translate(-50%, -50%);
     z-index: -1;
   }

   .testimonial-card {
     background: rgb(255 255 255 / 27%);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 40px 10px 40px 10px;
     /* Creative Asymmetrical Shape */
     padding: 40px;
     height: 100%;
     position: relative;
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }

   /* Hover Accent Line */
   .card-accent {
     position: absolute;
     top: 0;
     left: 0;
     width: 0;
     height: 3px;
     background: linear-gradient(90deg, transparent, var(--gold-glow));
     transition: 0.5s;
   }

   .testimonial-card:hover {
     transform: translateY(-15px) scale(1.02);
     background: rgba(255, 255, 255, 0.07);
     border-color: rgba(247, 201, 72, 0.3);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
   }

   .testimonial-card:hover .card-accent {
     width: 100%;
   }

   /* Quote Icon Decoration */
   .quote-wrapper {
     width: 50px;
     height: 50px;
     background: rgba(247, 201, 72, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
   }

   .quote-icon {
     font-size: 20px;
     color: var(--gold-glow);
   }

   .testimonial-text {
     font-style: italic;
     font-weight: 300;
     line-height: 1.8;
     color: rgba(255, 255, 255, 0.85);
     margin-bottom: 30px;
   }

   /* Planetary User Image */
   .user-img-wrapper {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .user-img-wrapper {
     overflow: hidden;
     /* border: 2px solid rgba(247, 201, 72, 0.3); */
   }

   .user-img-wrapper::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 50%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: 0.5s;
   }

   /* .testimonial-card:hover .user-img-wrapper::before {
     left: 100%;
   } */

   @keyframes auraPulse {
     0% {
       transform: scale(1);
       opacity: 0.8;
     }

     100% {
       transform: scale(1.4);
       opacity: 0;
     }
   }

   .user-img-wrapper::before {
     content: '✦';
     /* Star character */
     position: absolute;
     color: var(--gold-glow);
     font-size: 10px;
     animation: starOrbit 5s linear infinite;
   }

   @keyframes starOrbit {
     from {
       transform: rotate(0deg) translateX(35px) rotate(0deg);
     }

     to {
       transform: rotate(360deg) translateX(35px) rotate(-360deg);
     }
   }

   .testimonial-card:hover .user-img-wrapper {
     transform: rotate(360deg);
     /* background: linear-gradient(45deg, var(--gold-glow), #f9844a); */
   }

   .testimonial-user img {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #ffee0b;
   }

   .testimonial-footer {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 20px;
   }

   .testimonial-rating {
     margin-bottom: 15px;
   }

   .testimonial-rating i {
     color: var(--gold-glow);
     font-size: 12px;
     margin-right: 2px;
     text-shadow: 0 0 5px var(--gold-glow);
   }

   /* Featured Card (Middle one) */
   .featured {
     border: 1px solid rgba(247, 201, 72, 0.2);
     background: rgb(255 255 255 / 27%);
   }

   @media (max-width: 768px) {
     .testimonial-card {
       border-radius: 30px;
       padding: 30px;
     }
   }

   /* =================================================== How It Works ===================================== */
   .process-section {
     padding: 100px 0;
     position: relative;
     /* background: transparent; */
   }

   /* Constellation SVG Path */
   .process-svg-path {
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     height: 300px;
     transform: translateY(-50%);
     z-index: 0;
     opacity: 0.4;
   }

   /* Hexagon Card Styling */
   .process-hex-card {
     position: relative;
     width: 100%;
     padding: 60px 30px;
     text-align: center;
     z-index: 1;
     transition: all 0.5s ease;
   }

   /* The Sacred Geometry Shape */
   .hex-content {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     padding: 60px 40px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: 0.5s;
   }

   /* Glowing Border for Hexagon */
   .hex-border {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, #fdd463, #000000);
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     z-index: -1;
     padding: 2px;
     /* This creates the border thickness */
     opacity: 0.3;
   }

   .process-hex-card:hover .hex-content {
     background: rgba(247, 201, 72, 0.1);
     transform: translateY(-10px);
   }

   .process-hex-card:hover .hex-border {
     opacity: 1;
     /* filter: drop-shadow(0 0 15px var(--gold-glow)); */
   }

   /* Step Phase Tag */
   .step-tag {
     display: inline-block;
     font-size: 10px;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: #f7c948;
     margin-bottom: 15px;
     border: 1px solid #f7c948;
     padding: 4px 12px;
     border-radius: 50px;
   }

   /* Icon Styling */
   .process-icon-main {
     font-size: 40px;
     color: #fff;
     margin-bottom: 20px;
     transition: 0.5s;
   }

   .process-hex-card:hover .process-icon-main {
     color:rgb(255 195 0);
     transform: scale(1.2) rotateY(360deg);
   }

   .process-hex-card h3 {
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 15px;
     color: #fff;
   }

   .process-hex-card p {
     font-size: 14px;
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.7);
   }

   /* Mobile Adjustments */
   @media (max-width: 991px) {
     .process-svg-path {
       display: none;
     }

     .hex-content {
       clip-path: none;
       border-radius: 20px;
     }

     .hex-border {
       clip-path: none;
       border-radius: 20px;
     }
   }

   /* =============================================== Why Choose Us ========================================== */

   .why-us-section {
     padding: 80px 0;
     /* background: #0a0a0e; */
     /* Deep space background */
     overflow: hidden;
   }

   .celestial-divider {
     width: 100px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #f7c948, transparent);
     margin: 20px auto;
   }

   /* Card Styling */
   .why-card {
     position: relative;
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(15px);
     border-radius: 30px;
     padding: 50px 30px;
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
     z-index: 1;
   }

   /* The Glowing Aura Effect */
   .card-glow {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 50% 0%, rgba(247, 201, 72, 0.15), transparent 70%);
     opacity: 0;
     transition: 0.5s;
     z-index: -1;
   }

   .why-card:hover {
     transform: translateY(-15px) scale(1.02);
     border-color: rgba(247, 201, 72, 0.4);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
   }

   .why-card:hover .card-glow {
     opacity: 1;
   }

   /* Mystical Icon Wrapper */
   .why-icon-wrapper {
     position: relative;
     width: 100px;
     height: 100px;
     margin: 0 auto 30px;
   }

   .icon-ring {
     position: absolute;
     inset: -5px;
     border: 2px dashed rgba(247, 201, 72, 0.3);
     border-radius: 50%;
     animation: rotateRing 10s linear infinite;
   }

   .why-icon {
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #f7c948 0%, #f9844a 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 25px rgba(247, 201, 72, 0.3);
     position: relative;
     z-index: 2;
   }

   .why-icon i {
     font-size: 40px;
     color: #111;
   }

   /* Animations */
   @keyframes rotateRing {
     from {
       transform: rotate(0deg);
     }

     to {
       transform: rotate(360deg);
     }
   }

   /* Typography Update */
   .why-card h3 {
     color: #fff;
     font-family: 'Playfair Display', serif;
     /* Use a more elegant font if possible */
     font-size: 24px;
     margin-bottom: 15px;
   }

   .why-card p {
     color: #ccc;
     font-size: 15px;
     line-height: 1.7;
   }

   .why-badge {
     display: inline-block;
     margin-top: 25px;
     padding: 8px 20px;
     font-size: 11px;
     text-transform: uppercase;
     font-weight: 700;
     color: #f7c948;
     border: 1px solid rgba(247, 201, 72, 0.3);
     border-radius: 50px;
     background: transparent;
     transition: 0.3s;
   }

   .why-card:hover .why-badge {
     background: #f7c948;
     color: #000;
   }

   /* ===Footer=== */

   /* ================= ===================================FOOTER ================================================== */

   .site-footer {
     position: relative;
     background: linear-gradient(to right,
         rgba(6, 5, 18, 0.97),
         rgba(12, 10, 30, 0.97));
     padding: 70px 0 25px;
     color: #ffffff;
     overflow: hidden;
   }

   .site-footer::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.45);
     z-index: 0;
   }

   .footer-container {
     max-width: 1200px;
     margin: auto;
     padding: 0 20px;
     position: relative;
     z-index: 1;
   }

   .footer-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 40px;
   }

   /* Logo */
   .site-footer {
     background-color: #1a1a1a;
     /* Assuming a dark background for the gold to pop */
     color: #ffffff;
     padding: 60px 0 30px;
     font-family: 'Poppins', sans-serif;
   }

   .footer-logo {
     font-size: 22px;
     font-weight: 700;
     color: #f7c948;
     margin-bottom: 14px;
   }

   .footer-logo img {
     width: 250px;
   }

   /* Text & Contact Items */
   .footer-text,
   .contact-item {
     font-size: 14px;
     line-height: 1.7;
     opacity: 0.85;
   }

   .contact-item {
     display: flex;
     align-items: flex-start;
     /* Align icons to the top of the text line */
     margin-bottom: 12px;
     font-size: 14px;
     opacity: 0.9;
   }

   .contact-item i {
     color: #f7c948;
     width: 25px;
     min-width: 25px;
     margin-right: 12px;
     font-size: 16px;
     text-align: center;
     display: inline-block;
     margin-top: 4px;
   }

   .fa-whatsapp {
     font-size: 20px;
   }

   /* Headings */
   .site-footer h4 {
     margin-bottom: 20px;
     font-size: 18px;
     font-weight: 600;
     color: #f7c948;
     /* Matching the premium gold */
     position: relative;
   }

   /* Links */
   .footer-links a {
     display: block;
     color: #ffffff;
     text-decoration: none;
     margin-bottom: 12px;
     font-size: 14px;
     opacity: 0.85;
     transition: 0.3s ease;
   }

   .footer-links a:hover {
     color: #f7c948;
     padding-left: 5px;
   }

   /* Social icons */
   .social-icons {
     margin-top: 20px;
   }

   .social-icons i {
     font-size: 20px;
     /* margin-right: 15px; */
     color: black;
    background: linear-gradient(135deg, #f7c948, #f9844a);
    width: 30px;
    height: 30px;
    border-radius: 20px;
     cursor: pointer;
     padding: 4px;
     transition: 0.3s ease;
   }

   .social-icons i:hover {
     color: #ffffff;
     transform: translateY(-4px);
   }

   /* Bottom bar */
   .footer-bottom {
     text-align: center;
     margin-top: 45px;
     font-size: 13px;
     opacity: 0.7;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
   }

   .footer-bottom span {
     color: #f7c948;
     font-weight: 600;
   }


   @media (max-width:900px) {
     .about {
       grid-template-columns: 1fr;
     }

     header {
       padding: 20px 30px;
     }

     section {
       padding: 70px 30px;
     }

     .hero h1 {
       font-size: 40px;
     }

     footer {
       padding: 50px 20px 25px;
     }
   }

   header {
     padding: 20px 30px;
   }

   section {
     padding: 70px 30px;
   }

   .hero h1 {
     font-size: 40px;
   }

   /* Orbit */


   .real-moon {
     width: 330px;
     height: 260px;
     border-radius: 50%;
     background-image: url("images/real-moon.png");
     /* use HD moon PNG */
     background-size: cover;
     background-position: center;
     box-shadow:
       0 0 30px rgba(247, 201, 72, 0.6),
       inset -15px -15px 25px rgba(0, 0, 0, 0.4);
     animation: moon-float 6s ease-in-out infinite;
   }

   @keyframes moon-float {

     0%,
     100% {
       transform: translateY(0);
     }

     50% {
       transform: translateY(-14px);
     }
   }


   /* ==============================================================ABOUT PAGE CSS================================================= */
   /* ================SECTION 1=================== */
   /* Full Width Wrapper with Fixed Background */
   /*=============================== Banner Style ===========================*/
   :root {
     --starlight-gold: #d4af37;
     --cosmic-deep: #0b1026;
     --mystic-purple: #1a1a2e;
   }

   .about-page-heading h1 {
     font-size: xxx-large;
     padding-left: 20%;
   }

   .about-page-heading h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
   }

   /* ==========================trust section======================== */
   /* Container styling for a cosmic depth effect */
   .trust-section {
     padding: 120px 0;
     background: #060512;
     background-image:
       radial-gradient(circle at 20% 30%, rgba(247, 201, 72, 0.05) 0%, transparent 40%),
       radial-gradient(circle at 80% 70%, rgba(247, 201, 72, 0.05) 0%, transparent 40%);
     position: relative;
     overflow: hidden;
   }

   /* Creating a "Sun" glow behind the header */
   .trust-header::after {
     content: '';
     position: absolute;
     top: -50px;
     left: 50%;
     transform: translateX(-50%);
     width: 200px;
     height: 200px;
     background: #f7c948;
     filter: blur(120px);
     opacity: 0.15;
     z-index: 0;
   }

   .trust-header h2 {
     font-size: 48px;
     font-weight: 800;
     background: linear-gradient(135deg, #fff 30%, #f7c948 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 80px;
     position: relative;
     z-index: 1;
   }

   .trust-flex {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 40px;
     perspective: 1000px;
     /* Prepares cards for 3D hover effects */
   }

   /* The "Portal" Card Design */
   .trust-item {
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid rgba(255, 255, 255, 0.05);
     padding: 50px 30px;
     border-radius: 20px;
     position: relative;
     transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
   }

   /* Decorative Gold Corner accents without HTML changes */
   .trust-item::before {
     content: '✧';
     position: absolute;
     top: 15px;
     right: 15px;
     color: #f7c948;
     font-size: 20px;
     opacity: 0.3;
   }

   /* The Animated Hover State */
   .trust-item:hover {
     transform: translateY(-15px) rotateX(5deg);
     background: rgba(247, 201, 72, 0.03);
     border-color: rgba(247, 201, 72, 0.4);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(247, 201, 72, 0.1);
   }

   /* Icon Wrapper "Energy Aura" */
   .trust-icon-wrapper {
     width: 80px;
     height: 80px;
     background: transparent;
     border: 1px solid rgba(247, 201, 72, 0.3);
     border-radius: 50%;
     margin-bottom: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     transition: 0.5s;
   }

   /* Rotating Ring effect using pseudo-element */
   .trust-icon-wrapper::after {
     content: '';
     position: absolute;
     inset: -5px;
     border: 1px dashed #f7c948;
     border-radius: 50%;
     opacity: 0.2;
     animation: rotateRing 10s linear infinite;
   }

   @keyframes rotateRing {
     from {
       transform: rotate(0deg);
     }

     to {
       transform: rotate(360deg);
     }
   }

   .trust-item i {
     font-size: 32px;
     color: #f7c948;
     filter: drop-shadow(0 0 10px rgba(247, 201, 72, 0.5));
   }

   .trust-item h3 {
     font-size: 22px;
     color: #f7c948;
     margin-bottom: 20px;
     letter-spacing: 1px;
     font-family: 'Playfair Display', serif;
   }

   .trust-item p {
     font-size: 14px;
     line-height: 1.8;
     color: rgba(255, 255, 255, 0.7);
     transition: 0.3s;
   }

   .trust-item:hover p {
     color: #fff;
   }

   /* Staggering the heights for a "floating in space" look */
   @media (min-width: 992px) {
     .trust-item:nth-child(odd) {
       transform: translateY(40px);
     }

     .trust-item:nth-child(odd):hover {
       transform: translateY(25px) rotateX(5deg);
     }
   }

   /* ==============Breadcrumb Styling ==================*/
   .breadcrumb {
     background: transparent;
     padding-top: 10px 0;
   }

   .breadcrumb-item a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: 0.3s;
   }

   .breadcrumb-item a:hover {
     color: var(--starlight-gold);
   }

   .breadcrumb-item.active {
     color: var(--starlight-gold) !important;
     font-weight: bold;
   }

   .breadcrumb-item+.breadcrumb-item::before {
     color: white;
     content: "★";
     font-size: 10px;
   }

   @media(max-width:768px) {
     .about-page-heading h1 {
       padding-left: 50px !important;
       font-size: 30px !important;
     }

     .about-page-heading h1 span {
       padding-left: 0;
       font-size: 30px;
     }

     .page-banner {
       padding: 12px 0 !important;
     }

     .breadcrumb {
       padding-top: 12px;
       font-size: 13px;
     }

     .about-page-2nd-sec h5 {
       color: var(--starlight-gold);
       font-size: 18px;
       margin-bottom: 15px;
     }
   }

   /*============================ Banner ===============================*/
   /* .page-banner {
     background: linear-gradient(rgb(11 16 38 / 28%), rgb(18 18 19 / 85%)), url(images/about-page-banner.png) no-repeat center center / cover;
     padding: 89px 0;
   } */
.page-banner{
  padding: 89px 0;
    backdrop-filter: blur(14.75px);
    border-radius: 0 0 20px 20px;
    border-bottom: 1.5px solid #e3b04b59;
}
   /* Cosmic Card Effect */
   /* Star Animation Layers */
   .stars-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
     z-index: 1;
   }

   /* Twinkle Effect */
   #stars,
   #stars2,
   #stars3 {
     width: 1px;
     height: 1px;
     background: transparent;
     box-shadow: 100px 200px #FFF, 500px 600px #FFF, 800px 100px #FFF, 200px 800px #FFF, 100px 200px #FFF, 500px 600px #FFF, 800px 100px #FFF, 200px 800px #FFF;
     /* Add more coordinates for more stars */
     animation: animStar 50s linear infinite;
   }

   @keyframes animStar {
     from {
       transform: translateY(0px);
     }

     to {
       transform: translateY(-2000px);
     }
   }

   /*================================ Creative Card Design============================================ */
   .card-astrology {
     background: rgba(255, 255, 255, 0.03) !important;
     backdrop-filter: blur(12px);
     border: 1px solid rgba(212, 175, 55, 0.15) !important;
     border-radius: 20px;
     position: relative;
     overflow: hidden;
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
   }

   .card-astrology:hover {
     transform: translateY(-20px) scale(1.02);
     border-color: var(--starlight-gold) !important;
     box-shadow: 0 0 40px rgba(212, 175, 55, 0.2);
   }

   .image-stack img {
     width: 100%;
     height: auto;
     border-radius: 40px;
     -webkit-border-radius: 40px;
     -moz-border-radius: 40px;
     -ms-border-radius: 40px;
     -o-border-radius: 40px;
   }

   /* Floating Icon Box */
   .icon-circle {
     width: 80px;
     height: 80px;
     line-height: 80px;
     margin: 0 auto;
     background: rgba(212, 175, 55, 0.1);
     border: 1px solid var(--starlight-gold);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.5s;
   }

   .card-astrology:hover .icon-circle {
     background: var(--starlight-gold);
     transform: rotateY(360deg);
   }

   .card-astrology:hover .bi {
     color: #000 !important;
     /* Icon turns black on hover for contrast */
   }

   /* Decorative Gold Divider */
   .mini-divider {
     width: 50px;
     height: 2px;
     background: var(--starlight-gold);
     margin: 0 auto;
     transition: width 0.4s;
   }

   .card-astrology:hover .mini-divider {
     width: 100px;
   }

   /* Highlighted middle card for "Focus" */
   .highlight-card {
     border-top: 5px solid var(--starlight-gold) !important;
   }

   /* Letter Spacing for headers */
   .ls-3 {
     letter-spacing: 3px;
   }

   /* Decorative Elements */
   .divider-zodiac {
     color: var(--starlight-gold);
     letter-spacing: 10px;
     margin-top: 10px;
   }

   .image-stack {
     position: relative;
     display: inline-block;
   }

   .orb-decoration {
     position: absolute;
     top: -20px;
     right: -20px;
     width: 100px;
     height: 100px;
     background: linear-gradient(45deg, var(--starlight-gold), transparent);
     border-radius: 50%;
     z-index: -1;
     opacity: 0.3;
     animation: float 6s infinite ease-in-out;
   }

   @keyframes float {

     0%,
     100% {
       transform: translateY(0);
     }

     50% {
       transform: translateY(-20px);
     }
   }


   /* ==================================================last section========================================= */
   /* --- Transparent Sacred Promise Section --- */
   .sacred-promise-section {
     background: #000000a3;
     padding: 120px 0;
   }



   /* --- Glassmorphism Card Style --- */
   .ritual-card.glass-effect {
     background: rgba(255, 255, 255, 0.03);
     /* Nearly invisible background */
     backdrop-filter: blur(10px);
     /* Blurs whatever is behind the card */
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(212, 175, 55, 0.3);
     /* Subtle gold border */
     border-radius: 60px 60px 20px 20px;
     padding: 3.5rem 2rem;
     transition: all 0.4s ease;
   }

   .ritual-card.glass-effect:hover {
     background: rgba(212, 175, 55, 0.05);
     /* Slight gold tint on hover */
     border-color: var(--starlight-gold);
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
   }

   /* --- Typography for Dark/Transparent Backgrounds --- */
   .text-gold {
     color: var(--starlight-gold);
   }

   .text-light-muted {
     color: rgba(255, 255, 255, 0.7);
     /* Soft white for readability */
     line-height: 1.8;
   }

   /* --- Icon & Aura --- */
   .ritual-icon-container {
     font-size: 3rem;
     color: var(--starlight-gold);
     margin-bottom: 20px;
     position: relative;
     display: inline-block;
   }

   .ritual-glow {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
     z-index: -1;
     animation: breathing 4s infinite ease-in-out;
   }

   @keyframes breathing {

     0%,
     100% {
       transform: translate(-50%, -50%) scale(1);
       opacity: 0.4;
     }

     50% {
       transform: translate(-50%, -50%) scale(1.3);
       opacity: 0.7;
     }
   }

   /* --- Background Mystic Decoration --- */
   .mystic-orb-bg {
     position: absolute;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
     top: 20%;
     right: 10%;
     border-radius: 50%;
     filter: blur(50px);
     z-index: 1;
   }

   .badge-spiritual {
     color: var(--starlight-gold);
     font-size: 18px;
     font-family: 'Cinzel', serif;
     font-weight: 700;
   }

   /* ===================================================VASTU FOR OFFICE PAGE======================================================== */
   /* =============BANNER========== */
   .service-page-banner {
     background: linear-gradient(rgba(3, 7, 26, 0.568), rgba(29, 31, 3, 0.603)), url(images/service-page-banner.png) no-repeat center 80% / cover;
     padding: 72px 0;
   }



   .service-page-heading h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     font-size: 52px;
   }

   @media(max-width :768px) {
     .service-page-banner {
       padding: 20px !important;
     }

     .service-page-banner h1 {
       padding-left: 0;
       font-size: 28px;
     }

   }

   /* Sidebar CSS - Glassmorphism Style */
   .service-sidebar {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     position: sticky;
     top: 100px;
     z-index: 10;
     overflow: hidden;
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
     margin-bottom: 40px;
   }

   .sidebar-header {
     background: linear-gradient(135deg, #f7c948, #f9844a);
     color: #fff;
     padding: 20px;
     font-family: 'Cinzel', serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 15px;
     letter-spacing: 2px;
     text-align: center;
     border-bottom: 1px solid rgba(244, 185, 66, 0.3);
   }
   .bor-right{
        border-right: 1px solid #ffffff17;
   }
   .service-list {
     list-style: none;
     padding: 15px 0;
     margin: 0;
   }

   .service-list li {
     margin: 8px 15px;
     border-radius: 12px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border: 1px solid transparent;
   }

   .service-list li a {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 18px;
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     font-weight: 500;
     transition: 0.3s;
   }

   .service-list li.active {
     background: rgba(244, 185, 66, 0.2);
     border: 1px solid rgba(244, 185, 66, 0.5);
     box-shadow: 0 0 20px rgba(244, 185, 66, 0.2);
   }

   .service-list li.active a {
     color: #f4b942 !important;
     font-weight: 700;
   }

   .service-list li:hover:not(.active) {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     transform: translateY(-2px);
   }

   .service-list li a i {
     color: #f4b942;
     transition: transform 0.5s ease;
   }

   .service-list li:hover a i {
     transform: rotate(180deg) scale(1.2);
   }

   /* --- The Active Underline Logic --- */
   .service-list li a::after {
     content: '';
     position: absolute;
     bottom: 5px;
     left: 10px;
     width: 0;
     /* Hidden by default */
     height: 2px;
     background: #d4af37;
     box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
     transition: width 0.4s ease-in-out;
   }

   /* Active State: Underline grows */
   /* .service-list li.active a::after {
     width: calc(100% - 20px);
   } */

   .service-list li.active a {
     color: #f4b942 !important;
     font-weight: 700;
   }

   /* Hover effect for non-active links */
   .service-list li:hover:not(.active) a::after {
     width: 30%;
     /* Shows a small preview line on hover */
   }

   .service-list li a i {
     color: #d4af37;
     transition: transform 0.3s ease;
   }

   .service-list li:hover a i {
     transform: translateX(5px);
   }

   /* ============================right-content sec-1==================== */
   :root {
     --gold-primary: #d4af37;
     --gold-secondary: #f9e29d;
     --dark-bg: #0a0a0c;
   }

   .vastu-growth-wrapper {
     background: var(--dark-bg);
     color: #fff;
     overflow: hidden;
     border-radius: 30px;
     margin-bottom: 50px;
   }

   /* 1. The Card Container */
   .vastu-crystal-card {
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(212, 175, 55, 0.1);
     padding: 3.5rem 2rem;
     text-align: center;
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     position: relative;
     height: 100%;
     z-index: 1;
   }

   /* 2. Fix: Prevent Flickering */
   .corner-line,
   .card-shimmer {
     position: absolute;
     pointer-events: none;
     /* Mouse ignores these, staying on the card */
     z-index: 0;
   }

   /* 3. Corner Line Styles & Animation */
   .corner-line {
     width: 35px;
     height: 35px;
     border: 1.5px solid var(--gold-primary);
     transition: all 0.6s ease-in-out;
     opacity: 0.4;
   }

   .tl {
     top: -2px;
     left: -2px;
     border-right: none;
     border-bottom: none;
   }

   .br {
     bottom: -2px;
     right: -2px;
     border-left: none;
     border-top: none;
   }

   .vastu-crystal-card:hover {
     transform: translateY(-8px);
     border-color: rgba(212, 175, 55, 0.5);
     background: rgba(212, 175, 55, 0.04);
   }

   .vastu-crystal-card:hover .corner-line {
     width: calc(100% + 4px);
     height: calc(100% + 4px);
     opacity: 1;
   }

   /* 4. Content Stability */
   .card-content {
     position: relative;
     z-index: 2;
     /* Keeps text above the shimmer and lines */
   }

   /* 5. Shimmer Effect */
   .card-shimmer {
     top: 0;
     left: -150%;
     width: 150%;
     height: 100%;
     background: linear-gradient(90deg,
         transparent,
         rgba(255, 255, 255, 0.06),
         transparent);
     transition: left 0.8s ease;
   }

   .vastu-crystal-card:hover .card-shimmer {
     left: 150%;
   }

   /* 6. Visual Polish */
   .vastu-icon-hex {
     width: 70px;
     height: 70px;
     background: var(--gold-primary);
     margin: 0 auto 1.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     color: #000;
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .vastu-crystal-card:hover .vastu-icon-hex {
     transform: rotateY(180deg);
   }

   .gold-gradient-text {
     background: linear-gradient(90deg, #d4af37, #f9e29d, #fff, #d4af37);
     background-size: 200% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: shine 4s linear infinite;
   }

   @keyframes shine {
     to {
       background-position: 200% center;
     }
   }

   .glow-divider {
     height: 1px;
     width: 50px;
     background: var(--gold-primary);
     margin: 1.2rem auto;
     box-shadow: 0 0 10px var(--gold-primary);
   }

   /* ======================the ideal office layout============================= */
   /* Section Background with animated Grid */
   .blueprint-section {
     background-color: #050508;
     background-image:
       linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
       linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
     background-size: 40px 40px;
     padding: 100px 0;
     position: relative;
     color: #ffffff;
     border-radius: 30px;
     margin-bottom: 50px;
   }

   /* Header Scan Line Animation */
   .header-scan-line {
     width: 200px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #d4af37, transparent);
     margin: 10px auto;
     position: relative;
     overflow: hidden;
   }

   .header-scan-line::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: #fff;
     animation: scanLine 3s infinite;
   }

   @keyframes scanLine {
     0% {
       left: -100%;
     }

     100% {
       left: 100%;
     }
   }

   /* Blueprint Node Styles */
   .blueprint-node {
     background: rgba(10, 10, 15, 0.9);
     border: 1px solid rgba(212, 175, 55, 0.1);
     padding: 30px;
     height: 100%;
     position: relative;
     transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
     overflow: hidden;
   }

   .blueprint-node:hover {
     background: rgba(20, 20, 25, 1);
     border-color: rgba(212, 175, 55, 0.4);
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   }

   /* Corner Bracket Accents */
   .node-corner {
     position: absolute;
     width: 15px;
     height: 15px;
     border: 2px solid #d4af37;
     opacity: 0.3;
     transition: 0.3s;
   }

   .tr {
     top: 0;
     right: 0;
     border-left: none;
     border-bottom: none;
   }

   .bl {
     bottom: 0;
     left: 0;
     border-right: none;
     border-top: none;
   }

   .blueprint-node:hover .node-corner {
     width: 100%;
     height: 100%;
     opacity: 0.1;
   }

   /* Icon & Radar Ring */
   .node-icon-wrapper {
     position: relative;
     width: 50px;
     height: 50px;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .node-icon-wrapper i {
     font-size: 1.8rem;
     color: #d4af37;
     z-index: 2;
   }

   .icon-ring {
     position: absolute;
     width: 100%;
     height: 100%;
     border: 1px solid #d4af37;
     border-radius: 50%;
     animation: radarPulse 2s infinite;
   }

   @keyframes radarPulse {
     0% {
       transform: scale(0.8);
       opacity: 1;
     }

     100% {
       transform: scale(1.5);
       opacity: 0;
     }
   }

   /* Coordinates & Content */
   .node-coord-wrap {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 10px;
   }

   .coord-dot {
     width: 6px;
     height: 6px;
     background: #d4af37;
     border-radius: 50%;
     box-shadow: 0 0 8px #d4af37;
   }

   .node-coord {
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: #d4af37;
     font-weight: bold;
   }

   .node-title {
     font-family: 'Cinzel', serif;
     font-size: 1.25rem;
     margin-bottom: 12px;
     color: #fff;
     letter-spacing: 1px;
   }

   .node-text {
     font-size: 0.85rem;
     color: #999;
     line-height: 1.6;
   }

   /* Vertical Scanner Line inside Card */
   .node-scanner {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: rgba(212, 175, 55, 0.2);
     pointer-events: none;
     transform: translateY(-100%);
   }

   .blueprint-node:hover .node-scanner {
     animation: verticalScan 2s linear infinite;
   }

   @keyframes verticalScan {
     0% {
       transform: translateY(0);
     }

     100% {
       transform: translateY(300px);
     }
   }

   /* Badge Pulse */
   .pulse {
     animation: linePulse 2s infinite alternate;
   }

   @keyframes linePulse {
     from {
       opacity: 0.2;
       width: 30px;
     }

     to {
       opacity: 1;
       width: 60px;
     }
   }

   .gold-gradient-text {
     background: linear-gradient(90deg, #d4af37, #f9e29d, #fff, #d4af37);
     background-size: 200% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: shine 4s linear infinite;
   }

   @keyframes shine {
     to {
       background-position: 200% center;
     }
   }

   /* ===========================mastering the vastu element================================= */
   .element-glass-box {
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid rgba(212, 175, 55, 0.1);
     border-radius: 30px;
     backdrop-filter: blur(15px);
     margin-bottom: 50px;
   }

   .elements-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 25px;
   }

   .element-pill {
     position: relative;
     padding: 30px;
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.05);
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }

   .element-pill:hover {
     transform: translateY(-10px);
   }

   /* Element Specific Glows */
   .water:hover {
     border-color: #00d2ff;
     box-shadow: 0 10px 30px rgba(0, 210, 255, 0.2);
   }

   .wood:hover {
     border-color: #52c234;
     box-shadow: 0 10px 30px rgba(82, 194, 52, 0.2);
   }

   .fire:hover {
     border-color: #ff4e50;
     box-shadow: 0 10px 30px rgba(255, 78, 80, 0.2);
   }

   .earth:hover {
     border-color: #d4af37;
     box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
   }

   .element-icon {
     font-size: 2rem;
     margin-bottom: 15px;
     transition: 0.3s;
   }

   .water .element-icon {
     color: #00d2ff;
   }

   .wood .element-icon {
     color: #52c234;
   }

   .fire .element-icon {
     color: #ff4e50;
   }

   .earth .element-icon {
     color: #d4af37;
   }

   .element-direction {
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: #888;
   }

   .element-name {
     color: #fff;
     font-family: 'Cinzel', serif;
     margin: 5px 0 10px;
     font-size: 1.2rem;
   }

   .element-benefit {
     font-size: 0.85rem;
     color: #bbb;
     margin: 0;
     line-height: 1.5;
   }

   /* Subtle Animated Background Elements */
   .element-wave,
   .element-flame {
     position: absolute;
     bottom: -20px;
     right: -20px;
     width: 80px;
     height: 80px;
     background: currentColor;
     filter: blur(40px);
     opacity: 0.1;
     z-index: 0;
   }

   /* =-============================================cta============================================= */
   /* Main Wrapper */
   .cta-celestial-portal-wrapper {
     position: relative;
     padding: 60px 0;
     background-color: #05050a;
     /* Fallback color */
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   /* FIX: Dedicated Background Image Layer */
   .portal-bg-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /* Use ../ if your CSS is in a folder like /css/style.css */
     background-image:
       radial-gradient(circle at 50% 50%, rgb(5 5 8 / 82%) 0%, #05050a 90%), url(images/vastu-office.png);
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     /* Creates a high-end parallax effect */
     z-index: 0;
   }

   /* Creative "Celestial" Glow */
   .portal-overlay-glow {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 150%;
     height: 150%;
     transform: translate(-50%, -50%);
     background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
     pointer-events: none;
     z-index: 1;
   }

   .portal-content {
     position: relative;
     z-index: 5;
     /* Ensures text is always on top */
   }

   /* Ring behind the title */
   .portal-ring {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 300px;
     height: 300px;
     border: 1px dashed rgba(212, 175, 55, 0.2);
     border-radius: 50%;
     animation: rotateRing 20s linear infinite;
   }

   @keyframes rotateRing {
     from {
       transform: translate(-50%, -50%) rotate(0deg);
     }

     to {
       transform: translate(-50%, -50%) rotate(360deg);
     }
   }

   .cta-title {
     font-size: clamp(2.5rem, 5vw, 4rem);
     /* Responsive font sizing */
     color: #fff;
     margin-bottom: 2.5rem;
     letter-spacing: 2px;
   }

   .gold-shimmer-text {
     background: linear-gradient(90deg, #d4af37, #f9e29d, #fff, #d4af37);
     background-size: 200% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: textShine 3s linear infinite;
     display: inline-block;
   }

   @keyframes textShine {
     to {
       background-position: 200% center;
     }
   }

   /* High-End Portal Button */
   .vastu-portal-btn {
     position: relative;
     display: inline-block;
     padding: 22px 55px;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: 4px;
     text-decoration: none;
     font-weight: 600;
     font-size: 0.85rem;
     border: 1px solid rgba(212, 175, 55, 0.6);
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(10px);
     transition: all 0.4s ease;
     overflow: hidden;
   }

   .vastu-portal-btn:hover {
     color: #000;
     background: #d4af37;
     box-shadow: 0 0 40px rgba(212, 175, 55, 0.5);
     border-color: #fff;
     transform: scale(1.02);
   }

   .btn-flare {
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: 0.6s;
   }

   .vastu-portal-btn:hover .btn-flare {
     left: 100%;
   }

   /* ==================================vastu-for home======================================= */
   .vastu-home-page-banner {
     background: linear-gradient(rgba(3, 7, 26, 0.568), rgba(29, 31, 3, 0.603)), url(images/vastu-homee.png) no-repeat center 95% / cover;
     padding: 72px 0;
   }



   .vastu-home-page-heading h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     font-size: 52px;
   }

   .section-padding {
     padding: 80px 0px 0px 0px !important;
   }

   @media(max-width :768px) {
     .vastu-home-page-banner {
       padding: 20px !important;
     }

     .vastu-home-page-banner h1 {
       padding-left: 0;
       font-size: 28px;
     }

   }

   /* ==================================section-1================================================= */
   :root {
     --gold-glow: #d4af37;
     --deep-space: #0f172a;
     --celestial-purple: #334155;
   }

   .vastu-content {
     position: relative;
     padding: 2rem;
     /* background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.05), transparent); */
   }

   /* Unique Geometric Title */
   .celestial-title-wrap {
     position: relative;
     margin-bottom: 3rem;
   }

   .vastu-title {
     font-family: 'Playfair Display', serif;
     /* Use a serif font for elegance */
     font-weight: 700;
     color: var(--deep-space);
     text-transform: uppercase;
     letter-spacing: 2px;
     border-bottom: 2px solid var(--gold-glow);
     display: inline-block;
     padding-bottom: 10px;
     color: white;
   }

   /* Floating Card Style */
   .vastu-card-unique {
     background: #080707d6;
     border: 1px solid rgba(212, 175, 55, 0.2);
     border-radius: 20px;
     /*Sharpcornersfeelmorearchitectural/serious*/
     position: relative;
     padding: 40px 25px 25px;
     transition: 0.5s ease;
     box-shadow: 10px 10px 0px rgba(15, 23, 42, 0.05);
     /*Blockyshadow*/
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     -ms-border-radius: 20px;
     -o-border-radius: 20px;
   }

   .vastu-card-unique:hover {
     transform: translate(-5px, -5px);
     box-shadow: 15px 15px 0px rgb(251 191 36 / 65%);
     border-color: rgb(251 191 36 / 34%);
   }

   /* Sacred Symbol Icon */
   .symbol-marker {
     position: absolute;
     top: -25px;
     left: 25px;
     width: 50px;
     height: 50px;
     background: var(--gold-primary);
     color: rgb(0 0 0);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   }

   /* Hexagon */


   /* Element Badges */
   .element-pill {
     display: inline-block;
     padding: 2px 12px;
     border: 1px solid var(--gold-glow);
     color: var(--gold-glow);
     font-size: 0.7rem;
     text-transform: uppercase;
     margin-right: 5px;
     border-radius: 50px;
   }

   /* The "Why Vastu" Section with a mystical feel */
   .mystic-focus {
     background: #171718;
     color: #fff;
     padding: 3rem;
     margin-top: 3rem;
     border-radius: 20px;
     position: relative;
     overflow: hidden;
   }

   .mystic-focus::after {
     content: "❈";
     position: absolute;
     right: -20px;
     bottom: -20px;
     font-size: 150px;
     opacity: 0.1;
     color: var(--gold-glow);
   }

   /* Color variations for the new element-pills */
   .element-pill {
     padding: 20px 35px;
     border-radius: 50px;
     font-size: 0.75rem;
     text-transform: uppercase;
     margin-right: 5px;
     background: rgba(255, 255, 255, 0.1);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.2);
   }

   /* Optional: Element specific border colors */
   .element-pill:contains('Fire') {
     border-color: #ff4d4d;
   }

   .element-pill:contains('Water') {
     border-color: #4da6ff;
   }

   /* Spacing for the new benefits section */
   .vastu-benefits h6 {
     letter-spacing: 1px;
     text-transform: uppercase;
     font-size: 0.9rem;
   }

   .vastu-benefits p {
     line-height: 1.6;
   }

   /* ======================why align your home=========================== */
   /* Unique styling for the Benefits Section */
   .benefit-card-inner {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 15px;
     transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
     position: relative;
     overflow: hidden;
   }

   .benefit-card-inner:hover {
     background: rgba(255, 255, 255, 0.07);
     transform: translateY(-8px);
     border-color: rgba(255, 193, 7, 0.3);
     /* Subtle warning color glow */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
   }

   /* Decorative glow behind icons */
   .benefit-icon-mini {
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 193, 7, 0.1);
     border-radius: 10px;
     margin-bottom: 20px;
   }

   /* Subtle accent line on hover */
   .benefit-card-inner::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 3px;
     background: #ffc107;
     /* Bootstrap Warning Color */
     transition: width 0.4s ease;
   }

   .benefit-card-inner:hover::after {
     width: 100%;
   }

   /* Ensure the text stays readable */
   .vastu-benefits h4 {
     font-size: 1.5rem;
     letter-spacing: 2px;
     text-transform: uppercase;
   }

   /*=========== ===============================vastu for factory page=========================================== */
   .factory-page-banner {
     background: linear-gradient(rgba(3, 7, 26, 0.568), rgba(29, 31, 3, 0.603)), url(images/commercial.png) no-repeat center 45% / cover;
     padding: 72px 0;
   }



   .factory-page-heading h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     font-size: 52px;
   }


   /* Sidebar Fix Logic */
   @media (min-width: 992px) {
     .service-sidebar {
       position: sticky;
       top: 100px;
       /* Adjust based on your header height */
       z-index: 10;
     }
   }

   /* Content spacing for the right side */
   .factory-vastu-content {
     padding-left: 20px;
   }

   .text-gold {
     color: #d4af37;
   }

   .vastu-crystal-card h4 {
     color: #fff;
     font-family: 'Cinzel', serif;
     margin-bottom: 15px;
   }

   /* Diagnostic Card Container */
   .industrial-diagnostic-card {
     position: relative;
     background: #08080c;
     border: 1px solid rgba(212, 175, 55, 0.2);
     padding: 50px;
     border-radius: 4px;
     /* Industrial sharp edges */
     overflow: hidden;
     margin: 50px 0px;
   }

   /* Background Grid Effect */
   .diagnostic-grid {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image:
       radial-gradient(rgba(212, 175, 55, 0.05) 1px, transparent 1px),
       linear-gradient(rgba(212, 175, 55, 0.02) 1px, transparent 1px);
     background-size: 20px 20px;
     z-index: 0;
   }

   /* Radar Ping Animation */
   .radar-ping {
     position: absolute;
     top: 50%;
     right: 10%;
     width: 200px;
     height: 200px;
     background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
     border: 1px solid rgba(212, 175, 55, 0.2);
     border-radius: 50%;
     animation: radarExpand 4s infinite linear;
     z-index: 1;
   }

   @keyframes radarExpand {
     0% {
       transform: scale(0.5);
       opacity: 0;
     }

     50% {
       opacity: 1;
     }

     100% {
       transform: scale(2);
       opacity: 0;
     }
   }

   /* Status Indicator (Blinking Dot) */
   .status-indicator {
     display: flex;
     align-items: center;
     gap: 10px;
   }

   .status-indicator .dot {
     width: 8px;
     height: 8px;
     background: #00ff88;
     /* Green for "Ready" */
     border-radius: 50%;
     box-shadow: 0 0 10px #00ff88;
     animation: blink 1.5s infinite;
   }

   @keyframes blink {
     50% {
       opacity: 0.3;
     }
   }

   .status-text {
     font-size: 0.7rem;
     color: #888;
     text-transform: uppercase;
     letter-spacing: 2px;
   }

   /* Technical Button */
   .vastu-tech-btn {
     position: relative;
     display: block;
     padding: 18px 30px;
     background: transparent;
     border: 1px solid #d4af37;
     color: #fff;
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 3px;
     font-weight: bold;
     overflow: hidden;
     transition: 0.3s;
   }

   .vastu-tech-btn:hover {
     background: #d4af37;
     color: #000;
     box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
   }

   .btn-scan-line {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: #fff;
     box-shadow: 0 0 10px #fff;
     animation: verticalScan 2s infinite linear;
   }

   @keyframes verticalScan {
     0% {
       top: 0;
     }

     100% {
       top: 100%;
     }
   }

   .stat-label {
     display: block;
     font-size: 0.7rem;
     color: #888;
     text-transform: uppercase;
   }

   .stat-value {
     font-size: 1.5rem;
     font-weight: bold;
     font-family: 'Cinzel', serif;
   }

   .micro-text {
     font-size: 0.65rem;
     text-transform: uppercase;
     letter-spacing: 1px;
   }

   /* ================================numero consultation================================== */
   /* Unique Styles for Numero Page */

   .numero-page-banner {
     background: linear-gradient(rgba(3, 7, 26, 0.568), rgba(29, 31, 3, 0.603)), url(images/numero-ban.png) no-repeat center 45% / cover;
     padding: 72px 0;
   }



   .numero-page-heading h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     font-size: 52px;
   }

   .service-content {
     padding-left: 20px;
   }

   .numero-last {
     background: #0e0e0eb8;
     border: 1px dashed #d4af37;
     margin-bottom: 50px;
   }

   .numero-hero-card {
     position: relative;
     overflow: hidden;
     border-radius: 30px;
     background: linear-gradient(135deg, #0d0d18 0%, #1a2236 100%);
     color: #fff;
     padding: 40px;
     margin-bottom: 40px;
     border: 1px solid rgba(212, 175, 55, 0.3);
   }

   .numero-hero-card::after {
     content: "1 7 3 9 5";
     position: absolute;
     top: -20px;
     right: 10px;
     font-size: 8rem;
     font-weight: 900;
     color: rgba(212, 175, 55, 0.05);
     font-family: serif;
     z-index: 0;
   }

   .text-gold {
     color: #d4af37 !important;
     letter-spacing: 1px;
   }

   .feature-box {
     background: #0e0e0eb8;
     border: none;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border-bottom: 4px solid #d4af37;
   }

   .feature-box:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(212, 175, 55, 0.15);
   }

   .number-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background: #d4af37;
     color: #fff;
     border-radius: 50%;
     margin-right: 15px;
     font-weight: bold;
   }

   .list-item-custom {
     padding: 15px;
     border-radius: 12px;
     margin-bottom: 10px;
     background: rgba(212, 175, 55, 0.03);
     border-left: 3px solid transparent;
     transition: 0.3s;
   }

   .list-item-custom:hover {
     background: rgba(212, 175, 55, 0.08);
     border-left: 3px solid #d4af37;
     padding-left: 25px;
   }

   .btn-gold {
     background: #d4af37;
     border: none;
     border-radius: 50px;
     font-weight: 600;
     transition: all 0.3s;
     box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
   }

   .btn-gold:hover {
     background: #b8962d;
     transform: scale(1.05);
     color: #fff;
   }

   /* ============================================astrology consultation styles=============================== */

   .astro-consul-page-banner {
     background: linear-gradient(rgba(3, 7, 26, 0.568), rgba(29, 31, 3, 0.603)), url(images/astro-cons.png) no-repeat center 45% / cover;
     padding: 72px 0;
   }



   .astro-consul-page-heading h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     font-size: 52px;
   }

   .astro-content-wrapper {
     color: #333;
     line-height: 1.8;
   }

   .astro-hero {
     border-radius: 20px;
     padding: 50px 40px;
     color: #fff;
     position: relative;
     overflow: hidden;
     margin-bottom: 40px;
     box-shadow: 0 10px 30px rgba(45, 27, 78, 0.2);
     background: linear-gradient(135deg, #0d0d18 0%, #1a2236 100%);
   }

   .astro-hero::before {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: url('https://www.transparenttextures.com/patterns/stardust.png');
     opacity: 0.3;
   }

   .text-gold-custom {
     color: #d4af37;
     font-weight: 700;
   }

   .astro-card {
     border: none;
     border-radius: 15px;
     background: #080707d6;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     transition: 0.3s ease;
     height: 100%;
     padding: 25px;
     border-top: 5px solid #d4af37;
     color: #d4af37;
   }

   .astro-card h4 {
     font-family: 'Cinzel', serif;
   }

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

   .astro-icon-circle {
     width: 60px;
     height: 60px;
     background: #f8f4ff;
     color: #2d1b4e;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     margin-bottom: 20px;
   }

   /* ==================================zodiacx ================================ */
   /* Container Styling */
   .methodology-section {
     padding: 60px 20px;
     background: #080707d6;
     text-align: center;
     border-radius: 20px;
   }

   .methodology-title {
     color: #e3b04b;
     /* Gold accent */
     font-size: 2.5rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-family: 'Cinzel', serif;
   }

   .methodology-text {
     color: #ffffff;
     max-width: 600px;
     margin: 0 auto 40px;
     line-height: 1.6;
   }

   .methodology-text strong {
     color: #e3b04b;
     font-family: 'Cinzel', serif;
   }

   /* The Grid */
   .zodiac-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
     gap: 20px;
     perspective: 1000px;
   }

   /* Individual Cards */
   .zodiac-card {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(5px);
     border: 1px solid rgba(227, 176, 75, 0.2);
     border-radius: 15px;
     padding: 25px 10px;
     color: #fff;
     font-weight: 500;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     cursor: pointer;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
   }

   .zodiac-card span {
     font-size: 2rem;
     display: block;
     color: #e3b04b;
     text-shadow: 0 0 10px rgba(227, 176, 75, 0.5);
   }

   /* Hover Effects */
   .zodiac-card:hover {
     background: rgba(227, 176, 75, 0.1);
     border-color: #e3b04b;
     transform: translateY(-10px) rotateX(10deg);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
   }

   .zodiac-card:hover span {
     transform: scale(1.2);
     text-shadow: 0 0 20px rgba(227, 176, 75, 0.8);
   }

   /* ============================================appointment-curtain section ================================================== */
   /* Container & Prep Box */
   .appointment-curtain {
     margin-top: 5rem;
     padding: 20px;
     text-align: center;
   }

   .prep-vault {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
     border: 1px solid rgba(227, 176, 75, 0.3);
     border-radius: 24px;
     padding: 40px 20px;
     max-width: 750px;
     margin: 0 auto 50px;
     box-shadow: 0 20px 50px rgba(45, 27, 78, 0.05);
   }

   .prep-title {
     font-family: 'cinzel', serif;
     font-weight: 700;
     color: #e3b04b;
     margin-bottom: 15px;
   }

   .sparkle {
     color: #e3b04b;
     margin-right: 8px;
   }

   .prep-subtitle {
     color: #ffffff;
     font-size: 0.95rem;
     margin-bottom: 30px;
   }

   /* Icons & Keys */
   .keys-grid {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 20px;
   }

   .key-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     min-width: 120px;
     padding: 20px;
     background: #fdfbf5;
     border-radius: 15px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .key-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 20px rgba(227, 176, 75, 0.15);
   }

   .key-item i {
     font-size: 1.8rem;
     color: #e3b04b;
     margin-bottom: 10px;
   }

   .key-item span {
     font-size: 0.85rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #2d1b4e;
   }

   /* Button Styling */
   .btn-celestial {
     position: relative;
     display: inline-flex;
     align-items: center;
     padding: 18px 50px;
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
     color: #e3b04b !important;
     text-decoration: none;
     font-weight: 700;
     border-radius: 25px;
     overflow: hidden;
     border: 1px solid #e3b04b;
     transition: all 0.3s ease;
     -webkit-border-radius: 25px;
     -moz-border-radius: 25px;
     -ms-border-radius: 25px;
     -o-border-radius: 25px;
   }

   .btn-celestial:hover {
     box-shadow: 0 0 25px rgba(227, 176, 75, 0.4);
     letter-spacing: 1px;
   }

   .btn-content i {
     font-size: 1.4rem;
     vertical-align: middle;
   }

   /* Animation for the title icon */
   .bi-stars {
     display: inline-block;
     animation: pulse-glow 2s infinite ease-in-out;
   }

   @keyframes pulse-glow {

     0%,
     100% {
       opacity: 1;
       filter: drop-shadow(0 0 2px #e3b04b);
     }

     50% {
       opacity: 0.6;
       filter: drop-shadow(0 0 8px #e3b04b);
     }
   }

   /* ==============================contact us page==================================== */

   .contact-page-banner {
     background: linear-gradient(rgba(3, 7, 26, 0.568), rgba(29, 31, 3, 0.603)), url(images/contact.jpg) no-repeat center 53% / cover;
     padding: 72px 0;
   }



   .contact-page-heading h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     font-size: 52px;
   }

   .contact-cosmos {
     padding: 100px 0;
     /* background: #fdfbf5;  */
     overflow: hidden;
   }

   .cosmic-badge {
     background: rgba(212, 175, 55, 0.1);
     color: #d4af37;
     padding: 5px 20px;
     border-radius: 50px;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 0.8rem;
     letter-spacing: 2px;
   }

   .section-heading {
     font-family: 'cinzel', serif;
     color: #d4af37;
     margin-top: 17px;
   }

   /* The Node Card */
   .contact-node {
     position: relative;
     background: #040404a3;
     padding: 40px 30px;
     /* Asymmetric border radius for a more organic, unique feel */
     border-radius: 60px 15px 60px 15px;
     border: 1px solid rgba(0, 0, 0, 0.03);
     /* box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;  */
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     height: 100%;
     z-index: 1;
   }

   .contact-node:hover {
     transform: translateY(-10px) rotate(1deg);
     border-color: #d4af37;
   }

   /* Floating Icon Box */
   .node-icon {
     position: absolute;
     top: -30px;
     left: 40px;
     width: 65px;
     height: 65px;
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
     color: #d4af37;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     border-radius: 18px;
     transform: rotate(-10deg);
     box-shadow: 0 10px 20px rgba(45, 27, 78, 0.2);
     transition: 0.5s;
   }

   .contact-node:hover .node-icon {
     transform: rotate(0deg) scale(1.1);
     background: linear-gradient(135deg, #f7c948, #f9844a);
     color: #fff;
   }
.display-3{
      --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
    background: linear-gradient(135deg, #f7c948, #f9844a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
   /* Content Styling */
   .node-content h5 {
     margin-top: 15px;
     font-weight: 700;
     color: #d4af37;
     font-size: 1.25rem;
     font-family: 'cinzel', serif;
   }

   .node-content p {
     color: #ffffff;
     line-height: 1.6;
     margin-bottom: 0;
   }

   /* Background Decorative Element */
   .node-decoration {
     position: absolute;
     bottom: 20px;
     right: 20px;
     width: 40px;
     height: 40px;
     border-bottom: 2px solid #d4af37;
     border-right: 2px solid #d4af37;
     border-radius: 0 0 15px 0;
     opacity: 0.2;
     transition: 0.5s;
   }

   .contact-node:hover .node-decoration {
     width: 60px;
     height: 60px;
     opacity: 1;
   }

   /* Active State (The Middle Card) */
   .contact-node.active {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
   }

   .contact-node.active .node-content h5,
   .contact-node.active .node-content p {
     color: #fff;
   }

   .contact-node.active .node-icon {
     /* background: #d4af37; */
         background: linear-gradient(135deg, #f7c948, #f9844a);
     color: #fff;
   }

   /* <!-- =======================================================energy alignment annd form================================================= -- */
   /* Section Container */
   .energy-alignment {
     padding: 100px 0;
     /* background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); */
     position: relative;
     overflow: hidden;
   }

   /* Typography & Decorative Line */
   .oracle-line {
     width: 3px;
     height: 50px;
     background: #d4af37;
     margin-bottom: 20px;
   }

   .energy-text {
     color: #d4af37;
     position: relative;
     display: inline-block;
   }

   .energy-text::after {
     content: '';
     position: absolute;
     bottom: 8px;
     left: 0;
     width: 100%;
     height: 12px;
     background: rgba(212, 175, 55, 0.15);
     z-index: -1;
   }

   /* Left Side: Socials & Map */
   .social-orbs {
     display: flex;
     gap: 15px;
     margin-bottom: 40px;
   }

   .orb-link {
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
     color: #2d1b4e;
     border-radius: 50%;
     text-decoration: none;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     transition: 0.3s;
     border: 1px solid #eee;
   }

   .orb-link:hover {
     background: #000000;
     color: #d4af37;
     transform: rotate(360deg);
   }

   .map-portal {
     position: relative;
     padding: 12px;
     background: #fff;
     border-radius: 30px;
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
   }

   .portal-frame {
     border-radius: 20px;
     overflow: hidden;
     filter: grayscale(100%);
     transition: 0.5s ease;
   }

   .map-portal:hover .portal-frame {
     filter: grayscale(0%);
   }

   .portal-label {
     position: absolute;
     bottom: -10px;
     right: 30px;
     background: #d4af37;
     color: #fff;
     padding: 8px 20px;
     border-radius: 50px;
     font-size: 0.8rem;
     font-weight: 600;
   }

   /* Right Side: The Form Sanctuary */
   .form-sanctuary {
     background: #00000073;
     padding: 50px;
     border-radius: 40px;
     border: 1px solid rgba(212, 175, 55, 0.2);
     box-shadow: 0 20px 80px rgba(45, 27, 78, 0.08);
   }

   .form-header {
     margin-bottom: 35px;
   }

   .form-header h4 {
     color: #d4af37;
     font-weight: 700;
     font-family: 'cinzel', serif;
   }

   .form-header p {
     color: #888;
     font-size: 0.95rem;
   }

   /* Input Styling */
   .celestial-input-group {
     position: relative;
   }

   .c-input {
     width: 100%;
     padding: 15px 15px 15px 50px;
     border: 1px solid #eee;
     background: #fdfdfd;
     border-radius: 12px;
     transition: 0.3s;
     outline: none;
     color: #2d1b4e;
   }

   .c-input:focus {
     border-color: #d4af37;
     background: #fff;
     box-shadow: 0 5px 15px rgba(212, 175, 55, 0.1);
   }

   .celestial-input-group i {
     position: absolute;
     left: 20px;
     top: 50%;
     transform: translateY(-50%);
     color: #d4af37;
     font-size: 1.1rem;
   }

   .celestial-input-group textarea+i {
     top: 25px;
     transform: none;
   }

   /* Submit Button */
   .btn-submit-celestial {
     width: 100%;
     padding: 18px;
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
     color: #d4af37;
     border: none;
     border-radius: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     transition: 0.4s;
     cursor: pointer;
   }

   .btn-submit-celestial:hover {
     background: #d4af37;
     color: #fff;
     transform: scale(1.02);
     box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
   }

   /* Mobile Adjustments */
   @media (max-width: 991px) {
     .form-sanctuary {
       padding: 30px;
     }

     .energy-alignment::before {
       display: none;
     }
   }

   /* 3. The Submit Button */
   .btn-send {
     background: #2d1b4e;
     color: #fff;
     border-radius: 50px;
     padding: 15px 40px;
     font-weight: 600;
     letter-spacing: 1px;
     transition: 0.3s;
     border: none;
   }

   .btn-send:hover {
     background: #d4af37;
     transform: scale(1.05);
   }

   /* ==================================================FAQ SECTION================================================= */
   /* Section 4: Celestial FAQ Styles */
   :root {
     --gold: #d4af37;
     --deep-purple: #2d1b4e;
   }

   .faq-section {
     /* background: radial-gradient(circle at 0% 0%, #3a2363 0%, #1a0f30 100%); */
     padding: 120px 0;
     position: relative;
   }

   /* Curiosity Badge */
   .curiosity-badge {
     color: var(--gold);
     font-weight: 800;
     letter-spacing: 4px;
     margin-bottom: 10px;
     font-size: 0.9rem;
   }

   .glow-text {
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
   }

   /* Yantra Animation */
   .yantra-portal {
     position: relative;
     display: inline-block;
   }

   .floating-yantra {
     max-width: 180px;
     opacity: 0.4;
     animation: float 6s ease-in-out infinite;
   }

   @keyframes float {

     0%,
     100% {
       transform: translateY(0) rotate(0deg);
     }

     50% {
       transform: translateY(-20px) rotate(5deg);
     }
   }

   /* Accordion Styling */
   .custom-accordion .accordion-item {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.08);
     margin-bottom: 20px;
     border-radius: 20px !important;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     backdrop-filter: blur(12px);
   }

   .custom-accordion .accordion-item:hover {
     border-color: rgba(212, 175, 55, 0.4);
     transform: translateX(10px);
   }

   .custom-accordion .accordion-button {
     background: transparent;
     color: #fff;
     font-size: 1.15rem;
     font-weight: 600;
     padding: 25px;
     box-shadow: none;
     display: flex;
     align-items: center;
   }

   /* The Number Circle */
   .faq-number {
     width: 40px;
     height: 40px;
     border: 1px solid var(--gold);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 20px;
     font-size: 0.8rem;
     color: var(--gold);
     transition: 0.3s;
   }

   .accordion-button:not(.collapsed) .faq-number {
     background: var(--gold);
     color: var(--deep-purple);
     box-shadow: 0 0 15px var(--gold);
   }

   .accordion-button:not(.collapsed) {
     background: rgba(212, 175, 55, 0.05);
     color: var(--gold);
   }

   .accordion-body {
     padding: 0 25px 30px 85px;
     /* Aligns text under the question, not the number */
   }

   .body-content {
     border-left: 1px solid rgba(212, 175, 55, 0.3);
     padding-left: 20px;
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.8;
   }

   /* Modern Arrow Icon */
   .custom-accordion .accordion-button::after {
     filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(10deg);
   }

   /* ====================================TRUST BANNER===================================================== */
   .trust-sanctuary {
     padding: 80px 0;
     background: linear-gradient(to bottom, #000000, #0a0a0a);
     border-top: 1px solid rgba(212, 175, 55, 0.2);
     border-bottom: 5px solid #d4af37;
   }

   .trust-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 30px;
   }

   .trust-card {
     text-align: center;
     padding: 55px;
     position: relative;
     transition: all 0.4s ease;
     border: 1px solid #d4af37;
     border-radius: 30px;
   }

   /* Icon Aura Effect */
   .aura-wrapper {
     position: relative;
     width: 80px;
     height: 80px;
     margin: 0 auto 25px;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .aura-wrapper i {
     font-size: 2.5rem;
     color: #ffffff;
     z-index: 2;
     transition: 0.3s;
   }

   .aura-ring {
     position: absolute;
     width: 100%;
     height: 100%;
     border: 2px dashed #d4af37;
     border-radius: 50%;
     opacity: 0.3;
     animation: rotate-aura 10s linear infinite;
   }

   .aura-wrapper::before {
     content: '';
     position: absolute;
     width: 60px;
     height: 60px;
     background: rgb(212 175 55 / 26%);
     border-radius: 35% 65% 70% 30% / 30% 30% 70% 70%;
     animation: morph-aura 4s ease-in-out infinite;
   }

   /* Typography */
   .trust-info h6 {
     color: #d4af37;
     font-weight: 800;
     font-size: 0.9rem;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     margin-bottom: 10px;
     font-family: 'Cinzel', serif;
   }

   .trust-info p {
     font-size: 0.85rem;
     color: #777;
     max-width: 180px;
     margin: 0 auto;
   }

   /* Hover States */
   .trust-card:hover {
     transform: translateY(-5px);
   }

   .trust-card:hover i {
     color: #d4af37;
     transform: scale(1.1);
   }

   .trust-card:hover .aura-ring {
     opacity: 1;
     border-style: solid;
   }

   /* Animations */
   @keyframes rotate-aura {
     from {
       transform: rotate(0deg);
     }

     to {
       transform: rotate(360deg);
     }
   }

   @keyframes morph-aura {

     0%,
     100% {
       border-radius: 35% 65% 70% 30% / 30% 30% 70% 70%;
     }

     50% {
       border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     }
   }

   /* =============================================HOROSCOPE PAGE ====================================================== */
   .horoscope-page-banner {
     background: linear-gradient(rgba(3, 7, 26, 0.568), rgba(29, 31, 3, 0.603)), url(images/horoscope.jpg) no-repeat center 95% / cover;
     padding: 72px 0;
   }



   .horoscope-page-heading h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     font-size: 62px;
   }

   /* ========================================================forecast================================================================ */
   :root {
     --gold: #fbbf24;
     --gold-glow: rgba(251, 191, 36, 0.3);
     --glass-bg: rgba(255, 255, 255, 0.03);
     --glass-border: rgba(255, 255, 255, 0.1);
   }

   /* Floating Animation for the whole card */
   .cosmic-card-wrapper {
     animation: float 6s ease-in-out infinite;
   }

   .cosmic-card {
     position: relative;
     padding: 2rem;
     border-radius: 24px;
     background: var(--glass-bg);
     backdrop-filter: blur(12px);
     border: 1px solid var(--glass-border);
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
   }

   /* The Animated Border Glow */
   .cosmic-card::before {
     content: "";
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: conic-gradient(transparent, var(--gold-glow), transparent 30%);
     animation: rotate 10s linear infinite;
     z-index: 1;
   }

   /* Inner content mask to keep the background dark */
   .cosmic-card::after {
     content: "";
     position: absolute;
     inset: 2px;
     background: linear-gradient(135deg, #0d0d18 0%, #1a2236 100%);
     /* Match your body background */
     border-radius: 22px;
     z-index: 1;
   }

   .cosmic-title {
     color: var(--gold);
     font-size: 1.1rem;
     text-transform: uppercase;
     letter-spacing: 3px;
     font-weight: 300;
     margin-bottom: 1rem;
   }

   .cosmic-text {
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.8;
     font-size: 1.05rem;
   }

   .icon-orb {
     width: 70px;
     height: 70px;
     background: linear-gradient(135deg, var(--gold), #f59e0b);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 20px var(--gold-glow);
     color: #1e293b;
     font-size: 1.8rem;
   }

   .cosmic-badge {
     position: absolute;
     top: -15px;
     left: 20px;
     background: var(--gold);
     color: #000;
     padding: 6px 16px;
     border-radius: 50px;
     font-weight: bold;
     font-size: 0.8rem;
     z-index: 10;
     box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
     transform: rotate(-3deg);
   }

   .highlight-white {
     color: #fff;
     font-weight: 600;
   }

   .highlight-gold {
     color: var(--gold);
     font-weight: 600;
     text-decoration: underline;
   }

   /* Keyframes */
   @keyframes float {

     0%,
     100% {
       transform: translateY(0px);
     }

     50% {
       transform: translateY(-10px);
     }
   }

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

     to {
       transform: rotate(360deg);
     }
   }

   /* ========================================================alignment================================================================ */
   :root {
     --celestial-gold: #fbbf24;
     --deep-space: #0f172a;
     --glass: rgba(255, 255, 255, 0.05);
   }

   .alignment-universe {
     background: linear-gradient(135deg, #0d0d18 0%, #1a2236 100%);
     position: relative;
     overflow: hidden;
   }

   /* Star Divider */
   .star-divider {
     color: var(--celestial-gold);
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .star-divider::before,
   .star-divider::after {
     content: '';
     width: 100px;
     height: 1px;
     background: linear-gradient(to right, transparent, var(--celestial-gold), transparent);
     margin: 0 15px;
   }

   /* The Diamond Card */
   .celestial-card {
     position: relative;
     background: var(--glass);
     backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     height: 180px;
     /* clip-path: polygon(50% -45%, 113% 50%, 53% 150%, -8% 50%); */
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.5s ease;
     cursor: pointer;
     border-radius: 20px;
   }

   .celestial-card:hover {
     transform: scale(1.1) rotate(5deg);
     background: rgba(251, 191, 36, 0.1);
     border-color: var(--celestial-gold);
   }

   /* Floating Inner Glow */
   .inner-glow {
     position: absolute;
     width: 60px;
     height: 60px;
     background: var(--celestial-gold);
     filter: blur(40px);
     opacity: 0.2;
     transition: opacity 0.3s ease;
   }

   .celestial-card:hover .inner-glow {
     opacity: 0.6;
   }

   .card-content {
     text-align: center;
     z-index: 5;
   }

   .icon-circle {
     font-size: 1.8rem;
     color: var(--celestial-gold);
     margin-bottom: 5px;
     animation: pulse 3s infinite;
   }

   .card-content label {
     display: block;
     text-transform: uppercase;
     font-size: 0.65rem;
     letter-spacing: 2px;
     color: #94a3b8;
   }

   .card-content .value {
     font-weight: 800;
     font-size: 1rem;
     color: white;
   }

   .color-indigo {
     color: #818cf8 !important;
     text-shadow: 0 0 10px rgba(129, 140, 248, 0.5);
   }

   /* Animations */
   @keyframes pulse {
     0% {
       transform: scale(1);
       opacity: 0.7;
     }

     50% {
       transform: scale(1.1);
       opacity: 1;
     }

     100% {
       transform: scale(1);
       opacity: 0.7;
     }
   }

   /* Mobile Tweak */
   @media (max-width: 576px) {
     .celestial-card {
       height: 150px;
     }
   }

   /* ========================================================advice================================================================ */
   /* Container Path */
   .timeline-path {
     position: relative;
     padding-left: 3rem;
     margin-top: 2rem;
   }

   /* The Vertical Stardust Line */
   .timeline-path::before {
     content: '';
     position: absolute;
     left: 14px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: linear-gradient(to bottom, var(--gold), transparent);
     box-shadow: 0 0 15px var(--gold);
   }

   .advice-header {
     color: var(--gold);
     font-family: 'serif';
     letter-spacing: 2px;
     margin-bottom: 3rem;
   }

   /* The Floating Bubble */
   .advice-bubble {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 1.5rem;
     border-radius: 0 20px 20px 20px;
     backdrop-filter: blur(8px);
     transition: all 0.3s ease;
     position: relative;
   }

   .advice-bubble:hover {
     background: rgba(255, 255, 255, 0.07);
     transform: translateX(10px);
     border-color: var(--gold);
   }

   /* The Glowing Node Marker */
   .node-marker {
     position: absolute;
     left: -3rem;
     width: 30px;
     height: 30px;
     background: #0f172a;
     border: 2px solid var(--gold);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     color: var(--gold);
     box-shadow: 0 0 10px var(--gold);
     transition: 0.3s;
   }

   .advice-node:hover .node-marker {
     background: var(--gold);
     color: #000;
     transform: scale(1.2);
   }

   /* Text Polish */
   .advice-bubble p {
     color: #cbd5e1;
     line-height: 1.6;
   }

   /* ========================================================Lunar energy================================================================ */
   :root {
     --lunar-gold: #fbbf24;
     --energy-blue: #38bdf8;
     --panel-bg: rgba(15, 23, 42, 0.6);
   }

   .lunar-dashboard {
     background: var(--panel-bg);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 40px;
     padding: 2rem;
     backdrop-filter: blur(20px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
   }

   /* The Moon Visual */
   .lunar-orb {
     position: relative;
     padding: 3rem 1rem;
     display: inline-block;
   }

   .lunar-orb i {
     font-size: 5rem;
     color: var(--lunar-gold);
     filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.5));
     animation: moon-glow 4s ease-in-out infinite;
   }

   .moon-aura {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 120px;
     height: 120px;
     background: var(--lunar-gold);
     filter: blur(60px);
     opacity: 0.15;
     border-radius: 50%;
   }

   .lunar-label {
     margin-top: 1rem;
   }

   .phase-name {
     display: block;
     color: white;
     text-transform: uppercase;
     letter-spacing: 3px;
     font-weight: 700;
     font-size: 0.9rem;
   }

   .cycle-day {
     color: #64748b;
     font-size: 0.75rem;
   }

   /* Metrics Styling */
   .energy-metrics-panel {
     padding: 1rem 2rem;
   }

   .metrics-title {
     color: var(--lunar-gold);
     font-size: 1.2rem;
     margin-bottom: 2rem;
     font-weight: 300;
     letter-spacing: 2px;
   }

   .metric-item {
     margin-bottom: 1.5rem;
   }

   .metric-info {
     display: flex;
     justify-content: space-between;
     color: #94a3b8;
     margin-bottom: 8px;
     font-size: 0.9rem;
   }

   .custom-progress {
     height: 4px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 2px;
     overflow: hidden;
   }

   .bar-glow {
     height: 100%;
     background: linear-gradient(90deg, transparent, var(--lunar-gold));
     box-shadow: 0 0 10px var(--lunar-gold);
     border-radius: 2px;
   }

   .bar-glow.secondary {
     background: linear-gradient(90deg, transparent, var(--energy-blue));
     box-shadow: 0 0 10px var(--energy-blue);
   }

   .lunar-insight {
     background: rgba(251, 191, 36, 0.05);
     border-radius: 15px;
     padding: 1rem;
     margin-top: 2rem;
     display: flex;
     align-items: flex-start;
   }

   .lunar-insight i {
     color: var(--lunar-gold);
     margin-right: 15px;
     font-size: 1.2rem;
   }

   .lunar-insight p {
     font-size: 0.85rem;
     color: #cbd5e1;
     margin: 0;
     line-height: 1.6;
   }

   /* Animation */
   @keyframes moon-glow {

     0%,
     100% {
       transform: scale(1);
       filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.3));
     }

     50% {
       transform: scale(1.05);
       filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.6));
     }
   }

   /* =====================media queries================== */
   @media (max-width : 768px) {
     .horoscope-page-banner {
       padding: 10px 0;
     }

     .horoscope-page-heading h1 span {
       font-size: 40px;
     }

     .advice-node:hover,
     .node-marker {
       margin-left: 40px !important;
     }

     .timeline-path::before {
       left: 35px;
     }

     .navbar-nav .nav-link:hover,
     .navbar-nav .nav-link.active {
       width: 80px;
     }

     .section-title span {
       color: rgb(251 191 36 / 74%);
       text-shadow: 0 0 15px rgb(247 201 72 / 59%);
     }

     .service-page-heading h1 span,
     .vastu-home-page-heading h1 span,
     .factory-page-heading h1,
     .factory-page-heading h1 span,
     .numero-page-heading h1,
     .numero-page-heading h1 span,
     .astro-consul-page-heading h1,
     .astro-consul-page-heading h1 span,
     .contact-page-heading h1,
     .contact-page-heading h1 span {
       font-size: 26px;
     }

     .factory-page-banner,
     .numero-page-banner,
     .astro-consul-page-banner,
     .contact-page-banner {
       padding: 30px 0;
     }

     .section-heading {
       margin-top: -40px;
     }

     .floating-yantra {
       margin-left: 3px;
       max-width: 320px;
       margin-left: 45px;
     }

     .about-image img {
       padding-bottom: 20px !important;
     }

     section {
       padding: 70px 0px;
     }

     .factory-vastu-content,
     .service-content {
       padding-left: 0px;
     }

     .appointment-curtain {
       padding: 0px;
     }

     .vastu-content {
       padding: 0px;
     }

     .services-section {
       padding: 160px 0;
     }

     .card-inner h3 {
       font-family: 'Cinzel';
       margin-top: 15px;
       font-size: 20px;
     }

     .card-inner p {
       font-size: 12px;
       letter-spacing: 1.5px;
       font-family: math;
     }

     .number-badge {
       width: 80px;
     }

   }

   @media only screen and (max-width : 768px) {
     .hero-buttons {
       width: 100%;
       text-align: center;
       align-items: center;
       justify-content: center;
     }

     .btn-gold {
       font-size: 13px;
     }
   }

   .card-inner h3 {
     font-family: 'Cinzel';
     margin-top: 15px;
     font-size: 25px;
   }

   .card-inner p {
     font-size: 12px;
     letter-spacing: 1.5px;
     font-family: math;
   }

   /* html, body {
    max-width: 100%;
    overflow-x: hidden;
} */


   /* .row {
    margin-right: 0;
    margin-left: 0;
} */

   /* =====================================birth chart page===================================== */
   .birth-page-banner {
     background: linear-gradient(rgba(3, 7, 26, 0.568), rgba(29, 31, 3, 0.603)), url(images/birth-chart-banner.jpg) no-repeat center 45% / cover;
     padding: 72px 0;
   }

   .birth-page-heading h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     font-size: 52px;
   }

   /* =================================hero birth chart page============================= */
   /* Birth Chart Page Styles */
   .birth-chart-section {
     background-color: #0c0e12;
     color: #ffffff;
   }

   .text-gold {
     color: #c5a059;
     /* Matching the gold from your screenshot */
   }

   /* Sidebar Active State (if not already styled) */
   .service-list li.active a {
     /* background-color: #c5a059 !important; */
     color: #fff !important;
   }

   /* Right Side Content Styling */
   .analysis-content-wrapper .subtitle {
     color: #c5a059;
     text-transform: uppercase;
     letter-spacing: 3px;
     font-size: 0.8rem;
     font-weight: 700;
   }

   .title-line {
     width: 60px;
     height: 3px;
     background: #c5a059;
     margin-top: 15px;
   }

   .lead-text {
     font-size: 1.1rem;
     color: #b0b0b0;
     line-height: 1.8;
   }

   /*======================================Feature Cards================================== */
   /* Creative Astrology Card Styling */
   .feature-card-ast {
     background: linear-gradient(145deg, #161a21 0%, #0c0e12 100%);
     border: 1px solid rgba(197, 160, 89, 0.1);
     padding: 40px 30px;
     border-radius: 20px;
     position: relative;
     overflow: hidden;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 1;
     height: 100%;
   }

   /* Background floating text effect */
   .feature-card-ast::before {
     content: attr(data-label);
     position: absolute;
     bottom: -10px;
     right: -10px;
     font-size: 5rem;
     font-weight: 900;
     color: rgba(197, 160, 89, 0.03);
     z-index: -1;
     transition: all 0.5s ease;
   }

   /* Shimmer effect on hover */
   .card-shimmer {
     position: absolute;
     top: -100%;
     left: -100%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(197, 160, 89, 0.08) 0%, transparent 70%);
     transition: all 0.6s ease;
     z-index: -1;
   }

   .feature-card-ast:hover .card-shimmer {
     top: -50%;
     left: -50%;
   }

   .feature-card-ast:hover {
     /* border-color: rgba(197, 160, 89, 0.5); */
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
   }

   .feature-card-ast:hover::before {
     transform: scale(1.1);
     color: rgba(197, 160, 89, 0.07);
   }

   /* Icon Box with Glow */
   .card-icon-box {
     width: 60px;
     height: 60px;
     background: #0c0e12;
     border: 1px solid rgba(197, 160, 89, 0.3);
     color: #c5a059;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 1.5rem;
     margin-bottom: 25px;
     box-shadow: 0 0 15px rgba(197, 160, 89, 0.1);
     transition: all 0.5s ease;
   }

   .feature-card-ast:hover .card-icon-box {
     background: #c5a059;
     color: #0c0e12;
     box-shadow: 0 0 30px rgba(197, 160, 89, 0.4);
     transform: rotateY(360deg);
   }

   /* Typography */
   .feature-card-ast h5 {
     font-family: 'Cinzel', serif;
     /* Or any elegant serif font */
     color: #ffffff;
     font-weight: 700;
     letter-spacing: 1px;
     margin-bottom: 15px;
   }

   .feature-card-ast p {
     color: #a0a0a0;
     font-size: 0.95rem;
     line-height: 1.7;
     margin: 0;
   }

   /* Tiny corner ornament */
   .card-corner-ornament {
     position: absolute;
     top: 20px;
     right: 20px;
     width: 15px;
     height: 15px;
     border-top: 2px solid rgba(197, 160, 89, 0.2);
     border-right: 2px solid rgba(197, 160, 89, 0.2);
     transition: all 0.5s ease;
   }

   .feature-card-ast:hover .card-corner-ornament {
     width: 30px;
     height: 30px;
     border-color: #c5a059;
   }

   /* Info Highlight Box */
   .info-highlight-box {
     display: flex;
     align-items: flex-start;
     gap: 20px;
     background: rgba(197, 160, 89, 0.05);
     border-left: 4px solid #c5a059;
     padding: 25px;
     border-radius: 0 15px 15px 0;
   }

   .info-highlight-box i {
     font-size: 1.5rem;
     color: #c5a059;
   }

   .info-highlight-box p {
     margin: 0;
     color: #d0d0d0;
     font-style: italic;
   }

   /* ==============LAST DIV========== */
   /* Outcome Creative Cards */
   .outcome-card-creative {
     background: #12141a;
     padding: 35px;
     border-radius: 4px;
     /* Industrial sharp edges */
     border: 1px solid rgba(255, 255, 255, 0.05);
     position: relative;
     overflow: hidden;
     transition: all 0.4s ease;
     height: 100%;
   }

   /* The vertical "Golden Thread" */
   .outcome-header {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: absolute;
     left: 15px;
     top: 35px;
     width: 40px;
   }

   .card-number {
     font-family: 'Cinzel', serif;
     font-size: 1.2rem;
     color: #c5a059;
     font-weight: 700;
   }

   .header-line {
     width: 1px;
     height: 100px;
     background: linear-gradient(to bottom, #c5a059, transparent);
     margin-top: 10px;
     opacity: 0.4;
   }

   /* Content offset to make room for the thread */
   .outcome-content {
     margin-left: 45px;
   }

   .outcome-content h5 {
     color: #ffffff;
     font-size: 1.25rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 12px;
     font-family: cinzel;
   }

   .outcome-content p {
     color: #999;
     font-size: 0.95rem;
     line-height: 1.6;
   }

   /* Hidden background icon */
   .card-icon-hint {
     position: absolute;
     right: 20px;
     bottom: 20px;
     font-size: 3rem;
     color: rgba(197, 160, 89, 0.03);
     transition: all 0.5s ease;
   }

   /* Hover Effects */
   .outcome-card-creative:hover {
     background: #171a21;
     /* border-color: rgba(197, 160, 89, 0.3); */
     transform: translateY(-5px);
   }

   .outcome-card-creative:hover .card-number {
     text-shadow: 0 0 10px rgba(197, 160, 89, 0.5);
   }

   .outcome-card-creative:hover .header-line {
     opacity: 1;
     height: 120px;
   }

   .outcome-card-creative:hover .card-icon-hint {
     color: rgba(197, 160, 89, 0.1);
     transform: rotate(-15deg) scale(1.2);
   }

   /* Subtle Glow Overlay */
   .card-glow-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at top left, rgba(197, 160, 89, 0.05), transparent 70%);
     pointer-events: none;
   }

   /*====================================== marriage-compatibility page================================ */
   .marriage-page-banner {
     background: linear-gradient(rgb(3 7 26 / 82%), rgb(29 31 3 / 80%)), url(images/marriage-compa.jpg) no-repeat center 87% / cover;
     padding: 72px 0;
   }

   .marriage-page-banner h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     font-size: 52px;
   }

   /* ===========hero below======== */
   /* Sidebar Sync (Dark Theme) */
   .marriage-compatibility-page {
     background-color: #000000e3;
     color: #ffffff;
   }

   .text-gold {
     color: #c5a059;
   }

   /* Creative Outcome Cards */
   .outcome-card-creative {
     background: #161a21;
     padding: 35px;
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.05);
     position: relative;
     overflow: hidden;
     transition: all 0.4s ease;
     height: 100%;
   }

   .outcome-header {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: absolute;
     left: 15px;
     top: 35px;
     width: 40px;
   }

   .card-number {
     font-size: 1.2rem;
     color: #c5a059;
     font-weight: 700;
   }

   .header-line {
     width: 1px;
     height: 80px;
     background: linear-gradient(to bottom, #c5a059, transparent);
     margin-top: 10px;
     opacity: 0.3;
   }

   .outcome-content {
     margin-left: 45px;
   }

   .outcome-content h5 {
     color: #e5d39a;
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 12px;
   }

   .outcome-content p {
     color: #999;
     font-size: 0.9rem;
     line-height: 1.6;
   }

   .card-icon-hint {
     position: absolute;
     right: 20px;
     bottom: 20px;
     font-size: 2.5rem;
     color: rgba(197, 160, 89, 0.04);
   }

   /* Interactive Hover */
   .outcome-card-creative:hover {
     border-color: rgba(197, 160, 89, 0.4);
     transform: translateY(-5px);
     background: #1c2129;
   }

   .outcome-card-creative:hover .header-line {
     opacity: 1;
     height: 100px;
   }

   /* Info Box */
   .info-highlight-box {
     display: flex;
     gap: 20px;
     background: rgb(197 160 89 / 48%);
     border-left: 3px solid #c5a059;
     padding: 25px;
     border-radius: 4px;
   }

   .info-highlight-box i {
     color: #c5a059;
     font-size: 1.4rem;
   }

   /* ==============last div styling=================== */
   /* Creative Glassmorphism Cards */
   :root {
     --gold: #d4af37;
     --gold-glow: rgba(212, 175, 55, 0.3);
     --dark-bg: #0a0e17;
     --glass: rgba(255, 255, 255, 0.03);
   }

   @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

   .milan-header-container {
     text-align: center;
     padding: 40px 0;
     font-family: 'Cinzel', serif;
     /* Applying Cinzel to the container */
   }

   .section-subtitle {
     font-family: 'Cinzel', serif;
     text-transform: uppercase;
     letter-spacing: 4px;
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.6);
     margin-bottom: 10px;
   }

   .pillar-title {
     font-family: 'Cinzel', serif;
     font-weight: 700;
     font-size: 2.5rem;
     color: #ffffff;
     margin: 0;
     letter-spacing: 2px;
     text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   }

   .text-gold {
     color: #d4af37;
     background: linear-gradient(to bottom, #f9e29c 0%, #d4af37 50%, #a67c00 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
     font-family: cinzel;
     font-weight: 800;
   }

   /* Decorative Divider */
   .title-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 15px;
   }

   .title-divider::before,
   .title-divider::after {
     content: "";
     height: 1px;
     width: 60px;
     background: linear-gradient(to right, transparent, #d4af37, transparent);
   }

   .diamond {
     width: 8px;
     height: 8px;
     background-color: #d4af37;
     transform: rotate(45deg);
     margin: 0 15px;
     box-shadow: 0 0 10px #d4af37;
   }

   /* Grid Layout */
   .guna-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 20px;
     margin-bottom: 40px;
   }

   /* Card Styling */
   .guna-card {
     background: var(--glass);
     border: 1px solid rgba(212, 175, 55, 0.15);
     border-radius: 16px;
     padding: 30px 20px;
     text-align: center;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     backdrop-filter: blur(10px);
     position: relative;
     overflow: hidden;
   }

   .guna-card:hover {
     transform: translateY(-10px);
     border-color: var(--gold);
     background: rgba(212, 175, 55, 0.05);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--gold-glow);
   }

   .guna-icon {
     color: var(--gold);
     font-size: 1.5rem;
     margin-bottom: 10px;
     opacity: 0.7;
   }

   .guna-name {
     display: block;
     font-size: 1.25rem;
     font-weight: 700;
     color: #e5d39a;
     letter-spacing: 1px;
     margin-bottom: 8px;
     text-transform: uppercase;
     font-family: cinzel;
   }

   .guna-desc {
     display: block;
     font-size: 0.85rem;
     color: #a0a0a0;
     line-height: 1.4;
     margin-bottom: 20px;
     min-height: 40px;
   }

   .guna-points {
     display: inline-block;
     background: linear-gradient(135deg, var(--gold), #f9e29c);
     color: #000;
     padding: 4px 15px;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 800;
   }

   /* Premium CTA Section */
   .premium-cta {
     background: linear-gradient(90deg, #161b2e 0%, #0a0e17 100%);
     border-left: 4px solid var(--gold);
     padding: 40px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 20px;
   }

   .premium-cta h4 {
     color: var(--gold);
     font-size: 1.5rem;
     margin: 0 0 10px 0;
   }

   .premium-cta p {
     color: #ccc;
     margin: 0;
   }

   .cta-button {
     display: flex;
     align-items: center;
     gap: 10px;
     background: transparent;
     border: 2px solid var(--gold);
     color: var(--gold);
     padding: 12px 28px;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     transition: 0.3s;
   }

   .cta-button:hover {
     background: var(--gold);
     color: #000;
     box-shadow: 0 0 15px var(--gold-glow);
   }

   .cta-button svg {
     width: 20px;
     height: 20px;
   }

   /* ================================career-guidance-page========================================== */
   .career-page-banner {
     background: linear-gradient(rgb(3 7 26 / 69%), rgb(29 31 3 / 68%)), url(images/career-guidance.jpg) no-repeat center 86% / cover;
     padding: 72px 0;
   }

   .career-page-banner h1 span {
     color: var(--starlight-gold);
     text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     font-size: 52px;
   }

   /*============================= 1st section -=============== */
   .career-path-card {
     position: relative;
     background: rgb(10 14 23 / 64%);
     padding: 50px 30px 30px 30px;
     border-radius: 30px 5px 30px 5px;
     border: 1px solid rgba(212, 175, 55, 0.1);
     height: 100%;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 1;
     backdrop-filter: blur(10px);
   }

   /* Floating Roman Numerals */
   .card-number {
     position: absolute;
     top: 15px;
     right: 25px;
     font-family: 'Cinzel', serif;
     font-size: 1.5rem;
     color: #d4af37;
     opacity: 0.3;
   }

   /* The "Shooting Star" Line */
   .path-line {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 3px;
     width: 0;
     background: linear-gradient(90deg, #d4af37, transparent);
     transition: width 0.6s ease;
   }

   .career-path-card:hover {
     box-shadow: 9px -4px 2px var(--starlight-gold), 9px 4px 2px var(--starlight-gold);
     border-color: #d4af37;
     transform: translateY(-5px) scale(1.02);
   }

   .career-path-card:hover .path-line {
     width: 100%;
   }

   /* Icon Orbit Effect */
   .icon-orbit {
     width: 55px;
     height: 55px;
     background: #1a2238;
     color: #d4af37;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
     margin-bottom: 20px;
     position: relative;
     transition: 0.5s;
   }

   .icon-orbit::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     border: 1px dashed #d4af37;
     border-radius: 50%;
     animation: rotate 10s linear infinite;
     opacity: 0;
     transition: 0.5s;
   }

   .career-path-card:hover .icon-orbit {
     background: #d4af37;
     color: #fff;
     transform: rotateY(360deg);
   }

   .career-path-card:hover .icon-orbit::after {
     opacity: 1;
     width: 130%;
     height: 130%;
   }

   /* Typography */
   .career-path-card h5 {
     font-family: 'Cinzel', serif;
     font-weight: 700;
     font-size: 1.15rem;
     color: var(--gold-primary);
     margin-bottom: 12px;
   }

   .career-path-card p {
     font-size: 0.9rem;
     color: #555;
     line-height: 1.7;
   }

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

     to {
       transform: rotate(360deg);
     }
   }

   /* =================2nd style================== */
   /* 1. Methodology Timeline Styling */
   .methodology-glass-wrap {
     background: #0a0e17;
     border: 1px solid rgba(212, 175, 55, 0.2);
     border-radius: 40px;
     padding: 60px 0 0 0;
     /* Header padding */
     overflow: hidden;
     position: relative;
   }

   .methodology-main-title {
     padding: 0 40px 40px;
     text-align: center;
     letter-spacing: 2px;
   }

   .methodology-grid {
     background: rgba(255, 255, 255, 0.02);
   }

   .methodology-cell {
     position: relative;
     padding: 60px 40px;
     transition: 0.5s ease;
     overflow: hidden;
     border-color: rgba(212, 175, 55, 0.1) !important;
   }

   .cell-content {
     position: relative;
     z-index: 2;
   }

   .step-indicator {
     font-size: 0.7rem;
     color: #d4af37;
     text-transform: uppercase;
     letter-spacing: 3px;
     margin-bottom: 15px;
     opacity: 0.8;
   }

   .methodology-cell p {
     color: #a0aec0;
     font-size: 0.95rem;
     line-height: 1.8;
     margin-top: 15px;
   }

   /* The Secret Sauce: Hover Light Leak */
   .methodology-cell::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(212, 175, 55, 0.15) 0%, transparent 50%);
     opacity: 0;
     transition: opacity 0.3s;
   }

   .methodology-cell:hover::after {
     opacity: 1;
   }

   .methodology-cell:hover {
     background: rgba(212, 175, 55, 0.03);
   }

   /* Background Icon Decor */
   .cell-bg-icon {
     position: absolute;
     bottom: -20px;
     right: 20px;
     font-size: 5rem;
     color: rgba(212, 175, 55, 0.03);
     z-index: 1;
     transition: 0.5s;
   }

   .methodology-cell:hover .cell-bg-icon {
     transform: scale(1.2) rotate(-10deg);
     color: rgba(212, 175, 55, 0.07);
   }

   /* -------------------------------------------
   RESPONSIVE FIX FOR 768px 
---------------------------------------------- */
   @media (max-width: 768px) {
     .methodology-cell {
       border-right: none !important;
       /* Remove vertical border on mobile */
       padding: 40px 30px;
     }

     .methodology-main-title {
       font-size: 1.5rem;
     }
   }

   /* .step-num {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: #d4af37;
    display: block;
    margin-bottom: 5px;
    letter-spacing: 2px;
} */

   /* 2. Shimmer Portal CTA Styling */
   .portal-cta-wrap {
     perspective: 1000px;
   }

   .shimmer-card {
     position: relative;
     background: #0f1423;
     border-radius: 30px;
     padding: 50px;
     overflow: hidden;
     border: 1px solid rgba(212, 175, 55, 0.3);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
   }

   /* Animated Shimmer Effect */
   .shimmer-overlay {
     position: absolute;
     top: 0;
     left: -150%;
     width: 100%;
     height: 100%;
     background: linear-gradient(120deg,
         transparent,
         rgba(212, 175, 55, 0.1),
         transparent);
     transition: 0.8s;
   }

   .shimmer-card:hover .shimmer-overlay {
     left: 150%;
   }

   /* ===========last div cta================ */
   .blueprint-cta-container {
     position: relative;
     padding: 60px 20px;
     background-image:
       radial-gradient(circle at 2px 2px, rgba(212, 175, 55, 0.05) 1px, transparent 0);
     background-size: 30px 30px;
     /* Creates a subtle celestial grid */
     border-radius: 20px;
   }

   .blueprint-frame {
     position: relative;
     max-width: 815px;
     margin: 0 auto;
     padding: 25px;
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(10, 14, 23, 0.6);
     backdrop-filter: blur(10px);

   }

   /* Corner Decorations */
   .star-corner {
     position: absolute;
     width: 20px;
     height: 20px;
     border: 2px solid #d4af37;
   }

   .top-left {
     top: -10px;
     left: -10px;
     border-right: 0;
     border-bottom: 0;
   }

   .bottom-right {
     bottom: -10px;
     right: -10px;
     border-left: 0;
     border-top: 0;
   }

   .blueprint-tag {
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 3px;
     color: #d4af37;
     display: block;
     margin-bottom: 10px;
   }

   .blueprint-desc {
     color: #cbd5e0;
     max-width: 500px;
     margin: 20px auto 30px;
     font-size: 0.95rem;
   }

   /* Minimalist Button Style */
   .btn-blueprint {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 15px;
     color: #fff;
     text-decoration: none;
     font-family: 'Cinzel', serif;
     font-weight: 700;
     font-size: 0.9rem;
     padding: 10px 0;
     transition: 0.3s;
   }

   .btn-line {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: #d4af37;
     transform-origin: right;
     transition: transform 0.4s ease;
   }

   .btn-blueprint:hover {
     color: #d4af37;
   }

   .btn-blueprint:hover .btn-line {
     transform: scaleX(0.3);
     /* Line shrinks on hover for a sophisticated feel */
   }

   .btn-blueprint i {
     font-size: 1.2rem;
     transition: 0.5s;
   }

   .btn-blueprint:hover i {
     transform: rotate(180deg) scale(1.2);
     text-shadow: 0 0 10px #d4af37;
   }

   /* =======end============= */

   .methodology-container {
     /* Deep Navy to Black gradient for a premium "Cosmic" feel */
     background: radial-gradient(circle at top right, #161b2e 0%, #0a0e17 70%);

     /* Spacious padding to let the content breathe */
     padding: 80px 40px;

     /* Smooth rounded edges */
     border-radius: 40px;

     /* A very subtle inner border to give it a 3D glass look */
     border: 1px solid rgba(212, 175, 55, 0.1);

     /* Soft outer glow to separate it from the page background */
     box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);

     position: relative;
     overflow: hidden;
     margin-top: 50px;
   }

   /* Optional: Add a subtle animated grain or "stardust" pulse */
   .methodology-container::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
     /* Subtle star texture */
     opacity: 0.2;
     pointer-events: none;
     z-index: 0;
   }

   /* Ensure content stays above the background texture */
   .methodology-container .section-subtitle,
   .methodology-container h3,
   .methodology-container .celestial-timeline {
     position: relative;
     z-index: 1;
   }

   /* Refining the subtitle for this specific background */
   .methodology-container .section-subtitle {
     color: #d4af37;
     background: rgba(212, 175, 55, 0.1);
     display: inline-block;
     padding: 5px 15px;
     border-radius: 50px;
     font-size: 0.75rem;
     margin-bottom: 20px;
   }
   /*====================== WHats app icon pop up floating============ */
   .whatsapp-float{
       position: fixed;
    bottom: 13px;
    right: 15px;
    background: #25D366;
    color: #fff;
    font-size: 22px;
    width: 40px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    z-index: 999999;
    
}

.whatsapp-float:hover{
    background:#20b954;
    transform: scale(1.1);
}
.node-content p a{
  text-decoration: none;
}
.contact-item a{
  text-decoration: none;
}

.social-icons a{
    color:#000;
    margin-right:12px;
    font-size:18px;
    transition:0.3s;
}