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

color:#fff;

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

}

.astro-call:hover{

transform:translateY(-4px);

/*background:*/

/*linear-gradient(*/

/*135deg,*/

/*var(--gold),*/

/*#e7b328*/

/*);*/
background:

linear-gradient(

135deg,

var(--purple),

#4f1fc8

);

color:#111;

box-shadow:

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

}

.astro-call:hover i{

color:#111;

}


/*==============================
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:var(--gold-dark);

background:#FAF7EF;

padding-left:32px;

}

/* Gold Dot */

.astro-dropdown-menu a::before{

content:"�Q���t";

color:var(--gold);

font-size:11px;

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,.95);

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-left: 4px solid darkgold;

}

.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(5,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;

}
.service-card .icon img{
    height:85px;
    width:120px;
    border-radius:15px;
    
}

.service-card h4{

color:#fff;

font-size:20px;

margin-bottom:12px;

}

.service-card p{

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

font-size:15px;

line-height:1.7;

}

@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-box{

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

    backdrop-filter:blur(12px);

   border: 1px solid #d2a438;

    border-radius:18px;

    padding:15px;

    transition:.45s;

    position:relative;

    overflow:hidden;

}


.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(-8px);

box-shadow:

0 15px 35px rgba(124,58,237,.35),

0 0 20px rgba(255,211,105,.18);

border-color:rgba(255,211,105,.25);

}


.footer-box h3::after{

content:"";

display:block;

width:45px;

height:2px;

margin-top:10px;

background:linear-gradient(90deg,#FFD369,#7c3aed);

background-size:200%;

animation:lineMove 4s linear infinite;

}

@keyframes lineMove{

0%{background-position:0%}

100%{background-position:200%}

}


.footer-social a{

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

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

}

.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);

}
    
.mystic-footer{

background:#06030d;

position:relative;

overflow:hidden;

padding-top:40px;

color:#fff;

font-family:Poppins,sans-serif;

}

/* animated 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;

}

@keyframes moveStars{

from{

transform:translateY(0);

}

to{

transform:translateY(80px);

}

}

.mystic-container{

max-width:1300px;

margin:auto;

padding:0 30px;

display:grid;

grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;

gap:40px;

position:relative;

z-index:2;

}

.footer-box h3{

color:#FFD369;

margin-bottom:20px;

font-size:18px;

position:relative;

}

.footer-box h3:after{

content:"";

width:45px;

height:2px;

background:#7c3aed;

display:block;

margin-top:8px;

}

.footer-logo{

width:220px;

margin-bottom:25px;

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;

}

.footer-box ul{

padding:0;

margin:0;

list-style:none;

}

.footer-box li{

margin:14px 0;

color:#ddd;

transition:.35s;

cursor:pointer;

}

.footer-box li:hover{

color:#FFD369;

padding-left:8px;

}

.footer-box a{

color:#ddd;

text-decoration:none;

}

.footer-box a:hover{

color:#FFD369;

}

.footer-box p{

margin:14px 0;

line-height:1.7;

color:#ddd;

}

.footer-box i{

color:#FFD369;

margin-right:10px;

}

.footer-social{

display:flex;

gap:14px;

margin-top:25px;

}

.footer-social a{

width:45px;

height:45px;

border-radius:20%;

display:flex;

align-items:center;

justify-content:center;

background:#161616;

color:#FFD369;

transition:.4s;

}

.footer-social a:hover{

background:#7c3aed;

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

box-shadow:0 0 20px rgba(124,58,237,.6);

}

.footer-map{

overflow:hidden;

border-radius:15px;

border:2px solid rgba(255,211,105,.35);

height:170px;

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{

/*margin-top:60px;*/

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

padding:30px 15px;

}

.footer-divider{

font-size:24px;

color:#FFD369;

margin-bottom:15px;

letter-spacing:8px;

animation:glow 2s infinite alternate;

}

@keyframes glow{

from{

text-shadow:0 0 8px #FFD369;

}

to{

text-shadow:0 0 25px #7c3aed;

}

}

.footer-bottom p{

color:#bbb;

}

/* ---------- Tablet ---------- */

@media(max-width:992px){

.mystic-container{

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

}

}

/* ---------- Mobile ---------- */

@media(max-width:768px){

.mystic-container{

    grid-template-columns:repeat(2,1fr);
    gap:25px;
    padding:0 18px 30px;

}

/* Logo Full Width */

.brand-box{

    grid-column:1/3;
    text-align:center;

}


.footer-logo{

    width:190px;
    margin:auto auto 0px;

}

.footer-social{

    justify-content:center;

}

/* Contact + Map Side by Side */

.mystic-container .footer-box:nth-child(4){

    grid-column:1/2;

}

.mystic-container .footer-box:nth-child(5){

    grid-column:2/3;

}

/* Small Heading */

.footer-box h3{

    font-size:18px;
    margin-bottom:16px;

}

/* Smaller Contact */

.footer-box p{

    font-size:13px;
    line-height:1.6;
    margin:10px 0;

}

/* Small Map */

.footer-map{

    height:135px;
    border-radius:12px;
    overflow:hidden;

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

    box-shadow:
    0 8px 20px rgba(0,0,0,.45),
    0 0 20px rgba(124,58,237,.20);

}

.footer-map iframe{

    width:100%;
    height:100%;

}

/* Hover */

.footer-box{

    transition:.4s;

}

.footer-box:hover{

    transform:translateY(-4px);

}

}


/* ---------- Small Mobile ---------- */

@media(max-width:480px){

@media(max-width:480px){

.mystic-container{

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

    gap:18px;

}

.brand-box{

    grid-column:1/3;

}

/* Contact */

.footer-box:nth-child(4){

    grid-column:1/2;

}

/* Map */

.footer-box:nth-child(5){

    grid-column:2/3;

}

.footer-map{

    height:110px;

}

.footer-box h3{

    font-size:16px;

}

.footer-box p{

    font-size:12px;

}

.footer-box li{

    font-size:13px;

}

.footer-social a{

    width:38px;
    height:38px;

}

}


/*footer css */