/*=========================================================
DIVINE ASTROLOGY & PSYCHIC CENTRE
PSYCHIC.CSS
Premium Service Pages
=========================================================*/



/*=========================================================
ROOT VARIABLES
=========================================================*/

:root{

    --primary:#4B0082;
    --primary-dark:#2d0052;
    --secondary:#D4AF37;
    --secondary-light:#f2d677;

    --white:#ffffff;
    --black:#181818;

    --text:#555555;
    --heading:#1d1d1d;

    --border:#ececec;

    --bg:#faf8ff;
    --bg-light:#ffffff;

    --gradient-primary:
    linear-gradient(135deg,#4B0082 0%,#2d0052 100%);

    --gradient-gold:
    linear-gradient(135deg,#D4AF37 0%,#f4d46b 100%);

    --shadow-sm:
    0 8px 25px rgba(0,0,0,.05);

    --shadow:
    0 15px 40px rgba(0,0,0,.08);

    --shadow-lg:
    0 25px 70px rgba(0,0,0,.15);

    --radius-sm:12px;
    --radius:20px;
    --radius-lg:30px;

    --transition:.35s ease;

    --container:1320px;

}



/*=========================================================
RESET
=========================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
    line-height:1.8;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    transition:var(--transition);

}

ul{

    margin:0;
    padding:0;
    list-style:none;

}

button{

    transition:var(--transition);

}

::selection{

    background:var(--secondary);
    color:#fff;

}



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

.container{

    max-width:var(--container);

}



/*=========================================================
COMMON SECTION SPACING
=========================================================*/

section{

    position:relative;
    padding:110px 0;
    overflow:hidden;

}

.section-title{

    margin-bottom:60px;

}

.section-title span{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 22px;

    background:rgba(75,0,130,.08);

    color:var(--primary);

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.section-title h2{

    font-family:'Playfair Display',serif;

    font-size:45px;

    font-weight:700;

    line-height:1.2;

    color:var(--heading);

    margin-bottom:25px;

}

.section-title p{

    max-width:760px;

    margin:auto;

    font-size:17px;

    color:var(--text);

}



/*=========================================================
TYPOGRAPHY
=========================================================*/

h1,h2,h3,h4,h5{

    color:var(--heading);

    font-weight:700;

}

h1{

    font-family:'Playfair Display',serif;

    font-size:58px;

    line-height:1.15;

    margin-bottom:28px;

}

h3{

    font-size:28px;

    margin-bottom:15px;

}

p{

    font-size:17px;

    color:var(--text);

}



/*=========================================================
COMMON BUTTONS
=========================================================*/

.btn{

    border-radius:60px;

    padding:17px 34px;

    font-weight:600;

    font-size:16px;

    transition:.35s;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.btn-gold{

    background:var(--gradient-gold);

    color:#fff;

    border:none;

    box-shadow:0 15px 35px rgba(212,175,55,.30);

}

.btn-gold:hover{

    transform:translateY(-5px);

    box-shadow:0 22px 45px rgba(212,175,55,.40);

    color:#fff;

}

.btn-outline-gold{

    border:2px solid var(--secondary);

    color:var(--secondary);

    background:transparent;

}

.btn-outline-gold:hover{

    background:var(--secondary);

    color:#fff;

    transform:translateY(-5px);

}

/*=========================================================
PREMIUM HERO
=========================================================*/

.psychic-hero{

    position:relative;

    background:
    linear-gradient(135deg,#2a0148 0%,#4B0082 45%,#31105e 100%);

    overflow:hidden;

    padding:180px 0 120px;

    color:#fff;

}



/*=========================================================
BACKGROUND EFFECTS
=========================================================*/

.hero-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.18;

    animation:floatOrb 8s ease-in-out infinite;

}

.hero-orb-one{

    width:420px;

    height:420px;

    background:#D4AF37;

    top:-120px;

    left:-120px;

}

.hero-orb-two{

    width:500px;

    height:500px;

    background:#7d49ff;

    bottom:-180px;

    right:-150px;

    animation-delay:2s;

}

.hero-stars{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(#ffffff 1px,transparent 1px);

    background-size:45px 45px;

    opacity:.08;

}



/*=========================================================
BREADCRUMB
=========================================================*/

.premium-breadcrumb{

    margin-bottom:55px;

    position:relative;

    z-index:5;

}

.premium-breadcrumb ol{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    flex-wrap:wrap;

    padding:15px 28px;

    border-radius:60px;

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

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

    backdrop-filter:blur(15px);

}

.premium-breadcrumb li{

    color:#fff;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:14px;

    font-weight:500;

}

.premium-breadcrumb a{

    color:#fff;

}

.premium-breadcrumb a:hover{

    color:#D4AF37;

}

.premium-breadcrumb i{

    color:#D4AF37;

    font-size:12px;

}

.premium-breadcrumb .active{

    color:#D4AF37;

    font-weight:600;

}



/*=========================================================
HERO CONTENT
=========================================================*/

.psychic-hero .row{

    position:relative;

    z-index:2;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:11px 22px;

    border-radius:50px;

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

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

    color:#D4AF37;

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:30px;

    text-transform:uppercase;

}

.psychic-hero h1{

    color:#fff;

    font-size:64px;

    line-height:1.12;

    margin-bottom:28px;

    max-width:650px;

}

.psychic-hero p{

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

    font-size:18px;

    line-height:1.9;

    max-width:620px;

}



/*=========================================================
BUTTONS
=========================================================*/

.hero-actions{

    display:flex;

    gap:18px;

    margin-top:42px;

    flex-wrap:wrap;

}

.hero-actions .btn{

    min-width:230px;

}



/*=========================================================
FEATURES
=========================================================*/

.hero-features{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:45px;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 22px;

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

    border:1px solid rgba(255,255,255,.10);

    border-radius:60px;

    color:#fff;

    transition:.35s;

}

.hero-features div:hover{

    transform:translateY(-5px);

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

}

.hero-features i{

    color:#D4AF37;

    font-size:18px;

}

/*=========================================================
HERO VISUAL
=========================================================*/

.hero-visual{

    position:relative;

    max-width:600px;

    margin:0 auto;

    z-index:5;

}

/*.hero-visual::before{*/

/*    content:"";*/

/*    position:absolute;*/

/*    inset:-18px;*/

/*    border-radius:32px;*/

/*    background:linear-gradient(135deg,*/
/*    rgba(212,175,55,.30),*/
/*    rgba(255,255,255,.05));*/

/*    z-index:-2;*/

/*    animation:borderGlow 5s linear infinite;*/

/*}*/  

/*=========================================================
HERO VISUAL
=========================================================*/

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    isolation:isolate;

    z-index:1;

}

.hero-visual img{

    position:relative;

    z-index:5;

    display:block;

    width:100%;

    max-width:520px;

}

/*=========================================================
ROTATING YANTRA
=========================================================*/

.hero-visual::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:175%;

    height:175%;

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

    background:url("../images/yant.png") center center no-repeat;

    background-size:contain;

    background-repeat:no-repeat;

    opacity:.12;

    z-index:1;

    pointer-events:none;

    animation:rotateYantra 80s linear infinite;

    filter:
        drop-shadow(0 0 18px rgba(212,175,55,.35));

}

/* Soft Glow */

.hero-visual::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:95%;

    height:95%;

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

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(212,175,55,.12) 0%,
    rgba(212,175,55,.05) 45%,
    transparent 75%);

    z-index:2;

    pointer-events:none;

}

/*=========================================================
ROTATION
=========================================================*/

@keyframes rotateYantra{

    from{

        transform:translate(-50%,-50%) rotate(0deg);

    }

    to{

        transform:translate(-50%,-50%) rotate(360deg);

    }

}

/*.hero-visual::after{*/

/*    content:"";*/

/*    position:absolute;*/

/*    inset:15px;*/

/*    border-radius:28px;*/

/*    border:1px solid rgba(255,255,255,.15);*/

/*    z-index:2;*/

/*    pointer-events:none;*/

/*}*/

.hero-visual img{

    width:100%;

    border-radius:28px;

    box-shadow:
    0 35px 80px rgba(0,0,0,.30);

    transition:.5s ease;

}

.hero-visual:hover img{

    transform:scale(1.03);

}



/*=========================================================
FLOATING CARDS
=========================================================*/

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    min-width:220px;

    padding:18px 20px;

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

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:18px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.18);

    color:#fff;

    transition:.35s;

    animation:floatingCard 6s ease-in-out infinite;

}

.floating-card:hover{

    transform:translateY(-8px);

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

}

.floating-card i{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    background:linear-gradient(135deg,#D4AF37,#f4d46b);

    color:#fff;

    flex-shrink:0;

}

.floating-card strong{

    display:block;

    font-size:16px;

    color:#fff;

    margin-bottom:4px;

}

.floating-card small{

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

    font-size:13px;

    display:block;

}



/*=========================================================
CARD POSITIONS
=========================================================*/

.card-one{

    left:-70px;

    top:55px;

}

.card-two{

    right:-60px;

    top:240px;

    animation-delay:1.5s;

}

.card-three{

    left:-45px;

    bottom:35px;

    animation-delay:3s;

}



/*=========================================================
ANIMATIONS
=========================================================*/

@keyframes floatingCard{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}



@keyframes floatOrb{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(25px,-30px);

    }

    100%{

        transform:translate(0,0);

    }

}



@keyframes borderGlow{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}

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

/*=========================
Large Desktop
==========================*/

@media (max-width:1600px){

    .psychic-hero{

        padding:170px 0 110px;

    }

    .psychic-hero h1{

        font-size:58px;

        max-width:620px;

    }

}



/*=========================
Laptop
==========================*/

@media (max-width:1400px){

    .container{

        max-width:1180px;

    }

    .psychic-hero h1{

        font-size:54px;

    }

    .floating-card{

        min-width:205px;

        padding:16px 18px;

    }

}



/*=========================
1366 / 1340 FIX
==========================*/

@media (max-width:1366px){

    .psychic-hero{

        padding:160px 0 100px;

    }

    .psychic-hero h1{

        font-size:50px;

        max-width:560px;

        line-height:1.15;

    }

    .psychic-hero p{

        max-width:540px;

        font-size:17px;

    }

    .hero-actions .btn{

        min-width:205px;

    }

    .hero-features{

        gap:12px;

    }

    .hero-features div{

        padding:13px 18px;

        font-size:14px;

    }

    .card-one{

        left:-35px;

        top:45px;

    }

    .card-two{

        right:-35px;

        top:215px;

    }

    .card-three{

        left:-25px;

        bottom:25px;

    }

}



/*=========================
1280
==========================*/

@media (max-width:1280px){

    .psychic-hero h1{

        font-size:46px;

    }

    .hero-actions{

        gap:15px;

    }

    .floating-card{

        min-width:190px;

    }

}



/*=========================
Tablet Landscape
==========================*/

@media (max-width:1199px){

    section{

        padding:90px 0;

    }

    .psychic-hero{

        padding-top:150px;

    }

    .psychic-hero h1{

        font-size:42px;

    }

    .hero-actions .btn{

        min-width:190px;

    }

    .floating-card{

        display:none;

    }

}



/*=========================
Bootstrap lg
==========================*/

@media (max-width:991px){

    .psychic-hero{

        text-align:center;

        padding:145px 0 90px;

    }

    .premium-breadcrumb{

        display:flex;

        justify-content:center;

    }

    .psychic-hero h1{

        margin-left:auto;

        margin-right:auto;

        font-size:42px;

        max-width:700px;

    }

    .psychic-hero p{

        margin:auto;

        max-width:700px;

    }

    .hero-actions{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

    .hero-visual{

        margin-top:70px;

        max-width:540px;

    }

}



/*=========================
Tablet Portrait
==========================*/

@media (max-width:768px){

    section{

        padding:80px 0;

    }

    .psychic-hero{

        padding-top:135px;

    }

    .psychic-hero h1{

        font-size:36px;

    }

    .section-title{

        margin-bottom:45px;

    }

    .section-title h2{

        font-size:36px;

    }

    .hero-actions{

        flex-direction:column;

    }

    .hero-actions .btn{

        width:100%;

    }

    .hero-features{

        gap:10px;

    }

    .hero-features div{

        width:100%;

        justify-content:center;

    }

}



/*=========================
Mobile
==========================*/

@media (max-width:576px){

    .psychic-hero{

        padding-top:125px;

    }

    .psychic-hero h1{

        font-size:31px;

    }

    .psychic-hero p{

        font-size:16px;

    }

    .section-title h2{

        font-size:30px!important;

    }

    .section-title p{

        font-size:16px;

    }

    .hero-tag{

        font-size:11px;

        letter-spacing:1px;

        padding:10px 16px;

    }

    .premium-breadcrumb ol{

        width:100%;

        border-radius:18px;

        padding:12px 14px;

        gap:8px;

    }

    .premium-breadcrumb li{

        font-size:12px;

    }

}



/*=========================
390
==========================*/

@media (max-width:390px){

    .psychic-hero h1{

        font-size:28px;

    }

    .hero-tag{

        font-size:10px;

    }

}



/*=========================
360
==========================*/

@media (max-width:360px){

    .psychic-hero{

        padding-top:120px;

    }

    .psychic-hero h1{

        font-size:26px;

    }

    .section-title h2{

        font-size:28px;

    }

}



/*=========================
320
==========================*/

@media (max-width:320px){

    .psychic-hero h1{

        font-size:24px;

    }

    .hero-actions .btn{

        padding:15px 20px;

        font-size:14px;

    }

}



/*=========================================================
PREMIUM SECTION SYSTEM
=========================================================*/

.premium-section{

    position:relative;
    padding:110px 0;
    background:#fff;

}

.premium-section.bg-light{

    background:#faf8ff;

}

.premium-section::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,
    transparent,
    rgba(75,0,130,.12),
    transparent);

}



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

.section-title{

    margin-bottom:65px;

}

.section-title.text-center{

    max-width:900px;
    margin:0 auto 65px;

}

.section-title span{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 24px;

    border-radius:50px;

    background:rgba(75,0,130,.08);

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.section-title h2{

    font-size:48px;

    line-height:1.2;

    margin-bottom:22px;

}

.section-title p{

    max-width:760px;

    margin:auto;

    font-size:17px;

    color:#666;

}



/*=========================================================
PREMIUM CARD
=========================================================*/

.premium-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:35px;

    overflow:hidden;

    height:100%;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 20px 45px rgba(0,0,0,.05);

    transition:.45s ease;

}

.premium-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:0;

    height:4px;

    background:linear-gradient(90deg,
    var(--secondary),
    #ffe28f);

    transition:.45s;

}

.premium-card:hover{

    transform:translateY(-12px);

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

}

.premium-card:hover::before{

    width:100%;

}



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

.premium-icon{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,
    #4B0082,
    #6930a5);

    color:#fff;

    font-size:28px;

    margin-bottom:25px;

    position:relative;

    overflow:hidden;

}

.premium-icon::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    135deg,
    rgba(255,255,255,.35),
    transparent);

}

.premium-card:hover .premium-icon{

    transform:rotate(-6deg) scale(1.08);

}



/*=========================================================
CARD TYPOGRAPHY
=========================================================*/

.premium-card h3{

    font-size:27px;

    margin-bottom:16px;

}

.premium-card p{

    font-size:16px;

    color:#666;

    margin-bottom:0;

}



/*=========================================================
BADGE
=========================================================*/

.premium-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:50px;

    background:#fff8ea;

    color:#b78500;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}



/*=========================================================
GRID SPACING
=========================================================*/

.row.g-4{

    --bs-gutter-y:1.8rem;

}

.row.g-5{

    --bs-gutter-y:3rem;

}

/*=========================================================
PSYCHIC STATS
=========================================================*/

.psychic-stats{

    position:relative;

    margin-top:-70px;

    z-index:10;

    padding:0 0 110px;

}

.stat-item{

    position:relative;

    background:#fff;

    border-radius:26px;

    padding:38px 25px;

    text-align:center;

    height:100%;

    overflow:hidden;

    border:1px solid rgba(75,0,130,.08);

    box-shadow:
    0 18px 45px rgba(0,0,0,.07);

    transition:.4s ease;

}

.stat-item::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,
    var(--secondary),
    #f5d778);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.stat-item:hover{

    transform:translateY(-12px);

    box-shadow:
    0 28px 70px rgba(0,0,0,.10);

}

.stat-item:hover::before{

    transform:scaleX(1);

}

.stat-item i{

    width:78px;

    height:78px;

    margin:auto auto 22px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#fff;

    background:linear-gradient(
    135deg,
    var(--primary),
    #6f2bc6);

    transition:.4s;

}

.stat-item:hover i{

    transform:rotate(-10deg) scale(1.08);

}

.stat-item h3{

    font-size:35px;

    margin-bottom:8px;

    color:var(--primary);

}

.stat-item p{

    margin:0;

    font-size:15px;

    color:#666;

}



/*=========================================================
JOURNEY INTRO
=========================================================*/

.journey-intro{

    position:relative;

    background:#faf8ff;

}

.intro-box{

    position:relative;

    max-width:1050px;

    margin:auto;

    background:#fff;

    padding:55px;

    border-radius:28px;

    border:1px solid rgba(75,0,130,.06);

    box-shadow:

    0 25px 60px rgba(0,0,0,.05);

}

.intro-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:8px;

    height:100%;

    border-radius:20px;

    background:linear-gradient(

    180deg,

    var(--secondary),

    var(--primary)

    );

}

.intro-box p{

    font-size:17px;

    line-height:1.95;

    margin-bottom:24px;

    color:#666;

}

.intro-box p:last-child{

    margin-bottom:0;

}



/*=========================================================
DECORATIVE SHAPES
=========================================================*/

.journey-intro::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(75,0,130,.04);

    left:-130px;

    top:80px;

}

.journey-intro::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

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

    right:-120px;

    bottom:40px;

}



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

@media(max-width:1199px){

    .psychic-stats{

        margin-top:-40px;

    }

    .intro-box{

        padding:40px;

    }

}

@media(max-width:991px){

    .psychic-stats{

        margin-top:0;

        padding-top:90px;

    }

    .stat-item{

        margin-bottom:24px;

    }

    .intro-box{

        padding:35px;

    }

}

@media(max-width:768px){

    .intro-box{

        padding:28px;

    }

    .intro-box::before{

        width:100%;

        height:6px;

    }

    .stat-item h3{

        font-size:25px;

    }

}

@media(max-width:576px){

    .stat-item{

        padding:30px 20px;

    }

    .intro-box{

        padding:24px;

        border-radius:20px;

    }

}

/*=========================================================
AREAS OF GUIDANCE
=========================================================*/

.life-guidance{

    position:relative;

    background:#ffffff;

    overflow:hidden;

}

.life-guidance::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(75,0,130,.035);

    top:-180px;

    right:-150px;

}

.life-guidance::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    bottom:-120px;

    left:-100px;

}



/*=========================================================
GUIDANCE GRID
=========================================================*/

.life-guidance .row{

    position:relative;

    z-index:2;

}



/*=========================================================
GUIDANCE CARD
=========================================================*/

.guidance-box{

    position:relative;

    height:100%;

    background:#fff;

    border-radius:24px;

    padding:38px 32px;

    border:1px solid rgba(75,0,130,.08);

    overflow:hidden;

    transition:.45s ease;

    box-shadow:

    0 18px 45px rgba(0,0,0,.05);

}

.guidance-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:5px;

    background:linear-gradient(

    90deg,

    var(--secondary),

    #f4d46b);

    transition:.45s;

}

.guidance-box:hover{

    transform:translateY(-12px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.10);

}

.guidance-box:hover::before{

    width:100%;

}



/*=========================================================
NUMBER
=========================================================*/

.guidance-number{

    position:absolute;

    top:24px;

    right:28px;

    font-size:54px;

    font-weight:700;

    font-family:'Playfair Display',serif;

    color:rgba(75,0,130,.05);

    user-select:none;

}



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

.guidance-icon{

    width:76px;

    height:76px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:26px;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    #6d2cc2);

    color:#fff;

    font-size:28px;

    transition:.4s;

}

.guidance-box:hover .guidance-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}



/*=========================================================
TEXT
=========================================================*/

.guidance-box h3{

    font-size:25px;

    margin-bottom:15px;

    padding-right:70px;

}

.guidance-box p{

    font-size:16px;

    color:#666;

    line-height:1.8;

    margin-bottom:0;

}



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

.guidance-box::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

    circle at top right,

    rgba(212,175,55,.08),

    transparent 55%);

    opacity:0;

    transition:.45s;

    pointer-events:none;

}

.guidance-box:hover::after{

    opacity:1;

}



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

@media(max-width:1199px){

    .guidance-box{

        padding:34px 28px;

    }

}

@media(max-width:991px){

    .guidance-box{

        margin-bottom:8px;

    }

}

@media(max-width:768px){

    .guidance-number{

        font-size:42px;

    }

    .guidance-box h3{

        font-size:22px;

        padding-right:45px;

    }

}

@media(max-width:576px){

    .guidance-box{

        padding:28px 24px;

        border-radius:20px;

    }

    .guidance-icon{

        width:66px;

        height:66px;

        font-size:24px;

    }

    .guidance-number{

        font-size:34px;

        right:20px;

        top:18px;

    }

}

/*=========================================================
FEATURE HIGHLIGHT
=========================================================*/

.psychic-highlight{

    position:relative;

    background:linear-gradient(
    135deg,
    #f9f7ff 0%,
    #ffffff 100%);

    overflow:hidden;

}

.psychic-highlight::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(75,0,130,.04);

    top:-220px;

    left:-180px;

}

.psychic-highlight::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    right:-140px;

    bottom:-120px;

}



/*=========================
Wrapper
==========================*/

.highlight-wrapper{

    position:relative;

    z-index:2;

    background:#fff;

    border-radius:34px;

    padding:70px;

    overflow:hidden;

    border:1px solid rgba(75,0,130,.08);

    box-shadow:

    0 30px 80px rgba(0,0,0,.06);

}



/*=========================
Image
==========================*/

.highlight-image{

    position:relative;

}

.highlight-image img{

    width:100%;

    border-radius:26px;

    transition:.45s;

    box-shadow:

    0 30px 70px rgba(0,0,0,.14);

}

.highlight-image:hover img{

    transform:scale(1.03);

}



/*=========================
Image Border
==========================*/

.highlight-image::before{

    content:"";

    position:absolute;

    inset:-14px;

    border-radius:30px;

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

    z-index:-1;

}



/*=========================
Content
==========================*/

.highlight-content{

    padding-left:35px;

}

.highlight-content span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    background:rgba(75,0,130,.08);

    color:var(--primary);

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:24px;

}

.highlight-content h2{

    font-size:46px;

    line-height:1.18;

    margin-bottom:24px;

}

.highlight-content p{

    font-size:17px;

    line-height:1.9;

    color:#666;

    margin-bottom:30px;

}



/*=========================
Checklist
==========================*/

.highlight-content ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.highlight-content li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    font-size:16px;

    color:#555;

}

.highlight-content li i{

    width:42px;

    height:42px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    var(--secondary),
    #f5d878);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.35s;

}

.highlight-content li:hover i{

    transform:rotate(-10deg) scale(1.08);

}



/*=========================
Responsive
==========================*/

@media(max-width:1200px){

    .highlight-wrapper{

        padding:55px;

    }

}

@media(max-width:991px){

    .highlight-content{

        padding-left:0;

        padding-top:50px;

        text-align:center;

    }

    .highlight-content ul{

        margin-top:20px;

    }

    .highlight-content li{

        justify-content:center;

        text-align:left;

    }

}

@media(max-width:768px){

    .highlight-wrapper{

        padding:40px 28px;

        border-radius:24px;

    }

    .highlight-content h2{

        font-size:34px;

    }

}

@media(max-width:576px){

    .highlight-wrapper{

        padding:28px 22px;

    }

    .highlight-content h2{

        font-size:29px;

    }

    .highlight-content p{

        font-size:16px;

    }

}

/*=========================================================
CONSULTATION JOURNEY
=========================================================*/

.consultation-journey{

    position:relative;

    background:#ffffff;

    overflow:hidden;

}

.consultation-journey::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(75,0,130,.03);

    right:-180px;

    top:-180px;

}

.consultation-journey::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    left:-120px;

    bottom:-80px;

}



/*=========================================================
TIMELINE
=========================================================*/

.journey-timeline{

    position:relative;

    max-width:980px;

    margin:70px auto 0;

    padding-left:70px;

}

.journey-timeline::before{

    content:"";

    position:absolute;

    left:34px;

    top:0;

    bottom:0;

    width:4px;

    border-radius:20px;

    background:linear-gradient(

    180deg,

    var(--secondary),

    var(--primary)

    );

}



/*=========================================================
ITEM
=========================================================*/

.journey-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:30px;

    margin-bottom:60px;

}

.journey-item:last-child{

    margin-bottom:0;

}



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

.journey-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(

    135deg,

    var(--primary),

    #6d2cc2);

    color:#fff;

    font-size:26px;

    box-shadow:

    0 15px 35px rgba(75,0,130,.22);

    position:relative;

    z-index:2;

    transition:.35s;

}

.journey-item:hover .journey-icon{

    transform:scale(1.08) rotate(-8deg);

}



/*=========================================================
CONTENT
=========================================================*/

.journey-content{

    flex:1;

    background:#fff;

    border-radius:24px;

    padding:34px;

    border:1px solid rgba(75,0,130,.07);

    box-shadow:

    0 20px 45px rgba(0,0,0,.05);

    transition:.35s;

}

.journey-item:hover .journey-content{

    transform:translateY(-8px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.08);

}



/*=========================================================
STEP
=========================================================*/

.step-number{

    display:inline-block;

    margin-bottom:15px;

    color:var(--secondary);

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

}

.journey-content h3{

    font-size:28px;

    margin-bottom:16px;

}

.journey-content p{

    margin:0;

    color:#666;

    line-height:1.9;

}



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

.journey-content::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:5px;

    background:linear-gradient(

    90deg,

    var(--secondary),

    #f5d778);

    transition:.4s;

}

.journey-item:hover .journey-content::before{

    width:100%;

}



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

@media(max-width:991px){

    .journey-timeline{

        padding-left:40px;

    }

    .journey-timeline::before{

        left:22px;

    }

    .journey-icon{

        width:52px;

        height:52px;

        min-width:52px;

        font-size:18px;

    }

}

@media(max-width:768px){

    .journey-timeline{

        padding-left:0;

    }

    .journey-timeline::before{

        display:none;

    }

    .journey-item{

        flex-direction:column;

        gap:20px;

        margin-bottom:35px;

    }

    .journey-icon{

        margin:auto;

    }

    .journey-content{

        padding:28px;

        text-align:center;

    }

}

@media(max-width:576px){

    .journey-content{

        padding:24px;

    }

    .journey-content h3{

        font-size:23px;

    }

}

/*=========================================================
EXPERIENCE SECTION
=========================================================*/

.experience-section{

    position:relative;

    background:linear-gradient(
    135deg,
    #faf8ff 0%,
    #ffffff 100%);

    overflow:hidden;

}

.experience-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(75,0,130,.04);

    left:-180px;

    bottom:-180px;

}

.experience-section::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    right:-120px;

    top:-80px;

}



/*=========================================================
IMAGE
=========================================================*/

.experience-image{

    position:relative;

}

.experience-image img{

    width:100%;

    border-radius:28px;

    transition:.45s;

    box-shadow:

    0 30px 80px rgba(0,0,0,.15);

}

.experience-image:hover img{

    transform:scale(1.03);

}

.experience-image::before{

    content:"";

    position:absolute;

    inset:-14px;

    border-radius:34px;

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

    z-index:-1;

}



/*=========================================================
CONTENT
=========================================================*/

.experience-section p{

    font-size:17px;

    line-height:1.9;

    color:#666;

    margin-bottom:35px;

}



/*=========================================================
FEATURE GRID
=========================================================*/

.experience-section .row.g-3{

    --bs-gutter-x:1.5rem;

    --bs-gutter-y:1.5rem;

}



/*=========================================================
FEATURE CARD
=========================================================*/

.experience-card{

    position:relative;

    background:#fff;

    border-radius:22px;

    padding:28px;

    height:100%;

    overflow:hidden;

    border:1px solid rgba(75,0,130,.07);

    box-shadow:

    0 18px 45px rgba(0,0,0,.05);

    transition:.4s;

}

.experience-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
    90deg,
    var(--secondary),
    #f5d878);

    transition:.4s;

}

.experience-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 28px 70px rgba(0,0,0,.10);

}

.experience-card:hover::before{

    width:100%;

}



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

.experience-card i{

    width:68px;

    height:68px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
    135deg,
    var(--primary),
    #6d2cc2);

    color:#fff;

    font-size:26px;

    margin-bottom:22px;

    transition:.35s;

}

.experience-card:hover i{

    transform:rotate(-8deg) scale(1.08);

}



/*=========================================================
TEXT
=========================================================*/

.experience-card h4{

    font-size:22px;

    margin-bottom:12px;

    color:var(--heading);

}

.experience-card p{

    margin:0;

    font-size:15px;

    color:#666;

    line-height:1.8;

}



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

@media(max-width:1199px){

    .experience-card{

        padding:24px;

    }

}

@media(max-width:991px){

    .experience-image{

        margin-bottom:50px;

    }

}

@media(max-width:768px){

    .experience-section{

        text-align:center;

    }

    .experience-card{

        text-align:center;

    }

    .experience-card i{

        margin:0 auto 20px;

    }

}

@media(max-width:576px){

    .experience-card{

        padding:22px;

        border-radius:18px;

    }

    .experience-card h4{

        font-size:20px;

    }

}

/*=========================================================
READING PURPOSE
=========================================================*/

.reading-purpose{

    position:relative;

    background:#ffffff;

    overflow:hidden;

}

.reading-purpose::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(75,0,130,.03);

    top:-180px;

    right:-180px;

}

.reading-purpose::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

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

    left:-120px;

    bottom:-120px;

}



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

.reading-purpose .row{

    position:relative;

    z-index:2;

}



/*=========================================================
CARD
=========================================================*/

.purpose-card{

    position:relative;

    background:#fff;

    height:100%;

    border-radius:24px;

    padding:35px;

    overflow:hidden;

    border:1px solid rgba(75,0,130,.08);

    box-shadow:

    0 20px 45px rgba(0,0,0,.05);

    transition:.45s;

}

.purpose-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:5px;

    background:linear-gradient(
    90deg,
    var(--secondary),
    #f5d878);

    transition:.45s;

}

.purpose-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 70px rgba(0,0,0,.10);

}

.purpose-card:hover::before{

    width:100%;

}



/*=========================================================
FEATURED
=========================================================*/

.featured-card{

    min-height:320px;

}



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

.small-card{

    text-align:center;

    min-height:240px;

}



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

.purpose-icon{

    width:74px;

    height:74px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
    135deg,
    var(--primary),
    #6d2cc2);

    color:#fff;

    font-size:28px;

    margin-bottom:25px;

    transition:.35s;

}

.purpose-card:hover .purpose-icon{

    transform:rotate(-8deg) scale(1.08);

}



/*=========================================================
TYPOGRAPHY
=========================================================*/

.featured-card h3{

    font-size:28px;

    margin-bottom:18px;

}

.featured-card p{

    line-height:1.9;

    color:#666;

}



.small-card h4{

    font-size:22px;

    margin-bottom:14px;

}

.small-card p{

    font-size:15px;

    line-height:1.7;

    color:#666;

}



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

.purpose-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

    circle at top right,

    rgba(212,175,55,.08),

    transparent 55%

    );

    opacity:0;

    transition:.45s;

}

.purpose-card:hover::after{

    opacity:1;

}



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

@media(max-width:1199px){

    .featured-card{

        min-height:300px;

    }

}

@media(max-width:991px){

    .featured-card{

        min-height:auto;

    }

    .small-card{

        min-height:220px;

    }

}

@media(max-width:768px){

    .purpose-card{

        padding:28px;

    }

    .featured-card h3{

        font-size:24px;

    }

}

@media(max-width:576px){

    .purpose-card{

        padding:24px;

        border-radius:20px;

        text-align:center;

    }

    .purpose-icon{

        margin:0 auto 20px;

    }

    .small-card{

        min-height:auto;

    }

}

/*=========================================================
FEATURED MESSAGE
=========================================================*/

.psychic-message{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
    135deg,
    #2c014d 0%,
    #4B0082 100%);

    overflow:hidden;

}

.psychic-message::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(212,175,55,.15),
    transparent 35%);

}

.psychic-message::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    left:-180px;

    bottom:-180px;

}

.message-box{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;

    color:#fff;

}

.message-icon{

    width:95px;

    height:95px;

    margin:0 auto 35px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
    135deg,
    var(--secondary),
    #f6da83);

    color:#fff;

    font-size:34px;

    box-shadow:
    0 20px 45px rgba(212,175,55,.35);

}

.message-box h2{

    color:#fff;

    font-size:48px;

    margin-bottom:28px;

}

.message-box p{

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

    font-size:19px;

    line-height:2;

    max-width:760px;

    margin:0 auto 35px;

}

.message-box span{

    display:inline-block;

    padding-top:18px;

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

    font-size:18px;

    color:var(--secondary);

    letter-spacing:1px;

}



/*=========================================================
LOCAL PRESENCE
=========================================================*/

.local-presence{

    position:relative;

    background:#faf8ff;

    overflow:hidden;

}

.local-image{

    position:relative;

}

.local-image img{

    width:100%;

    border-radius:28px;

    box-shadow:
    0 30px 70px rgba(0,0,0,.15);

    transition:.45s;

}

.local-image:hover img{

    transform:scale(1.03);

}

.local-image::before{

    content:"";

    position:absolute;

    inset:-14px;

    border-radius:34px;

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

    z-index:-1;

}



/*=========================================================
CITY LIST
=========================================================*/

.service-city-list{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:35px;

}

.service-city-list span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 20px;

    border-radius:50px;

    background:#fff;

    border:1px solid rgba(75,0,130,.08);

    box-shadow:
    0 12px 28px rgba(0,0,0,.05);

    transition:.35s;

}

.service-city-list span:hover{

    transform:translateY(-5px);

    border-color:var(--secondary);

}

.service-city-list i{

    color:var(--secondary);

}



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

@media(max-width:991px){

    .local-image{

        margin-bottom:50px;

    }

    .message-box h2{

        font-size:38px;

    }

}

@media(max-width:768px){

    .message-box{

        padding:0 10px;

    }

    .message-box h2{

        font-size:32px;

    }

    .message-box p{

        font-size:17px;

    }

    .service-city-list{

        justify-content:center;

    }

}

@media(max-width:576px){

    .psychic-message{

        padding:90px 0;

    }

    .message-icon{

        width:80px;

        height:80px;

        font-size:28px;

    }

    .message-box h2{

        font-size:28px;

    }

    .service-city-list span{

        width:100%;

        justify-content:center;

    }

}

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

.psychic-map{

    position:relative;

    background:#ffffff;

    overflow:hidden;

}

.map-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    border:8px solid #fff;

    box-shadow:

    0 30px 80px rgba(0,0,0,.10);

}

.map-wrapper iframe{

    width:100%;

    height:560px;

    border:0;

    display:block;

}



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

.map-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

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

    pointer-events:none;

    transition:.35s;

}

.map-wrapper:hover::before{

    border-color:var(--secondary);

}



/*=========================================================
NEARBY COMMUNITIES
=========================================================*/

.nearby-communities{

    position:relative;

    background:#faf8ff;

    overflow:hidden;

}

.nearby-communities::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(75,0,130,.04);

    right:-180px;

    top:-180px;

}

.nearby-communities::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    left:-120px;

    bottom:-120px;

}



/*=========================================================
COMMUNITY CARD
=========================================================*/

.community-card{

    position:relative;

    display:block;

    height:100%;

    background:#fff;

    border-radius:26px;

    padding:35px;

    overflow:hidden;

    border:1px solid rgba(75,0,130,.08);

    box-shadow:

    0 20px 45px rgba(0,0,0,.05);

    transition:.45s;

    color:inherit;

}

.community-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:5px;

    background:

    linear-gradient(

    90deg,

    var(--secondary),

    #f5d878);

    transition:.45s;

}

.community-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 35px 80px rgba(0,0,0,.10);

    text-decoration:none;

}

.community-card:hover::before{

    width:100%;

}



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

.community-icon{

    width:74px;

    height:74px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    #6930a5);

    color:#fff;

    font-size:28px;

    margin-bottom:25px;

    transition:.35s;

}

.community-card:hover .community-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}



/*=========================================================
TEXT
=========================================================*/

.community-card h3{

    font-size:28px;

    margin-bottom:16px;

    color:var(--heading);

}

.community-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.community-card span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:600;

    transition:.35s;

}

.community-card:hover span{

    color:var(--secondary);

    gap:16px;

}



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

@media(max-width:1200px){

    .community-card{

        padding:30px;

    }

}

@media(max-width:991px){

    .map-wrapper iframe{

        height:460px;

    }

}

@media(max-width:768px){

    .community-card{

        text-align:center;

    }

    .community-icon{

        margin:0 auto 22px;

    }

    .community-card h3{

        font-size:24px;

    }

}

@media(max-width:576px){

    .map-wrapper{

        border-radius:20px;

    }

    .map-wrapper iframe{

        height:340px;

    }

    .community-card{

        padding:24px;

        border-radius:20px;

    }

}

/*=========================================================
PREMIUM FAQ
=========================================================*/

.services-faq-section{

    position:relative;

    background:#ffffff;

    overflow:hidden;

}

.services-faq-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(75,0,130,.04);

    top:-200px;

    left:-180px;

}

.services-faq-section::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

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

    bottom:-120px;

    right:-120px;

}



/*=========================================================
ACCORDION
=========================================================*/

.services-faq-section .accordion{

    max-width:950px;

    margin:auto;

}

.services-faq-section .accordion-item{

    border:none;

    margin-bottom:18px;

    overflow:hidden;

    border-radius:20px;

    background:#fff;

    box-shadow:

    0 15px 35px rgba(0,0,0,.05);

}

.services-faq-section .accordion-button{

    background:#fff;

    padding:28px 30px;

    font-size:19px;

    font-weight:600;

    color:var(--heading);

    box-shadow:none;

}

.services-faq-section .accordion-button:not(.collapsed){

    background:#fff;

    color:var(--primary);

}

.services-faq-section .accordion-button:focus{

    box-shadow:none;

}

.services-faq-section .accordion-button::after{

    transition:.35s;

}

.services-faq-section .accordion-body{

    padding:0 30px 28px;

    color:#666;

    line-height:1.9;

}



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

.psychic-cta{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
    135deg,
    #2b014b,
    #4B0082);

    color:#fff;

}

.cta-wrapper{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.cta-wrapper span{

    display:inline-block;

    color:#D4AF37;

    letter-spacing:2px;

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}

.cta-wrapper h2{

    color:#fff;

    font-size:52px;

    margin-bottom:25px;

}

.cta-wrapper p{

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

    font-size:18px;

    line-height:1.9;

    max-width:760px;

    margin:auto auto 40px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.cta-buttons .btn{

    min-width:220px;

}



/*=========================================================
RELATED SERVICES
=========================================================*/

.related-services{

    background:#faf8ff;

}

.related-service-card{

    position:relative;

    display:block;

    background:#fff;

    height:100%;

    padding:35px;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(75,0,130,.08);

    box-shadow:

    0 18px 45px rgba(0,0,0,.05);

    transition:.4s;

    color:inherit;

}

.related-service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:5px;

    background:

    linear-gradient(

    90deg,

    var(--secondary),

    #f6d77b);

    transition:.4s;

}

.related-service-card:hover{

    transform:translateY(-10px);

    text-decoration:none;

    box-shadow:

    0 30px 70px rgba(0,0,0,.09);

}

.related-service-card:hover::before{

    width:100%;

}



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

.related-icon{

    width:74px;

    height:74px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    #6d2cc2);

    color:#fff;

    font-size:28px;

    margin-bottom:24px;

    transition:.35s;

}

.related-service-card:hover .related-icon{

    transform:rotate(-8deg) scale(1.08);

}



/*=========================================================
TEXT
=========================================================*/

.related-service-card h3{

    font-size:26px;

    margin-bottom:15px;

}

.related-service-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.related-service-card span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:600;

}

.related-service-card:hover span{

    color:var(--secondary);

    gap:16px;

}



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

@media(max-width:991px){

    .cta-wrapper h2{

        font-size:42px;

    }

}

@media(max-width:768px){

    .cta-wrapper h2{

        font-size:34px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

    }

    .services-faq-section .accordion-button{

        font-size:17px;

        padding:22px;

    }

}

@media(max-width:576px){

    .cta-wrapper h2{

        font-size:29px;

    }

    .cta-wrapper p{

        font-size:16px;

    }

    .related-service-card{

        padding:26px;

    }

    .related-icon{

        margin:0 auto 20px;

    }

    .related-service-card{

        text-align:center;

    }

}

/*=========================================================
SCROLL REVEAL
=========================================================*/

.scroll-reveal{

opacity:0;

transform:translateY(45px);

transition:

opacity .8s ease,

transform .8s ease;

}

.active-reveal{

opacity:1;

transform:none;

}

/*=========================================================
PREMIUM REVEAL
=========================================================*/

.scroll-reveal{

opacity:0;

transform:translateY(50px);

transition:

opacity .8s cubic-bezier(.2,.65,.2,1),

transform .8s cubic-bezier(.2,.65,.2,1);

will-change:transform,opacity;

}

.active-reveal{

opacity:1;

transform:translateY(0);

}

/* Left */

.reveal-left{

opacity:0;

transform:translateX(-70px);

transition:.8s cubic-bezier(.2,.65,.2,1);

}

.reveal-left.active-reveal{

opacity:1;

transform:none;

}



/* Right */

.reveal-right{

opacity:0;

transform:translateX(70px);

transition:.8s cubic-bezier(.2,.65,.2,1);

}

.reveal-right.active-reveal{

opacity:1;

transform:none;

}



/* Scale */

.reveal-scale{

opacity:0;

transform:scale(.92);

transition:.8s;

}

.reveal-scale.active-reveal{

opacity:1;

transform:scale(1);

}

.foot{
    color:rgba(255,255,255,.75);
}

/*=========================================================
LOCATION CARD
=========================================================*/

.location-card{

    display:flex;

    align-items:center;

    gap:22px;

    background:#fff;

    padding:28px;

    border-radius:22px;

    height:100%;

    text-decoration:none;

    color:inherit;

    border:1px solid rgba(75,0,130,.08);

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    transition:.35s;

}

.location-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 60px rgba(0,0,0,.09);

}

.location-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,var(--primary),#6d2cc2);

    color:#fff;

    font-size:24px;

    flex-shrink:0;

}

.location-content{

    flex:1;

}

.location-content h3{

    margin-bottom:8px;

    font-size:24px;

}

.location-content p{

    margin:0;

    color:#666;

    font-size:15px;

}

.location-card span{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--secondary);

    font-weight:600;

}

.location-card:hover span{

    gap:14px;

}

@media(max-width:768px){

.location-card{

padding:22px;

}

.location-content h3{

font-size:20px;

}

}

@media(max-width:576px){

.location-card{

flex-direction:column;

text-align:center;

}

}

/*=========================================================
GUIDANCE MOMENTS
=========================================================*/

.guidance-moments{

    position:relative;

    background:#faf8ff;

    overflow:hidden;

}

.guidance-moments::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(75,0,130,.04);

    top:-180px;

    right:-180px;

}

.guidance-moments::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

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

    left:-120px;

    bottom:-120px;

}



/*=========================================================
MOMENT CARD
=========================================================*/

.moment-card{

    position:relative;

    background:#fff;

    height:100%;

    padding:35px;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(75,0,130,.08);

    box-shadow:

    0 20px 45px rgba(0,0,0,.05);

    transition:.4s;

}

.moment-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:5px;

    background:

    linear-gradient(

    90deg,

    var(--secondary),

    #f6d77b);

    transition:.4s;

}

.moment-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.10);

}

.moment-card:hover::before{

    width:100%;

}



/*=========================================================
NUMBER
=========================================================*/

.moment-card::after{

    counter-increment:moment;

    content:"0" counter(moment);

    position:absolute;

    top:24px;

    right:28px;

    font-size:52px;

    font-family:'Playfair Display',serif;

    font-weight:700;

    color:rgba(75,0,130,.05);

}



/*=========================================================
TITLE
=========================================================*/

.moment-card h3{

    position:relative;

    margin-bottom:18px;

    padding-bottom:16px;

    font-size:26px;

}

.moment-card h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:3px;

    border-radius:20px;

    background:var(--secondary);

}



/*=========================================================
TEXT
=========================================================*/

.moment-card p{

    margin:0;

    color:#666;

    line-height:1.9;

    font-size:16px;

}



/*=========================================================
RESET COUNTER
=========================================================*/

.guidance-moments .row{

    counter-reset:moment;

}



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

@media(max-width:768px){

    .moment-card{

        padding:28px;

    }

    .moment-card h3{

        font-size:22px;

    }

    .moment-card::after{

        font-size:40px;

        top:18px;

        right:20px;

    }

}

@media(max-width:576px){

    .moment-card{

        padding:24px;

        border-radius:20px;

    }

}


/*=========================================================
LOCATION CHIPS
=========================================================*/

.location-chip-wrapper{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
    margin-top:50px;

}

.location-chip{

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

    min-width:180px;

    padding:16px 28px;

    border-radius:50px;

    text-decoration:none !important;

    color:#222 !important;

    font-weight:600;

    background:#fff;

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

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.location-chip:hover{

    background:#4B0082;

    color:#fff !important;

    border-color:#4B0082;

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(75,0,130,.25);

}

.location-chip:visited,
.location-chip:active,
.location-chip:focus{

    color:#222 !important;

    text-decoration:none !important;

}

.location-chip:hover:visited,
.location-chip:hover:active,
.location-chip:hover:focus{

    color:#fff !important;

}

@media(max-width:768px){

    .location-chip{

        width:100%;

        min-width:unset;

    }

}

/*=========================================================
LOVE SPELL HERO
=========================================================*/

.love-hero-section{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    padding:120px 0 90px;

    background:
    radial-gradient(circle at top left,
    rgba(212,175,55,.12),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(255,120,180,.08),
    transparent 35%),

    linear-gradient(
    135deg,
    #22003f 0%,
    #3b0069 45%,
    #250046 100%);

}

/* Decorative layers should never block clicks */

.hero-stars,
.hero-glow,
.hero-orb,
.hero-orb-one,
.hero-orb-two{

    pointer-events:none;
    z-index:1;

}

.love-hero-wrapper{

    position:relative;

    z-index:20;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:70px;

    margin-top:40px;

}



/*=========================================================
IMAGE
=========================================================*/

.love-hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:5;

}

.love-hero-image img{

    width:100%;

    max-width:620px;

    border-radius:28px;

    position:relative;

    z-index:5;

    display:block;

    box-shadow:
    0 30px 80px rgba(0,0,0,.35);

}



/*=========================================================
YANTRA
=========================================================*/

.love-hero-image::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:50%;

    top:50%;

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

    background:url("../images/yant.png") center center no-repeat;

    background-size:contain;

    opacity:.10;

    animation:rotateYantra 80s linear infinite;

    z-index:1;

    pointer-events:none;

}



/*=========================================================
GLASS CARD
=========================================================*/

.love-hero-card{

    position:relative;

    z-index:100;

    padding:50px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:
    0 30px 70px rgba(0,0,0,.25);

}

.love-hero-card h1{

    font-size:48px;

    line-height:1.15;

    color:#fff;

    margin:18px 0 22px;

}

.love-hero-card p{

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

    line-height:1.9;

    font-size:17px;

}



/*=========================================================
BUTTONS
=========================================================*/

.love-hero-card .hero-actions{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-top:32px;

    position:relative;

    z-index:200;

}

.love-hero-card .hero-actions .btn{

    position:relative;

    z-index:200;

}



/*=========================================================
BADGES
=========================================================*/

.hero-badge{

    position:absolute;

    background:#fff;

    padding:14px 22px;

    border-radius:60px;

    font-weight:600;

    color:#4B0082;

    box-shadow:
    0 15px 35px rgba(0,0,0,.18);

    z-index:15;

    pointer-events:none;

}

.badge-one{

    top:35px;

    left:-30px;

}

.badge-two{

    right:-20px;

    top:45%;

}

.badge-three{

    bottom:40px;

    left:40px;

}



/*=========================================================
FEATURE GRID
=========================================================*/

.love-feature-grid{

    display:grid;

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

    gap:18px;

    margin-top:35px;

}

.love-feature-grid div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px;

    border-radius:16px;

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

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

    color:#fff;

}

.love-feature-grid i{

    color:#D4AF37;

    font-size:22px;

}



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

@media(max-width:991px){

    .love-hero-wrapper{

        grid-template-columns:1fr;

        gap:45px;

    }

    .love-hero-image{

        order:2;

    }

    .love-hero-card{

        order:1;

        padding:35px;

    }

    .love-hero-card h1{

        font-size:38px;

    }

    .love-hero-image::before{

        width:520px;

        height:520px;

    }

}

@media(max-width:767px){

    .love-hero-section{

        padding:100px 0 70px;

    }

    .love-hero-card{

        padding:28px;

    }

    .love-hero-card h1{

        font-size:30px;

    }

    .love-feature-grid{

        grid-template-columns:1fr;

    }

    .hero-badge{

        position:static;

        display:inline-flex;

        margin-top:12px;

    }

    .love-hero-image{

        flex-direction:column;

        gap:12px;

    }

    .love-hero-image img{

        max-width:100%;

    }

    .love-hero-image::before{

        width:380px;

        height:380px;

    }

}