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

}

/*----------------end---------------------*/


  
  /*=============================================
        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, #ab1313, #edd8a1, #6a0808, #ebd48b);

}

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

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

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

}

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


/*=====================================================
        ABOUT PAGE - NEW CONTENT BELOW BANNER
        Banner styles above remain unchanged.
=====================================================*/

.about-container{
    max-width:1200px;
    margin:0 auto;
    position:relative;
    z-index:2;
}

.about-intro{
    max-width:900px;
    margin:0 auto 85px;
    text-align:center;
}

.about-intro h2{
    margin:18px 0 22px;
    color:#fff;
    font-size:50px;
    line-height:1.12;
    font-weight:800;
}

.about-intro h2 span,
.section-heading h3 span,
.about-story h3 span,
.values-copy h3 span,
.about-cta h3 span{
    background:linear-gradient(90deg,#f7f755,#f7f755,#f7f755);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-family:cursive;
}

.about-intro p{
    max-width:820px;
    margin:0 auto;
    color:black;
    font-size:17px;
    line-height:1.9;
}

.mini-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border:1px solid rgba(255,216,106,.3);
    border-radius:50px;
    color:#40ffdc;
    background:rgba(255,255,255,.045);
    font-size:11px;
    font-weight:800;
    letter-spacing:2.2px;
    text-transform:uppercase;
    box-shadow:0 0 25px rgba(212,175,55,.08);
}

.about-block{
    margin-top:105px;
}

.section-heading{
    max-width:780px;
    margin:0 auto 45px;
    text-align:center;
}

.section-heading h3{
    color:#fff;
    font-size:42px;
    line-height:1.2;
    margin:17px 0 15px;
}

.section-heading p{
    color:rgba(255,255,255,.67);
    font-size:16px;
    line-height:1.8;
    margin:0 auto;
}

/* Story */
.about-story{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:55px;
    align-items:center;
    padding:22px;
    border:1px solid rgba(212,175,55,.35);
    border-radius:32px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),
        #9b0909;
    box-shadow:0 25px 70px rgba(0,0,0,.28);
    overflow:hidden;
    position:relative;
}

.about-story::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    left:-100px;
    top:-110px;
    border-radius:50%;
    background:rgba(212,175,55,.12);
    filter:blur(45px);
}

.story-content{
    position:relative;
    z-index:2;
}

.story-content h3{
    color:#fff;
    font-size:20px;
    line-height:1.18;
    margin:16px 0 20px;
}

.story-content p{
    color:white;
    line-height:1.85;
    font-size:15px;
    margin:0 0 15px;
}

.story-points{
    display:grid;
    gap:12px;
    margin-top:28px;
}

.story-point{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,216,106,.14);
    transition:.35s ease;
}

.story-point:hover{
    transform:translateX(7px);
    border-color:rgba(255,216,106,.45);
    background:rgba(212,175,55,.07);
}

.story-point > i{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    border-radius:12px;
    color:#1b102d;
    background:linear-gradient(135deg,#FFD86A,#D4AF37);
}

.story-point strong,
.story-point small{
    display:block;
}

.story-point strong{
    color:#fff;
    font-size:14px;
    margin-bottom:3px;
}

.story-point small{
    color:rgba(255,255,255,.55);
    font-size:12px;
}

.story-visual{
    min-height:390px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.story-symbol{
    width:210px;
    height:210px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#FFD86A;
       background: radial-gradient(circle, rgb(255 255 255 / 22%), rgb(203 192 220 / 12%) 55%, #ffffff00 70%);
    border:1px solid rgba(255,216,106,.48);
    box-shadow:0 0 0 15px rgba(255,216,106,.025),0 0 60px rgba(212,175,55,.17);
    position:relative;
    z-index:3;
    animation:aboutPulse 4s ease-in-out infinite;
}

.story-symbol::before,
.story-symbol::after{
    content:"";
    position:absolute;
    inset:14px;
    border:1px dashed #4c1d95;
    border-radius:50%;
}

.story-symbol::after{
    inset:-18px;
    border-style:solid;
    border-color:#4c1d95;
    animation:orbitSpin 18s linear infinite;
}

.story-symbol span{
    font-family:serif;
    font-size:76px;
    line-height:1;
}

.story-symbol small{
    font-size:9px;
    line-height:1.5;
    letter-spacing:3px;
    margin-top:8px;
}

.story-orbit{
    position:absolute;
    border:1px solid #e7b328;
    border-radius:50%;
}

.orbit-one{
    width:310px;
    height:310px;
    animation:orbitSpin 20s linear infinite;
}

.orbit-two{
    width:380px;
    height:210px;
    transform:rotate(-25deg);
    border-color:#e7b328;
    animation:orbitSpinReverse 16s linear infinite;
}

.floating-badge{
    position:absolute;
    z-index:4;
    padding:11px 15px;
    border-radius:14px;
    color:#fff;
    background:rgba(16,10,32,.88);
    border:1px solid rgba(255,216,106,.28);
    box-shadow:0 12px 30px rgba(0,0,0,.28);
    font-size:11px;
    backdrop-filter:blur(12px);
    animation:badgeFloat 5s ease-in-out infinite;
}

.floating-badge i{
    color:#FFD86A;
    margin-right:6px;
}

.badge-one{left:4%;top:20%;}
.badge-two{right:0;top:34%;animation-delay:1s;}
.badge-three{left:10%;bottom:13%;animation-delay:2s;}

@keyframes aboutPulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.035);}
}

@keyframes orbitSpin{
    to{transform:rotate(360deg);}
}

@keyframes orbitSpinReverse{
    to{transform:rotate(-360deg);}
}

@keyframes badgeFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-9px);}
}

/* Specialty cards */
.specialty-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.specialty-card{
    position:relative;
    padding:16px;
    border-radius:24px;
    overflow:hidden;
       background: linear-gradient(160deg, rgb(208 0 0), rgb(158 46 46 / 100%));
    border:1px solid rgba(212,175,55,.38);
    box-shadow:0 20px 45px rgba(0,0,0,.26);
    transition:.45s cubic-bezier(.22,1,.36,1);
}

.specialty-card:hover{
    transform:translateY(-12px);
    border-color:#FFD86A;
    box-shadow:0 28px 60px rgba(0,0,0,.38),0 0 30px rgba(212,175,55,.13);
}

.specialty-image{
    height:170px;
    overflow:hidden;
    border-radius:17px;
    border:1px solid rgba(255,216,106,.2);
}

.specialty-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.7s ease;
}

.specialty-card:hover .specialty-image img{
    transform:scale(1.08);
}

.specialty-icon{
    width:46px;
    height:46px;
    margin:-23px auto 15px;
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    color:#251333;
    background:linear-gradient(135deg,#FFD86A,#D4AF37);
    border:4px solid #241443;
    box-shadow:0 8px 25px rgba(0,0,0,.35);
}

.specialty-card h4{
    color:#fff;
    text-align:center;
    font-size:18px;
    margin:0 0 9px;
}

.specialty-card p{
    color:rgba(255,255,255,.62);
    text-align:center;
    font-size:13px;
    line-height:1.7;
    min-height:66px;
    margin:0 0 15px;
}

.specialty-card a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:#eeff54;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    transition:.3s;
}

.specialty-card a:hover{
    gap:11px;
    color:#fff;
}

/* Process */
/*.process-section{*/
/*    padding:62px 0 5px;*/
/*}*/

.process-grid{
    display:grid;
    grid-template-columns:1fr 45px 1fr 45px 1fr;
    align-items:center;
}

.process-card{
    min-height:260px;
    padding:30px 24px;
    text-align:center;
    border-radius:24px;
    background:rgba(255,255,255,.045);
    border: 2px solid rgb(255 231 0 / 90%);
    position:relative;
    overflow:hidden;
    transition:.4s;
}

.process-card:hover{
    transform:translateY(-8px);
    background:rgba(212,175,55,.06);
    border-color:#D4AF37;
}

.process-number{
    position:absolute;
    right:18px;
    top:13px;
    color:rgba(255,216,106,.28);
    font-size:34px;
    font-weight:900;
}

.process-icon{
    width:64px;
    height:64px;
    margin:18px auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    color:#24132f;
    background:linear-gradient(135deg,#FFD86A,#D4AF37);
    font-size:22px;
    box-shadow:0 10px 30px rgba(212,175,55,.16);
}

.process-card h4{
    color:#fff;
    font-size:18px;
    margin-bottom:10px;
}

.process-card p{
    color:rgba(255,255,255,.6);
    font-size:13px;
    line-height:1.75;
}

.process-line{
    height:1px;
    background:linear-gradient(90deg,transparent,#D4AF37,transparent);
    position:relative;
}

.process-line::after{
    content:"✦";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#FFD86A;
    background:#17102b;
    padding:5px;
    font-size:12px;
}

/* Trust / metrics */
.trust-section{
    padding:20px 0 5px;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.trust-card{
    text-align:center;
    padding:30px 20px 28px;
    border-radius:22px;
    background:linear-gradient(145deg,rgba(92,54,132,.22),rgba(255,255,255,.035));
    border:1px solid rgba(212,175,55,.32);
    transition:.4s;
}

.trust-card:hover{
    transform:translateY(-9px);
    border-color:#FFD86A;
    box-shadow:0 20px 45px rgba(0,0,0,.3);
}

.trust-icon{
    width:52px;
    height:52px;
    margin:0 auto 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#FFD86A;
    background:rgba(255,216,106,.08);
    border:1px solid rgba(255,216,106,.3);
}

.trust-card strong{
    display:block;
    color:#FFD86A;
    font-size:30px;
    line-height:1;
    margin-bottom:8px;
}

.trust-card h4{
    color:#fff;
    font-size:16px;
    margin-bottom:8px;
}

.trust-card p{
    color:rgba(255,255,255,.55);
    font-size:12px;
    line-height:1.7;
}

/* Promise section */
.values-section{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:45px;
    align-items:center;
    padding:55px;
    border-radius:30px;
    background:
        radial-gradient(circle at 10% 50%,rgba(212,175,55,.14),transparent 35%),
        linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
        border: 2px solid #b0ff01;
}

.values-copy h3{
    color:#fff;
    font-size:38px;
    line-height:1.2;
    margin:16px 0 18px;
}

.values-copy p{
    color:rgba(255,255,255,.64);
    font-size:15px;
    line-height:1.9;
    margin:0;
}

.values-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
}

.values-list > div{
    display:flex;
    gap:13px;
    align-items:flex-start;
    padding:17px;
    border-radius:16px;
    background:rgba(0,0,0,.16);
    border:1px solid rgba(255,216,106,.12);
}

.values-list > div > i{
    width:28px;
    height:28px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#25142e;
    background:#FFD86A;
    font-size:12px;
}

.values-list strong,
.values-list small{
    display:block;
}

.values-list strong{
    color:#fff;
    font-size:13px;
    margin-bottom:4px;
}

.values-list small{
    color:rgba(255,255,255,.5);
    font-size:11px;
    line-height:1.55;
}

/* Final CTA */
.about-cta{
    position:relative;
    margin:105px 0 30px;
    padding:25px 30px;
    border-radius:30px;
    text-align:center;
    overflow:hidden;
    border:1px solid rgba(255,216,106,.38);
       background: radial-gradient(circle at 50% 0, rgba(255, 216, 106, .18), transparent 45%), linear-gradient(135deg, #3a1638, #7a3030 55%, #000000);
    box-shadow:0 25px 65px rgba(0,0,0,.32);
}

.about-cta::before,
.about-cta::after{
    content:"";
    position:absolute;
    border:1px solid rgba(255,216,106,.13);
    border-radius:50%;
}

.about-cta::before{
    width:360px;
    height:360px;
    left:-190px;
    top:-200px;
}

.about-cta::after{
    width:300px;
    height:300px;
    right:-170px;
    bottom:-190px;
}

.cta-stars{
    color:#FFD86A;
    font-size:15px;
    letter-spacing:7px;
    margin-bottom:15px;
    opacity:.75;
}

.about-cta h3{
    color:#fff;
    font-size:22px;
    margin:17px 0 12px;
}

.about-cta p{
    color:rgba(255,255,255,.66);
    max-width:650px;
    margin:0 auto 28px;
    font-size:15px;
    line-height:1.8;
}

.cta-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    position:relative;
    z-index:2;
}

.secondary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:37px;
    padding:0 28px;
    border-radius:50px;
    border:1px solid rgba(255,216,106,.5);
    color:#FFD86A;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    background:rgba(255,255,255,.045);
    transition:.35s;
}

.secondary-btn:hover{
    color:#21122d;
    background:#FFD86A;
    transform:translateY(-4px);
}

.about-cta .premium-btn{
    min-height:37px;
    padding:0 30px;
}

/* New content responsive */
@media(max-width:1100px){
    .about-story{
        grid-template-columns:1fr;
        gap:20px;
    }

    .story-visual{
        min-height:350px;
    }

    .specialty-grid,
    .trust-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .process-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .process-line{
        width:1px;
        height:35px;
        margin:auto;
        background:linear-gradient(180deg,transparent,#D4AF37,transparent);
    }

    .process-line::after{
        top:50%;
    }
}

@media(max-width:768px){
    .about-container{
        width:100%;
    }

    .about-intro{
        margin-bottom:60px;
    }

    .about-intro h2{
        font-size:34px;
    }

    .about-intro p{
        font-size:15px;
    }

    .about-block{
        margin-top:55px;
    }

    .about-story{
        padding:30px 20px;
        border-radius:24px;
    }

    .story-content h3,
    .section-heading h3,
    .values-copy h3{
        font-size:31px;
    }

    .story-visual{
        min-height:300px;
        transform:scale(.88);
    }

    .specialty-grid,
    .trust-grid{
        grid-template-columns:1fr 1fr;
        gap:3px;
    }

    .specialty-card{
        padding:11px;
        border-radius:19px;
    }

    .specialty-image{
        height:135px;
    }

    .specialty-card h4{
        font-size:15px;
    }

    .specialty-card p{
        font-size:11px;
        min-height:82px;
    }

    .values-section{
        grid-template-columns:1fr;
        padding:32px 20px;
        gap:30px;
        border-radius:24px;
    }

    .values-list{
        grid-template-columns:1fr;
    }

    .about-cta{
        margin-top:35px;
        padding:38px 20px;
    }

    .about-cta h3{
        font-size:31px;
    }
}

@media(max-width:480px){
    .about-intro h2{
        font-size:29px;
    }

    .about-intro p{
        font-size:14px;
        line-height:1.75;
    }

    .mini-label{
        font-size:9px;
        letter-spacing:1.5px;
        padding:7px 12px;
    }

    .story-content h3,
    .section-heading h3,
    .values-copy h3{
        font-size:27px;
    }

    .story-visual{
        min-height:265px;
        transform:scale(.74);
        margin:-20px 0;
    }

    .floating-badge{
        font-size:9px;
        padding:9px 10px;
    }

    .specialty-grid,
    .trust-grid{
        /*grid-template-columns:1fr;*/
    }

    .specialty-image{
        height:180px;
    }

    .specialty-card p{
        min-height:auto;
        font-size:12px;
    }

    .trust-card{
        padding:25px 18px;
    }

    .cta-actions{
        flex-direction:column;
        width:100%;
    }

    .cta-actions .premium-btn,
    .secondary-btn{
        width:100%;
    }
}

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

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

.mystic-footer{
    background:white;
    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:1350px;
    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 */