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

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;

}

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


/*------------- whatsapp,call  css---------- */
/*=====================================================
PREMIUM FLOATING BUTTONS
======================================================*/

.float-btn{

position:fixed;

bottom:25px;

width:55px;
height:55px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

text-decoration:none;

overflow:hidden;

z-index:99999;

color:#fff;

font-size:28px;

backdrop-filter:blur(15px);

border:2px solid rgba(255,255,255,.12);

transition:.45s ease;

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

}

/*==================================
LEFT WHATSAPP
==================================*/

.whatsapp-btn{

left:30px;

background:
linear-gradient(
135deg,
#25D366,
#159947
);

box-shadow:
0 15px 35px rgba(37,211,102,.35),
0 0 30px rgba(37,211,102,.25);

}


/*==================================
RIGHT CALL
==================================*/

.call-btn{

right:30px;

background:
linear-gradient(
135deg,
#7C3AED,
#4A1DB7
);

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

}


/*==================================
ICON
==================================*/

.float-btn i{

position:relative;

z-index:5;

transition:.35s;

font-size:30px;

}


/*==================================
HOVER
==================================*/

.float-btn:hover{

transform:
translateY(-8px)
scale(1.08);

}

.float-btn:hover i{

transform:
rotate(15deg)
scale(1.15);

}


/*==================================
SHINE EFFECT
==================================*/

.float-btn::before{

content:"";

position:absolute;

width:220px;
height:220px;

background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.45),
transparent
);

left:-250px;
top:-70px;

transform:rotate(25deg);

transition:.7s;

}

.float-btn:hover::before{

left:180%;

}


/*==================================
RIPPLE
==================================*/

.float-btn::after{

content:"";

position:absolute;

inset:-8px;

border-radius:50%;

border:2px solid rgba(255,255,255,.25);

animation:ripple 2.2s infinite;

}


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

.call-btn{

animation:
floatMove 3.5s ease-in-out infinite,
purpleGlow 2s ease-in-out infinite alternate;

}

.whatsapp-btn{

animation:
floatMove 3.5s ease-in-out infinite,
greenGlow 2s ease-in-out infinite alternate;

}


@keyframes purpleGlow{

from{

box-shadow:
0 0 0 rgba(124,58,237,.4),
0 0 18px rgba(124,58,237,.3);

}

to{

box-shadow:
0 0 28px rgba(124,58,237,.75),
0 0 45px rgba(255,211,105,.45);

}

}

@keyframes greenGlow{

from{

box-shadow:
0 0 0 rgba(37,211,102,.35),
0 0 18px rgba(37,211,102,.25);

}

to{

box-shadow:
0 0 28px rgba(37,211,102,.65),
0 0 45px rgba(37,211,102,.35);

}

}


/*==================================
FLOAT
==================================*/

@keyframes floatMove{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}


/*==================================
RIPPLE
==================================*/

@keyframes ripple{

0%{

transform:scale(.9);

opacity:.8;

}

100%{

transform:scale(1.5);

opacity:0;

}

}


/*==================================
TOOLTIP
==================================*/

.tooltip-text{

position:absolute;

top:-48px;

background:#0f081c;

color:#fff;

padding:8px 15px;

border-radius:30px;

font-size:13px;

font-weight:600;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.35s;

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

box-shadow:
0 10px 25px rgba(0,0,0,.35);

}

.tooltip-text::after{

content:"";

position:absolute;

left:50%;

bottom:-6px;

transform:translateX(-50%) rotate(45deg);

width:12px;
height:12px;

background:#0f081c;

}


/* Show tooltip */

.float-btn:hover .tooltip-text{

opacity:1;

visibility:visible;

top:-58px;

}


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

@media (max-width:768px){

.whatsapp-btn{

position:fixed !important;

left:15px;

right:auto;

bottom:18px;

top:auto;

width:58px;

height:58px;

z-index:999999;

}

.call-btn{

position:fixed !important;

right:15px;

left:auto;

bottom:18px;

top:auto;

width:58px;

height:58px;

z-index:999999;

}

.float-btn{

font-size:22px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}

.tooltip-text{

display:none;

}

}

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