/*navbar css start */

/*=====================================================
      PREMIUM ASTROLOGY NAVBAR - PART 1
======================================================*/
:root{
    --gold:#D4AF37;
    --gold-dark:#B8860B;
    --purple:#6D28D9;
    --purple-dark:#4C1D95;
    --white:#ffffff;
    --text:#1F1B2E;
    --border:#EFE6D0;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Poppins,sans-serif;
overflow-x:hidden;
}


/*==============================
HEADER
==============================*/

.astro-header{

position:relative;

top:0;
left:0;

width:100%;


z-index:99999;

padding-bottom :3px;
padding-top:3px;

transition:.45s;

background:#fff;

border-bottom:1px solid #eee;

backdrop-filter:none;

box-shadow:0 8px 30px rgba(0,0,0,.05);

}



/*==============================
CONTAINER
==============================*/

.astro-nav-container{

max-width:1350px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 35px;

}


/*==============================
LOGO
==============================*/

.astro-logo{

display:flex;

align-items:center;

text-decoration:none;

}

.astro-logo img{

width:210px;

transition:.45s;

animation:logoFloat 4s ease-in-out infinite;

}

@keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

100%{

transform:translateY(0);

}

}

.astro-logo:hover img{

transform:scale(1.05);

filter:

drop-shadow(0 0 12px rgba(255,211,105,.7))

drop-shadow(0 0 20px rgba(124,58,237,.45));

}


/*==============================
MENU
==============================*/

.astro-menu{

display:flex;

align-items:center;

}

.astro-menu ul{

display:flex;

align-items:center;

gap:35px;

list-style:none;

}

.astro-menu ul li{

position:relative;

}


/*==============================
MENU LINKS
==============================*/

.astro-menu ul li>a{

position:relative;

display:flex;

align-items:center;

gap:8px;

text-decoration:none;

font-size:17px;

font-weight:600;

letter-spacing:.4px;

color:black;

transition:.35s;

padding:12px 0;

}

.astro-menu ul li>a::after{

content:"";

position:absolute;

left:0;

bottom:-3px;

width:0;

height:2px;

/*background:*/

/*linear-gradient(*/

/*90deg,*/

/*var(--gold),*/

/*var(--purple)*/

/*);*/

transition:.35s;

border-radius:20px;

}

.astro-menu ul li>a:hover{

color:var(--gold);

}

.astro-menu ul li>a:hover::after{

width:100%;

}

.astro-menu ul li>a.active{

color:black;

font-weight:700;

}

.astro-menu ul li>a.active::after{
    
width:100%;
height:3px;

}


/*==============================
CALL BUTTON
==============================*/

.astro-right{

display:flex;

align-items:center;

gap:25px;

}

.astro-call{

display:flex;

align-items:center;

gap:10px;

padding:13px 22px;

border-radius:50px;

text-decoration:none;

font-size:14px;

font-weight:700;

color:black;

/*background:*/

/*linear-gradient(*/

/*135deg,*/

/*var(--purple),*/

/*#4f1fc8*/

/*);*/
background:

linear-gradient(

135deg,

var(--gold),

#e7b328

);

transition:.4s;

box-shadow:

0 10px 25px rgba(124,58,237,.30);

}

.astro-call i{

color:white;

}

.astro-call:hover{

transform:translateY(-4px);

/*background:*/

/*linear-gradient(*/

/*135deg,*/

/*var(--gold),*/

/*#e7b328*/

/*);*/
background:

linear-gradient(

135deg,

var(--purple),

#4f1fc8

);

color:red;

box-shadow:

0 15px 35px rgba(255,211,105,.35);

}

.astro-call:hover i{

color:goldenrod;

}


/*==============================
HAMBURGER
==============================*/

.astro-toggle{

display:none;

width:45px;

height:45px;

border-radius:50%;

cursor:pointer;

align-items:center;

justify-content:center;

flex-direction:column;

gap:6px;

background:#fff;

border:1px solid #ddd;


transition:.35s;

}

.astro-toggle span{

width:24px;

height:3px;

background:black;

transition:.35s;

border-radius:10px;

}

.astro-toggle:hover{

border-color:var(--gold);

background:#FAF7EF;

box-shadow:

0 0 20px rgba(124,58,237,.35);

}

.astro-toggle:hover span{

background:var(--gold);

}


/*==============================
CLOSE BUTTON
==============================*/

.astro-close{

display:none;

position:absolute;

top:25px;

right:25px;

font-size:25px;

cursor:pointer;

color:#ff0f0f;

transition:.35s;

}

.astro-close:hover{

transform:rotate(180deg);

color:var(--gold-dark);

}


/*=====================================================
        PREMIUM NAVBAR CSS - PART 2
======================================================*/


/*==============================
PREMIUM DROPDOWN
==============================*/

.astro-dropdown{
position:relative;
}

.astro-dropdown>a i{
font-size:12px;
transition:.35s;
}

.astro-dropdown:hover>a i{
transform:rotate(180deg);
color:var(--gold);
}


/* Dropdown Panel */

.astro-dropdown-menu{

position:absolute;

top:120%;

left:0;

width:320px;


backdrop-filter:blur(20px);

background:#FAF7EF;

border:1px solid #ECE3CC;

border-radius:18px;

padding:15px 0;

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.45s ease;

box-shadow:

0 20px 60px rgba(0,0,0,.45),

0 0 40px rgba(124,58,237,.18);

overflow:hidden;

z-index:999;

}


/* Decorative Glow */

.astro-dropdown-menu::before{

content:"";

position:absolute;

top:-80px;

left:-80px;

width:180px;

height:180px;

background:rgba(124,58,237,.18);

filter:blur(80px);

pointer-events:none;

}

.astro-dropdown-menu::after{

content:"";

position:absolute;

bottom:-60px;

right:-60px;

width:150px;

height:150px;

background:rgba(255,211,105,.10);

filter:blur(60px);

pointer-events:none;

}


/* Show */

.astro-dropdown:hover .astro-dropdown-menu{

opacity:1;

visibility:visible;

transform:translateY(0);

}


/* Links */

.astro-dropdown-menu a{

display:flex;

align-items:center;

gap:12px;

padding:14px 24px;

font-size:14px;

font-weight:500;

color:#333;

text-decoration:none;

transition:.35s;

position:relative;

overflow:hidden;

}


.astro-dropdown-menu a:hover{

color:white;

background:#7c3aed;

border-bottom: 2px solid black;

padding-left:34px;

border-radius:30px;

}

/* Gold Dot */

.astro-dropdown-menu a::before{

 content: "☀";

color:var(--gold);

font-size:17px;

opacity:0;

transform:translateX(-10px);

transition:.35s;

}


/* Hover Background */

.astro-dropdown-menu a::after{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:100%;

background:

linear-gradient(

90deg,

rgba(124,58,237,.25),

rgba(255,211,105,.12)

);

transition:.4s;

z-index:-1;

}


/* Hover */

.astro-dropdown-menu a:hover{

padding-left:34px;

color:var(--gold);

}

.astro-dropdown-menu a:hover::before{

opacity:1;

transform:translateX(0);

}

.astro-dropdown-menu a:hover::after{

width:100%;

}



/*==============================
MENU HOVER GLOW
==============================*/

.astro-menu ul li{

transition:.35s;

}

.astro-menu ul li:hover{

transform:translateY(-2px);

}



/*==============================
ACTIVE LINK GLOW
==============================*/

.astro-menu ul li>a.active{

text-shadow:

0 0 12px rgba(255,211,105,.5);

}



/*==============================
NAVBAR SHIMMER
==============================*/

.astro-header::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:35%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.08),

transparent

);

transform:skewX(-20deg);

animation:navShine 9s linear infinite;

}

@keyframes navShine{

100%{

left:160%;

}

}



/*==============================
PURPLE GLOW
==============================*/

.astro-header::after{

content:"";

position:absolute;

left:50%;

top:-100px;

transform:translateX(-50%);

width:450px;

height:180px;

/*background:rgba(124,58,237,.18);*/

filter:blur(100px);

pointer-events:none;

}



/*==============================
MENU FADE ANIMATION
==============================*/

.astro-menu ul li{

animation:fadeMenu .8s ease both;

}

.astro-menu ul li:nth-child(2){

animation-delay:.1s;

}

.astro-menu ul li:nth-child(3){

animation-delay:.2s;

}

.astro-menu ul li:nth-child(4){

animation-delay:.3s;

}

.astro-menu ul li:nth-child(5){

animation-delay:.4s;

}

@keyframes fadeMenu{

from{

opacity:0;

transform:translateY(-15px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*==============================
CALL BUTTON PULSE
==============================*/

.astro-call{

position:relative;

overflow:hidden;

}

.astro-call::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:rgba(255,255,255,.18);

border-radius:50%;

left:-220px;

top:-80px;

transition:.7s;

}

.astro-call:hover::before{

left:120%;

}



/*==============================
LOGO GLOW
==============================*/

.astro-logo{

position:relative;

}

.astro-logo::after{

content:"";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:180px;

height:80px;

background:rgba(255,211,105,.08);

filter:blur(50px);

pointer-events:none;

animation:logoGlow 4s ease infinite;

}

@keyframes logoGlow{

0%{

opacity:.2;

transform:translate(-50%,-50%) scale(1);

}

50%{

opacity:.7;

transform:translate(-50%,-50%) scale(1.2);

}

100%{

opacity:.2;

transform:translate(-50%,-50%) scale(1);

}

}



/*=====================================================
        PREMIUM NAVBAR CSS - PART 3
======================================================*/


/*==============================
MOBILE RESPONSIVE
==============================*/

@media (max-width:991px){

.astro-call{
display:none;
}

.astro-toggle{
display:flex;
z-index:10001;
}

.astro-menu{
    border-radius:20px;

  position: fixed;
    top:0;
    right:-100%;
    width:100%;
    max-width:320px;
    height:80vh;
    overflow-y:auto;
    overflow-x:hidden;
background:#fff;

backdrop-filter:blur(60px);

padding:100px 35px 40px;

display:flex;

flex-direction:column;

justify-content:flex-start;

align-items:flex-start;

transition:.45s ease;

overflow-y:auto;

box-shadow:
-20px 0 60px rgba(0,0,0,.5);

border-left:4px solid darkgold;

}

.astro-menu.active{

right:0;

}


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

.astro-menu ul{

width:100%;

display:flex;

flex-direction:column;

gap:0;

}

.astro-menu ul li{

width:100%;

border-bottom:1px solid #f2f2f2;

}

.astro-menu ul li a{

color:#222;

font-weight:600;

width:100%;

padding:18px 0;

font-size:17px;

/*justify-content:space-between;*/

}

.astro-menu ul li a:hover{

color:var(--gold-dark);

}
.astro-close{

display:block;

}

}


/*==============================
MOBILE DROPDOWN
==============================*/

@media (max-width:991px){

.astro-dropdown-menu{

position:static;

width:100%;

margin-top:10px;

opacity:1;

visibility:visible;

display:none;

transform:none;

padding:8px 0;

border-radius:12px;

background:rgba(255,255,255,.03);

box-shadow:none;

border:1px solid rgba(255,211,105,.08);

}

.astro-dropdown.open .astro-dropdown-menu{

display:block;

animation:mobileDrop .35s ease;

}

@keyframes mobileDrop{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.astro-dropdown-menu a{

padding:13px 15px;

font-size:14px;

}

}


/*==============================
MOBILE CTA BUTTONS
==============================*/

.astro-mobile-buttons{

display:none;

margin-top:35px;

width:100%;

}

@media (max-width:991px){

.astro-mobile-buttons{

display:flex;

flex-direction:column;

gap:15px;

}

.call-btn{

width:100%;

padding:15px;

border-radius:50px;

text-align:center;

text-decoration:none;

font-size:15px;

font-weight:600;

transition:.35s;

display:flex;

justify-content:center;

align-items:center;

gap:10px;

}

.call-btn{

background:
linear-gradient(135deg,#7C3AED,#5B2BD8);

color:#fff;

}

.call-btn:hover{

transform:translateY(-4px);

box-shadow:
0 10px 30px rgba(124,58,237,.35);

}


}


/*==============================
OVERLAY
==============================*/

.astro-overlay{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

background:rgba(0,0,0,.65);

backdrop-filter:blur(5px);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9998;

}

.astro-overlay.active{

opacity:1;

visibility:visible;

}




/* Hide hamburger when menu is open */

.astro-menu.active + .astro-right .astro-toggle{
    display:none;
}

/*==============================
HAMBURGER ANIMATION


.astro-toggle.active span:nth-child(1){

transform:
translateY(8px)
rotate(45deg);

}

.astro-toggle.active span:nth-child(2){

opacity:0;

}

.astro-toggle.active span:nth-child(3){

transform:
translateY(-8px)
rotate(-45deg);

}
==============================*/

/*==============================
SCROLLBAR
==============================*/

.astro-menu::-webkit-scrollbar{

width:6px;

}

.astro-menu::-webkit-scrollbar-thumb{

background:#FFD369;

border-radius:30px;

}


/*==============================
SMALL MOBILE
==============================*/

@media(max-width:576px){

.astro-nav-container{

padding:0 18px;

}

.astro-logo img{

width:150px;

}

.astro-menu{

width:70%;

max-width:100%;

padding:90px 30px 30px;

border-top: 4px solid purple;
border-bottom: 4px solid purple;

}

.astro-menu ul li a{

font-size:18px;

padding:16px 0;

font-weight:bolder;

}

.call-btn{

padding:14px;

font-size:14px;

}

}


/*==============================
FLOATING PARTICLES
==============================*/

.astro-header .particle{

position:absolute;

width:4px;

height:4px;

background:#FFD369;

border-radius:50%;

opacity:.3;

animation:particleMove 12s linear infinite;

}

@keyframes particleMove{

0%{

transform:translateY(0);

opacity:0;

}

20%{

opacity:.6;

}

100%{

transform:translateY(80px);

opacity:0;

}

}


/*==============================
SMOOTH TRANSITIONS
==============================*/

.astro-menu,
.astro-menu a,
.astro-dropdown-menu,
.astro-toggle,
.astro-call{

transition:all .35s ease;

}

/*-------------------------------------------------*/

 body {
            font-family: Arial, sans-serif;
            background: #120a24;
            color: #fff
        }

        section {
            padding: 40px 0
        }

        .hero {
            position: relative;
            background: linear-gradient(135deg, #22123e, #120a24);
            border-radius: 28px;
            padding: 30px;
            overflow: hidden
        }

        .hero:before,
        .cta:before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 3px;
            border-radius: 28px;
            background: linear-gradient(90deg, transparent, #f4c542, #fff7bf, #f4c542, transparent);
            background-size: 300%;
            animation: border 3s linear infinite;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude
        }

        @keyframes border {
            to {
                background-position: 300% 0
            }
        }

        .glow {
            position: absolute;
            width: 300px;
            height: 300px;
            background: #f4c54233;
            filter: blur(90px);
            right: -50px;
            top: -50px;
            border-radius: 50%
        }

        .badge-gold {
            display: inline-block;
            background: #f4c54222;
            border: 1px solid #f4c542;
            color: #f4c542;
            padding: 10px 18px;
            border-radius: 30px
        }

        .btn-gold {
            background: #f4c542;
            color: #111;
            border-radius: 40px;
            padding: 14px 30px;
            font-weight: bold
        }

        .glass {
            background: #24143f;
            border: 1px solid rgba(244, 197, 66, .25);
            border-radius: 20px;
            padding: 30px
        }

        .feature {
            transition: .3s;
            height: 100%
        }

        .feature:hover {
            transform: translateY(-8px);
            border-color: #f4c542;
            box-shadow: 0 20px 35px rgba(244, 197, 66, .15)
        }

        .timeline {
            border-left: 2px solid #f4c542;
            padding-left: 25px;
            margin-left: 10px
        }

        .timeline .item {
            position: relative;
            padding-bottom: 30px
        }

        .timeline .item:before {
            content: "";
            position: absolute;
            left: -33px;
            top: 6px;
            width: 14px;
            height: 14px;
            background: #f4c542;
            border-radius: 50%
        }

        .cta {
            position: relative;
            background: linear-gradient(135deg, #2d1751, #120a24);
            padding: 20px;
            border-radius: 28px;
            overflow: hidden
        }

        ul.service-list li {
            margin-bottom: 14px
        }


        /* --------------- */
        /*=========================
PROCESS PREMIUM
=========================*/

.timeline-modern{

position:relative;

padding-left:40px;

}

.timeline-line{

position:absolute;

left:20px;

top:0;

bottom:0;

width:3px;

background:linear-gradient(
180deg,
transparent,
#FFD54F,
#fff,
#FFD54F,
transparent);

background-size:100% 300%;

animation:lineMove 4s linear infinite;

}

.timeline-card{

display:flex;

gap:20px;

margin-bottom:10px;

padding:22px;

background:#24143f;

border-radius:20px;

border:1px solid rgba(255,215,0,.18);

transition:.4s;

animation:floatCard 4s ease-in-out infinite;

position:relative;

}

.timeline-card:nth-child(3){

animation-delay:.8s;

}

.timeline-card:nth-child(4){

animation-delay:1.6s;

}

.timeline-card:nth-child(5){

animation-delay:2.4s;

}

.timeline-card:hover{

transform:translateX(12px);

border-color:#FFD54F;

box-shadow:0 20px 40px rgba(255,215,0,.18);

}

.timeline-icon{

width:60px;

height:60px;

background:#FFD54F;

color:#111;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

flex-shrink:0;

box-shadow:0 0 20px rgba(255,215,0,.35);

}

.timeline-card h5{

color:#fff;

margin-bottom:8px;

}

.timeline-card p{

color:#d6d1e5;

margin:0;

}

.why-card{

height:100%;

position:relative;

overflow:hidden;

}

.why-card::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:#FFD54F22;

border-radius:50%;

right:-100px;

top:-100px;

filter:blur(60px);

}

.why-card li{

margin-bottom:18px;

font-size:17px;

}

@keyframes lineMove{

0%{

background-position:0 0;

}

100%{

background-position:0 300%;

}

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

@media(max-width:991px){

.timeline-modern{

padding-left:0;

}

.timeline-line{

display:none;

}

.timeline-card{

margin-bottom:20px;

}

.why-card{

margin-top:30px;

}

}

/*------------- footer css---------- */

.mystic-footer{
    background:#06030d;
    position:relative;
    overflow:hidden;
    padding-top:40px;
    color:#fff;
    font-family:Poppins,sans-serif;
}

/* Animated Gold Stars */

.footer-stars{
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(#ffd369 1px,transparent 1px);
    background-size:45px 45px;
    opacity:.15;
    animation:moveStars 30s linear infinite;
    pointer-events:none;
}

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

    to{
        transform:translateY(80px);
    }
}


/* ==============================
   FOOTER GRID - 4 COLUMNS
================================ */

.mystic-container{
    max-width:1500px;
    margin:auto;
    padding:0 30px;
    display:grid;
    grid-template-columns:1.4fr .95fr 1fr .95fr;
    gap:8px;
    position:relative;
    z-index:2;
    align-items:stretch;
}


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

.footer-box{
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(12px);
    border:2px solid #8f171b;
    border-radius:28px;
    padding:20px;
    transition:.45s;
    position:relative;
    overflow:hidden;
    box-shadow: 0 15px 35px rgba(124, 58, 237, .25), 0 0 20px rgb(255 255 255 / 38%);
}

.footer-box::before{
    content:"";
    position:absolute;
    left:-100%;
    top:0;
    width:100%;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        #FFD369,
        transparent
    );
    transition:.8s;
}

.footer-box:hover::before{
    left:100%;
}

.footer-box:hover{
    transform:translateY(-20px);
    box-shadow:
        0 15px 35px rgba(124,58,237,.35),
        0 0 20px rgba(255,211,105,.18);
    border-color:rgba(255,211,105,.7);
}


/* ==============================
   HEADINGS
================================ */

.footer-box h3{
    color:black;
    margin:0 0 20px;
    font-size:20px;
    position:relative;
}

.footer-box h3::after{
    content:"";
    display:block;
    width:50px;
    height:2px;
    margin-top:10px;
    background:linear-gradient(
        90deg,
        #FFD369,
        #7c3aed
    );
    background-size:200% 100%;
    animation:lineMove 4s linear infinite;
}

@keyframes lineMove{
    0%{
        background-position:0% 0;
    }

    100%{
        background-position:200% 0;
    }
}


/* ==============================
   LOGO & BRAND
================================ */

.footer-logo{
    width:240px;
    max-width:100%;
    display:block;
    transition:.5s;
}

.footer-logo:hover{
    transform:scale(1.05);
    filter:drop-shadow(0 0 15px #FFD369);
}

.brand-box p{
    color:#d5d5d5;
    line-height:1.9;
    margin:18px 0 0;
}


/* ==============================
   LINKS
================================ */

.footer-box ul{
    padding:0;
    margin:0;
    list-style:none;
}

.footer-box li{
    margin:14px 0;
    color:#ddd;
    transition:.35s;
}

.footer-box li:hover{
    padding-left:8px;
}

.footer-box a{
    color:black;
    text-decoration:none;
    transition:.35s;
}

.footer-box a:hover{
    color:#FFD369;
}

.footer-box i{
    color:red;
    margin-right:10px;
}


/* ==============================
   CONTACT
================================ */

.footer-box p{
    margin:14px 0;
    line-height:1.6;
    color:black;
    overflow-wrap:anywhere;
    word-break:break-word;
}


/* ==============================
   SOCIAL ICONS
================================ */

.footer-social{
    display:flex;
    gap:14px;
    margin-top:25px;
    flex-wrap:wrap;
}

.footer-social a{
    width:45px;
    height:45px;
    border-radius:20%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(124,58,237,.15);
    border:1px solid rgba(255,211,105,.35);
    color:#FFD369;
    transition:.4s;
}

.footer-social a i{
    margin:0;
}

.footer-social a:hover{
    background:linear-gradient(
        135deg,
        #7c3aed,
        #FFD369
    );
    color:#fff;
    transform:translateY(-6px) rotate(12deg) scale(1.08);
    box-shadow:0 0 25px rgba(124,58,237,.55);
}


/* ==============================
   MAP
================================ */

.footer-map{
    overflow:hidden;
    border-radius:15px;
    border:2px solid rgba(255,211,105,.35);
    height:190px;
    transition:.4s;
}

.footer-map:hover{
    transform:scale(1.03);
    box-shadow:0 0 25px rgba(124,58,237,.45);
}

.footer-map iframe{
    width:100%;
    height:100%;
    border:0;
}


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

.footer-bottom{
    margin-top:35px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    padding:25px 15px;
    position:relative;
    z-index:2;
}

.footer-bottom p{
    color:#bbb;
    margin:0;
    font-size:14px;
}


/* ==============================
   TABLET
================================ */

@media(max-width:992px){

    .mystic-container{
        grid-template-columns:repeat(2,1fr);
        gap:22px;
    }

}


/* ==============================
   MOBILE
================================ */

@media(max-width:768px){

    .mystic-container{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
        padding:0 15px 25px;
    }
      /* Our Location - Full Width */
    .mystic-container .footer-box:nth-child(4){
        grid-column:1 / 3;
    }


    /* Brand Full Width */

    .brand-box{
        grid-column:1 / 3;
        text-align:center;
    }

    .footer-logo{
        width:190px;
        margin:0 auto;
    }

    .footer-social{
        justify-content:center;
    }

    .footer-box{
        padding:15px;
    }

    .footer-box h3{
        font-size:17px;
        margin-bottom:16px;
    }

    .footer-box p{
        font-size:13px;
        line-height:1.6;
        margin:10px 0;
    }

    .footer-box li{
        font-size:14px;
        margin:12px 0;
    }

    .footer-map{
        height:175px;
        border-radius:12px;
    }

}


/* ==============================
   SMALL MOBILE
================================ */

@media(max-width:480px){

    .mystic-container{
        grid-column:1 / 3;
        gap:6px;
        padding:0 10px 20px;
    }
      .mystic-container .footer-box:nth-child(4){
        grid-column:1 / 3;
    }

    .brand-box{
        grid-column:1 / 3;
    }

    .footer-box{
        padding:12px;
        border-radius:14px;
    }

    .footer-box h3{
        font-size:15px;
    }

    .footer-box h3::after{
        width:35px;
    }

    .footer-box p{
        font-size:11px;
        line-height:1.55;
    }

    .footer-box li{
        font-size:12px;
    }

    .footer-box i{
        margin-right:5px;
    }

    .footer-map{
        height:140px;
    }

    .footer-social{
        gap:10px;
    }

    .footer-social a{
        width:38px;
        height:38px;
    }

    .footer-bottom{
        margin-top:20px;
        padding:20px 10px;
    }

    .footer-bottom p{
        font-size:11px;
    }

}


/*footer css */


/* =========================================================
   HOMEPAGE THEME — JEALOUSY & CURSE GUIDANCE
   Cream / White + Maroon / Red + Gold
   Existing HTML structure and banner are preserved.
   ========================================================= */
:root{
    --hp-maroon:#8f171b;
    --hp-maroon-dark:#671015;
    --hp-red:#b51f24;
    --hp-gold:#d5a52a;
    --hp-gold-light:#f1ca61;
    --hp-cream:#fffaf0;
    --hp-white:#ffffff;
    --hp-text:#352124;
    --hp-muted:#705b5b;
}

body{
    background:linear-gradient(180deg,#fffdf9 0%,#fffaf0 45%,#ffffff 100%);
    color:var(--hp-text);
}

.hero{
    background:
        radial-gradient(circle at 8% 15%,rgba(213,165,42,.12),transparent 25%),
        linear-gradient(135deg,#fffaf0,#ffffff);
    border:1px solid rgba(143,23,27,.12);
    box-shadow:0 12px 35px rgba(78,33,33,.08);
}

.hero .glow{
    background:rgba(213,165,42,.12);
    filter:blur(80px);
}

.badge-gold{
    color:var(--hp-maroon)!important;
    background:#fff!important;
    border:1px solid rgba(213,165,42,.50)!important;
    box-shadow:0 5px 18px rgba(80,30,30,.06);
}

.hero h1{color:var(--hp-maroon-dark);}
.hero h1 span{color:var(--hp-maroon)!important;}
.hero p{color:var(--hp-muted)!important;}

.btn-gold{
    color:#fff!important;
    background:linear-gradient(135deg,var(--hp-maroon),var(--hp-red))!important;
    border:0!important;
    box-shadow:0 9px 22px rgba(143,23,27,.18);
}
.btn-gold:hover{
    color:#fff!important;
    background:linear-gradient(135deg,var(--hp-gold),#bd8917)!important;
    transform:translateY(-3px);
}

section{color:var(--hp-text);}
section h2{color:var(--hp-maroon-dark);}
section p{color:var(--hp-muted);}

.service-list li{color:var(--hp-text)!important;}
.service-list li i{color:var(--hp-gold)!important;}

.glass{
    background:#f4dd32!important;
    border:1px solid rgba(143,23,27,.16)!important;
    border-radius:14px!important;
    box-shadow:0 10px 28px rgba(78,33,33,.09)!important;
    backdrop-filter:none!important;
}
.glass h4{color:var(--hp-maroon)!important;}
.glass .form-control{
    background:#fffaf3!important;
    color:var(--hp-text)!important;
    border:1px solid #eadfc7!important;
    border-radius:9px!important;
}
.glass .form-control::placeholder{color:#9b8983!important;}
.glass .form-control:focus{
    background:#fff!important;
    border-color:var(--hp-gold)!important;
    box-shadow:0 0 0 3px rgba(213,165,42,.10)!important;
}

.process-section{
    background:linear-gradient(180deg,#fffaf0 0%,#ffffff 100%);
}
.process-section h2{color:var(--hp-maroon);}
.timeline-line{
    background:linear-gradient(180deg,var(--hp-gold),var(--hp-maroon),var(--hp-gold))!important;
}
.timeline-card{
    background:#fff!important;
    border:1px solid rgba(143,23,27,.14)!important;
    border-radius:12px!important;
    box-shadow:0 8px 24px rgba(78,33,33,.07)!important;
}
.timeline-card:hover{
    background:var(--hp-cream)!important;
    border-color:var(--hp-gold)!important;
    transform:translateY(-5px);
}
.timeline-icon{
    background:linear-gradient(135deg,var(--hp-maroon),var(--hp-red))!important;
    color:#fff!important;
    border:2px solid var(--hp-gold)!important;
    box-shadow:0 7px 18px rgba(143,23,27,.18);
}
.timeline-card h5{color:var(--hp-maroon-dark)!important;}
.timeline-card p{color:var(--hp-muted)!important;}

.why-card{
    background:#fff!important;
    border:1px solid rgba(143,23,27,.15)!important;
    border-radius:14px!important;
    box-shadow:0 10px 28px rgba(78,33,33,.08)!important;
}
.why-card:hover{
    background:var(--hp-cream)!important;
    border-color:var(--hp-gold)!important;
}
.why-card h3{color:var(--hp-maroon-dark)!important;}
.why-card p{color:var(--hp-muted)!important;}
.why-card li{color:var(--hp-text)!important;}
.why-card li i{color:var(--hp-gold)!important;}

.cta{
    background:linear-gradient(135deg,var(--hp-maroon),var(--hp-red))!important;
    color:#fff!important;
    border-radius:0!important;
    box-shadow:0 15px 35px rgba(143,23,27,.15);
}
.cta h2{color:#fff!important;}
.cta p{color: #ffe500!important;}
.cta .btn-gold{
    background:linear-gradient(135deg,var(--hp-gold),#bd8917)!important;
}
.cta .btn-gold:hover{
    background:linear-gradient(135deg,var(--hp-gold-light),var(--hp-gold))!important;
}

.mystic-footer{background:white;}

@media(max-width:768px){
    .hero{padding:28px 20px!important;}
    .hero h1{font-size:36px;}
    .glass{margin-top:10px;}
    .timeline-card{padding:18px!important;}
}
@media(max-width:480px){
    .hero h1{font-size:31px;}
    .btn-gold{width:100%;}
}