:root {
    --background: 20 10% 7%;
    --foreground: 40 25% 90%;
    --card: 20 10% 10%;
    --card-foreground: 40 25% 90%;
    --popover: 20 10% 10%;
    --popover-foreground: 40 25% 90%;
    --primary: 30 85% 52%;
    --primary-foreground: 0 0% 100%;
    --secondary: 350 65% 42%;
    --secondary-foreground: 0 0% 100%;
    --muted: 20 8% 15%;
    --muted-foreground: 40 15% 60%;
    --accent: 42 92% 56%;
    --accent-foreground: 20 10% 7%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 20 8% 18%;
    --input: 20 8% 18%;
    --ring: 30 85% 52%;
    --radius: .5rem;

    --sidebar-background: 20 10% 9%;
    --sidebar-foreground: 40 25% 90%;
    --sidebar-primary: 30 85% 52%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 20 8% 15%;
    --sidebar-accent-foreground: 40 25% 90%;
    --sidebar-border: 20 8% 18%;
    --sidebar-ring: 30 85% 52%;

    --gold: 42 92% 56%;
    --gold-foreground: 20 10% 7%;

    --saffron: 30 85% 52%;
    --crimson: 350 65% 42%;
    --deep: 20 10% 5%;
    --warm-white: 40 25% 92%;

    --gradient-hero:
        linear-gradient(135deg,
            hsl(350 65% 42% / .9),
            hsl(30 85% 52% / .85));

    --gradient-gold:
        linear-gradient(135deg,
            hsl(42 92% 56%),
            hsl(30 85% 52%));

    --gradient-dark:
        linear-gradient(180deg,
            hsl(20 10% 7%),
            hsl(20 10% 5%));

    --shadow-glow:
        0 0 40px hsl(30 85% 52% / .2);

    --shadow-card:
        0 8px 32px hsl(0 0% 0% / .3);
}


/* =========================================================
   MAGIC CARD
========================================================= */

.magic-card {

    opacity: 0;

    transform:
        translateY(100px) scale(.8);

    transition:
        transform .8s cubic-bezier(.34,
            1.56,
            .64,
            1),
        box-shadow .5s ease,
        opacity .5s ease;

    will-change:
        transform,
        opacity;

}


/* =========================================================
   MAGIC CARD VISIBLE
========================================================= */

.magic-card.is-visible {

    opacity: 1;

    transform:
        translateY(0) scale(1);

}


/* =========================================================
   MAGIC CARD HOVER
========================================================= */

.magic-card.is-visible:hover {

    transform:
        translateY(-5px) !important;

    z-index: 99;

    border-color:
        hsl(30 85% 52% / 30%);

    transition:
        transform .5s ease,
        box-shadow .3s ease !important;

}


/* =========================================================
   HEADING AREA
========================================================= */

.heading-area {

    opacity: 0;

    transform:
        translateY(80px);

    transition:
        transform .8s cubic-bezier(.34,
            1.56,
            .64,
            1),
        box-shadow .5s ease,
        opacity .5s ease;

    will-change:
        transform,
        opacity;

}


.heading-area.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   MAGIC CARD DELAYS
========================================================= */

.magic-card.delay-1 {
    transition-delay: .1s;
}

.magic-card.delay-2 {
    transition-delay: .2s;
}

.magic-card.delay-3 {
    transition-delay: .3s;
}

.magic-card.delay-4 {
    transition-delay: .4s;
}

.magic-card.delay-5 {
    transition-delay: .6s;
}

.magic-card.delay-6 {
    transition-delay: .8s;
}


/* =========================================================
   COUNTER CARD
========================================================= */

.counter-card:hover {

    box-shadow:
        0 7.02511px 21.07534px -7.02511px hsl(30 85% 52% / .3);

    border-color:
        hsl(30 85% 52% / 30%);

}


/* =========================================================
   GOLD TEXT
========================================================= */

.text-gradient-gold {

    background:
        linear-gradient(135deg,
            #f6b828,
            #ed851d);

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;

}


.text-gradient-gold span {

    background:
        #fff;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;

}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.background-image {

    background-color:
        hsl(20 10% 5%);

    background-image:

        radial-gradient(circle at 20% 30%,
            hsl(30 85% 52% / 17%),
            transparent 45%),

        radial-gradient(circle at 80% 20%,
            hsl(42 92% 56% / 18%),
            transparent 50%),

        radial-gradient(circle at 65% 85%,
            hsl(350 65% 42% / 12%),
            transparent 55%);

}


p a {

    color:
        hsl(42 92% 56%);

}


/* =========================================================
   CUSTOM FADE IN LEFT
========================================================= */

@keyframes customFadeInLeft {

    from {

        opacity: 0;

        transform:
            translate3d(-60px,
                0,
                0);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0,
                0,
                0);

    }

}


.anifadeInLeft {

    opacity: 0;

    visibility: visible;

    will-change:
        transform,
        opacity;

}


.anifadeInLeft.is-visible {

    animation:
        customFadeInLeft .8s ease-out forwards;

}


/* =========================================================
   CUSTOM ZOOM IN
========================================================= */

@keyframes customZoomIn {

    from {

        opacity: 0;

        transform:
            scale3d(.85,
                .85,
                .85);

    }

    to {

        opacity: 1;

        transform:
            scale3d(1,
                1,
                1);

    }

}


.anizoomIn {

    opacity: 0;

    visibility: visible;

    will-change:
        transform,
        opacity;

}


.anizoomIn.is-visible {

    animation:
        customZoomIn .8s ease-out forwards;

}


/* =========================================================
   CUSTOM FADE IN UP
========================================================= */

@keyframes customFadeInUp {

    from {

        opacity: 0;

        transform:
            translate3d(0,
                40px,
                0);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0,
                0,
                0);

    }

}


.anifadeInUp {

    opacity: 0;

    visibility: visible;

    will-change:
        transform,
        opacity;

}


.anifadeInUp.is-visible {

    animation:
        customFadeInUp .8s ease-out forwards;

}


/* =========================================================
   WHY CHOOSE ICON
========================================================= */

.why-icon {

    transition:
        transform .3s ease;

    transform:
        rotate(-4.71084deg);

}


@keyframes whyChooseIcon {

    0% {

        transform:
            scale(1);

    }

    20% {

        transform:
            scale(1.08) rotate(-4deg);

    }

    40% {

        transform:
            scale(1.12) rotate(4deg);

    }

    60% {

        transform:
            scale(1.12) rotate(-3deg);

    }

    80% {

        transform:
            scale(1.1) rotate(2deg);

    }

    100% {

        transform:
            scale(1.08) rotate(0);

    }

}


.why-icon:hover {

    animation:
        whyChooseIcon .5s ease-in-out;

}


/* =========================================================
   WIDTH
========================================================= */

.width-672 {

    max-width:
        672px !important;

    width:
        100% !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

}


/* =========================================================
   RELIGION CARD
========================================================= */

.religion-card:hover {

    transform:
        scale(1.1) translateY(-5px) !important;

}


/* =========================================================
   ELEMENTOR EDITOR FIX
   IMPORTANT
   Do NOT target Elementor's native animation classes.
========================================================= */

body.elementor-editor-active .anifadeInLeft,
body.elementor-editor-preview .anifadeInLeft,
body.elementor-editor-active .anizoomIn,
body.elementor-editor-preview .anizoomIn,
body.elementor-editor-active .anifadeInUp,
body.elementor-editor-preview .anifadeInUp,
body.elementor-editor-active .magic-card,
body.elementor-editor-preview .magic-card,
body.elementor-editor-active .heading-area,
body.elementor-editor-preview .heading-area {

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;

    animation:
        none !important;

    transition:
        none !important;

}


/* =========================================================
   ELEMENTOR EDITOR INNER ELEMENT FIX
========================================================= */

.elementor-editor-active .anifadeInLeft,
.elementor-editor-preview .anifadeInLeft,
.elementor-editor-active .anizoomIn,
.elementor-editor-preview .anizoomIn,
.elementor-editor-active .anifadeInUp,
.elementor-editor-preview .anifadeInUp {

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;

    animation:
        none !important;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .magic-card,
    .heading-area,
    .anifadeInLeft,
    .anizoomIn,
    .anifadeInUp {

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            none !important;

        animation:
            none !important;

        transition:
            none !important;

    }

}

.e-n-accordion-item p a:hover {
    color: #fff !important;
}

p strong,
p b {
    color: hsl(40 25% 90%) !important;
}

.single-astrologer_service .featured-image {
    width: 100%;
    height: 320px !important;
    object-fit: cover;
    display: block;
    border-radius: 8px !important;
}

@media screen and (max-width: 991px) {
    .single-astrologer_service .featured-image {
        height: 250px !important;
    }
}

.sahadev-service-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'Lora', serif;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.sahadev-service-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #dbdbdb;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sahadev-service-breadcrumb a:hover {
    color: #e1a925;
}

.sahadev-service-breadcrumb-arrow {
    display: inline-flex;
    align-items: center;
    color: #dbdbdb;
}

.sahadev-service-breadcrumb-current {
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 350px;
}

.sahadev-service-breadcrumb svg {
    display: block;
    flex-shrink: 0;
}

.page-feature-image .featured-image {
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

/* Mobile */

@media (max-width: 767px) {

    .sahadev-service-breadcrumb {
        gap: 6px;
        font-size: 11px;
    }

    .sahadev-service-breadcrumb-current {
        max-width: 200px;
    }

    .page-feature-image .featured-image {
        height: 320px;
    }

}

.page header~.featured-image {
    display: none;
}

.sahadev-popular-searches-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
}

.sahadev-popular-searches-grid .menu-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sahadev-popular-searches-grid .menu-item a {
	display: flex;
	align-items: center;
	gap: 12px;

	width: 100%;
	min-height: 40px;
	padding: 9px 13px;

	box-sizing: border-box;

	background: #1b1817;
	border: 1px solid #302d2b;
	border-radius: 5px;

	color: #f4eee7;
	font-family: "Lora", serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;

	text-decoration: none;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.sahadev-popular-searches-grid .menu-item a::before {
	content: "";

	display: block;
	flex: 0 0 16px;

	width: 16px;
	height: 16px;

	background-image: url("https://versatiletechbrains.com/astrologersahadev/wp-content/uploads/2026/08/check-circle.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.sahadev-popular-searches-grid .menu-item a:hover {
	background: #211e1c;
	border-color: #f39a00;
	color: #ffffff;
	transform: translateY(-1px);
}

@media (max-width: 767px) {

	.sahadev-popular-searches-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.sahadev-popular-searches-grid .menu-item a {
		min-height: 42px;
	}
}

.site-content {
    display: inherit;
}