body {
   margin: 0;
   min-height: 100vh;
   background: linear-gradient(to bottom right, #4c0519, #581c87, #500724);
   background-size: cover;
   font-family: 'Inter', sans-serif;
}

.stars {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background: transparent;
   overflow: hidden;
   z-index: -1;
}

.star {
   position: absolute;
   width: 2px;
   height: 2px;
   background: white;
   border-radius: 50%;
   opacity: 0.8;
}

.glass-morphism {
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   position: relative;
   overflow: hidden;
}

.hidden {
   display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Cinzel', serif;
   margin: 0;
   font-weight: 700;
}

.oracle_cards .oracle_card:hover {
   scale: 1.05;
}

.gradient-text {
   background: linear-gradient(135deg, #f472b6, #c084fc, #fcd34d);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.pad48 {
   padding: 48px 0;
}

h1 {
   font-size: 72px;
   line-height: 1;
}

h2 {
   font-size: 36px;
   line-height: 1;
}

h3 {
   font-size: 30px;
   line-height: 1;
}

h5 {
   font-size: 20px;
   line-height: 1;
}

.f24 {
   font-size: 24px !important;
}

.f16 {
   font-size: 16px !important;
}

p {
   font-size: 16px;
   margin: 0;
   font-weight: 500;
}

.buttonSection {
   display: flex;
   align-items: center;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 16px;
}

.button {
   display: flex;
   min-height: 54px;
   position: relative;
   align-items: center;
   gap: 10px;
   padding: 12px 24px;
   background: linear-gradient(to right, #ec4899, #f43f5e);
   color: #fff;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   text-decoration: none;
   font-size: 16px;
   font-weight: 600;
   transition: all 0.3s ease;
   box-shadow: 0 0 30px rgba(244, 114, 182, 0.5), 0 0 60px rgba(244, 114, 182, 0.2);
}

.button svg {
   height: 16px;
}

.button:hover {
   scale: 1.05;
   color: #fff;
}

.button.outline {
   background: none;
   background-color: rgb(255 255 255 / 0.1);
   border: 1px solid #fff;
}


.navigation_section {
   padding: 16px 0;
}

.navbar_brand {
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
}

.navbar_brand svg {
   height: 50px;
}

.navbar_brand .navbrand_text h2 {
   font-size: 24px;
}

.navbar_brand .navbrand_text p {
   font-size: 12px;
   color: #ffffffb3;
   margin: 0;
}

.navigation_section .container {
   max-width: 1320px;
}

.navigation_section .navbar-nav {
   gap: 8px;
}

.navigation_section .navbar-nav .nav-link {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 8px 10px;
   border-radius: 8px;
   font-size: 16px;
   color: #ffffffc6;
   transition: all 0.3s ease;
   font-weight: 500;
   border: none;
}

.navigation_section .navbar-nav .nav-link span {
   white-space: nowrap;
}

.navigation_section .navbar-nav .nav-link svg {
   height: 16px;
}

.navigation_section .navbar-nav .nav-link:not(.active):hover {
   background-color: rgb(255 255 255 / 0.1);
   scale: 1.05;
   color: #fff;
}

.navigation_section .navbar-nav .nav-link.active {
   color: #f9a8d4;
   background-color: rgb(255 255 255 / 0.15);
   box-shadow: 0 0 40px rgba(244, 114, 182, 0.7), 0 0 80px rgba(244, 114, 182, 0.3);
}

.oracle_banner {
   padding-top: 120px;
}

.oracle_banner_Text {
   text-align: center;
   color: #fffc;
   margin-bottom: 24px;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.oracle_banner_Text p {
   font-size: 18px;
}

.oracle_banner_Text p.maxwidth {
   max-width: 42rem;
   margin: 0 auto;
}

.oracle_cards {
   max-width: 1024px;
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
   margin: 0 auto;
   margin-top: 16px;
}

.oracle_cards .oracle_card {
   flex: 1 1 calc(33.333% - 16px);
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 16px;
   padding: 24px;
   display: flex;
   flex-direction: column;
   gap: 16px;
   align-items: center;
   text-align: center;
   transition: all 0.3s ease;
}

.oracle_cards .oracle_card svg {
   height: 48px;
   width: 48px;
}

svg.lucide-star {
   color: #fcd34d;
}

svg.lucide-heart {
   color: #f472b6;
}

svg.lucide-hand {
   color: #c084fc;
}

.mainTitle {
   text-align: center;
   color: #ffffffb3;
   margin-bottom: 48px;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.mainTitle p {
   font-size: 18px;
   max-width: 42rem;
   margin: 0 auto;
}

.zodiacSigns {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   color: #ffffffb3;
}

.zodiacSigns .zodiac_card {
   width: calc(16.66% - 13.33px);
   position: relative;
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 16px;
   padding: 24px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: center;
   text-align: center;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   transition: all 0.3s linear;
}

.zodiacSigns .zodiac_card h5 {
   font-size: 14px;
   color: #fff;
}

.zodiacSigns .zodiac_card p {
   font-size: 12px;
   margin: 0;
}

.zodiacSigns .zodiac_card svg {
   height: 12px;
   opacity: 0;
   transition: all 0.3s linear;
}

.zodiacSigns .zodiac_card:hover {
   scale: 1.05;
}

.zodiacSigns .zodiac_card:hover svg {
   opacity: 1;
}

.zodiacSigns .zodiac_card .icon {
   height: 64px;
   width: 64px;
   border-radius: 64px;
   background-image: linear-gradient(to right, #ef4444, #f97316);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 25px;
   box-shadow: 0 0 30px rgba(244, 114, 182, 0.5), 0 0 60px rgba(244, 114, 182, 0.2);
}

.zodiacSigns .zodiac_card .icon.taurus {
   background-image: linear-gradient(to right, #22c55e, #10b981);
}

.zodiacSigns .zodiac_card .icon.gemini {
   background-image: linear-gradient(to right, #eab308, #f59e0b);
}

.zodiacSigns .zodiac_card .icon.cancer {
   background-image: linear-gradient(to right, #3b82f6, #06b6d4);
}

.zodiacSigns .zodiac_card .icon.leo {
   background-image: linear-gradient(to right, #f97316, #eab308);
}

.zodiacSigns .zodiac_card .icon.virgo {
   background-image: linear-gradient(to right, #16a34a, #14b8a6);
}

.zodiacSigns .zodiac_card .icon.libra {
   background-image: linear-gradient(to right, #ec4899, #f43f5e);
}

.zodiacSigns .zodiac_card .icon.scorpio {
   background-image: linear-gradient(to right, #dc2626, #db2777);
}

.zodiacSigns .zodiac_card .icon.sagittarius {
   background-image: linear-gradient(to right, #a855f7, #6366f1);
}

.zodiacSigns .zodiac_card .icon.capricorn {
   background-image: linear-gradient(to right, #4b5563, #475569);
}

.zodiacSigns .zodiac_card .icon.aquarius {
   background-image: linear-gradient(to right, #2563eb, #9333ea);
}

.zodiacSigns .zodiac_card .icon.pisces {
   background-image: linear-gradient(to right, #14b8a6, #3b82f6);
}

.zodiac_card a {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.glass_morphism {
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   position: relative;
   overflow: hidden;
}

.lover_tarot_content {
   padding: 24px;
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 32px;
   max-width: 670px;
   width: 100%;
   margin: 0 auto;
   border-radius: 16px;
}

.lover_tarot_inner,
.draw_my_card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 32px;
   flex-wrap: wrap;
}

.dailycard {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #ffffffb3;
   gap: 16px;
   align-items: center;
   text-align: center;
   box-shadow: 0 0 30px rgba(244, 114, 182, 0.5), 0 0 60px rgba(244, 114, 182, 0.2);
   border: 2px solid rgb(249 168 212 / 0.5);
   width: 8rem;
   height: 12rem;
   border-radius: 1rem;
}

.dailycard svg {
   height: 48px;
   width: 48px;
}

.draw_my_card {
   color: #fff;
   text-align: center;
   display: none;
}

.draw_my_card .draw_my_card_box {
   padding: 24px;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.lovercard {
   background-image: linear-gradient(to top, #d97706, #c2410c);
}

.loaderCircle {
   width: 30px;
   height: 30px;
   border: 2px solid #ffffff50;
   border-bottom-color: #ff3c0050;
   border-radius: 50%;
   display: inline-block;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
   position: absolute;
   inset: 0;
   margin: auto;
   display: none;
}

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

   100% {
      transform: rotate(360deg);
   }
}

.latest_insights {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
}

.latest_insights .insight_card {
   width: calc(33.333% - 16px);
   position: relative;
   padding: 24px;
   border-radius: 12px;
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 16px;
   cursor: pointer;
}

.latest_insights .insight_card .insight_card_label {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
   font-size: 12px;
}

.latest_insights .insight_card .insight_card_label .label {
   background-color: #e0e7ff;
   color: #3730a3;
   padding: 2px 10px;
   border-radius: 50px;
   font-weight: 600;
}

.latest_insights .insight_card .insight_card_label .date {
   display: flex;
   align-items: center;
   gap: 6px;
   color: #ffffffb3;
}

.latest_insights .insight_card .insight_card_label .date svg {
   height: 16px;
   width: 16px;
}

.latest_insights .insight_card:hover h4 {
   color: #f9a8d4;
}

.latest_insights .insight_card:hover .buttonText {
   color: #f9a8d4;
   transform: translateX(5px);
}

.absoluteBtn {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.buttonText {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #fff;
   border: none;
   cursor: pointer;
   text-decoration: none;
   font-size: 14px;
   font-weight: 600;
   transition: all 0.3s ease;
}

.buttonText svg {
   height: 16px;
   width: 16px;
}

.line_clamp_3 {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

.mainTitle .icon {
   height: 64px;
   width: 64px;
   border-radius: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-image: linear-gradient(to right, #dc2626, #db2777);
   margin: 0 auto;
   box-shadow: 0 0 30px rgba(244, 114, 182, 0.5), 0 0 60px rgba(244, 114, 182, 0.2);
}

.mainTitle .icon svg {
   color: #fff;
   width: 32px;
   height: 32px;
}

.cosmic_Newsletter {
   padding: 24px;
   border-radius: 12px;
   max-width: 670px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.cosmic_Newsletter h2 {
   font-size: 30px;
}

.cosmic_Newsletter p {
   font-size: 16px;
}

.cosmic_form,
.inputCheck {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
}

.cosmic_form .inputBox,
.inputCheck .inputCheckBox {
   width: calc(50% - 8px);
}

.inputBox {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.inputBox label {
   font-size: 14px;
   color: #ffffffe6;
   font-weight: 600;
}

.inputBox input,
.dropdown-selected {
   padding: 8px 12px;
   border-radius: 8px;
   font-size: 14px;
   border: none;
   outline: none;
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: #fff;
   font-weight: 500;
}

.inputBox input::placeholder {
   color: #ffffff99;
}

.love_compatibility {
   overflow: unset;
}

.dropdown-selected {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.dropdown-selected svg {
   height: 16px;
}

.custom-dropdown {
   position: relative;
   font-family: Arial, sans-serif;
   cursor: pointer;
}

.dropdown-list::-webkit-scrollbar {
   width: 0;
}

.dropdown-list {
   list-style: none;
   margin: 0;
   padding: 0;
   position: absolute;
   top: 110%;
   left: 0;
   right: 0;
   max-height: 200px;
   overflow-y: auto;
   display: none;
   z-index: 1000;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.15);
}

.dropdown-list li {
   padding: 10px 15px;
   transition: background 0.2s;
   display: flex;
   color: #000;
   align-items: center;
   font-size: 16px;
}

.dropdown-list li:hover {
   background: rgb(236 72 153 / 0.3);
   color: #000;
}

.inputCheck .inputCheckBox input {
   display: none;
}

.inputCheck .inputCheckBox label {
   padding: 12px;
   color: #fff;
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.5);
   font-size: 16px;
   display: flex;
   gap: 8px;
   align-items: center;
}

.inputCheck .inputCheckBox label span {
   height: 16px;
   width: 16px;
   border: 1px solid #fff;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.inputCheck .inputCheckBox input:checked+label span::after {
   content: '';
   background: url(../images/checkTick.svg) no-repeat center;
   background-size: contain;
   height: 10px;
   width: 10px;
}

.inputCheck .inputCheckBox input:checked+label {
   border-color: #f472b6;
   background-color: rgb(236 72 153 / 0.2);
}

.inputCheck .inputCheckBox input:checked+label span {
   border-color: #ec4899;
   background-color: #ec4899;
}

.inputBtn .button {
   width: 100%;
   justify-content: center;
}

.heartline_oracle .icon {
   height: 96px;
   width: 96px;
   border-radius: 96px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-image: linear-gradient(to right, #ec4899, #f43f5e);
   margin: 0 auto;
   box-shadow: 0 0 30px rgba(244, 114, 182, 0.5), 0 0 60px rgba(244, 114, 182, 0.2);
}

.heartline_oracle .icon svg {
   height: 48px;
   width: 48px;
}

.heartline_oracle {
   text-align: center;
   color: #ffffffb3;
}

.mystical_deck {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   width: 100%;
}

.mystical_deck p {
   width: calc(33.33% - 10.66px);
   display: flex;
   align-items: center;
   gap: 8px;
   border-radius: 8px;
   padding: 12px;
   font-size: 14px;
   color: #ffffffb3;
}

.mystical_deck p span {
   width: 32px;
   height: 32px;
   border-radius: 32px;
   background-color: rgb(236 72 153 / 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
}

.lover_tarot_content.gap24 {
   gap: 24px;
}

.select_card_deck {
   display: none;
}

.card_deck {
   max-width: 64rem;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
   width: 100%;
}

.card_deck .card {
   width: calc(12.5% - 21px);
   aspect-ratio: 2 / 3;
   background-color: transparent;
   background-image: linear-gradient(to bottom, #581c87, #6b21a8);
   border: 1px solid rgb(249 168 212 / 0.5);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s linear;
}

.card_deck .card:hover {
   scale: 1.05;
   border: 2px solid rgb(244 114 182 / 0.7);
}

.card_deck .card.selected {
   box-shadow: 0 0 30px rgba(244, 114, 182, 0.5), 0 0 60px rgba(244, 114, 182, 0.2);
   border: 1px solid #f472b6;
   scale: 1.05;
   background: rgb(236 72 153 / 0.2);
}

.love_Journey_Cards {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
   max-width: 720px;
   margin: 0 auto;
}

.love_Journey_Cards .love_Journey_Card {
   width: calc(33.33% - 16px);
   padding: 16px;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   justify-content: center;
   align-items: center;
   text-align: center;
   box-shadow: 0 0 30px rgba(244, 114, 182, 0.5), 0 0 60px rgba(244, 114, 182, 0.2);
}

.love_Journey_Cards .love_Journey_Card .icon {
   height: 48px;
   width: 48px;
   border-radius: 48px;
   background-image: linear-gradient(to right, #ec4899, #f43f5e);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
}

.love_Journey_Cards .love_Journey_Card h6 {
   font-size: 14px;
   color: #f9a8d4;
}

.love_Journey_Cards .love_Journey_Card p {
   font-size: 12px;
   color: #fff;
}

.love_Journey_Cards .love_Journey_Card:hover {
   box-shadow: none;
}

.love_Journey_past {
   max-width: 895px;
   margin: 0 auto;
   padding: 24px;
   border-radius: 12px;
   color: #fff;
   margin-top: 30px;
   display: flex;
   gap: 16px;
}

.love_Journey_past .number {
   height: 48px;
   width: 48px;
   min-width: 48px;
   border-radius: 48px;
   background-image: linear-gradient(to right, #ec4899, #f43f5e);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
}

.love_Journey_past .love_Journey_past_text {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.love_Journey_past .love_Journey_past_text h5 {
   font-size: 18px;
   color: #f9a8d4;
}

.love_Journey_past .heart_message {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.love_Journey_past .heart_message .heart_message_title h3 {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.love_Journey_past .heart_message_title h3 svg {
   color: #f9a8d4;
   height: 32px;
   width: 32px;
}

.love_Journey_past .heart_message p {
   font-size: 18px;
   text-align: center;
   color: #ffffffe6;
}

.love_Journey_Revealed .button {
   margin: 0 auto;
   font-size: 14px;
   min-height: auto;
   margin-top: 30px;
}

.love_Journey_Revealed {
   display: none;
}

.starts_are_aligning {
   height: calc(100vh - 300px);
   display: none;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}

.starts_are_aligning .icon {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

.starts_are_aligning .icon .loaderCircle {
   width: 40px;
   height: 40px;
   inset: auto;
   display: block;
   border-bottom-color: #f9a8d4;
}

.starts_are_aligning .icon svg {
   height: 20px;
   width: 20px;
   color: #f9a8d4;
}

.love_compatibility {
   padding: 24px;
   border-radius: 12px;
   max-width: 766px;
   margin: 0 auto;
}

.love_compatibility_from {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
}

.love_compatibility_from .person {
   width: calc(50% - 12px);
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.love_compatibility_from .person {
   font-size: 18px;
   color: #fff;
}

.love_compatibility_from .button {
   margin: 0 auto;
   min-height: auto;
}

.oracleProfile {
   max-width: 895px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 30px;
}

.oracleProfile .information {
   padding: 24px;
   border-radius: 12px;
}

.oracleProfile .information .information_Title {
   margin-bottom: 20px;
}

.oracleProfile .information .information_Title h4 {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #fff;
}

.oracleProfile .information .information_Title p {
   color: #ffffffb3;
   font-size: 14px;
}

.oracleProfile .information .information_Title h4 svg {
   height: 20px;
}

.oracleProfile .information .inputSection {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
}

.oracleProfile .information .inputSection .inputBox {
   width: calc(50% - 12px);
}

.oracleProfile .information .inputSection.birth .inputBox {
   width: calc(33.33% - 16px);
}

.oracleProfile .information .inputSection .radioButton {
   width: calc(25% - 18px);
}

.oracleProfile .information .inputSection .radioButton .zodiac_card {
   width: 100%;
}

.oracleProfile .information .inputSection .radioButton input {
   display: none;
}

.oracleProfile .information .inputSection .radioButton label {
   width: 100%;
}

.oracleProfile .information .inputSection .radioButton input:checked+label .zodiac_card {
   border: 2px solid #fbbf24;
}

.oracleProfile .button {
   width: fit-content;
   margin: 0 auto;
   min-height: auto;
}

.aichatBox {
   max-width: 895px;
   margin: 0 auto;
   border-radius: 12px;
   padding: 24px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.aichatBox .aichatBoxTitle {
   border-radius: 12px;
   padding: 24px;
   text-align: center;
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.aichatBox .aichatBoxTitle .icon {
   height: 64px;
   width: 64px;
   border-radius: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   margin: 0 auto;
   background-image: linear-gradient(to right, #ec4899, #f43f5e);
}

.aichatBox .aichatBoxTitle .icon svg {
   height: 32px;
   width: 32px;
}

.aichatBox .aichatBoxTitle p {
   color: #ffffffb3;
}

.aichatBox .chatBoxChat {
   min-height: 170px;
   max-height: 400px;
   overflow: auto;
   padding-right: 5px;
}

.aichatBox .chatBoxChat::-webkit-scrollbar {
   width: 5px;
}

.aichatBox .chatBoxChat::-webkit-scrollbar-track {
   background: transparent;
}

.aichatBox .chatBoxChat::-webkit-scrollbar-thumb {
   background: #fff;
   border-radius: 10px;
}

.aichatBox .chatBoxChat::-webkit-scrollbar-thumb:hover {
   background: #fff;
}


.chatBoxInput {
   display: flex;
   gap: 10px;
}

.chatBoxInput .button {
   height: auto;
   padding: 8px 12px;
   min-height: auto;
}

.chatBoxInput .inputBox {
   flex: 1;
}

.chatBoxChat {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.chatBoxChat .userChat.aichat {
   margin: 0;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 1rem 1rem 1rem 0;
   overflow: unset;
}

.chatBoxChat .userChat.aichat .userChatTitle svg {
   color: #f472b6;
}

.chatBoxChat .userChat.aichat .userChatTitle .label {
   color: #f472b6;
   padding: 2px 8px;
   border-radius: 20px;
   border: 1px solid #f472b6;
   font-size: 12px;
}

.chatBoxChat .userChat {
   background-image: linear-gradient(to right, #a855f7, #d946ef);
   border-radius: 1rem 1rem 0 1rem;
   width: fit-content;
   max-width: 80%;
   padding: 12px;
   margin-left: auto;
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.chatBoxChat .userChat .userChatTitle {
   display: flex;
   align-items: center;
   gap: 5px;
   color: #fff;
   font-size: 14px;
}

.chatBoxChat .userChat .userChatTitle svg {
   height: 16px;
   width: 16px;
}

.chatBoxChat .userChat .userChatTitle span.time {
   color: #fff9;
}

.love_palm_reading {
   display: flex;
   flex-wrap: wrap;
   gap: 32px;
   max-width: 56rem;
   margin: 0 auto;
}

.love_palm_reading .love_palm_reading_box {
   width: calc(50% - 16px);
   border-radius: 12px;
   padding: 16px;
}

.love_palm_reading .love_palm_reading_box .upload_photo {
   padding: 16px;
   border: 2px dashed rgb(255 255 255 / 0.3);
   border-radius: 8px;
   height: 100%;
   display: flex;
   gap: 15px;
   justify-content: space-between;
   flex-direction: column;
   align-items: center;
   text-align: center;
   color: #fff;
}

.love_palm_reading .love_palm_reading_box .upload_photo .title {
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.love_palm_reading .love_palm_reading_box .upload_photo .title .icon {
   height: 80px;
   width: 80px;
   border-radius: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   background-image: linear-gradient(to right, #ec4899, #f43f5e);
}

.love_palm_reading .love_palm_reading_box .upload_photo .title .icon svg {
   height: 40px;
   width: 40px;
}

.love_palm_reading .love_palm_reading_box .upload_photo .title p {
   color: #ffffffb3;
}

.love_palm_reading .love_palm_reading_box .upload_photo .upload_photo_input input {
   display: none;
}

.love_palm_reading .love_palm_reading_box .upload_photo .upload_photo_input input .button {
   min-height: auto;
}

.love_palm_reading .love_palm_reading_box .photoGuide {
   padding: 16px;
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.love_palm_reading .love_palm_reading_box .photoGuide img {
   width: 100%;
   border-radius: 8px;
}

.love_palm_reading .love_palm_reading_box .photoGuide .title {
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.love_palm_reading .love_palm_reading_box .photoGuide ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.love_palm_reading .love_palm_reading_box .photoGuide ul li {
   display: flex;
   gap: 10px;
   font-size: 14px;
   color: #fffc;
   align-items: center;
}

.love_palm_reading .love_palm_reading_box .photoGuide ul li svg {
   height: 16px;
   width: 16px;
   min-width: 16px;
   color: #4ade80;
}

.love_palm_reading .love_palm_reading_box.uploadedPhoto {
   padding: 0;
   overflow: auto;
   position: sticky;
   top: 0;
   height: fit-content;
}

.love_palm_reading .love_palm_reading_box.uploadedPhoto img {
   width: 100%;
   object-fit: contain;
}

.your_love_reading {
   display: flex;
   flex-direction: column;
   gap: 15px;
   color: #fff;
}

.your_love_reading .keyFindings ul {
   list-style: none;
   padding: 0;
   margin: 0;
   margin-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.your_love_reading .keyFindings ul li {
   display: flex;
   gap: 5px;
}

.your_love_reading .keyFindings ul li svg {
   height: 16px;
   width: 16px;
   margin-top: 5px;
}

.heartline_oracle.daily_horoscope {
   gap: 16px;
}

.heartline_oracle.daily_horoscope .icon {
   height: 50px;
   width: 50px;
}

.heartline_oracle.daily_horoscope .icon svg {
   height: 25px;
   width: 25px;
}

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

.reading_astrology_valley .readingTitle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

.reading_astrology_valley .readingTitle .title {
   display: flex;
   align-items: center;
   color: #fff;
   gap: 10px;
}

.reading_astrology_box {
   padding: 40px;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   gap: 50px;
}

.reading_astrology_box .zodiac_card {
   display: flex;
   align-items: center;
   gap: 20px;
   color: #fff;
}

.reading_astrology_box .zodiac_card .zodiac_card_Text {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.reading_astrology_box .zodiac_card .icon {
   height: 64px;
   width: 64px;
   border-radius: 64px;
   background-image: linear-gradient(to right, #ef4444, #f97316);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 25px;
   box-shadow: 0 0 30px rgba(244, 114, 182, 0.5), 0 0 60px rgba(244, 114, 182, 0.2);
}

.reading_astrology_box .zodiac_card .icon.taurus {
   background-image: linear-gradient(to right, #22c55e, #10b981);
}

.reading_astrology_box .zodiac_card .icon.gemini {
   background-image: linear-gradient(to right, #eab308, #f59e0b);
}

.reading_astrology_box .zodiac_card .icon.cancer {
   background-image: linear-gradient(to right, #3b82f6, #06b6d4);
}

.reading_astrology_box .zodiac_card .icon.leo {
   background-image: linear-gradient(to right, #f97316, #eab308);
}

.reading_astrology_box .zodiac_card .icon.virgo {
   background-image: linear-gradient(to right, #16a34a, #14b8a6);
}

.reading_astrology_box .zodiac_card .icon.libra {
   background-image: linear-gradient(to right, #ec4899, #f43f5e);
}

.reading_astrology_box .zodiac_card .icon.scorpio {
   background-image: linear-gradient(to right, #dc2626, #db2777);
}

.reading_astrology_box .zodiac_card .icon.sagittarius {
   background-image: linear-gradient(to right, #a855f7, #6366f1);
}

.reading_astrology_box .zodiac_card .icon.capricorn {
   background-image: linear-gradient(to right, #4b5563, #475569);
}

.reading_astrology_box .zodiac_card .icon.aquarius {
   background-image: linear-gradient(to right, #2563eb, #9333ea);
}

.reading_astrology_box .zodiac_card .icon.pisces {
   background-image: linear-gradient(to right, #14b8a6, #3b82f6);
}

.todayReading {
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 50px;
}

.todayReading .title {
   display: flex;
   align-items: center;
   gap: 10px;
}

.todayReading .todayReadingBoxes {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
}

.todayReading .todayReadingBoxes .todayReadingBox {
   width: calc(33.33% - 20px);
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: 20px;
   border-radius: 12px;
}

.todayReading .todayReadingBoxes .todayReadingBox .icon {
   height: 50px;
   width: 50px;
   border-radius: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f43f5e;
   margin: 0 auto;
   box-shadow: 0 0 30px rgba(244, 114, 182, 0.5), 0 0 60px rgba(244, 114, 182, 0.2);
}

.love_relationship_flex {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
}

.love_relationship_flex .love_relationship {
   width: calc(33.33% - 20px);
   border-radius: 16px;
   color: #fff;
   padding: 40px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.love_relationship_flex .love_relationship .title {
   display: flex;
   align-items: center;
   gap: 15px;
   flex-direction: column;
}

.love_relationship_flex .love_relationship .title .icon {
   width: 60px;
   height: 60px;
   border-radius: 60px;
   background-color: #f43f5e;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
}

.love_relationship_flex .love_relationship .starSection {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 24px;
   justify-content: center;
}

.love_relationship_flex .love_relationship .starSection .five {
   padding: 2px 15px;
   border-radius: 40px;
   background-color: rgb(255, 239, 239);
   color: red;
   margin-left: 10px;
   font-size: 16px;
}

.gap48 {
   display: flex;
   flex-direction: column;
   gap: 48px;
}

.luckcolorSection {
   display: flex;
   align-items: center;
   gap: 40px;
   color: #fff;
   justify-content: center;
}

.luckcolorSection .luckcolor h5 {
   margin-bottom: 12px;
}

.luckcolorSection .luckcolor {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 20px;
   border-radius: 12px;
   width: 50%;
   align-items: center;
   justify-content: center;
}

.luckcolorSection .luckcolor .luckcolorBox .color {
   height: 60px;
   width: 60px;
   background-image: linear-gradient(to right, #eab308, #f59e0b);
   margin: 0 auto;
   border-radius: 16px;
}

.luckcolorSection .luckcolor .luckNumber {
   display: flex;
   align-items: center;
   gap: 10px;
   justify-content: center;
}

.luckcolorSection .luckcolor .luckNumber p {
   padding: 10px;
   height: 60px;
   width: 60px;
   border-radius: 12px;
   border: 1px solid;
   display: flex;
   align-items: center;
   justify-content: center;
}

.celestial_harmony_section {
   padding: 40px;
   border-radius: 12px;
   margin-top: 40px;
}

.celestial_harmony {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
}

.celestial_harmony .card {
   width: calc(33.33% - 16px);
   padding: 16px;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   text-align: center;
   color: #fff;
}

.percent-badge::before {
   content: attr(data-value) "%";
}

.percent-badge {
   font-weight: 600;
}

.progress_bar {
   width: 100%;
   height: 16px;
   background: #fff;
   border-radius: 16px;
   overflow: hidden;
   position: relative;
}

.progress_bar::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: calc(var(--value) * 1%);
   background: linear-gradient(90deg, #fb7185, #fb7185);
   transition: width 1.2s ease-in-out;
}

.celestial_harmony .card.friendship .progress_bar::before {
   background: linear-gradient(90deg, #818cf8, #818cf8);
}

.celestial_harmony .card.friendship svg {
   color: #818cf8;
}

.celestial_harmony_section .text {
   text-align: center;
   color: #fff;
   margin-top: 30px;
}

.loginSection {
   max-width: 400px;
   margin: 0 auto;
   padding: 24px;
   border-radius: 12px;
}

.loginSection .Loginform {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.loginSection .Loginform .button {
   text-align: center;
   min-height: auto;
   justify-content: center;
   margin-top: 16px;
}

.todayReadingTitleSection .title {
   margin-bottom: 10px;
}
.todayReadingTitleSection img{ height: 24px; width: 24px; object-fit: contain; filter: invert(1);}
.horoscopeLevelSection{ display: flex;  justify-content: center; flex-direction: column; border: 1px solid #ffffff79; max-width: 700px; margin: 0 auto; width: 100%;}
.horoscopeLevelSection .horoscopeLevel{ display: flex; gap: 10px;}
.horoscopeLevelSection .horoscopeLevel + .horoscopeLevel{ border-top: 1px solid #ffffff79;}
.horoscopeLevelSection .horoscopeLevel img{ height: 24x; width: 24px; filter: invert(1);}
.horoscopeLevelSection .horoscopeLevel .image{ padding: 10px; background-color: #ffffff2d;}
.horoscopeLevelSection .horoscopeLevel .text{ width: 100%; max-width: 100px; display: flex; align-items: center; color: #fff;}
.horoscopeLevelSection .horoscopeLevel .level{ background-color: rgba(255, 255, 255); width: 100%; opacity: 0.5;}
.horoscopeLevelSection .horoscopeLevel .level.one{ width: 60%;}
.horoscopeLevelSection .horoscopeLevel .level.two{ width: 60%; opacity: 0.3;}
.horoscopeLevelSection .horoscopeLevel .level.three{ width: 50%; opacity: 0.4;}
.horoscopeLevelSection .horoscopeLevel .level.four{ width: 100%; opacity: 0.5;}

.blogDetails{ color: #fff;}
.blogDetails .title{text-align: center; margin-bottom: 48px;}
.blogDetails .blogImg img{ width: 100%; border-radius: 16px;}
.blogDetails .content{ display: flex; flex-direction: column; gap: 15px;}
.blogDetails .content p + h3{ margin-top: 20px;}

.blogTab{ border: 1px solid #ffffff30; border-radius: 16px; overflow: hidden; position: sticky; top: 0;}
.blogTab .nav .nav-item{ flex: 1;}
.blogTab .nav .nav-item .nav-link{ width: 100%; border: none; background-color: transparent; color: var(--black); padding: 10px; font-weight: 500;}
.blogTab .nav .nav-item .nav-link.active{ background: linear-gradient(to right, #ec4899, #f43f5e); font-weight: 700;}
.blogTab .tab-content{ padding: 16px;}

.recentBLogContent .blogBox a{ display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; color: #fff;} 
.recentBLogContent .blogBox a .blogImg,.recentBLogContent .blogBox a .blogText{ width: calc(50% - 5px);}
.recentBLogContent .blogBox a .blogText p{ font-size: 14px;}
.recentBLogContent .blogBox + .blogBox{ margin-top: 16px;}

html{ width: 100%; overflow: auto;}

.love_potion_Header .logo{display: flex; gap: 5px; position: relative; align-items: center; }
.love_potion_Header .logo .icon { position: relative;} 
.love_potion_Header .logo .icon .lucide-heart{ width: 32px; height: 32px;}
.love_potion_Header .logo .icon .lucide-star{ position: absolute; top: 0; right: 0; height: 10px; width: 10px;}
.love_potion_Header .logo .text h2{ font-size: 24px;}

.love_potion_Header .container{ display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.love_potion_Header .mystical_elixir{ display: flex; align-items: center; gap: 5px; color: #fff;}
.love_potion_Header .mystical_elixir p{ font-size: 14px;}
.love_potion_Header .mystical_elixir svg{ height: 20px; width: 20px;}

.love_Potion_section.angel_card_section{ display: none;}
.love_Potion_section{ display: flex; flex-direction: column; gap: 40px;}
.love_Potion_section .selected{ display: flex; align-items: center; gap: 10px; color: #fff; width: fit-content; margin: 0 auto; padding: 16px 32px; border-radius: 50px;}
.love_Potion_section .selected p{ font-size: 18px;}
.love_Potion_section .radio_section { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;}
.love_Potion_section .radio_section .radio_Box input{ display: none;}
.love_Potion_section .radio_section .radio_Box label{ width: 100%; color: #fff; height: 100%; padding: 16px 32px; border-radius: 12px; text-align: center; display: flex; flex-direction: column; gap: 5px; transition: all 0.2s linear;}
.love_Potion_section .radio_section .radio_Box label .icon{ font-size: 60px;}
.love_Potion_section .radio_section .radio_Box label h3{ font-size: 18px;}
.love_Potion_section .radio_section .radio_Box label p{ font-size: 14px; font-style: italic;}
.love_Potion_section .radio_section .radio_Box label .checkbox, .heart_desire_radio .input label .checkbox{position: absolute; top: 8px; right: 8px; height: 24px; width: 24px; background-color: #ec489980; display: flex; align-items: center; justify-content: center; border-radius: 24px; opacity: 0; }
.love_Potion_section .radio_section .radio_Box label:hover{ scale: 1.05;}
.love_Potion_section .radio_section .radio_Box input:checked + label .checkbox, .heart_desire_radio .input input:checked + label .checkbox{ opacity: 1;}
.love_Potion_section .radio_section .radio_Box input:checked + label, .checkbox, .heart_desire_radio .input input:checked + label{ border-color: #f472b6; background-color: rgb(236 72 153 / .3);}
.love_Potion_section .radio_section .radio_Box input:disabled + label{ opacity: 0.5;}

.love_Potion_section .button, .heart_desire_radio .button{ width: fit-content; margin: 0 auto; display: none;}

.chosen_ingredients{ max-width: 672px; width: 100%; margin: 0 auto; padding: 24px; border-radius: 12px; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 18px;}
.chosen_ingredients .boxes{ display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;}
.chosen_ingredients .boxes .box{ display: flex; align-items: center; gap: 5px; font-size: 16px; padding:4px 16px; border-radius: 40px;}
.chosen_ingredients .boxes .box .icon{ font-size: 24px;}

.sacred_ingredients{ display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; border-radius: 12px; justify-content: center; align-items: center; color: #fff; font-size: 14px;}
.sacred_ingredients .box{ padding: 5px 15px; border-radius: 40px;display: flex;  align-items: center; gap: 5px;}
.sacred_ingredients .box span{ font-size: 20px;}

.heart_desire_radio{ display: flex; flex-direction: column; gap: 20px; margin-top: 40px;}
.heart_desire_radio .input input{ display: none;}
.heart_desire_radio .input label{ transition: all 0.2s linear; width: 100%; padding: 16px; border-radius: 12px; display: flex; align-items: center; gap: 20px; color: #fff;}
.heart_desire_radio .input label .icon{ font-size: 72px;}
.heart_desire_radio .input label .text{ display: flex; flex-direction: column; gap: 10px;}
.heart_desire_radio .input label:hover{ scale: 1.05;}
.heart_desire_radio .input{ display: flex;}
.your_intention{ display: none; padding: 10px 32px; border-radius: 40px; width: fit-content; margin: 0 auto; color: #fff;  flex-wrap: wrap; gap: 10px; align-items: center;}
.your_intention svg{ height: 16px; width: 16px; color: yellow;}
.heart_desire_radio .button, .heart_desire_radio .your_intention{ margin-top: 20px;}


.lunarEmbrace_box{ padding: 24px 32px; border-radius: 12px; color: #fff;}
.lunarEmbrace_box .text h4{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.lunarEmbrace_box .text .mainIcon { color: #f9a8d4; height: 24px; width: 24px;}
.lunarEmbrace_box .text .starIcon { color: #fde047; height: 16px; width: 16px;}
.lunarEmbrace_box .text + .text { margin-top: 40px; padding-top: 40px; border-top: 1px solid #f9a8d4;}

.lunarEmbrace_Text{ text-align: center; display: flex; flex-direction: column; gap: 5px;}
.lunarEmbrace_Text .icon{ font-size: 60px;}
.mt-40{ margin-top: 40px;}

.love_potion_book{ max-width: 448px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;}
.love_potion_book .button{ justify-content: center;}
.love_potion_book p{ text-align: center; color: #ffffff8c; font-size: 14px;}

.linarButton { display: flex; justify-content: center; gap: 20px; align-items: center;}
.linarButton a.textbutton{ font-size: 18px; text-decoration: underline; color: #fff; }

.mainTitle h5{ font-style: italic;}

.angelMessage.love_Potion_section .radio_section{grid-template-columns: repeat(3, 1fr); max-width: 1024px; margin: 0 auto;}
.angelMessage.love_Potion_section .mainTitle{ margin: 0;}

.googleLogo img{ height: 20px;}
.googleLogo {justify-content: center;}

.love_Potion_section .radio_section.angelcardCheckbox .radio_Box label{ aspect-ratio: 1; justify-content: center; }
.love_Potion_section .radio_section.angelcardCheckbox .radio_Box label span.icon{ font-size: 38px;}
.love_Potion_section .radio_section.angelcardCheckbox .radio_Box label span.angletext{ font-size: 14px;}
.love_Potion_section .radio_section.angelcardCheckbox {grid-template-columns: repeat(6, 1fr);}
.love_Potion_section .radio_section.angelcardCheckbox .radio_Box label .background { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; text-align: left; font-size: 30px; opacity: 0.2; justify-content: space-between; }
.love_Potion_section .radio_section.angelcardCheckbox .radio_Box label .background span:nth-child(2){ text-align: right;}


.angel_Healing_Hearts .step { width: 50px; height: 6px; border-radius: 10px; background-color: #dcdcdc; transition: background 0.3s;}
.angel_Healing_Hearts .step.active { background: linear-gradient(to right, #8a4fff, #ff65c5); width: 80px; }
.angel_Healing_Hearts .step.completed{ background-color:#facc15;}

.angel_Healing_Hearts .card-content { display: none; animation: fade 0.4s ease;}
.angel_Healing_Hearts .card-content.active{display: block; }
.angel_Healing_Hearts .cardNumber{text-align: center; color:#fff;}
.angel_Healing_Hearts .cardNumber p{ font-size: 14px;}

.raphaelCard{ padding: 48px; max-width: 896px; margin: 0 auto; border-radius: 16px; margin-top: 40px; display: flex; flex-direction: column; gap: 40px;}
.raphaelCard .raphaelTitle{ padding: 32px; border-radius: 16px; max-width: 240px; margin: 0 auto;}
.raphaelCard .raphaelTitle h2{ display: flex; flex-direction: column; gap: 5px; text-align: center; color: #fff;}
.raphaelCard .raphaelTitle h2 .icon{ font-size: 72px;}
.raphaelCard .raphaelTitle h2{ font-size: 28px;}
.raphaelCard .raphaelTitle h2 .small{ font-size: 16px; color: #ffffffa8; }
.raphaelCard .subText{ padding: 16px; border-radius: 12px; width: fit-content; margin: 0 auto; text-align: center; color: #fff; font-style: italic;}
.raphaelCard .message{  color: #fff; display: flex; flex-direction: column; gap: 15px;}
.raphaelCard .message svg{ color: yellow;}
.raphaelCard .message .title{ display: flex; align-items: center; gap: 10px;}
.raphaelCard .guidance{ padding: 16px; border-radius: 12px; color: #fff; display: flex; flex-direction: column; gap: 15px;}

.angel_Healing_Hearts .btn-box{ max-width: 896px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px;}

.loveReading{ text-align: center; color: #fff; display: flex; flex-direction: column; gap: 30px; margin-top: 30px;}
.loveReading h2{ display: flex; align-items: center; gap: 5px; justify-content: center;}
.loveReading .babyIcon{ font-size: 96px; max-width: 300px; width: 100%; margin: 0 auto;}
.loveReading .babyIcon .borderbottom{  height: 3px;    background-image: linear-gradient(to right, transparent , #facc15 , transparent);}
.loveReading .mySoulmate{ padding: 20px; width: fit-content; margin: 0 auto; border-radius: 12px; display: flex; flex-direction: column; gap: 10px;}
.loveReading .categoriesSection .categories{ display: grid;  grid-template-columns: repeat(3, 1fr); max-width: 768px; margin: 0 auto; gap: 15px;}
.loveReading .categoriesSection .categories .categoriesBox{ padding: 20px; border-radius: 12px; display: flex; flex-direction: column; gap: 5px; }
.loveReading .categoriesSection .categories .categoriesBox .icon{ font-size: 36px;}
.loveReading .categoriesSection .title{ display: flex; flex-direction: column; gap: 5px; margin-bottom: 20px;}

.personalizedReading{ min-height: 350px; max-width: 1024px; text-align: center; color: #fff; margin: 0 auto; margin-top: 40px; display: flex; gap: 10px; align-items: center; justify-content: center; padding: 24px; border-radius: 12px; flex-direction: column;}
.personalizedReading .iconLoader{ font-size: 72px;  animation: rotact infinite 2s linear;}
.personalizedReading .hideAfterLoading{ display: flex; flex-direction: column; gap: 20px;}

.angel_Healing_Hearts .btnWidth{ width: fit-content; margin: 0 auto; margin-top: 40px;}

.buttonWeekly{ display: flex; align-items: center; gap: 10px;}
.buttonWeekly .tabs{ padding: 0; display: flex; align-items: center; padding: 5px 10px; font-size: 18px; justify-content: center; text-decoration: none; gap: 5px; color: rgba(255, 255, 255, 0.711);}
.buttonWeekly .tabs svg{ height: 16px; width: 16px;}
.buttonWeekly .tabs.active{ color: #fff; border-bottom: 2px solid #facc15;}
.tabSection{ display: flex; gap: 20px; justify-content: space-between;}
.nextButton.buttonWeekly .tabs{ font-size: 16px;}
.nextButton.buttonWeekly .tabs.active{ background-color: #facc15; border-radius: 10px; color: #000; }

.showAfterLoading{ text-align: left;}
.showAfterLoading :where(h1,h2,h3,h4,h5,h6){ margin: 0;}
.showAfterLoading .title{ display: flex; flex-direction: column; gap: 10px;}
.showAfterLoading hr{ margin: 30px 0;}
.showAfterLoading .angleMessage{ display: flex; flex-direction: column; gap: 20px;}
.showAfterLoading .angleMessage .angleMessageCard{ display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 8px; }
.divineGuidanceSection{ display: flex; flex-direction: column; gap: 10px;}

.loaderProgress { width: 100%; height: 20px; border-radius: 20px; background: linear-gradient(#facc15 0 0) 0/0% no-repeat #fff; animation: l2 6s steps(10) forwards; max-width: 400px; margin: 0 auto;}
.blogPopUp .modal-content{ background-color: transparent;}
.blogPopUp .modal-content .lover_tarot_content{ position: relative;}
.blogPopUp .modal-content .lover_tarot_content .btn-close{ position: absolute; top: 10px; right: 10px; filter: invert(1);}
.showAfterLoading P{ color: #ffffffcf;}

.weeklyhoroscopeSection .mainTitle h1 svg{ height: 40px; width: 40px;}
 
@keyframes l2 {
  100% {
    background-size: 90%;
  }
}

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


@keyframes fade {
   from { opacity: 0; transform: scale(0.98); }
   to { opacity: 1; transform: scale(1); }
}

.stepTopText{ text-align: center;  color: #fff;}
.angel_Healing_Hearts .step-indicator{ text-align: center; display: flex; justify-content: center; gap: 10px; margin-top: 40px; margin-bottom: 20px;}

.chatBottomBox{ border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 20px; }
.chatBottomBox .chatQuickPicks{display: flex; flex-direction: column; gap: 20px; }
.chatBottomBox .chatQuickPicks .quickPicks .title{ font-size: 12px; color: #d8b4feb3; display: flex; align-items: center; gap: 5px; margin-bottom: 10px;}
.chatBottomBox .chatQuickPicks .quickPicks .title svg{ height: 16px; width: 16px;}
.chatBottomBox .chatQuickPicks .quickPicks .quickPicksQustion{ display: flex; flex-wrap: wrap; gap: 10px;}
.chatBottomBox .chatQuickPicks .quickPicks .quickPicksQustion .qustion{ padding: 5px 10px; border-radius: 50px; color: #fff; font-size: 14px; }
.chatBottomBox .zodiacSigns .zodiac_card{ width: calc(25% - 12px);}
.chatBottomBox .zodiacSigns { display: none;}
.tapToChange .sign{ padding: 10px 15px; width: fit-content; margin: 0 auto; border-radius: 50px; cursor: pointer; display: flex; align-items: center; gap: 10px;}
.tapToChange .sign svg{ height: 16px; width: 16px;}
.tapToChange .sign h6 span{ font-size: 12px; color: #ffffff72;}
.tapToChange p{ font-size: 12px; margin-top: 5px;}

@media (min-width: 1200px) and (max-width: 1650px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: calc(100% - 320px);}
}

@media (min-width: 1200px) {
   .heartDesireSection .container{ max-width: 896px; }
}
@media (max-width: 1200px) {
   .vertical-ad{ display: none;}
   .love_Potion_section .radio_section.angelcardCheckbox { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1240px) {
   .navigation_section .navbar-nav .nav-link {
      padding: 8px;
   }
}

@media (max-width: 991.98px) {
   .blogTab{ margin-top: 40px;}
   .vertical-ad {
      display: none;
   }

   h4 {
      font-size: 20px;
   }

   .navigation_section .navbar-collapse {
      margin-top: 40px;
   }

   .navigation_section .navbar-nav .nav-link.active {
      box-shadow: none;
   }

   .navigation_section .navbar-toggler {
      padding: 0;
      height: 28px;
      width: 28px;
      border: 0;
      padding: 6px 3px;
      border-radius: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
   }

   .navigation_section .navbar-toggler:focus {
      box-shadow: none;
   }

   .navigation_section .navbar-toggler span {
      height: 1.5px;
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
      display: block;
      transition: all 0.5s linear;
   }

   .navigation_section .navbar-toggler span:nth-child(3) {
      width: 65%;
   }

   .navigation_section .navbar-toggler[aria-expanded="true"] {
      justify-content: flex-start;
      position: relative;
   }

   .navigation_section .navbar-toggler[aria-expanded="true"] span {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 80%;
   }

   .navigation_section .navbar-toggler[aria-expanded="true"] span:first-child {
      transform: rotate(-45deg);
   }

   .navigation_section .navbar-toggler[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
   }

   .navigation_section .navbar-toggler[aria-expanded="true"] span:nth-child(3) {
      transform: rotate(45deg);
      width: 80%;
   }

   .zodiacSigns .zodiac_card, .chatBottomBox .zodiacSigns .zodiac_card {
      width: calc(33.33% - 10.66px);
   }

   .zodiacSigns .zodiac_card svg {
      opacity: 1;
   }

   .card_deck .card {
      width: calc(25% - 18px);
   }

   .reading_astrology_valley .readingTitle {
      flex-direction: column;
      text-align: center;
   }

   .reading_astrology_valley .readingTitle .title svg {
      display: none;
   }

   .celestial_harmony .card {
      width: 100%;
   }
   .love_Potion_section .radio_section{ grid-template-columns: repeat(3, 1fr);}
   .angelMessage.love_Potion_section .radio_section{ grid-template-columns: repeat(2, 1fr);}
      .love_Potion_section .radio_section.angelcardCheckbox { grid-template-columns: repeat(3, 1fr); }

}

@media (max-width: 767.98px) {
   h1 {
      font-size: 48px;
   }

   h2 {
      font-size: 30px;
   }

   .mainTitle p {
      font-size: 16px;
   }

   .oracle_banner {
      padding-top: 60px;
   }

   .f24 {
      font-size: 20px !important;
   }

   .oracle_banner_Text p {
      font-size: 16px;
   }

   .buttonSection {
      flex-direction: column;
   }

   .oracle_cards .oracle_card {
      padding: 12px;
   }

   .oracle_cards .oracle_card svg {
      height: 36px;
      width: 36px;
   }

   .latest_insights .insight_card {
      width: 100%;
   }

   .mystical_deck p {
      width: 100%;
      justify-content: center;
   }

   .love_Journey_Cards .love_Journey_Card {
      width: calc(50% - 12px);
   }

   .love_Journey_Cards {
      justify-content: center;
   }

   .love_compatibility_from .person {
      width: 100%;
   }

   .oracleProfile .information .inputSection .inputBox,
   .oracleProfile .information .inputSection.birth .inputBox {
      width: 100%;
   }

   .oracleProfile .information .inputSection .radioButton {
      width: calc(50% - 12px);
   }

   .love_palm_reading .love_palm_reading_box {
      width: 100%;
   }

   .love_palm_reading .love_palm_reading_box.uploadedPhoto {
      position: unset;
   }

   .love_relationship_flex .love_relationship {
      width: 100%;
   }

   .celestial_harmony_section {
      padding: 20px;
   }

   .loginSection {
      padding: 12px;
   }

   .todayReading .todayReadingBoxes .todayReadingBox {
      width: 100%;
   }
   .love_Potion_section .radio_section{ grid-template-columns: repeat(2, 1fr);}
   .love_Potion_section .radio_section.angelcardCheckbox { grid-template-columns: repeat(2, 1fr); }
   .raphaelCard{ padding: 24px;}
   .raphaelCard .raphaelTitle h2{ font-size: 24px;}
   .raphaelCard .raphaelTitle h2 .icon{ font-size: 40px;}
   .tabSection{ flex-direction: column; align-items: center; gap: 20px;}
}

@media (max-width: 567.98px) {
   .navbar_brand .navbrand_text h2 {
      font-size: 20px;
   }

   .luckcolorSection .luckcolor {
      width: 100%;
   }

   .zodiacSigns .zodiac_card, .chatBottomBox .zodiacSigns .zodiac_card {
      width: calc(50% - 8px);
   }

   .cosmic_form .inputBox,
   .inputCheck .inputCheckBox {
      width: 100%;
   }

   .oracleProfile .information .inputSection {
      gap: 12px;
   }

   .oracleProfile .information .inputSection .radioButton {
      width: calc(50% - 6px);
   }

   .card_deck .card {
      width: calc(33.33% - 16px);
   }

   .aichatBox,
   .aichatBox .aichatBoxTitle {
      padding: 16px;
   }

   .love_relationship_flex .love_relationship,
   .reading_astrology_box {
      padding: 20px;
   }

   .heartline_oracle .icon {
      height: 50px;
      width: 50px;
   }

   .heartline_oracle .icon svg {
      height: 25px;
      width: 25px;
   }

   .luckcolorSection {
      align-items: flex-start;
      flex-direction: column;
   }
      .love_Potion_section .radio_section{ grid-template-columns: repeat(1, 1fr);}
      .love_potion_Header .mystical_elixir p{ display: none;}
      .love_Potion_section .selected p{ font-size: 16px;}
      .love_Potion_section .radio_section .radio_Box label .icon{ font-size: 45px;}
      .heart_desire_radio .input label .icon{ font-size: 50px;}
      .linarButton{ flex-direction: column;}
      .lunarEmbrace_box{ padding:  24px;}
      .angelMessage.love_Potion_section .radio_section{ grid-template-columns: repeat(1, 1fr);}
      .loveReading .categoriesSection .categories{ grid-template-columns: repeat(1, 1fr);}
      .loveReading .babyIcon{ font-size: 60px;}
      .personalizedReading .iconLoader{ font-size: 50px;}
      .personalizedReading{ padding: 16px;}
      .mainTitle h1{ font-size: 30px;}
      .showAfterLoading h3{ font-size: 22px;}
}

@media (max-width: 400.98px) {
   .love_Journey_Cards .love_Journey_Card {
      width: 100%;
      max-width: 200px;
   }



}