:root{ --pink : #b76e79; --gold : #d4af37; --dark : #0d0415; --white : #fff; } body{font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji"; color: var(--white);} p{ margin: 0;} h1{ margin: 0; font-size: 96px; font-weight: 400; line-height: 1;font-family: ui-serif,Georgia,Cambria,Times New Roman,Times,serif;} h2{ margin: 0; font-size: 48px; line-height: 1;font-family: ui-serif,Georgia,Cambria,Times New Roman,Times,serif; } h3{ margin: 0; font-size: 30px; line-height: 1;font-family: ui-serif,Georgia,Cambria,Times New Roman,Times,serif; } h4{ margin: 0; font-size: 24px; line-height: 1;font-family: ui-serif,Georgia,Cambria,Times New Roman,Times,serif; } h5{ margin: 0; font-size: 20px; line-height: 1;font-family: ui-serif,Georgia,Cambria,Times New Roman,Times,serif; } img{ width: 100%; max-width: 100%;} svg.gold{ color: var(--gold);} svg.pink{ color: var(--pink);} .navigationSection{ background-color: var(--dark); padding: 18px 0; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #d4af371a;} .navbar-brand{display: flex; font-size: 20px; align-items: center; gap: 10px; margin: 0; padding: 0; line-height: 1; color: var(--gold); font-family: ui-serif,Georgia,Cambria,Times New Roman,Times,serif;} .navbar-brand:hover{ color: var(--gold);} .navbar-brand .logoIcon{ position: relative;} .navbar-brand .logoIcon .LogoHeart{height: 24px; width: 24px; color: var(--pink);} .navbar-brand .logoIcon .Logostar{height: 12px; width: 12px; color: var(--gold); position: absolute; top: -4px; right: -4px;} .navigationSection.navbar-expand-lg .navbar-nav { display: flex; gap: 4px;} .navigationSection.navbar-expand-lg .navbar-nav .nav-link{color: #f4d0d0b3; font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 8px;} .navigationSection.navbar-expand-lg .navbar-nav .nav-link.active{ background-color: #d4af3733; color: var(--gold);} .navigationSection.navbar-expand-lg .navbar-nav .nav-link:hover{ background-color: #ffffff0d; color: var(--white);} .navigationSection .dropdown-toggle::after{ display: none; } .navigationSection.navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle.show svg{ transform: rotate(180deg);} .navigationSection.navbar-expand-lg .navbar-nav .dropdown-menu{ background-color: var(--cmc-bg1); border: 1px solid #d4af3772; padding: 8px; border-radius: 8px; min-width: 220px; right: 0; left: auto;} .navigationSection.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item{ padding: 12px; border-radius: 4px; display: flex; gap: 10px; align-items: center; color: #ffffffb0;} .navigationSection.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item .icon{ height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; padding: 7px; color: var(--white); background-image: linear-gradient(to bottom right, #f59e0b, #ea580c);} .navigationSection.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:hover{ background-color: transparent; background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.1), rgba(212, 175, 55, 0.1)); } .navigationSection.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item.active{ background-color: transparent; background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.2), rgba(212, 175, 55, 0.2)); } .navigationSection.navbar-expand-lg .navbar-nav .dropdown-menu li:nth-child(4n + 1) .dropdown-item .icon{background-image: linear-gradient(to bottom right, #f59e0b, #ea580c); } .navigationSection.navbar-expand-lg .navbar-nav .dropdown-menu li:nth-child(4n + 2) .dropdown-item .icon{background-image: linear-gradient(to bottom right, #a855f7 , #4f46e5);} .navigationSection.navbar-expand-lg .navbar-nav .dropdown-menu li:nth-child(4n + 3) .dropdown-item .icon{background-image: linear-gradient(to bottom right, #f43f5e , #db2777);} .navigationSection.navbar-expand-lg .navbar-nav .dropdown-menu li:nth-child(4n + 4) .dropdown-item .icon{background-image: linear-gradient(to bottom right, #10b981 , #0d9488);} .mainTitle{ text-align: center; margin-bottom: 64px;} .mainTitle p{ color: #f4d0d099; } .mainTitle h2{ margin-top: 16px; margin-bottom: 24px; } .mainTitle h6{ font-size: 14px; color: var(--gold); text-transform: uppercase; letter-spacing: 2.8px; font-weight: 400; } .button{padding: 16px 32px; justify-content: center; transition: all .2s ease-in-out; border-radius: 100px; text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--white); border: none; background-image: linear-gradient(to right, #b76e79 , #d4af37); } .button.center{ margin: 0 auto;} .button:hover{ color: var(--white); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),0 0 40px rgba(183,110,121,.4);} .button.outline{ border: 1px solid #d4af3766; background-image: none; color: var(--gold); background-color: transparent;} .button.outline:hover{ background-color: #d4af371a; color: var(--gold);} .button.outline.pink{ border: 1px solid #b76e7966; background-image: none; color: var(--pink);} .button.outline.pink:hover{ background-color: #b76e791a; color: var(--pink);} .button svg{ height: 14px; width: 14px;} .buttonGroup {display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;} .buttonText{ display: flex; align-items: center; gap: 10px; color: var(--gold); text-decoration: none; transition: all .2s ease-in-out; background-color: transparent; padding: 0; border: none;} .buttonText:hover svg{ transform: translateX(4px);} .buttonText:hover { color: var(--gold);} .buttonText.center{ margin: 0 auto;} .button:disabled{ opacity: .5; cursor: not-allowed;} .button svg.rotate{ animation: rotate 3s ease-in-out infinite;} .pad96{ padding: 96px 0;} .chooseYourSign{ background-image: linear-gradient(to bottom, #2d1b4e , #1a0a2e); } .bannerSection{background-image: linear-gradient(to bottom, var(--dark), #2d1b4e); position: relative;} .bannerSection .bannerContent{ display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 32px; max-width: 72rem; padding: 0 24px;} .bannerSection .buttonSection{ display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start;} .bannerSection .buttonSection .button{ width: fit-content;} .bannerSection .bannerText{ display: flex; flex-direction: column; gap: 30px; margin-top: 30px;} .bannerSection .bannerText p{ font-size: 20px; color: #f4d0d0b3;} .bannerSection .bannerText p.small{ font-size: 12px; color: #f4d0d066;} .bannerSection .container{ position: relative; z-index: 2;} .bannerFlotIcon{ position: absolute; height: 100%; width: 100%; top: 0;} .bannerFlotIcon svg{ position: absolute;} .bannerFlotIcon .lucide-moon{ top: 10%; left: 3%; color: var(--gold); opacity: 0.4; animation: float 2s ease-in-out infinite;} .bannerFlotIcon .lucide-sparkles{ top: 20%; right: 5%; color: #f4d0d0; opacity: 0.4; animation: rotate 10s ease-in-out infinite;} .bannerFlotIcon .lucide-heart{ bottom: 10%; right: 3%; color: var(--pink); opacity: 0.4; animation: float 2s ease-in-out infinite;} .gradient{ background-image: linear-gradient(to right, #b76e79 , #d4af37 , #f4d0d0); background-clip: text; color: transparent;} .startPresetSection{ max-width: 896px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px;} .startPresetSection h6.title{ display: flex; align-items: center; gap: 10px; margin: 0; margin-bottom: 16px;} .startPresetSection h6.title svg{ color: var(--gold);} .spreadPresetContainer{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;} .spreadPresetContainer .spreadPresetItem{cursor: pointer; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; padding: 16px;} .spreadPresetContainer .spreadPresetItem:hover{ background-color: rgba(212, 175, 55, 0.4); background-color: rgba(255, 255, 255, 0.1);} .spreadPresetContainer .spreadPresetItem p{color: var(--pink); font-size: 12px; } .cardPositionsContainer{ display: flex; flex-direction: column; gap: 16px;} .cardPositionsContainer .cardPositionsBox{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px;} .cardPositionsContainer .cardPositionsBox .cardPositionsInput{ display: flex; align-items: center; gap: 12px;} .cardPositionsContainer .cardPositionsBox .cardPositionsInput .number{ height: 40px; width: 40px; min-height: 40px; min-width: 40px; background-color: var(--gold); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; font-weight: 700;} .cardPositionsContainer .cardPositionsBox .cardPositionsInput .removeButton{ background-color: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; color: rgb(248, 113, 113); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .cardPositionsContainer .cardPositionsBox .cardPositionsInput .removeButton:hover{ background-color: rgba(239, 68, 68, 0.4);} .addPosition{ border: 1.6px dashed rgba(212, 175, 55, 0.3); border-radius: 12px; padding: 16px; font-size: 16px; width: 100%; background-color: transparent; color: var(--gold);} .addPosition:hover{ background-color: rgba(212, 175, 55, 0.2);} .drawingCard{ display: flex; flex-direction: column; gap: 32px; text-align: center;} .drawingCard .text{ display: flex; flex-direction: column; gap: 16px;} .drawingCard .text p{ color: #f4d0d0b3;} .drawingCard .button{ width: fit-content; margin: auto;} .drawingCard .dotsection{ display: flex; align-items: center; gap: 16px; justify-content: center;} .drawingCard .dotsection .dot{ width: 16px; height: 16px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); transition: all .2s ease-in-out;} .drawingCard .dotsection .dot.active{ background-image: linear-gradient(to right, rgb(183, 110, 121), rgb(212, 175, 55));} .drawingCard .cardCategories{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;} .drawingCard .cardCategories .categories{ display: none; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(212, 175, 55, 0.3); padding:8px 16px; border-radius: 8px; font-size: 14px; color: var(--white);} .drawingCard .cardCategories .categories.active{ display: block;} @keyframes float {0% { transform: translateY(0); }50% { transform: translateY(-10px); }100% { transform: translateY(0); }} @keyframes rotate {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }} :root { --cmc-gold: #d4af37; --cmc-rose: #b76e79; --cmc-bg1: #2d1b4e; --cmc-bg2: #1a0a2e; --cmc-bg3: #0d0415; } /* MAIN WRAPPER */ .cmc-orbit-container {position: relative;width: 20rem;height: 20rem;margin: auto;} /* OUTER GLOW */ .cmc-orbit-glow {position: absolute;inset: 0;border-radius: 50%;background: radial-gradient(circle, transparent 30%, rgba(183,110,121,0.1) 50%, transparent 70%);transform: scale(1.1);} /* RINGS */ .cmc-orbit-ring {position: absolute;inset: 1rem;border-radius: 50%;} .cmc-orbit-ring-outer {border: 1px solid rgba(212,175,55,0.3);} .cmc-orbit-ring-inner {inset: 2.5rem;border: 1px solid rgba(183,110,121,0.2);} /* DOTS */ .cmc-orbit-dot, .cmc-orbit-dot-small {position: absolute;top: 50%;left: 50%;transform-origin: 0 50%;border-radius: 50%;} .cmc-orbit-dot {width: 8px;height: 8px;background: rgba(212,175,55,0.6);} .cmc-orbit-dot-small {width: 6px;height: 6px;background: rgba(183,110,121,0.5);} /* CORE PLANET */ .cmc-orbit-core {position: absolute;inset: 4rem;border-radius: 50%;overflow: hidden;box-shadow: rgba(198,147,93,0.45) 0 0 70px, rgba(198,145,95,0.25) 0 0 70px inset;} .cmc-core-bg {position: absolute;inset: 0;background: linear-gradient(to bottom right, var(--cmc-bg1), var(--cmc-bg2), var(--cmc-bg3));} .cmc-core-radial {position: absolute;inset: 0;background: radial-gradient(circle, rgba(183,110,121,0.3), transparent);} .cmc-core-conic {position: absolute;inset: 0;background: conic-gradient(transparent, rgba(212,175,55,0.1), transparent, rgba(183,110,121,0.1), transparent);} /* CORE LIGHTS */ .cmc-core-light {position: absolute;width: 4px;height: 4px;border-radius: 50%;animation: cmc-pulse 2s infinite ease-in-out;} .cmc-core-center-glow {position: absolute;top: 50%;left: 50%;width: 32px;height: 32px;background: rgba(255,255,255,0.2);border-radius: 50%;transform: translate(-50%, -50%);filter: blur(4px);} .cmc-core-corner-glow {position: absolute;top: 1rem;left: 1rem;width: 32px;height: 32px;background: rgba(255,255,255,0.1);border-radius: 50%;filter: blur(8px);} /* TAROT CARDS */ .cmc-tarot-card {position: absolute;top: 50%;left: 50%;animation: cmc-tarot-rotate 10s linear infinite;} @keyframes cmc-tarot-rotate {0% { transform:translate(-0%, -0%) rotate(0deg); }100% { transform:translate(-4%, -4%) rotate(360deg); }} .cmc-tarot-card:nth-child(1) {animation-duration: 12s;animation-delay: 0s;} .cmc-tarot-card-2 {animation-duration: 10s;animation-delay: -4s;} .cmc-tarot-card-3 {animation-duration: 14s;animation-delay: -8s;} .cmc-tarot-inner {width: 48px;height: 72px;border-radius: 10px;background: linear-gradient(to bottom right, var(--cmc-bg1), var(--cmc-bg3));border: 1px solid rgba(212,175,55,0.5);position: relative;} .cmc-tarot-border {position: absolute;inset: 4px;border: 1px solid rgba(212,175,55,0.3);border-radius: 8px;} .cmc-tarot-symbol {position: absolute;inset: 0;display: flex;justify-content: center;align-items: center;color: rgba(212,175,55,0.6);font-size: 22px;} /* ANIMATION */ @keyframes cmc-pulse {0% { opacity: 0.3; transform: scale(1); }50% { opacity: 1; transform: scale(1.3); }100% { opacity: 0.3; transform: scale(1); }} .signSection .signBox:nth-child(4n + 1) .signLink{background-image: linear-gradient(to bottom right, rgb(249 115 22 / .2) , rgb(220 38 38 / .2)); border-color: rgba(249, 115, 22, 0.3);} .signSection .signBox:nth-child(4n + 2) .signLink{background-image: linear-gradient(to bottom right, rgb(16 185 129 / .2) , rgb(217 119 6 / .2)); border-color: rgba(52, 211, 153, 0.3);} .signSection .signBox:nth-child(4n + 3) .signLink{background-image: linear-gradient(to bottom right, rgb(56 189 248 / .2) , rgb(139 92 246 / .2)); border-color: rgba(56, 189, 248, 0.3);} .signSection .signBox:nth-child(4n + 4) .signLink{background-image: linear-gradient(to bottom right, rgb(59 130 246 / .2) , rgb(20 184 166 / .2)); border-color: rgba(59, 130, 246, 0.3);} .signSection .signBox:nth-child(4n + 1) .signLink:hover{background-image: linear-gradient(to bottom right, rgb(249 115 22 / .4) , rgb(220 38 38 / .4)); border-color: rgba(249, 115, 22, 0.3); scale: 1.05;} .signSection .signBox:nth-child(4n + 2) .signLink:hover{background-image: linear-gradient(to bottom right, rgb(16 185 129 / .4) , rgb(217 119 6 / .4)); border-color: rgba(52, 211, 153, 0.3); scale: 1.05;} .signSection .signBox:nth-child(4n + 3) .signLink:hover{background-image: linear-gradient(to bottom right, rgb(56 189 248 / .4) , rgb(139 92 246 / .4)); border-color: rgba(56, 189, 248, 0.3); scale: 1.05;} .signSection .signBox:nth-child(4n + 4) .signLink:hover{background-image: linear-gradient(to bottom right, rgb(59 130 246 / .4) , rgb(20 184 166 / .4)); border-color: rgba(59, 130, 246, 0.3); scale: 1.05;} .signSection{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;} .signSection .signBox .signLink{ transition: all .2s ease-in-out; cursor: pointer; position: relative; border-radius: 8px; padding: 24px; border-radius: 16px; border: 1px solid; display: flex; text-decoration: none; color: var(--white); text-align: center;} .signSection .signBox .bgIcon{ opacity: 0; z-index: 1; color: var(--gold); width: 80%; inset: 0; margin: auto; position: absolute;} .signSection .signBox .text span{ font-size: 48px; line-height: 1; margin-bottom: 10px;} .signSection .signBox .text{ position: relative; z-index: 2; text-align: center; width: 100%; display: flex; flex-direction: column; gap: 8px;} .signSection .signBox .text h6{ font-size: 18px; margin: 0; line-height: 1;} .signSection .signBox .text p{ font-size: 12px; color: #f4d0d080;} .pickThreeCard{ background-image: linear-gradient(90deg, #1a0a2e , #392323 , #1a0a2e);} .allArticles{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 64px;} .allArticles .mainTitle{ text-align: left; margin-bottom: 0;} .astrologyBlogSection{ background-image: linear-gradient(to bottom, #1a0a2e , #2d1b4e);} .astrologyBlog{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;} .astrologyBlog .blogImg img{ aspect-ratio: 4 / 3; object-fit: cover; transition: all .2s ease-in-out;} .astrologyBlog .blogImg { border-radius: 16px; overflow: hidden; margin-bottom: 16px;} .astrologyBlog .blogBox{ text-decoration: none; color: var(--white);} .astrologyBlog .blogBox .blogText p{ margin-top: 16px; color: #f4d0d080; font-size: 14px;} .astrologyBlog .blogBox:hover .blogImg img{ scale: 1.05; } .astrologyBlog .blogBox:hover h5{ color: var(--gold);} .astrologyBlog .blogBox .blogText .blogMeta{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 12px;} .astrologyBlog .blogBox .blogText .blogMeta .category{ background-color: rgba(212, 175, 55, 0.2); color: var(--gold); padding: 4px 12px; border-radius: 50px; text-transform: capitalize;} .astrologyBlog .blogBox .blogText .blogMeta .date{ color: #f4d0d080;} .guidanceSection{ margin-top: 96px; padding: 48px; background-image: linear-gradient(to right, rgb(183 110 121 / .2) , rgb(212 175 55 / .1) , rgb(183 110 121 / .2)); border: 1px solid #d4af3733; border-radius: 24px; text-align: center;} .guidanceSection h3{ margin-bottom: 16px;} .guidanceSection p{ color: #f4d0d080; max-width: 36rem; margin: auto;} .guidanceForm{ display: flex; gap: 16px; justify-content: center; max-width: 28rem; width: 100%; margin: auto; margin-top: 24px;} .guidanceForm input{ width: 100%; padding: 16px; border-radius: 8px; border: 1px solid #d4af374d; background-color: #ffffff1a; border-radius: 9999px; color: var(--white);} .footerSection{ background-color: var(--dark); padding: 48px 0; border-top: 1px solid #d4af3733;} .footerSection .footerContent{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px;} .footerSection .footerContent .left p{ max-width: 24rem; margin-top: 16px; color: #f4d0d080; font-size: 14px;} .footerSection .footerContent .navigationLink h6{ margin: 0; font-size: 16px; font-size: 500; color: var(--white); margin-bottom: 16px; } .footerSection .footerContent .navigationLink ul{ list-style: none; margin: 0; padding: 0;} .footerSection .footerContent .navigationLink ul li + li{ margin-top: 8px;} .footerSection .footerContent .navigationLink ul li a{ color: #f4d0d080; text-decoration: none; font-size: 14px;} .footerSection .footerContent .navigationLink ul li a:hover{ color: var(--gold);} .footerSection .footerContent .right{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px;} .footerCopyRight{ padding-top: 24px; margin-top: 48px; border-top: 1px solid #d4af3733; } .footerCopyRight .copyright{ display: flex; justify-content: space-between; gap:10px; } .footerCopyRight .copyright p{ color: #f4d0d04d; font-size: 14px;} .footerCopyRight .disclaimer, .declaimerText{ color: #f4d0d033; font-size: 12px; text-align: center; margin-top: 16px;} .declaimerText{ margin-bottom: 30px;} .videoReadingFixed{ background-image: linear-gradient(to bottom, var(--dark), #2d1b4e); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; height: 100vh;} .backgroundFixed{ background-color: var(--dark); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; height: 100vh;} .backgroundFixed .round{ border-radius: 50%; height: 384px; width: 384px; position: absolute; top: 25%; left:-5rem; background-color: #9333ea33; filter: blur(64px);} .backgroundFixed .pink.round{ background-color: #e11d4833;top: auto; left: auto; top: -5%; right: -5rem;} .chamberTitle h2{ font-size: 60px;} .oracleContent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1024px; width: 100%; margin: auto;} .oracleContent .oracleBox{ position: relative; cursor: pointer; transition: all 0.2s linear; overflow: hidden; background-color: #a855f733; padding: 24px; border-radius: 16px; border: 1px solid #a855f74d; display: flex; flex-direction: column; gap: 10px;} .oracleContent .oracleBox .icon{ font-size: 30px; height: 64px; width: 64px; display: flex; align-items: center; justify-content: center; border-radius: 16px; } .oracleContent .oracleBox:first-child{ background-color: #a855f733; border-color: #a855f74d;} .oracleContent .oracleBox:nth-child(2){ background-color: #f59e0b33; border-color: #fbbf244d;} .oracleContent .oracleBox:nth-child(3){ background-color: #10b98133; border-color: #10b9814d;} .oracleContent .oracleBox:nth-child(4){ background-color: #3b82f633; border-color: #3b82f64d;} .oracleContent .oracleBox:nth-child(5){ background-color: #8b5cf633; border-color: #8b5cf64d;} .oracleContent .oracleBox:nth-child(6){ background-color: #f43f5e33; border-color: #f43f5e4d;} .oracleContent .oracleBox:hover:first-child{ background-color: #a955f769; border-color: #c084fc99;} .oracleContent .oracleBox:hover:nth-child(2){ background-color: #f59e0b69; border-color: #fbbf2499;} .oracleContent .oracleBox:hover:nth-child(3){ background-color: #10b98169; border-color: #10b98199;} .oracleContent .oracleBox:hover:nth-child(4){ background-color: #3b82f669; border-color: #3b82f699;} .oracleContent .oracleBox:hover:nth-child(5){ background-color: #8b5cf669; border-color: #8b5cf699;} .oracleContent .oracleBox:hover:nth-child(6){ background-color: #f43f5e69; border-color: #f43f5e99;} .oracleContent .oracleBox:first-child .icon{ background-image: linear-gradient(to bottom right, #a855f7 , #4f46e5);} .oracleContent .oracleBox:nth-child(2) .icon{ background-image: linear-gradient(to bottom right, #f59e0b , #ea580c);} .oracleContent .oracleBox:nth-child(3) .icon{ background-image: linear-gradient(to bottom right, #10b981 , #0d9488);} .oracleContent .oracleBox:nth-child(4) .icon{ background-image: linear-gradient(to bottom right, #3b82f6 , #9333ea);} .oracleContent .oracleBox:nth-child(5) .icon{ background-image: linear-gradient(to bottom right, #8b5cf6 , #9333ea);} .oracleContent .oracleBox:nth-child(6) .icon{ background-image: linear-gradient(to bottom right, #f43f5e , #db2777);} .oracleContent .oracleBox p{ font-size: 14px; color: #fff6;} .oracleContent .oracleBox .conversation{ font-size: 12px; color: #fff6; display: flex; align-items: center; gap: 8px;} .oracleContent .oracleBox:hover .conversation{ color:var(--white); } .oracleContent .oracleBox:first-child:before{ content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: #a955f7d6; opacity: 0;} .oracleContent .oracleBox:nth-child(2):before{ content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: #f59e0bd6; opacity: 0;} .oracleContent .oracleBox:nth-child(3):before{ content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: #10b981d6; opacity: 0; } .oracleContent .oracleBox:nth-child(4):before{ content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: #3b82f6d6; opacity: 0; } .oracleContent .oracleBox:nth-child(5):before{ content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: #8b5cf6d6; opacity: 0; } .oracleContent .oracleBox:nth-child(6):before{ content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: #f43f5ed6; opacity: 0; } .oracleContent .oracleBox:hover:before{ opacity: 1; } .oracleContent .oracleBox:hover{ transform: translateY(-8px);} .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .chatBox{ max-width: 1024px; width: 100%; margin: auto; background-color: rgba(0, 0, 0, 0.2); border-radius: 24px; } .chatBox .chatHeader{ padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1);} .chatBox .chatHeader .titleSection{ display: flex; align-items: center; gap: 10px; } .chatBox .chatHeader .titleSection h2{ font-size: 24px; color: var(--white);} .chatBox .chatHeader .titleSection p{ font-size: 14px; color: var(--white);} .chatBox .chatHeader .titleSection .title{ display: flex; align-items: center; gap: 10px; } .chatBox .chatHeader .titleSection .icon{font-size: 30px; height: 56px; width: 56px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background-image: linear-gradient(to bottom right, #a855f7, #4f46e5);} .chatBox .chatHeader .titleSection .text h6{ margin: 0; font-size: 18px;} .chatBox .chatHeader .titleSection .text p{ margin: 0; font-size: 14px; color: #ffffff8c;} .iconButton{ height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); border: none; color: var(--white);} .chatBody{ padding: 24px; max-height: 280px; overflow-y: scroll;} .chatBody .messageSection{ display: flex; gap: 10px; max-width: 75%;} .chatBody .messageSection .icon{ font-size: 14px; height: 32px; min-width: 32px; width: 32px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background-image: linear-gradient(to bottom right, #a855f7, #4f46e5);} .chatBody .messageSection .messageContent .message{ background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); padding: 16px 12px; border-radius: 16px; border-bottom-left-radius: 6px; font-size: 16px; } .chatBody .messageSection .messageContent .time{ font-size: 12px; color: #ffffff4d;} .chatBody .messageSection + .messageSection{ margin-top: 16px; } .chatBody .messageSection.userMessage{ margin-left: auto; justify-content: flex-end;} .chatBody .messageSection.userMessage .messageContent .message{border-radius: 16px; border-bottom-right-radius: 6px; background-image: linear-gradient(to right, rgb(212, 175, 55), rgb(201, 162, 39)); border: none; color: var(--dark);} .chatBody .messageSection.userMessage .messageContent .time{ margin-left: auto; width: fit-content; } .chatFooter{ padding: 24px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .chatFooter input{ flex: 1; padding: 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1); color: #fff;} .chatFooter input:focus{ outline: 1px solid rgba(255, 255, 255, 0.4); } .chatFooter .chatButton{ height: 48px; min-width: 48px; width: 48px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 12px; background-image: linear-gradient(to bottom right, #a855f7, #4f46e5); color: var(--white); } body:has(.backgroundFixed) .footerSection {background-color: transparent;} .tarotCardReading{ max-width: 650px; margin: auto; text-align: center; color:#f4d0d099; display: flex; flex-direction: column; gap: 40px;} .tarotCardSection{ display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .tarotCardSection .tarotCard{ width: 112px; height: 176px; border-radius: 12px; transform: rotate(-10deg); transition: all 0.3s ease-in-out; border: 2px solid rgba(212, 175, 55, 0.4); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); background-image: linear-gradient(to bottom right, #2d1b4e , #1a0a2e , #0d0415); padding: 7px; } .tarotCardSection .tarotCard.active{ border-color: rgba(212, 175, 55); } .tarotCardSection .tarotCard.active .box .moon{ transform: rotate(360deg); scale: 1.5;} .tarotCardSection .tarotCard .box{position: relative; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 8px; height: 100%; } .tarotCardSection .tarotCard .box .star{ position: absolute; top: 0; right: 0; } .tarotCardSection .tarotCard .box .star2{ bottom: 0; left: 0; top: auto; right: auto;} .tarotCardSection .tarotCard .box .moon{ inset: 0; margin: auto; color: var(--gold); transition: all 1s linear;} .tarotCardSection .tarotCard:hover{ transform: rotate(0deg); } .tarotAnimation{ display: flex; flex-direction: column; gap: 10px; color: var(--gold); justify-content: center; align-items: center;} .tarotAnimation svg{ height:30px; width:30px; margin: 0 auto; animation: rotate 2s linear infinite;} .cardSection{ text-align: center; display: flex; flex-direction: column; gap: 20px;} .foolCard{ width: 100%; text-align: center; max-width: 176px; margin: auto; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 10px; border-radius: 16px; border: 2px solid rgb(212, 175, 55); padding: 16px; height: 224px; background-image: linear-gradient(to right bottom, rgb(45, 27, 78), rgba(183, 110, 121, 0.3), rgba(212, 175, 55, 0.3));} .foolCard .star{ height: 48px; width: 48px; color: var(--gold); animation: float 2s linear infinite;} .foolCard p{ font-size: 14px; color: var(--gold);} .foolCard h3{ font-size: 16px; color: var(--white);} .videoReadingContent{ max-width: 896px; margin: auto; width: 100%; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 24px; padding: 24px; background-color: rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; gap: 20px; flex-direction: column; justify-content: center; text-align: center;} .videoReadingContent h6{ display: flex; align-items: center; gap: 10px; justify-content: center; } .videoReadingContent h6 svg{ color: var(--gold);} .video_container{ border-radius: 12px; overflow: hidden;} .video_container .videoThumbnail{ position: relative; cursor: pointer;} .video_container .videoThumbnail .thubnailPlayButton{ position: absolute; inset: 0; margin: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px;} .video_container .videoThumbnail .thubnailPlayButton .icon{ height: 80px; width: 80px; border-radius: 80px; display: flex; align-items: center; justify-content: center; background-color: rgb(220, 38, 38); } .video_container .videoThumbnail .thubnailPlayButton .icon svg{ height: 36px; width: 36px;} .video_container .videoThumbnail .thubnailPlayButton p{ font-weight: 500;} .video_container .videoThumbnail img{ opacity: 0.3;} .video_container .videoThumbnail:hover img{ opacity: 0.6;} .video_container iframe{ aspect-ratio: 16 / 9; display: flex; width: 100%;} .subscribeButton{ background-color: rgb(220, 38, 38); font-size: 14px; margin: auto; display: inline-block; width: fit-content; display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 50px; color: var(--white); text-decoration: none;} .subscribeButton svg{ height: 20px; width: 20px; } .subscribeButton:hover{ background-color: rgb(185, 28, 28); color: var(--white);} .tarotDescription{ max-width: 896px; margin: auto; width: 100%; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 24px; padding: 24px; background-color: rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; gap: 20px; flex-direction: column;} .tarotDescription .title{ display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center;} .tarotDescription .title svg{ height: 20px; width: 20px; color: var(--gold);} .tarotDescription .title .line{background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(212, 175, 55, 0.5)); height: 1px; flex: 1; } .tarotDescription .title .line2{background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(212, 175, 55, 0.5)); ; } .tarotDescription p{color: #f4d0d0cc;} .shareSocial{ display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: #f4d0d0cc;} .shareSocial .socialIcon{height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .shareSocial .socialIcon.facebook{background-color: rgba(24, 119, 242, 0.2); border: 1px solid rgba(24, 119, 242, 0.3); color: rgb(24, 119, 242); } .shareSocial .socialIcon.facebook:hover{ scale: 1.1; background-color: rgba(24, 119, 242, 0.3);} .shareSocial .socialIcon.twitter{background-color: rgba(29, 161, 242, 0.2); border: 1px solid rgba(29, 161, 242, 0.3); color: rgb(29, 161, 242); } .shareSocial .socialIcon.twitter:hover{ scale: 1.1; background-color: rgba(29, 161, 242, 0.3);} .shareSocial .socialIcon.mail{background-color: rgba(212, 175, 55, 0.2); border: 1px solid rgba(212, 175, 55, 0.3); color: rgb(212, 175, 55); } .shareSocial .socialIcon.mail:hover{ scale: 1.1; background-color: rgba(212, 175, 55, 0.3);} .shareSocial .socialIcon.share{background-color: rgba(183, 110, 121, 0.2); border: 1px solid rgba(183, 110, 121, 0.3); color: rgb(183, 110, 121); } .shareSocial .socialIcon.share:hover{ scale: 1.1; background-color: rgba(183, 110, 121, 0.3);} .twoButton{ display: flex; align-items: center; justify-content: center; gap: 10px;} .twoButton .button{ width: fit-content;} .readingSection{ display: flex; flex-direction: column; gap: 40px;} .chamberTitle .date{ display: flex; align-items: center; gap: 10px; color: var(--gold); justify-content: center; margin-top: 24px;} .chamberTitle .date svg{ height: 20px; width: 20px; } .chamberTitle .date span{ display: flex; } .buttonGroup{ margin-bottom: 64px;} .buttonGroup .button{padding: 8px 20px; font-size: 14px; } .buttonGroup .button.outline{ color: #f4d0d099; } .weeklyHoroscopeTitle{ text-align: center; margin-bottom: 48px;} .weeklyHoroscopeTitle .icon{ font-size: 60px; display: flex; align-items: center; justify-content: center; height: 128px; width: 128px; border-radius: 50%; background-image: linear-gradient(to right bottom, rgb(16, 185, 129), rgb(217, 119, 6)); margin: auto; margin-bottom: 24px;} .weeklyHoroscopeTitle .title{ display: flex; flex-direction: column; gap: 10px;} .weeklyHoroscopeTitle .title p{ color: #f4d0d099;} .weeklyHoroscopeTitle .title h6{ color: var(--gold); font-size: 16px; margin: 0;} .weeklyLike{ text-align: center; display: flex; flex-direction: column; gap: 16px;} .weeklyLike .heart{ display: flex; align-items: center; gap: 5px; justify-content: center; color: var(--pink);} .weeklyLike .heart svg{ height: 24px; width: 24px; } .weeklyLike .status{background-color: rgba(212, 175, 55, 0.2); text-transform: uppercase; padding: 8px 24px; border-radius: 50px; font-size: 14px; color: var(--gold); width: fit-content; margin: auto;} .weeklyContentSection{ display: flex; flex-direction: column; gap: 32px;} .weeklyContent{ display: flex; flex-wrap: wrap; gap: 24px; max-width: 869px; margin: 0 auto; width: 100%;} .weeklyContent .weeklyBox{ width: calc(50% - 12px); padding: 24px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid;} .weeklyContent .weeklyBox .title{ display: flex; align-items: center; gap: 10px;} .weeklyContent .weeklyBox .title .icon{ font-size: 24px; color: var(--gold); height: 24px; width: 24px; display: flex; align-items: center; justify-content: center;} .weeklyContent .weeklyBox p{ color: #f4d0d0b3;} .weeklyContent .weeklyBox.overview{ width: 100%;} .weeklyContent .weeklyBox.overview p{ font-size: 18px;} .weeklyContent .weeklyBox:nth-child(4n + 1){ background-image: linear-gradient(to right bottom, rgba(212, 175, 55, 0.2), rgba(0, 0, 0, 0)); border-color: rgba(212, 175, 55, 0.3);} .weeklyContent .weeklyBox:nth-child(4n + 2){ background-color: rgba(255, 255, 255, 0.05); border-color: rgba(183, 110, 121, 0.2);} .weeklyContent .weeklyBox:nth-child(4n + 3){ background-color: rgba(255, 255, 255, 0.05); border-color: rgba(183, 110, 121, 0.2);} .weeklyContent .weeklyBox:nth-child(4n + 4){ background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.2), rgba(0, 0, 0, 0)); border-color: rgba(183, 110, 121, 0.3);} .weeklyContent .weeklyBox .chart{ max-width: 400px; width: 100%; margin: auto;} .loveDestinyGuideSection{ margin: 0; margin-bottom: 96px;} .loveDestinyGuideSection .guidanceForm{ margin: 0; margin:0px auto;} .loveDestinyGuideSection.guidanceSection{ display: flex; flex-direction: column; gap: 20px;} .loveDestinyGuideSection.guidanceSection h3{ margin: 0;} .loveDestinyGuideSection{ background-image: linear-gradient(to bottom right, rgb(249 115 22 / .4) , rgb(220 38 38 / .4)); border: 2px solid var(--gold);} .spiritAnimalQuiz{ max-width: 672px; margin: 0 auto; } .spiritAnimalQuiz .progressDot{ display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px;} .spiritAnimalQuiz .progressDot .dot{ height: 12px; width: 12px; border-radius: 50%; background-color: rgb(45, 27, 78); border: 1px solid #d4af374d;} .spiritAnimalQuiz .progressDot .dot.active{ background-color: rgb(183, 110, 121); border-color: rgb(183, 110, 121); height: 15px; width: 15px;} .spiritAnimalQuiz .progressDot .dot.completed{ background-color: rgb(212, 175, 55); border-color: rgb(212, 175, 55);} .spiritAnimalQuiz .quizBox .step{ display: none;} .spiritAnimalQuiz .quizBox .step.active{ display: block;} .spiritAnimalQuiz .quizBox { background-image: linear-gradient(to right bottom, rgb(26, 10, 46), rgb(45, 27, 78)); border: 1px solid rgba(212, 175, 55, 0.2); padding: 32px; border-radius: 24px;} .spiritAnimalQuiz .quizBox .question{ color: #d4af3799; font-size: 14px; text-align: center; margin-bottom: 12px; } .spiritAnimalQuiz .quizBox h3{ text-align: center; margin-bottom: 32px;} .inputRadio input{ display: none;} .inputRadio label{background-color: rgba(13, 4, 21, 0.5); border: 1px solid rgba(212, 175, 55, 0.2); padding: 20px; display: flex; align-items: center; gap: 16px; font-size: 16px; border-radius: 16px; transition: all 0.3s ease;} .inputRadio label .icon{ font-size: 30px; } .inputRadio label:hover{ background-color: rgba(212, 175, 55, 0.1); border-color: rgba(212, 175, 55, 0.6);} .inputRadio label .arrow{ margin-left: auto; opacity: 0; color: var(--gold);} .inputRadio label:hover .arrow{ opacity: 1;} .inputRadio + .inputRadio{ margin-top: 16px;} .animationBox{ text-align: center; margin-top: 60px;} .animationBox .icon{ width: 100px; height: 100px; color: var(--white); border-radius: 50%;background-image: linear-gradient(to right, #b76e79 , #d4af37); margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 60px; margin-bottom: 24px; padding: 20px;} .animationBox .icon svg{ animation: rotate 2s linear infinite;} .spiritanimalquizDetails { max-width: 672px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px;} .spiritanimalquizDetails .content{ max-width: 512px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; text-align: center;} .spiritanimalquizDetails .content .icon{ width: 160px; height: 160px; border-radius: 160px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background-image: linear-gradient(to right bottom, rgb(26, 10, 46), rgb(45, 27, 78)); border: 2px solid var(--gold); box-shadow: rgba(188, 122, 113, 0.47) 0px 0px 55.37px; font-size: 96px; } .spiritanimalquizDetails .content .title h6 { font-size: 14px; color: var(--gold); text-transform: uppercase; letter-spacing: 2.8px; font-weight: 400;} .spiritanimalquizDetails .content p{ color: #f4d0d0cc;} .spiritanimalquizDetails .content p.tags span{ background-color: rgba(212, 175, 55, 0.1); border: 1px solid rgba(212, 175, 55, 0.3); padding: 8px 16px; border-radius: 50px; color: var(--gold); font-size: 14px;} .spiritanimalquizDetails .content p.tags{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;} .spiritanimalquizDetails .spritMessage{background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.1), rgba(212, 175, 55, 0.1)); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 16px; padding: 24px; text-align: center; } .spiritanimalquizDetails .spritMessage h6{ font-size: 16px; color: var(--gold); font-weight: 400; margin-bottom: 12px;} .spiritanimalquizDetails .spritMessage h6 svg{ height: 16px; width: 16px;} .spiritanimalquizDetails .spritMessage p{ color: rgba(244, 208, 208, 0.9); font-style: italic;} .oracleCardSection{ max-width: 896px; margin: auto; width: 100%; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 24px; padding: 24px; background-color: rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; gap: 20px; flex-direction: column; justify-content: center; text-align: center;} .oracleCardSection p{ font-size: 14px; color: #f4d0d080;} .subscribeAstrology{ background-color: rgba(255, 0, 0, 0.1); border: 1px solid rgba(255, 0, 0, 0.3); padding: 16px 24px; border-radius: 16px; display: inline-block; text-align: center; text-decoration: none; color: var(--white) !important; font-weight: 500;} .subscribeAstrology .icon svg{height: 24px; width: 24px; color: rgb(255, 0, 0); } .subscribeAstrology .samll{ font-size: 12px; color: rgba(244, 208, 208, 0.5) !important;} .subscribeAstrology:hover{ background-color: rgba(255, 0, 0, 0.2); border-color: rgba(255, 0, 0, 0.6);} .checkerTitle{ max-width: 576px; margin: auto; margin-bottom: 48px;} .checkerTitle .icon{ height: 96px; width: 96px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.3), rgba(212, 175, 55, 0.3)); border-radius: 96px; animation: scale 2s linear infinite;} .checkerTitle .icon svg{ height: 48px; width: 48px; color: var(--pink);} .checkerTitle p.small{ margin-top: 16px; color: #d4af3799;} .zodiacAnalysis{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; max-width: 28rem; margin: auto; margin-top: 48px;} .zodiacAnalysis .zodiacBox{ text-align: center; display: flex; flex-direction: column; gap: 16px;} .zodiacAnalysis .zodiacBox .icon{ height: 48px; width: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 64px;} .zodiacAnalysis .zodiacBox .icon svg{ height: 20px; width: 20px; color: var(--gold);} .zodiacAnalysis .zodiacBox p{ font-size: 12px; color: #f4d0d080;} .progressChecker{ display: flex; flex-direction: column; gap: 5px; max-width: 896px; margin: auto;} .progressChecker .progressNumber{ display: flex; justify-content: space-between;} .progressChecker .progressNumber p{ font-size: 12px; color: #f4d0d080;} .progressChecker #progressTrack{ height: 5px; background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden;} .progressChecker #progressBar{ background-image: linear-gradient(to right, rgb(183, 110, 121), rgb(212, 175, 55)); height: 100%;} .compatibilityForm{ max-width: 672px; margin: auto; margin-top: 32px; overflow: hidden;} .compatibilityForm .heading{ text-align: center; margin-bottom: 32px;} .compatibilityForm .heading .icon{ height: 64px; width: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.3), rgba(212, 175, 55, 0.3)); color: rgb(212, 175, 55); margin-bottom: 16px; border-radius: 64px;} .compatibilityForm .heading p{ color: #f4d0d080; margin-top: 8px;} .compatibilityForm .formBox{ background-color: rgba(255, 255, 255, 0.05); border:1px solid rgba(212, 175, 55, 0.2); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 24px;} .compatibilityForm .formBox .inputBox{ display: flex; flex-direction: column; gap: 8px;} .compatibilityForm .formBox .inputBox label{ color: rgba(244, 208, 208, 0.7); font-size: 14px; } .compatibilityForm .formBox .inputBox input{ background-color: rgba(255, 255, 255, 0.05); border:1px solid rgba(212, 175, 55, 0.2); border-radius: 16px; padding: 12px 16px; color: var(--white); } .compatibilityForm .formBox .inputBox input::-webkit-calendar-picker-indicator{ filter: invert(1);} .compatibilityForm .formBox .zodicLine{ display: flex; justify-content: space-between; gap: 16px; align-items: center;} .compatibilityForm .formBox .zodicLine .line{ height: 1px; background-color: rgba(212, 175, 55, 0.2); flex: 1;} .compatibilityForm .formBox .zodicLine p{ font-size: 14px; color: #f4d0d066;} .compatibilityForm .formBox .zodianSign{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;} .compatibilityForm .formBox .zodianSign .zodicBox{ cursor: pointer; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 5px; text-align: center;} .compatibilityForm .formBox .zodianSign .zodicBox p{ font-size: 12px;} .compatibilityForm .formBox .zodianSign .zodicBox .icon{ font-size: 24px;} .compatibilityForm .formBox .zodianSign .zodicBox:hover{ background-color: rgba(255, 255, 255, 0.05); border-color: rgba(212, 175, 55, 0.5);} .compatibilityForm .formBox .zodianSign input[type="radio"]:checked + .zodicBox{ background-image: linear-gradient(to right bottom, rgb(59, 130, 246), rgb(20, 184, 166)); border-color: rgba(255, 255, 255, 0.3);} .compatibilityForm .formBox .zodianSign .radio input{ display: none;} .compatibilityForm .twoButton{ justify-content: space-between;} .compatibilityForm .step{transform: translateX(60px); opacity: 0; transition: all 1s linear;} .compatibilityForm .step.active{transform: translateX(0); opacity: 1;} .compatibilityForm .radioInputSection{ display: flex; flex-direction: column; gap: 12px;} .compatibilityForm .radioInputSection .radioInput input{ display: none;} .compatibilityForm .radioInputSection .radioInput input:checked + .radioLabel{background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(212, 175, 55, 0.6);} .compatibilityForm .radioInputSection .radioInput .radioLabel:hover{ background-color: rgba(255, 255, 255, 0.05); border-color: rgba(212, 175, 55, 0.3);} .compatibilityForm .radioInputSection .radioInput .radioLabel{ padding: 20px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 16px; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 16px;} .compatibilityForm .radioInputSection .radioInput .radioLabel .text{ flex: 1;} .compatibilityForm .radioInputSection .radioInput .radioLabel .text p{ color: rgba(244, 208, 208, 0.5); font-size: 14px;} .compatibilityForm .radioInputSection .radioInput .radioLabel .icon{ height: 40px; width: 40px; background-color: rgba(183, 110, 121, 0.2); display: flex; align-items: center; justify-content: center; border-radius: 64px;} .compatibilityForm .radioInputSection .radioInput .radioLabel .icon svg{ color: var(--pink);} .compatibilityForm .radioInputSection .radioInput .radioLabel .arrow svg{color: rgba(212, 175, 55, 0.5);} .mt24{ margin-top: 24px;} .compatibilitycheckerDet{ max-width: 896px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px;} .compatibilitycheckerDet .percentegeSection{ display: flex; gap: 16px; justify-content: center; align-items: center;} .compatibilitycheckerDet .percentegeSection .iconSection{ border-radius: 16px; font-size: 12px; background-image: linear-gradient(to right bottom, rgb(16, 185, 129), rgb(217, 119, 6)); height: 80px; width: 80px; display: flex; align-items: center; justify-content: center; flex-direction: column;} .compatibilitycheckerDet .percentegeSection .iconSection .icon{ font-size: 30px;} .compatibilitycheckerDet .percentegeSection .percentage{ width: 112px; height: 112px; border: 8px solid var(--gold); border-radius: 112px; display: flex; align-items: center; justify-content: center; font-size: 30px;} .compatibilitycheckerDet .earthboundTitle{ text-align: center; display: flex; flex-direction: column; gap: 12px;} .compatibilitycheckerDet .earthboundTitle p{ max-width: 672px; margin: 0 auto; color: #f4d0d0b3;} .earthboundContent{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;} .earthboundContent .earthboundBox{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; padding: 16px;} .earthboundContent .earthboundBox .dotSection{ display: flex; gap: 2px;} .earthboundContent .earthboundBox .dotSection .dot{ height: 8px; width: 8px; border-radius: 8px; background-color: rgba(255, 255, 255, 0.1); } .earthboundContent .earthboundBox .dotSection .dot.active{background-image: linear-gradient(to right, rgb(183, 110, 121), rgb(212, 175, 55));} .earthboundContent .earthboundBox p{ font-size: 12px; color: #f4d0d099; margin-top: 8px;} .earthboundContainer { display: flex; flex-wrap: wrap; gap: 24px;} .earthboundContainer .earthboundBox{ width: calc(50% - 12px); background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px;} .earthboundContainer .earthboundBox .title{ display: flex; align-items: center; gap: 12px;} .earthboundContainer .earthboundBox .title h6{ margin: 0; font-size: 16px;} .earthboundContainer .earthboundBox p{ color: #f4d0d0b3; font-size: 14px;} .earthboundContainer .earthboundBox p.list{ display: inline-flex; gap: 8px; } .earthboundBox.flourishBox{ text-align: center; background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.15), rgba(212, 175, 55, 0.15)); border-color: rgba(212, 175, 55, 0.3);} .earthboundBox.flourishBox .title{ flex-direction: column; gap: 16px; } .earthboundBox.flourishBox .title h4{ font-style: italic; color: #d4af37;} .earthboundBox.flourishBox .title svg{ color: var(--pink); width: 40px; height: 40px; margin: auto;} .earthboundBox.flourishBox p{ font-size: 16px; } .earthboundContainer .twoButton{ margin: 0 auto;} .loaderIcon {width:80px;height:80px; margin: auto; border: 5px solid #4F3B2A;border-bottom-color: var(--gold);border-radius: 50%;display: inline-block;box-sizing: border-box;animation: rotation 1s linear infinite;} @keyframes rotation {0% { transform: rotate(0deg);}100% { transform: rotate(360deg);}} .loaderContainer{ display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 30px;} .loaderContainer .iconSection{ display: flex; gap: 10px; justify-content: center; align-items: center; font-size: 20px; color: var(--pink);} .loaderContainer .text p{ font-size: 14px; color: #f4d0d0b3;} .loaderContainer .text { display: flex; flex-direction: column; gap: 5px;} .growthOpportunities{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .growthOpportunities .growthBox{background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 16px; border-radius: 12px; } .growthOpportunities .growthBox .number{ margin-bottom: 12px; width: 32px; height: 32px; border-radius: 32px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--gold); background-color: rgba(212, 175, 55, 0.2); } @keyframes scale {0% { transform: scale(1); }50% { transform: scale(1.1); }100% { transform: scale(1); }} .spiritAnimalQuiz.horoscopeQuiz{ max-width: 896px;} .spiritAnimalQuiz.horoscopeQuiz .quizBox{ background-image: none; padding: 0;border-radius: 0; border: none; } .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign .zodicBox{ cursor: pointer; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 5px; text-align: center;} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign .zodicBox p{ font-size: 12px;} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign .zodicBox .icon{ font-size: 24px;} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign .zodicBox:hover{ background-color: rgba(255, 255, 255, 0.05); border-color: rgba(212, 175, 55, 0.5);} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign input[type="radio"]:checked + .zodicBox{ background-image: linear-gradient(to right bottom, rgb(59, 130, 246), rgb(20, 184, 166)); border-color: rgba(255, 255, 255, 0.3);} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign .radio input{ display: none;} .spiritAnimalQuiz.horoscopeQuiz .quizBox .title{ margin-bottom: 24px; text-align: center;} .spiritAnimalQuiz.horoscopeQuiz .quizBox .title h6{ font-size: 20px;} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign.relationshipStatus{ grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 576px; margin: auto; } .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign.relationshipStatus .zodicBox{ flex-direction: row; gap: 24px; align-items: center; font-size: 16px; padding: 24px;} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign.relationshipStatus .zodicBox p{ font-size: 16px;} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign.relationshipStatus .zodicBox .icon{ color: var(--pink);} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign.focusOnLove{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 672px; margin: auto; } .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign.focusOnLove .zodicBox{ width: fit-content; padding: 12px 24px; border-radius: 50px;} .loveJourneyAwaits{ max-width: 768px; margin: auto; margin-top: 48px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 16px; padding: 32px; text-align: center; display: flex; flex-direction: column; gap: 16px;} .loveJourneyAwaits h5{ color: var(--gold);} .loveJourneyAwaits p{ color: #f4d0d0b3;} .horoscopeQuizDetails .title .icon{ width: 96px; height: 96px; margin: auto; margin-bottom: 16px; border-radius: 96px; background-image: linear-gradient(to right bottom, rgb(56, 189, 248), rgb(139, 92, 246)); font-size: 48px; display: flex; align-items: center; justify-content: center;} .horoscopeQuizDetails .title{text-align: center;} .horoscopeQuizDetails .title .text p{ font-size: 14px; color: #f4d0d080; margin-top: 6px;} .horoscopeQuizContent{ display: flex; flex-wrap: wrap; gap: 24px; max-width: 896px; margin: auto; margin-top: 32px;} .horoscopeQuizContent .quizContentBox{ padding: 24px; border-radius: 16px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); width: 100%;} .horoscopeQuizContent .quizContentBox.intoducation{ background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.2), rgba(212, 175, 55, 0.2)); border-color: rgba(212, 175, 55, 0.3); text-align: center; font-size: 18px; font-style: italic;} .horoscopeQuizContent .quizContentBox.w3{width: calc(33.33% - 16px);} .horoscopeQuizContent .quizContentBox.w2{width: calc(50% - 12px);} .horoscopeQuizContent .quizContentBox.status{ text-align: center; } .horoscopeQuizContent .quizContentBox.status .icon{ color: var(--pink);} .horoscopeQuizContent .quizContentBox.status p{ font-size: 12px; color: #f4d0d099; margin-top: 8px;} .horoscopeQuizContent .quizContentBox.status .iconDots{ display: flex; justify-content: center; gap: 2px;} .horoscopeQuizContent .quizContentBox.status .iconDots .iconDot{height: 6px; width: 6px; background-color: rgba(255, 255, 255, 0.1); border-radius: 6px; } .horoscopeQuizContent .quizContentBox.status .iconDots .iconDot.active{ background-color:var(--gold);} .horoscopeQuizContent .quizContentBox .quizTitle{ display: flex; align-items: center; gap: 12px; align-items: center; margin-bottom: 12px;} .horoscopeQuizContent .quizContentBox .quizTitle h6{ margin: 0; font-size: 16px;} .horoscopeQuizContent .quizContentBox .quizTitle .icon{ color: var(--gold); display: flex;} .horoscopeQuizContent .quizContentBox p{ color: #f4d0d0cc;} .horoscopeQuizContent .quizContentBox p.f14{ font-size: 14px;} .horoscopeQuizContent .quizContentBox p.f20{ font-size: 20px;} .horoscopeQuizContent .quizContentBox.lovePower { background-image: linear-gradient(to right bottom, rgba(245, 158, 11, 0.1), rgba(249, 115, 22, 0.1)); } .horoscopeQuizContent .quizContentBox.lovePower p{ color: rgb(252, 211, 77);} .horoscopeQuizContent .quizContentBox.mostCompatible p{ display: inline-flex; gap: 8px; flex-wrap: wrap; } .horoscopeQuizContent .quizContentBox.mostCompatible p span{ background-color: rgba(212, 175, 55, 0.1); border: 1px solid rgba(212, 175, 55, 0.3); padding: 8px 16px; border-radius: 50px; color: var(--gold);} .horoscopeQuizContent .quizContentBox.yourAffirmation { text-align: center; background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.15), rgba(212, 175, 55, 0.15)); border-color: rgba(212, 175, 55, 0.3);} .horoscopeQuizContent .quizContentBox.yourAffirmation .quizTitle{ flex-direction: column;} .horoscopeQuizContent .quizContentBox.yourAffirmation .quizTitle .icon svg{ width: 32px; height: 32px; color: var(--pink); margin: auto;} .horoscopeQuizContent .quizContentBox.yourAffirmation .quizTitle h6{ font-size: 14px; font-weight: 400; text-transform: uppercase; color: var(--gold);} .horoscopeQuizContent .bottomText{ text-align: center; color: #f4d0d0b3; font-style: italic;} .horoscopeAnimation svg{ height: 64px; width: 64px;} .horoscopeAnimation p{ font-size: 18px;} .blogPostSection{ background-image: linear-gradient(rgb(13, 4, 21), rgb(26, 10, 46), rgb(45, 27, 78)); padding-bottom: 80px;} .blogPostSection .mainImage{ height: 60vh; overflow: hidden; display: flex; align-items: center; position: relative; } .blogPostSection .mainImage .background{ height: 100%; width: 100%; position: absolute; inset: 0; background-image: linear-gradient(to top, rgb(13, 4, 21), rgba(13, 4, 21, 0.6), rgba(0, 0, 0, 0));} .blogPostSection .mainImage img{ height: 100%; width: 100%; object-fit: cover;} .blogContent{ max-width: 720px; margin: auto; display: flex; flex-direction: column; gap: 24px; margin-top: -128px; position: relative; z-index: 1;} .blogContent .blogdate{ display: flex; align-items: center; gap: 16px;} .blogContent .blogdate .status{ display: flex; align-items: center; gap: 8px; background-color: rgba(245, 158, 11, 0.2); border: 1px solid rgba(251, 191, 36, 0.3); color: rgb(252, 211, 77); padding: 6px 16px; border-radius: 50px; font-size: 14px;} .blogContent .blogdate .date{ display: flex; align-items: center; gap: 8px; color: #f4d0d080;} .blogContent .blogHeader{ display: flex; flex-direction: column; gap: 24px;} .blogContent .blogHeader p{ font-size: 20px; color: #f4d0d0b3;} .blogContent .divider{ display: flex; align-items: center; gap: 16px; margin: 24px 0;} .blogContent .divider .line{ height: 1px; width: 100%; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(212, 175, 55, 0.3), rgba(0, 0, 0, 0));} .blogContent .divider .heart{ display: flex; align-items: center; gap: 8px;} .blogContent .divider .heart svg{ color: var(--pink);} .blogContent .blogBody{ display: flex; flex-direction: column; gap: 30px;} .blogContent .blogBody p{ font-size: 18px; color: #f4d0d0b3;} .blogContent .blogBody img{ border-radius: 16px;} .blogContent .blogBody .divider{ height: 1px; background-color: rgba(212, 175, 55, 0.2);} .blogSection{ background-image: linear-gradient(rgb(13, 4, 21), rgb(26, 10, 46), rgb(45, 27, 78));} .blogHeader{ display: flex; align-items: center; gap: 24px; position: relative; margin-bottom: 48px;} .blogHeader .buttonGroup{ margin: 0;} .blogSearch input{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); padding: 12px 16px 12px 48px; border-radius: 100px; width: 100%;} .blogSearch { width: 100%; max-width: 448px; flex: 1; position: relative;} .blogSearch .icon{ position: absolute; top: 50%; left: 16px; transform: translateY(-50%); display: flex; color: rgba(244, 208, 208, 0.4);} .privacyPolicySection{ background-image: linear-gradient(rgb(13, 4, 21), rgb(26, 10, 46), rgb(45, 27, 78));} .mainTitle .icon{ background-color: rgba(212, 175, 55, 0.2); height: 64px; width: 64px; margin: auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: rgb(212, 175, 55);} .mainTitle .icon svg{ height: 32px; width: 32px;} .privacyContent{ max-width: 896px; margin: auto; display: flex; flex-direction: column;gap: 32px;} .privacyContent .privacyBox{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); padding: 32px; border-radius: 16px; display: flex; flex-direction: column; gap: 18px;} .privacyContent .privacyBox p{ color: #f4d0d0b3;} .privacyContent .privacyBox .title{ display: flex; align-items: center; gap: 10px;} .privacyContent .privacyBox .title .icon{ height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(183, 110, 121, 0.2); color: var(--pink);} .privacyContent .privacyBox .title .icon svg{ height: 20px; width: 20px;} .privacyContent .privacyBox ul{ display: flex; flex-direction: column; gap: 5px; padding: 0; margin: 0; padding-left: 24px; } .privacyContent .privacyBox ul li{ color: #f4d0d0b3;} .privacyContent .lastText{ text-align: center; color: #f4d0d080; font-size: 14px;} .ourTerms{ padding: 32px; background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.1), rgba(212, 175, 55, 0.1)); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 16px; display: flex; flex-direction: column; gap: 18px; text-align: center;} .ourTerms .icon svg{ height: 32px; width: 32px; color: var(--pink);} .ourTerms p{ color: #f4d0d0b3;} .ourTerms .button{ width: fit-content; margin: auto;} .aboutSection .mainTitle .icon{ height: 80px; width: 80px; background-color: rgba(212, 175, 55, 0.2);} .aboutSection .mainTitle .icon svg{ height: 40px; width: 40px; color: var(--pink);} .aboutSection .mainTitle h2{ font-size: 60px;} .aboutSection .mainTitle p{ font-size: 18px; max-width: 672px; margin: auto;} .aboutMainSection{max-width: 1024px; margin: auto; display: flex; flex-direction: column; gap: 64px; } .ourMission{ background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.1), rgba(212, 175, 55, 0.1)); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 24px; padding: 40px; text-align: center; } .ourMission h3{ margin-bottom: 24px;} .ourMission p{ font-size: 18px; color: #f4d0d0b3;} .whatWeOffer h3{ text-align: center; margin-bottom: 40px;} .whatWeOfferlist{ display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 24px;} .whatWeOfferlist .listItem{background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 16px; padding: 24px;} .whatWeOfferlist .listItem .icon{ height: 48px; width: 48px; background-color: rgba(183, 110, 121, 0.2); display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 16px;} .whatWeOfferlist .listItem .icon svg{ height: 24px; width: 24px; color: var(--pink);} .whatWeOfferlist .listItem h6{ font-size: 18px; margin-bottom: 8px;} .whatWeOfferlist .listItem p{ font-size: 14px; color: #f4d0d0b3;} .whatWeOfferlist .listItem ul{ display: flex; flex-direction: column; gap: 5px; padding: 0; margin: 0; padding-left: 24px; margin: 10px 0; } .whatWeOfferlist .listItem ul li{ color: #f4d0d0b3;} .ourValuesList{ grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));} .disclaimer{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 16px; padding: 24px;} .disclaimer .title{ display: flex;align-items: center; gap: 10px; margin-bottom: 16px;} .disclaimer .title .icon svg{ height: 20px; width: 20px; color: var(--pink); color: rgb(212, 175, 55);} .disclaimer .title h6{ margin: 0;} .disclaimer p{ color: #f4d0d0b3; font-size: 14px;} .cosmicJourney{ text-align: center; color: rgba(244, 208, 208, 0.6); } .readyExplore .cosmicJourney{ margin-bottom: 24px;} .contactSection .mainTitle p{ max-width: 576px; margin: auto;} .contactForm .button{ width: 100%;} .contactForm { max-width: 768px; margin: auto; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 24px; padding: 40px;} .contactForm form{ display: flex; flex-wrap: wrap; gap: 24px;} .inputGroup{ display: flex; flex-direction: column; gap: 8px; width: 100%;} .inputGroup label{ font-size: 14px; color: #f4d0d0b3;} .inputGroup input, .inputGroup textarea, .inputGroup select{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; padding: 12px 16px; color: var(--white); appearance: none;} .inputGroup select{ background-image: url(../images/down-white.svg); background-repeat: no-repeat; background-position: right 12px center; background-color: rgba(255, 255, 255, 0.05); background-size: 12px;} .inputGroup select option{ background-color: rgb(26, 10, 46);} .contactForm .w50{ width: calc(50% - 12px);} .contactInfo{ display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 768px; margin: auto; margin-top: 48px;} .contactInfo .emailUs{ display: flex; flex-direction: column; gap: 12px; text-align: center; width: 100%; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; padding: 24px;} .contactInfo .emailUs svg{ margin: 0 auto;} .contactInfo .emailUs p{ color: #f4d0d0b3; font-size: 14px;} .contactInfo .emailUs h6{ margin: 0;} .contactInfo .emailUs a{ color: var(--gold) !important;} .loveReadingQuiz .inputRadio label .icon{ display: flex; background-color: rgba(183, 110, 121, 0.2); height: 48px; width: 48px; border-radius: 50%; align-items: center; justify-content: center; color: var(--pink); } .loveReadingQuiz .inputRadio label{ cursor: pointer; background-color: rgba(255, 255, 255, 0.05); border-color: rgba(212, 175, 55, 0.2); transition: all 0.5s linear;} .loveReadingQuiz .inputRadio label:hover{ background-color: rgba(212, 175, 55, 0.1); border-color: rgba(212, 175, 55, 0.6); scale: 1.02; transform: translateX(10px); } .pickYourCard .title{ text-align: center; margin-bottom: 32px;} .pickYourCard .title h3{ margin-bottom: 16px;} .pickYourCard .title p{ color: #f4d0d0b3;} .pickYourCard .tarotCardSection .tarotCard{ cursor: pointer; transform: rotate(0deg); width: 144px; height: 224px;} .pickYourCard .tarotCardSection .tarotCard:hover{ transform: translateY(-10px);} .heartJourney{ text-align: center; justify-content: center; background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.15), rgba(212, 175, 55, 0.15)); border-color: rgba(212, 175, 55, 0.3);} .heartJourney p{ color: rgba(244, 208, 208, 0.8); font-style: italic;} .heartJourney svg{ margin: auto; color: var(--pink); height: 32px; width: 32px;} .dreamInterpretation{ max-width: 896px; margin: auto; display: flex; flex-direction: column; gap: 32px;} .dreamInterpretation .describe{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 24px; padding: 32px;} .dreamInterpretation .describe .title{ display: flex; align-items: center; gap: 8px; margin-bottom: 16px;} .dreamInterpretation .describe .title h6{ margin: 0; font-size: 18px;} .dreamInterpretation .describe .title svg{ color: var(--gold);} .dreamInterpretation .describe textarea{ font-size: 18px; background-color: transparent; resize: none;} .dreamInterpretation .describe textarea:focus{ outline: none; border-color: rgba(212, 175, 55, 0.5);} .dreamInterpretation .dreamRelate{ display: flex; flex-direction: column; gap: 12px;} .dreamInterpretation .dreamRelate p{ text-align: center;} .dreamInterpretation .dreamRelate .inputRadio{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;} .dreamInterpretation .dreamRelate .inputRadio .icon{ display: flex; color: var(--gold);} .dreamInterpretation .dreamRelate .inputRadio label{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); color: #f4d0d0b3;} .dreamInterpretation .dreamRelate .inputRadio label:hover{ border-color: rgba(212, 175, 55, 0.5);} .dreamInterpretation .dreamRelate .inputRadio input:checked + label{ background-image: linear-gradient(to right, rgb(244, 63, 94), rgb(219, 39, 119)); color: var(--white); } .dreamInterpretation .dreamRelate .inputRadio input:checked + label .icon{ color: var(--white);} .dreamInterpretation .button{ width: fit-content; margin: auto;} .dreamInterpretation .button .rotate{ animation: rotate 1s linear infinite;} .dreamInterpretation .button:disabled{ cursor: not-allowed; opacity: 0.5;} .whisperForgotten .title{ display: flex; flex-direction: column; gap: 24px; text-align: center; margin-bottom: 32px;} .whisperForgotten .title .icon{ background: linear-gradient(to right bottom, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3)); border:1px solid rgba(212, 175, 55, 0.3); height: 80px; width: 80px; margin: auto; display: flex; align-items: center; justify-content: center; border-radius: 50%;} .whisperForgotten .title .icon svg{ height: 40px; width: 40px; color: var(--gold);} .whisperForgotten .title p{ color: #f4d0d0b3; font-size: 18px; max-width: 672px; margin: auto;} .whisperForgotten .content{ max-width: 896px; margin: auto; display: flex; flex-wrap: wrap; gap: 32px;} .whisperForgotten .content .dreamSymbols{ background-color: rgba(255, 255, 255, 0.05);border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 16px; padding: 24px;} .whisperForgotten .content .dreamSymbols h6{ display: flex; align-items: center; gap: 10px; margin-bottom: 16px;} .whisperForgotten .content .dreamSymbols h6 svg{ color: var(--gold);} .whisperForgotten .content .dreamSymbols .dreamSymbolsContent{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;} .whisperForgotten .content .dreamSymbols .dreamSymbolsContent .box{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px;} .whisperForgotten .content .dreamSymbols .dreamSymbolsContent .box h6{ color: var(--gold); margin-bottom: 8px;} .whisperForgotten .content .dreamSymbols .dreamSymbolsContent .box p{ color: #f4d0d0b3; font-size: 14px;} .whisperForgotten .content .dreamSymbols.w50{ width: calc(50% - 16px);} .whisperForgotten .content .dreamSymbols.affirmation{ text-align: center; background-image: linear-gradient(to right bottom, rgba(168, 85, 247, 0.15), rgba(59, 130, 246, 0.15)); border-bottom: rgba(212, 175, 55, 0.3); } .whisperForgotten .content .dreamSymbols.affirmation h6{ text-align: center; flex-direction: column; gap: 16px;} .whisperForgotten :where(.shareSocial, .twoButton){ width: 100%;} .loveCardContainer { position: relative; width: 100%; max-width: 1140px; height: 400px; display: flex; justify-content: center; align-items: center; margin: auto;} .loveCard img { height: 100%; object-fit: contain; display: flex; align-items: center; justify-content: center; padding: 15px; animation: rotate 12s linear infinite;} .loveCard { --card-width: 125px; --card-height: 200px; cursor: pointer; position: absolute; width: var(--card-width); height: var(--card-height); background-image: url('../images/card.png'); background-size: cover; background-position: center; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); top: 50%; left: 50%; transform-origin: bottom center; transform: translate(-50%, -50%) rotate(calc(var(--i) * 3deg)) translateX(calc(var(--i) * 2.5vw)); transition: transform 0.3s;} .loveCard:hover { transform: translate(-50%, -55%) rotate(calc(var(--i) * 3deg)) translateX(calc(var(--i) * 2.5vw)); } .loveCardContainer.mainpage{ display: flex; flex-wrap: wrap; gap: 12px; height: 100%; margin-top: 24px;} .loveCardContainer.mainpage .loveCard{ position: unset; transform: unset;} .loveCardContainer.mainpage .loveCard.active{ opacity: 0.5;} .cardHaveSpoken{ max-width: 1024px; margin: auto; display: flex; flex-direction: column; gap: 32px;} .spokenCards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .spokenCards .cardText{ display: flex; flex-direction: column; gap: 16px;} .spokenCards .cardText .cardBox{ padding: 16px; aspect-ratio: 2 / 3; background-image: linear-gradient(to right bottom, rgb(45, 27, 78), rgb(26, 10, 46), rgb(13, 4, 21)); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 16px; } .spokenCards .cardText .cardBox .cardInner{ display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; height: 100%;} .spokenCards .cardText .cardBox .cardInner svg{ color: var(--pink);} .spokenCards .cardText .text{ text-align: center;} .spokenCards .cardText .text h6{ color: var(--gold); margin-bottom: 8px;} .spokenCards .cardText .text p{ color: #f4d0d0b3; font-size: 14px;} .cardHaveSpoken .cardDetails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cardHaveSpoken .cardDetails .cardDetailsBox{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(183, 110, 121, 0.2); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px;} .cardHaveSpoken .cardDetails .cardDetailsBox hr{ margin: 0; color: rgba(212, 175, 55, 0.3);} .cardHaveSpoken .cardDetails .cardDetailsBox h6{ color: var(--gold); font-weight: 400; margin: 0;} .cardHaveSpoken .cardDetails .cardDetailsBox p{ color: #f4d0d0b3; font-size: 14px;} .cardHaveSpoken .cardDetails .cardDetailsBox p.pink{ font-style: italic; color: var(--pink);} .theCardsUnite{ text-align: center; display: flex; flex-direction: column; gap: 16px; background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.15), rgba(212, 175, 55, 0.15)); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 24px; padding: 32px;} .theCardsUnite svg{ color: var(--pink); margin: auto;} .theCardsUnite p{ color: #f4d0d0b3; font-size: 18px; max-width: 672px; margin: auto;} .loveGuidance{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(183, 110, 121, 0.2); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px;} .youraffirmative{ text-align: center; display: flex; flex-direction: column; gap: 12px;} .youraffirmative p{ color: var(--gold);} .shuffleCardContainer{ display: flex; justify-content: center; gap: 32px; margin-top: 64px;} .shuffleCardContainer .shuffleCard{ width: 100%; max-width: 128px;} .shuffleCardContainer .shuffleCard .cardBox{ aspect-ratio: 2/3; border: 1.6px dashed rgba(212, 175, 55, 0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .shuffleCardContainer .shuffleCard .cardBox p{ font-size: 36px; color: #d4af374d;} .shuffleCardContainer .shuffleCard .text{ text-align: center; margin-top: 16px;} .shuffleCardContainer .shuffleCard .text h6{ font-size: 14px; color: var(--gold); margin-bottom: 0px;} .shuffleCardContainer .shuffleCard .text p{ font-size: 12px; color: #f4d0d066;} .shuffleCardContainer .shuffleCard .cardBox .cardInside{ display: none;} .shuffleCardContainer .shuffleCard .cardBox.active p{ display: none;} .shuffleCardContainer .shuffleCard .cardBox.active { background-image: linear-gradient(to right bottom, rgb(45, 27, 78), rgba(183, 110, 121, 0.3), rgba(212, 175, 55, 0.3)); border: none; padding: 5px;} .shuffleCardContainer .shuffleCard .cardBox.active .cardInside{ position: relative; width: 100%; height: 100%; align-items: center; display: flex; flex-direction: column; gap: 16px; justify-content: center; border: 2px solid var(--gold); border-radius: 12px; } .shuffleCardContainer .shuffleCard .cardBox.active .cardInside .heart{ text-align: center; } .shuffleCardContainer .shuffleCard .cardBox.active .cardInside .heart svg{height: 48px; width: 48px; margin: auto; animation: scaleHeart 1s ease-in-out infinite; color: var(--pink);} .shuffleCardContainer .shuffleCard .cardBox.active .cardInside .star{padding: 5px; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;} .shuffleCardContainer .shuffleCard .cardBox.active .cardInside .star svg{ height: 16px; width: 16px; margin: auto; color: var(--gold); animation: rotate 3s linear infinite; margin: 0;} .shuffleCardContainer .shuffleCard .cardBox.active .cardInside .star svg:first-child{margin-left: auto;} @keyframes scaleHeart {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }} .threeCardSpreadSection .mainTitle h3{ margin-bottom: 16px; font-size: 36px;} .threeCardSpread { max-width: 896px; width: 100%; margin: auto; display: flex; flex-direction: column; gap: 24px; } .threeCardSpread .threeCardSpreadBox{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); padding: 24px; border-radius: 16px; display: flex; gap: 16px;} .threeCardSpread .threeCardSpreadBox .number{ height: 56px; width: 56px; border-radius: 50%; background-image: linear-gradient(to right bottom, rgb(183, 110, 121), rgb(212, 175, 55)); display: flex; align-items: center; justify-content: center;} .threeCardSpread .threeCardSpreadBox .details { display: flex; flex-direction: column; gap: 8px;} .threeCardSpread .threeCardSpreadBox .details h6{ font-size: 18px; margin: 0;} .threeCardSpread .threeCardSpreadBox .details p{ font-size: 14px; color: #f4d0d099; margin: 0;} .threeCardSpread .threeCardSpreadBox .details .label{ background-image: linear-gradient(to right, rgba(183, 110, 121, 0.2), rgba(212, 175, 55, 0.2)); border: 1px solid rgba(212, 175, 55, 0.3); padding: 8px 16px; border-radius: 8px; font-size: 16px; line-height: 1.2; color: rgb(212, 175, 55); width: fit-content;} .threeCardDetails{ display: flex; flex-direction: column; gap: 24px; max-width: 896px; margin: auto;} .threeCardDetails h3{ text-align: center; font-size: 36px;} .threeCardDetails .description{ background-image: linear-gradient(to right, rgba(183, 110, 121, 0.2), rgba(212, 175, 55, 0.2)); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 9999px; padding: 12px 24px;} .threeCardDetails .description p{ color: rgb(212, 175, 55); text-align: center; font-style: italic;} .threeCardDetails .cardDetails{ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); padding: 24px; display: flex; flex-direction: column; gap: 16px; border-radius: 16px;} .threeCardDetails .cardDetails .title{ display: flex; gap: 16px; align-items: center;} .threeCardDetails .cardDetails .title .number{ height: 48px; width: 48px; min-width: 48px; font-weight: 700; border-radius: 50%; background-image: linear-gradient(to right bottom, rgb(183, 110, 121), rgb(212, 175, 55)); display: flex; align-items: center; justify-content: center;} .threeCardDetails .cardDetails .title .icon{ color: var(--gold);} .threeCardDetails .cardDetails .title h6{ margin: 0; font-size: 18px;} .threeCardDetails .cardDetails .title .text p{ color: #d4af37;} .threeCardDetails .cardDetails p{ color: #f4d0d0cc;} .threeCardDetails .cardDetails .keyMessage{ border: 1px solid rgba(212, 175, 55, 0.2); background-color: rgba(212, 175, 55, 0.1); padding: 12px; border-radius: 8px;} .threeCardDetails .cardDetails .keyMessage p{ font-size: 14px;} .threeCardDetails .cardDetails .keyMessage p b{ color: #d4af37;} .sacredJourney{ color: var(--gold); background-image: linear-gradient(to right bottom, rgba(183, 110, 121, 0.2), rgba(212, 175, 55, 0.2)); border: 1px solid rgba(212, 175, 55, 0.4); padding: 32px; border-radius: 24px; text-align: center;} .sacredJourney h5{ font-style: italic; line-height: 1.4;} .sacredJourney svg{ height: 32px; width: 32px;} .scoreBox { margin-top: 20px; display: flex; justify-content: center; gap: 40px; text-align: center; font-size: 18px; color: #d4af37;} .scoreBox div span { display: block; color: #ffffff; font-size: 14px; text-align: center; font-size: 12px; color: #f4d0d080;} .pickThreeCardAnimation svg{ height: 60px; width: 60px;} @media (min-width: 1400px) {.navigationSection .container {max-width: 1256px;}} @media (max-width: 991.98px) { h1{ font-size: 72px;} h2{ font-size: 36px;} .navigationSection .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;} .navigationSection .navbar-toggler:focus{ box-shadow: none;} .navigationSection .navbar-toggler span{ height: 1.5px; width: 100%; background-color: var(--white); border-radius: 5px; display: block; transition: all 0.5s linear;} .navigationSection .navbar-toggler span:nth-child(3){ width:65%;} .navigationSection .navbar-toggler[aria-expanded="true"]{ justify-content: flex-start; position: relative;} .navigationSection .navbar-toggler[aria-expanded="true"] span{ position: absolute; top: 0; bottom: 0; margin: auto; width: 80%;} .navigationSection .navbar-toggler[aria-expanded="true"] span:first-child{ transform: rotate(-45deg);} .navigationSection .navbar-toggler[aria-expanded="true"] span:nth-child(2){ opacity: 0;} .navigationSection .navbar-toggler[aria-expanded="true"] span:nth-child(3){ transform: rotate(45deg); width: 80%;} body:has(.navbar-toggler[aria-expanded="true"]){ overflow: hidden;} .navigationSection:has(.navbar-toggler[aria-expanded="true"]){height: 100vh; display: flex; align-items: flex-start;} .chamberTitle h2{ font-size: 36px;} .bannerSection .bannerContent { padding: 0; grid-template-columns: repeat(1, 1fr);} .bannerSection .bannerContent .bannerImg { display: none;} .bannerSection .bannerText{ text-align: center;} .signSection{ grid-template-columns: repeat(4, 1fr);} .compatibilityForm .formBox .zodianSign, .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign{ grid-template-columns: repeat(4, 1fr);} .blogHeader{ flex-direction: column;} .astrologyBlog{ grid-template-columns: repeat(2, 1fr);} .aboutSection .mainTitle h2{ font-size: 36px;} .loveCardContainer{ display: flex; flex-wrap: wrap; gap: 12px; height: 100%; margin-top: 24px;} .loveCardContainer .loveCard{ position: unset; transform: unset;} .loveCardContainer .loveCard.active{ opacity: 0.5;} } @media (max-width: 767.98px) { h1{ font-size: 48px;} .pad96{ padding: 48px 0;} .signSection{ grid-template-columns: repeat(3, 1fr);} .allArticles{ flex-direction: column; justify-content: flex-start;} .astrologyBlog{ grid-template-columns: repeat(2, 1fr);} .footerCopyRight .copyright{flex-direction: column; justify-content: center; align-items: center;} .mainTitle{ margin-bottom: 24px;} .guidanceSection{ margin-top: 48px; padding: 24px;} .oracleContent{ grid-template-columns: repeat(2, 1fr);} .weeklyContent .weeklyBox{ width: 100%;} .compatibilityForm .formBox .zodianSign, .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign{ grid-template-columns: repeat(3, 1fr);} .horoscopeQuizContent .quizContentBox.w3{ width: 100%;} .horoscopeQuizContent .quizContentBox.w2{ width: 100%;} .privacyContent .privacyBox{ padding: 24px; border-radius: 12px;} .aboutMainSection{ gap: 48px;} .ourMission{ padding: 24px;} .ourMission p{ font-size: 16px;} .whatWeOfferlist .listItem, .disclaimer{ padding: 18px;} .contactForm .w50{ width: 100%;} .contactForm{ padding: 20px;} .dreamInterpretation .describe{ padding: 16px;} .dreamInterpretation .describe textarea{ font-size: 16px;} .whisperForgotten .content .dreamSymbols.w50{ width: 100%;} .cardHaveSpoken .cardDetails{ grid-template-columns: repeat(1, 1fr);} } @media (max-width: 567.98px) { h1{ font-size: 48px;} .signSection{ grid-template-columns: repeat(2, 1fr);} .bannerSection .buttonSection{ flex-direction: column;} .bannerSection .buttonSection .button{ width: 100%; justify-content: center;} .signSection .signBox .text span{ font-size: 36px;} .astrologyBlog{ grid-template-columns: repeat(1, 1fr);} .guidanceForm{ flex-direction: column;} .footerSection .footerContent{ grid-template-columns: repeat(1, 1fr);} .oracleContent{ grid-template-columns: repeat(1, 1fr);} .chatBody .messageSection .messageContent .message{ font-size: 14px;} .twoButton{ flex-direction: column;} .video_container .videoThumbnail .thubnailPlayButton .icon{ height: 40px; width: 40px;} .video_container .videoThumbnail .thubnailPlayButton .icon svg{ height: 20px; width: 20px;} .spiritAnimalQuiz .quizBox, .oracleCardSection{ padding: 12px;} .spiritAnimalQuiz .quizBox h3{ font-size: 22px;} .inputRadio label{ font-size: 14px;} .inputRadio label .icon{ font-size: 24px;} .compatibilityForm .formBox .zodianSign, .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign{ grid-template-columns: repeat(2, 1fr);} .loveJourneyAwaits{ padding: 18px;} .loveJourneyAwaits p{ font-size: 14px;} .spiritAnimalQuiz.horoscopeQuiz .quizBox .zodianSign.relationshipStatus{ grid-template-columns: repeat(1, 1fr);} .earthboundContent, .growthOpportunities{grid-template-columns: repeat(1, 1fr);} .earthboundContainer .earthboundBox{ width: 100%;} .contactInfo .emailUs{ width: 100%;} .spokenCards{ grid-template-columns: repeat(1, 1fr);} .spreadPresetContainer{ grid-template-columns: repeat(1, 1fr);} .threeCardDetails .description p{ font-size: 14px;} .threeCardDetails .description{ border-radius: 16px;} }