@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* --maincolor: #FFFCC1;
    --secondary: #22fcb4;
    --bodycolor: #282846;
    --black: #e6fef4;
    --white: #000;
    --back-white: #000;
    --bs-body-color: #fff;
    --bs-btn-hover-bg: #000; */

    /* yellow and green */
    --maincolor: #FFF95B;
    --secondary: #00e4a4;
    --bodycolor: #1f1f3a;
    --black: #ffffff;
    --white: #000000;
    --back-white: #000000;
    --bs-body-color: #ffffff;
    --bs-btn-hover-bg: #111111;


    /* --maincolor: #E63093;
    --secondary: #9b5de5;
    --bodycolor: #f9f9f9;
    --black: #000;
    --white: #fff;
    --back-white: #fff;
    --bs-body-color: #000;
    --bs-btn-hover-bg: #ff4f9d; */


    --shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    --radius: 0;
    --style: normal;
}

body {
    background-color: var(--bodycolor) !important;
    font-family: "Rubik", sans-serif;
}

#body {
    padding-left: 6px;
    padding-right: 6px;
}

.radius {
    border-radius: var(--radius);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0px;
}

#marquee {
    background: var(--maincolor);
    color: var(--white);
    text-shadow: 0px 0px 1px var(--black);
    margin-bottom: 10px;
    position: sticky;
    width: 100%;
    top: 0;
    display: flex;
    height: 35px;
    align-items: center;
    font-style: var(--style);
    font-weight: 600;
    box-shadow: var(--shadow);
    z-index: 3;
}

header {
    background: var(--back-white);
    padding: 15px 0px;
    border: 2px solid var(--maincolor);
    box-shadow: var(--shadow);

}

header a {
    text-decoration: none;
    color: var(--black);
}

header a h1 {
    font-size: 30px;
    font-weight: 600;
}

header h2 {
    font-size: 22px;
    color: var(--secondary);
    /* background-image: linear-gradient(100deg, rgb(61, 61, 61), rgb(255, 77, 99));
    background-clip: text;
    -webkit-text-fill-color: transparent; */
}

#patti-tips {
    background: var(--back-white);
    margin: 5px 0px;
    border: 2px solid var(--black);
    box-shadow: var(--shadow);
}

#patti-tips a {
    display: flex;
    justify-content: center;
    padding: 10px 0px;
    color: var(--black);
    font-size: 20px;
    text-decoration: none;
    align-items: center;
    font-weight: 600;
    font-style: var(--style);
}

#patti-tips img {
    height: 13px;
    margin: 0px 10px;
}

#live-result {
    background: var(--back-white);
    border: 2px solid var(--maincolor);
    margin: 5px 0px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

#live-result h3 {
    /* background-image: linear-gradient(-225deg, #231557 0, #44107a 29%, #ff1361 67%, #ff0025 100%);
    background-size: 200% auto; */
    color: var(--white);
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textanimation 2s linear infinite; */
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-style: var(--style);
}

#live-result h3 img {
    height: 17px;
    margin-left: 10px;
}

.live-bg {
    background: linear-gradient(to right, var(--maincolor), var(--secondary));
    box-shadow: var(--shadow);

}

@keyframes textanimation {
    100% {
        background-position: 200% center;
    }
}


.datelive {
    font-size: 23px;
    font-weight: 500;
}

#live-result table {
    width: 100%;
}

#live-result table tr th {
    border: 1px solid var(--maincolor);
    background-color: var(--maincolor);
    color: var(--white);
}

#live-result table tr td {
    border: 1px solid var(--maincolor);
}

#live-result table tr td:first-child {
    border-left: 0px solid var(--maincolor);
}

#live-result table tr td:last-child {
    border-right: 0px solid var(--maincolor);
}

.refresh-btn {
    background: var(--black);
    color: var(--white);
    border: none;
    padding: 5px 10px;
    border-radius: var(--radius);
}

#bazi-time-table {
    border: 2px solid var(--black);
    margin: 5px 0px;
    overflow: hidden;
    box-shadow: var(--shadow);

}

#bazi-time-table h4 {
    background: linear-gradient(to right, var(--secondary), var(--black), var(--maincolor));
    padding: 10px 0px;
    color: var(--white);
    font-weight: 700;
}

#bazi-time-table tr td {
    border: 1px solid var(--black);
}

#bazi-time-table tr th {
    border: 1px solid var(--black);
    background: var(--maincolor);
    color: var(--white);
}

#bazi-time-table tr td:first-child {
    border-left: 0px solid var(--black);
    border-bottom: 0px solid var(--black);
}

#bazi-time-table tr td:last-child {
    border-right: 0px solid var(--black);
    border-bottom: 0px solid var(--black);
}

#bazi-time-table tr th:first-child {
    border-left: 0px solid var(--black);
}

#bazi-time-table tr th:last-child {
    border-right: 0px solid var(--black);

}

#free-tricks {
    border: 2px solid var(--black);
    background: var(--back-white);
    overflow: hidden;
    margin: 5px 0px;
}

#free-tricks h3 {
    color: var(--white);
    font-weight: 700;
    background: var(--secondary);
    padding: 10px 0px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    background: linear-gradient(to right, var(--maincolor), var(--black), var(--secondary));
}

#free-tricks .charts {
    padding: 0px 10px;
}

#free-tricks .charts a {
    font-size: 17px;
    display: flex;
    text-decoration: none;
    margin-bottom: 20px;
    padding: 5px 0px;
    border-radius: var(--radius);
    color: var(--white);
    justify-content: center;
    text-align: center;
    box-shadow: var(--shadow);
    background-image: linear-gradient(-225deg, var(--maincolor) 0, var(--black) 67%, var(--secondary) 100%);
    background-size: 200% auto;
    color: var(--white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textanimation 2s linear infinite;
    font-weight: 600;
    font-style: var(--style);
}

.keywords {
    background: var(--white) !important;
    border: 2px solid var(--maincolor) !important;
}

#content-ff {
    border: 2px solid var(--black);
    margin: 8px 0px;
    padding: 10px 10px;
    /* background: var(--secondary); */
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

#content-ff h6 {
    line-height: 30px;
    text-align: center;
    font-size: 16px;
}

#content-ff h2 {
    font-size: 28px;
}

#content-area {
    margin: 5px 0px;
    box-shadow: var(--shadow);
    background: var(--bodycolor);
    border: 2px solid var(--black);
}

#content-area .inner-content {
    height: 200px !important;
    overflow-y: scroll;
}

#content-area .inner-content p {
    font-size: 15px;
}

#content-area .inner-content::-webkit-scrollbar {
    display: none;
}

#content-area .inner-content:last-child {
    border-bottom: 0px solid var(--black);
}

#content-area .inner-content {
    border-bottom: 2px solid var(--black);
    padding: 10px 15px;
    text-align: center;
}

#content-area .inner-content .q {
    background: var(--back-white);
    color: var(--black);
    padding: 10px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--black);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}

#content-area .inner-content p {
    margin-bottom: 0px;
}

#prev-result {
    margin: 5px 0px;
    text-align: center;
}

#prev-result h6 {
    /* background: linear-gradient(to right, #fff176, #fff, #8bc34a); */
    background: linear-gradient(to right, var(--maincolor), var(--black), var(--secondary));
    font-size: 25px;
    padding: 10px 0px;
    text-align: center;
    border: 2px solid var(--black);
    box-shadow: var(--shadow);
    color: var(--white);
}

#prev-result table {
    width: 100%;
    margin: 10px 0px;
    border: 2px solid var(--maincolor);
    box-shadow: var(--shadow);
}

#prev-result table:nth-child(1) {
    margin: 0px 0px !important;
}

#prev-result .date {
    background: var(--secondary);
    color: var(--white);
    padding: 5px 0px;
    font-weight: 400;
}

#prev-result table tr th {
    border: 1px solid var(--maincolor);
    background-color: var(--maincolor);
    color: var(--white);
}

#prev-result table tr td {
    border: 1px solid var(--maincolor);
    border-bottom: 1px solid var(--maincolor);
    ;
}

#prev-result table tr td:first-child {
    border-left: 0px solid var(--maincolor);
}

#prev-result table tr td:last-child {
    border-right: 0px solid var(--maincolor);
}

.footer {
    background-color: var(--maincolor);
    color: black;
    padding: 20px 0;
    margin: 5px 0px;
    border: 2px solid var(--maincolor);
    box-shadow: var(--shadow);
}

.footer a {
    color: black;
    text-decoration: none;
}

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

.bottom-content h2,
h3,
h4,
h5,
h6 {
    font-size: 20px;
}

.bottom-content p {
    font-size: 17px;
}

.ad-area {
    height: auto;
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    overflow: hidden;
}

.ad-area p {
    font-size: 20px;
    font-style: var(--style);
    font-weight: 600;
    padding-left: 10px;
    padding-right: 10px;
}

.ad-area a {
    padding: 8px 20px;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 0px 3px var(--black)0;
    font-style: var(--style);
    text-decoration: none;
}

.ad-area .call {
    background: var(--maincolor);
}

.ad-area .wp {
    background: #399918;
}

.ad-area h2 {
    box-shadow: var(--shadow);
    padding: 10px 0px;
    font-size: 22px !important;
    /* animation: backgroundColorAnimation 3s infinite; */
    width: 100%;
    font-style: var(--style);
    margin-bottom: 10px;
    background-color: var(--back-white);
}

@keyframes backgroundColorAnimation {
    0% {
        background-color: #ff9999;
        /* Light red */
    }

    50% {
        background-color: #99ccff;
        /* Light blue */
    }

    100% {
        background-color: #ff9999;
        /* Light red */
    }
}

#dis {
    background-color: var(--black);
    color: var(--white);
    padding: 20px 10px;
    margin: 5px 0px;
    border: 2px solid var(--black);
    color: var(--white);
    box-shadow: var(--shadow);
}

#dis p {
    margin-bottom: 0px;
}

#vip h3 {
    font-size: 30px;
}

#vip .custom-btn {
    background: var(--maincolor) !important;
    color: var(--white);
    border: none;
}

#all-pana h3 {
    font-size: 20px;
}

#old-result {
    margin: 5px 0px;
    border: 2px solid var(--black);
    background: var(--back-white);
    overflow: hidden;
}

#old-result h4 {
    background: linear-gradient(to right, var(--maincolor), var(--black), var(--secondary));
    padding: 10px 0px;
    color: var(--white);
    font-weight: 700;
    box-shadow: var(--shadow);
}

#old-result .charts a {
    font-size: 17px;
    display: flex;
    margin: 10px 10px;
    padding: 10px 0px;
    text-align: center;
    justify-content: center;
    font-weight: 500;
    border-radius: var(--radius);
    text-decoration: none;
    align-items: center;
    box-shadow: var(--shadow);
    background-image: linear-gradient(-225deg, var(--maincolor) 0, var(--black) 67%, var(--secondary) 100%);
    background-size: 200% auto;
    color: var(--white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textanimation 2s linear infinite;
    font-weight: 600;
    font-style: var(--style);

}

#old-result .charts a span {
    color: red;
    font-size: 30px;
    margin: 0px 10px;
}

#breadcrumb {
    background: #615EFC;
    border: 2px solid var(--black);
    padding: 5px 10px;
    border-radius: var(--radius);
}

#breadcrumb a {
    color: #dddddd;
}

#breadcrumb span {
    color: var(--white);
}

#contact {
    border: 2px solid var(--black);
    background: var(--back-white);
    overflow: hidden;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    text-align: center;
    padding: 10px 0px;
}

#contact .contacthading {
    font-style: var(--style);
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

#contact .mailbox {
    /* background: linear-gradient(90deg, hsla(332, 53%, 82%, 1) 0%, hsla(176, 57%, 89%, 1) 100%); */
    background: var(--maincolor);
    box-shadow: var(--shadow);
    padding: 5px 20px;
    display: inline;
    border-radius: var(--radius);
    margin-bottom: 5px;
}

#contact .mailbox a {
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    font-style: var(--style);
    font-size: 15px;
}

#months {
    border: 2px solid var(--black);
    background: var(--back-white);
    overflow: hidden;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    text-align: center;
    padding: 10px 0px;
    margin: 10px 0px;
}

#months .month {
    font-size: 20px;
    font-weight: 600;
    font-style: var(--style);
    color: var(--black);
    text-decoration: none;
}

.whatsapp-channel {
    border: 2px solid var(--maincolor);
    background: var(--back-white);
    overflow: hidden;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    text-align: center;
    padding: 10px 0px;
}

.whatsapp-channel p {
    font-size: 20px;
    font-weight: 600;
    font-style: var(--style);
}

.whatsapp-channel .whatsapp-channel-btn {
    box-shadow: var(--shadow);
    padding: 10px 20px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    color: #2a8d08;
}

.wp-fixed {
    content: "";
    position: fixed;
    bottom: 25px;
    left: 20px;
}

.wp-fixed img {
    padding: 2px;
    border-radius: var(--radius);
    background-color: var(--white);
}

.wp-fixed-2 {
    content: "";
    position: fixed;
    bottom: 100px;
    left: 20px;
}

#ghosh-babu-tips {
    border: 2px solid var(--black);
    background: var(--back-white);
    overflow: hidden;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    text-align: center;
    /* padding:10px 0px; */
    margin: 5px 0px;
}

#ghosh-babu-tips .ghosh-babu-heading {
    /* background-image: linear-gradient(180.5deg, rgba(46, 255, 171, 1) 12.3%, rgba(252, 251, 222, 0.46) 92%); */
    background: var(--secondary);
    padding: 10px 0px;
    font-size: 20px;
    font-weight: 500;
    color: var(--white);
}

#ghosh-babu-tips tr td {
    border: 1px solid var(--black);
}

#ghosh-babu-tips tr th {
    border: 1px solid var(--black);
    background: var(--maincolor);
    color: var(--white);
}

#ghosh-babu-tips tr td:first-child {
    border-left: 0px solid var(--black);
    border-bottom: 0px solid var(--black);
}

#ghosh-babu-tips tr td:nth-child(2) {
    border-bottom: 0px solid var(--black);
}

#ghosh-babu-tips tr td:last-child {
    border-right: 0px solid var(--black);
    border-bottom: 0px solid var(--black);
}

#ghosh-babu-tips tr th:first-child {
    border-left: 1px solid var(--black);
}

#ghosh-babu-tips tr th:last-child {
    border-right: 0px solid var(--black);
}

#lucky-number {
    margin: 8px 0px;
    text-align: center;
    padding: 5px 0px;
    background: var(--back-white);
    border-radius: var(--radius);
    border: 2px solid var(--maincolor);
}

#lucky-number a {
    font-size: 20px;
    color: var(--secondary);
    text-transform: uppercase;
    font-weight: 500;
    text-shadow: 0 0 5px var(--maincolor), 0 0 10px var(--maincolor), 0 0 20px var(--maincolor), 0 0 40px var(--maincolor);
    animation: flicker 2s infinite alternate;
    text-decoration: none;
    display: inline-block;
    display: block;

}

@keyframes flicker {
    0% {
        text-shadow: 0 0 5px var(--maincolor), 0 0 10px var(--maincolor);
    }

    50% {
        text-shadow: 0 0 15px var(--maincolor), 0 0 30px var(--maincolor);
    }

    100% {
        text-shadow: 0 0 10px var(--maincolor), 0 0 20px var(--maincolor);
    }
}

#lucky-wheel {
    border: 2px solid #006BFF;
    background: var(--back-white);
    overflow: hidden;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    text-align: center;
    margin: 5px 0px;
}

.wheel-container {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: var(--radius);
    border: 5px solid #333;
    margin: 50px auto;
    overflow: hidden;
}

.wheel {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    background: conic-gradient(#ff5733 0deg 36deg,
            #33ff57 36deg 72deg,
            #5733ff 72deg 108deg,
            #ffff33 108deg 144deg,
            #33ffff 144deg 180deg,
            #ff33a1 180deg 216deg,
            #ff8c33 216deg 252deg,
            #a833ff 252deg 288deg,
            #33ffa1 288deg 324deg,
            #ff3333 324deg 360deg);
    transition: transform 5s ease-out;
}

.number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    font-size: 20px;
    font-weight: bold;
    color: white;
    transform: translate(-50%, -50%);
}

.number:nth-child(1) {
    transform: translate(-50%, -50%) rotate(19deg) translateY(-120px) rotate(0deg);
}

.number:nth-child(2) {
    transform: translate(-50%, -50%) rotate(52deg) translateY(-120px) rotate(-36deg);
}

.number:nth-child(3) {
    transform: translate(-50%, -50%) rotate(90deg) translateY(-120px) rotate(-72deg);
}

.number:nth-child(4) {
    transform: translate(-50%, -50%) rotate(125deg) translateY(-120px) rotate(-108deg);
}

.number:nth-child(5) {
    transform: translate(-50%, -50%) rotate(160deg) translateY(-120px) rotate(-144deg);
}

.number:nth-child(6) {
    transform: translate(-50%, -50%) rotate(197deg) translateY(-120px) rotate(-180deg);
}

.number:nth-child(7) {
    transform: translate(-50%, -50%) rotate(234deg) translateY(-120px) rotate(-216deg);
}

.number:nth-child(8) {
    transform: translate(-50%, -50%) rotate(270deg) translateY(-120px) rotate(-252deg);
}

.number:nth-child(9) {
    transform: translate(-50%, -50%) rotate(306deg) translateY(-120px) rotate(-288deg);
}

.number:nth-child(10) {
    transform: translate(-50%, -50%) rotate(344deg) translateY(-120px) rotate(-324deg);
}

.arrow {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.current-number {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: bold;
    color: red;
}

.spin-btn {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 14px;
    box-shadow: var(--shadow);
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
}

.result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 33px;
    font-weight: bold;
    color: black;
    background-color: white;
    border-radius: var(--radius);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 20;
    display: none;
    width: 50px;
    height: 50px;
    border-radius: var(--radius);
    text-align: center;
}

#links-download {
    border: 2px solid var(--black);
    overflow: hidden;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    text-align: center;
    padding: 10px 0px;
    margin: 5px 0px;
    /* background: linear-gradient(90deg, hsla(280, 84%, 41%, 1) 0%, hsla(218, 97%, 56%, 1) 100%); */
    background: linear-gradient(90deg, var(--black) 0%, var(--secondary) 100%);
    color: var(--white);

}

#links-download p {
    font-size: 20px;
    font-weight: 600;
    font-style: var(--style);
}

#seotips {
    margin: 5px 0px;
    box-shadow: var(--shadow);
    background: var(--back-white);
    border: 2px solid var(--maincolor);
    padding: 10px 0px;
}

#seotips p {
    font-weight: bold;
    font-style: var(--style);
    text-align: center;
    margin-bottom: 0px;
    padding-bottom: 10px;
}

.mailseoTips a {
    box-shadow: var(--shadow);
    padding: 10px 20px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    color: var(--secondary);
    background-color: var(--white);
    font-weight: bold;
    font-style: var(--style);
}

.whats-app-top,
.call-top {
    box-shadow: var(--shadow);
    padding: 10px 20px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    color: var(--secondary) !important;
    background-color: #FEF9F2;
    font-weight: bold;
    font-style: var(--style);
}

@media (max-width:467px) {

    #content-ff h2 {
        font-size: 20px !important;
    }

    #content-ff h6 {
        font-size: 14px;
    }

    .ad-area p {
        font-size: 17px;
        font-weight: 500;
    }

    #prev-result h6 {
        font-size: 20px;
    }

    #prev-result table {
        font-size: 13px;
    }

    #prev-result .date {
        background: var(--secondary);
    }

    header a h1 {
        font-size: 25px;
    }

    header h2 {
        font-size: 18px;
    }

    #patti-tips a {
        font-size: 17px;
    }

    .whatsapp-channel p {
        font-size: 18px;
        padding: 5px;
    }
}

.table> :not(caption)>*>* {
    background-color: var(--back-white);
    color: var(--black);
}

.full-chart {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 50px 20px;
}

/* .entry-content {
    text-align: center;
} */

.full-chart .entry-content {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.full-chart a {
    text-decoration: none;
    background-color: var(--black);
    color: var(--white);
    transform: translateY(0px);
    transition: all 0.3s ease-in-out;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

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