/*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:13px;

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;

}

/*-------------------------------------*/
  
  /*=============================================
        PREMIUM ABOUT SECTION
==============================================*/

:root{

--gold:#D4AF37;
--gold-light:#FFD86A;

--purple:#6D28D9;
--purple-dark:#4C1D95;

--white:#fff;

}

/*============================================*/

.premium-about{

position:relative;

padding:40px 20px;

overflow:hidden;

background:
radial-gradient(circle at 10% 10%,
rgba(212,175,55,.12),
transparent 30%),

radial-gradient(circle at 90% 20%,
rgba(109,40,217,.20),
transparent 35%),

linear-gradient(
180deg,
#06040E,
#12091D,
#18102D,
#241443);

}

/*============================================*/

.container{

max-width:1200px;

margin:auto;

position:relative;

z-index:2;

}

/*============================================
        FLOATING GLOW
============================================*/

.bg-glow{

position:absolute;

border-radius:50%;

filter:blur(90px);

animation:floatGlow 12s ease-in-out infinite;

}

.glow1{

width:350px;
height:350px;

background:rgba(212,175,55,.18);

left:-120px;

top:-80px;

}

.glow2{

width:300px;
height:300px;

background:rgba(109,40,217,.25);

right:-100px;

bottom:-50px;

animation-delay:4s;

}

@keyframes floatGlow{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-35px);

}

}

/*============================================
        STARS
============================================*/

.star{

position:absolute;

width:5px;

height:5px;

border-radius:50%;

background:#FFD86A;

box-shadow:

0 0 10px #FFD86A,

0 0 30px rgba(255,216,106,.7);

animation:

twinkle 3s infinite,

floating 8s ease-in-out infinite;

}

.star1{

top:8%;

left:10%;

}

.star2{

right:12%;

top:20%;

}

.star3{

left:15%;

bottom:18%;

}

.star4{

right:18%;

bottom:10%;

}

@keyframes twinkle{

0%,100%{

opacity:.3;

transform:scale(1);

}

50%{

opacity:1;

transform:scale(2);

}

}

@keyframes floating{

50%{

transform:translateY(-15px);

}

}

/*============================================
        BANNER
============================================*/

.about-banner{

position:relative;

border-radius:30px;

overflow:hidden;

margin-bottom:40px;

border:2px solid rgba(212,175,55,.25);

box-shadow:

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

0 0 40px rgba(109,40,217,.15);

transition:.45s;

}

.about-banner:hover{

transform:translateY(-8px);

}

.about-banner img{

width:100%;

display:block;

transition:1s;

}

.about-banner:hover img{

transform:scale(1.06);

}

/* Animated Shine */

.banner-shine{

position:absolute;

top:-150%;

left:-80%;

width:40%;

height:350%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent);

transform:rotate(25deg);

animation:shine 5s infinite;

}

@keyframes shine{

100%{

left:180%;

}

}

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

.about-heading{

text-align:center;

max-width:850px;

margin:auto;

margin-bottom:60px;

}

.about-tag{

display:inline-block;

padding:12px 25px;

border-radius:50px;

border:1px solid rgba(212,175,55,.25);

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

color:#FFD86A;

letter-spacing:3px;

font-size:12px;

font-weight:700;

margin-bottom:20px;

backdrop-filter:blur(15px);

}

.about-heading h2{

font-size:48px;

color:#fff;

margin-bottom:20px;

}

.about-heading h2 span{

background:linear-gradient(

90deg,

#FFD86A,

#D4AF37,

#A855F7);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.about-heading p{

font-size:18px;

line-height:2;

color:rgba(255,255,255,.75);

}
/*=========================================
        SECTION TITLE
=========================================*/

.section-title{
    text-align:center;
    font-size:38px;
    color:#d4af37;
    margin:70px 0 40px;
    position:relative;
}

.section-title::after{
    content:"";
    width:80px;
    height:3px;
    background:linear-gradient(90deg,#FFD86A,#D4AF37,#7C3AED);
    display:block;
    margin:18px auto 0;
    border-radius:30px;
}

/*=========================================
        SERVICES GRID
=========================================*/

.services-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

margin-bottom:70px;

}

.service-card{

position:relative;

padding:35px 25px;

border-radius:24px;

text-align:center;

overflow:hidden;

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

border:1px solid rgba(212,175,55,.7);

backdrop-filter:blur(18px);

transition:.45s cubic-bezier(.22,1,.36,1);

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

}

.service-card::before{

content:"";

position:absolute;

inset:0;

padding:5px;

border-radius:24px;

background:linear-gradient(
135deg,
rgba(212,175,55,.9),
rgba(124,58,237,.5),
rgba(212,175,55,.9));

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:.35;

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:
0 30px 60px rgba(61, 53, 53, 0.65),
0 0 35px rgba(165, 132, 221, 0.45);
border:2px solid rgba(212,175,55);
}

.service-card .icon{

font-size:42px;

margin-bottom:18px;

animation:floatIcon 3s ease-in-out infinite;

color:gold;

}

.service-card h4{

color:#fff;

font-size:20px;

margin-bottom:12px;

}

.service-card p{

color:rgba(255,255,255,.72);

 font-size: 14px;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
  text-align: center;

}

@keyframes floatIcon{

50%{

transform:translateY(-8px);

}

}

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

.why-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:22px;

margin-bottom:60px;

}

.why-card{

padding:32px 20px;

border-radius:22px;

text-align:center;

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

border:1px solid rgba(212,175,55,.5);

backdrop-filter:blur(16px);

transition:.4s;

}

.why-card:hover{

transform:translateY(-10px);

background:rgba(212,175,55,.08);

border-color:#D4AF37;

}

.why-card h4{

color:#fff;

margin-top:14px;

font-size:17px;

}

/*=========================================
        CTA BUTTON
=========================================*/

.cta{

text-align:center;

margin-top:20px;

}

.premium-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:18px 42px;

border-radius:60px;

text-decoration:none;

color:#fff;

font-size:18px;

font-weight:700;

background:linear-gradient(
135deg,
#FFD86A,
#D4AF37,
#7C3AED);

background-size:250%;

transition:.45s;

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

animation:buttonGlow 5s linear infinite;

}

.premium-btn:hover{

transform:translateY(-5px) scale(1.03);

}

@keyframes buttonGlow{

0%{

background-position:0%;

}

100%{

background-position:250%;

}

}

/*=========================================
        REVEAL ANIMATION
=========================================*/

.reveal{

opacity:0;

transform:translateY(70px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

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

@media(max-width:1200px){

.services-grid,
.why-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.section-title{

font-size:30px;

}

.services-grid,
.why-grid{

/* grid-template-columns:1fr; */

gap:18px;

}

.about-heading h2{

font-size:34px;

}

.about-heading p{

font-size:16px;

line-height:1.8;

}

.premium-btn{

width:100%;

justify-content:center;

}

}
/* ------------------------------ */


/*------------- footer css---------- */
  /* ==============================
   FOOTER
================================ */

.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 OVERRIDE — ABOUT SECTION
   Cream / white + maroon / red + gold
   Existing banner image is intentionally preserved.
   ========================================================= */

:root{
    --hp-maroon:#8f171b;
    --hp-maroon-dark:#671015;
    --hp-red:#b51f24;
    --hp-gold:#d5a52a;
    --hp-gold-light:#f1ca61;
    --hp-cream:#fffaf0;
    --hp-text:#352124;
    --hp-muted:#705b5b;
}

/* Navbar accents */
.astro-menu ul li>a:hover,
.astro-menu ul li>a.active{color:var(--hp-maroon);}
.astro-menu ul li>a.active::after{
    background:linear-gradient(90deg,var(--hp-gold),var(--hp-maroon));
}
.astro-call{
    background:linear-gradient(135deg,var(--hp-gold),#e7b328) !important;
    color:#351d20;
    box-shadow:0 8px 22px rgba(143,23,27,.16);
}
.astro-call:hover{
    background:linear-gradient(135deg,var(--hp-maroon),var(--hp-red)) !important;
    color:#fff;
}
.astro-dropdown-menu{
    background:#fffaf0;
    border-color:rgba(213,165,42,.35);
    box-shadow:0 18px 45px rgba(78,33,33,.14);
}
.astro-dropdown-menu a:hover{
    background:var(--hp-maroon);
    color:#fff !important;
}

/* Main About background */
.premium-about{
    padding:55px 20px 75px;
    background:
        radial-gradient(circle at 7% 10%,rgba(213,165,42,.10),transparent 24%),
        radial-gradient(circle at 94% 35%,rgba(143,23,27,.055),transparent 27%),
        linear-gradient(180deg,#fffdf9 0%,#fffaf0 42%,#ffffff 100%);
    color:var(--hp-text);
}

/* Banner image/appearance stays as supplied */
.about-banner{
    border:2px solid rgba(213,165,42,.28);
    box-shadow:0 18px 42px rgba(68,28,28,.12);
}
.about-banner:hover{transform:none;}
.about-banner:hover img{transform:none;}

/* Replace purple atmosphere with subtle homepage accents */
.bg-glow{filter:blur(100px);opacity:.25;}
.glow1{background:rgba(213,165,42,.14);}
.glow2{background:rgba(143,23,27,.07);}
.star{
    background:var(--hp-gold-light);
    box-shadow:0 0 9px rgba(241,202,97,.7);
}

/* Intro */
.about-tag{
    color:var(--hp-maroon);
    background:#fff;
    border:1px solid rgba(213,165,42,.48);
    box-shadow:0 6px 20px rgba(80,30,30,.06);
}
.about-heading h2{
    color:#351d20;
    text-shadow:none;
}
.about-heading h2 span{
    background:linear-gradient(90deg,var(--hp-maroon),var(--hp-gold),var(--hp-maroon));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.about-heading p{color:var(--hp-muted);}

/* Section titles */
.section-title{color:var(--hp-maroon);}
.section-title::after{
    background:linear-gradient(90deg,var(--hp-gold-light),var(--hp-gold),var(--hp-maroon));
}

/* Specialty cards */
.service-card{
    background:rgba(255,255,255,.96);
    border:1px solid rgba(143,23,27,.16);
    border-radius:14px;
    backdrop-filter:none;
    box-shadow:0 8px 25px rgba(78,33,33,.08);
}
.service-card::before{
    background:linear-gradient(
        135deg,
        rgba(213,165,42,.85),
        rgba(143,23,27,.28),
        rgba(213,165,42,.7)
    );
    opacity:.17;
}
.service-card:hover{
    transform:translateY(-8px);
    background:#fff;
    border-color:rgba(213,165,42,.8);
    box-shadow:0 16px 34px rgba(78,33,33,.13);
}
.service-card .icon{color:var(--hp-gold);}
.service-card h4{color:var(--hp-maroon-dark);}
.service-card p{color:var(--hp-muted);}

/* Why Choose cards */
.why-card{
    background:#fff;
    border:1px solid rgba(143,23,27,.16);
    border-radius:14px;
    backdrop-filter:none;
    box-shadow:0 8px 24px rgba(78,33,33,.07);
}
.why-card:hover{
    transform:translateY(-7px);
    background:#fffaf0;
    border-color:var(--hp-gold);
}
.why-card h4{color:var(--hp-maroon-dark);}

/* CTA */
.cta{
    text-align:center;
    margin-top:45px;
    padding:42px 20px;
    background:linear-gradient(135deg,var(--hp-maroon),var(--hp-red));
    border-radius:20px;
    box-shadow:0 15px 35px rgba(143,23,27,.15);
}
.premium-btn{
       color: #000000;
    background: linear-gradient(135deg, #ffb700, #ffb700);
    background-size:100%;
    box-shadow:0 10px 24px rgba(80,30,20,.18);
    animation:none;
}
.premium-btn:hover{
    background:linear-gradient(135deg,#f1ca61,var(--hp-gold));
    color:#fff;
    transform:translateY(-4px) scale(1.02);
}

/* Mobile */
@media(max-width:768px){
    .premium-about{padding:38px 14px 55px;}
    .about-heading h2{font-size:24px;}
    .about-heading p{font-size:16px;line-height:1.8;}
    .services-grid,.why-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }
    .service-card{padding:24px 15px;}
    .why-card{padding:25px 14px;}
    .premium-btn{width:100%;justify-content:center;}
}
@media(max-width:480px){
    /*.services-grid,.why-grid{grid-template-columns:1fr;}*/
}