/*=========================================================
 SARVAMCHANDHA
 Production CSS
 Version : 1.0
 Author  : Sarvamchandha
=========================================================*/

/*=========================================================
 GOOGLE FONTS
=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&family=Noto+Serif+Devanagari:wght@400;700&display=swap');


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

:root{

--primary:#5B1E1E;

--secondary:#D4AF37;

--secondary-light:#E8C766;

--background:#F8F2E7;

--surface:#FFFDF8;

--text:#333333;

--text-light:#666666;

--white:#FFFFFF;

--border:#E6D9B8;

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

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

--radius:14px;

--transition:.35s ease;

--container:1280px;

}


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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:var(--background);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}

ul{

list-style:none;

}

button{

font-family:inherit;

cursor:pointer;

transition:var(--transition);

border:none;

outline:none;

}

input,
textarea,
select{

font-family:inherit;

outline:none;

}


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

.container{

width:92%;

max-width:var(--container);

margin:auto;

}


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

section{

padding:90px 0;

position:relative;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-family:'Cinzel',serif;

font-size:40px;

font-weight:700;

color:var(--primary);

margin-bottom:15px;

position:relative;

display:inline-block;

}

.section-title h2::after{

content:"";

position:absolute;

left:50%;

bottom:-12px;

transform:translateX(-50%);

width:80px;

height:3px;

background:var(--secondary);

border-radius:50px;

}

.section-title p{

max-width:760px;

margin:auto;

font-size:17px;

color:var(--text-light);

}


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

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 34px;

background:var(--secondary);

color:#222;

border-radius:50px;

font-weight:600;

box-shadow:var(--shadow);

transition:var(--transition);

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:var(--shadow-hover);

background:#E0B942;

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 34px;

background:var(--primary);

color:white;

border-radius:50px;

font-weight:600;

box-shadow:var(--shadow);

transition:var(--transition);

}

.btn-secondary:hover{

transform:translateY(-3px);

background:#732626;

box-shadow:var(--shadow-hover);

}

.btn-full{

width:100%;

}


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

.card{

background:white;

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:35px;

transition:var(--transition);

}

.card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-hover);

}


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

h1,
h2,
h3,
h4{

font-family:'Cinzel',serif;

font-weight:600;

line-height:1.3;

}

p{

margin-bottom:15px;

}

.gold{

color:var(--secondary);

}

.maroon{

color:var(--primary);

}


/*=========================================================
 SCROLL BAR
=========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#F2E8D4;

}

::-webkit-scrollbar-thumb{

background:var(--secondary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#C89B28;

}


/*=========================================================
 PROGRESS BAR
=========================================================*/

#progressBar{

position:fixed;

left:0;

top:0;

height:4px;

width:0;

background:linear-gradient(90deg,#D4AF37,#F5D56B);

z-index:99999;

}


/*=========================================================
 FADE ANIMATION
=========================================================*/

.fade-up{

opacity:0;

transform:translateY(50px);

transition:all .9s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/*=========================================================
TOP CONTACT BAR
=========================================================*/

.topbar{

background:var(--primary);

color:white;

font-size:14px;

padding:10px 0;

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

}

.topbar .container{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

}

.top-left{

display:flex;

gap:25px;

align-items:center;

flex-wrap:wrap;

}

.top-left span{

display:flex;

align-items:center;

gap:8px;

}

.top-left a:hover{

color:var(--secondary);

}

.top-social{

display:flex;

gap:18px;

font-size:20px;

}

.top-social a{

transition:var(--transition);

}

.top-social a:hover{

color:var(--secondary);

transform:translateY(-3px);

}


/*=========================================================
HEADER
=========================================================*/

#header{

position:sticky;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(248,242,231,.95);

backdrop-filter:blur(12px);

box-shadow:0 5px 20px rgba(0,0,0,.08);

transition:.3s;

}

#header.scrolled{

padding:0;

box-shadow:0 12px 25px rgba(0,0,0,.15);

}


/*=========================================================
NAVBAR
=========================================================*/

.navbar{

height:88px;

display:flex;

align-items:center;

}

.navbar .container{

display:flex;

align-items:center;

justify-content:space-between;

}


/*=========================================================
LOGO
=========================================================*/

.logo{

display:flex;

align-items:center;

gap:18px;

}

.logo img{

width:72px;

height:72px;

object-fit:contain;

transition:var(--transition);

}

.logo img:hover{

transform:rotate(-4deg) scale(1.05);

}

.logo h2{

font-size:28px;

font-weight:700;

color:var(--primary);

margin:0;

letter-spacing:.5px;

}

.logo p{

margin-top:3px;

margin-bottom:0;

font-size:13px;

color:var(--secondary);

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

}


/*=========================================================
NAVIGATION LINKS
=========================================================*/

.nav-links{

display:flex;

align-items:center;

gap:38px;

}

.nav-links li{

position:relative;

}

.nav-links a{

font-size:16px;

font-weight:500;

color:var(--text);

transition:var(--transition);

padding:8px 0;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:3px;

background:var(--secondary);

transition:var(--transition);

border-radius:20px;

}

.nav-links a:hover::after{

width:100%;

}


/*=========================================================
MOBILE MENU
=========================================================*/

.mobile-menu{

display:none;

font-size:34px;

cursor:pointer;

color:var(--primary);

transition:.3s;

}

.mobile-menu:hover{

color:var(--secondary);

}


/*=========================================================
ACTIVE MENU
=========================================================*/

.nav-links a.active{

color:var(--primary);

font-weight:700;

}

.nav-links a.active::after{

width:100%;

}


/*=========================================================
HEADER SHADOW EFFECT
=========================================================*/

header::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:1px;

background:linear-gradient(

90deg,

transparent,

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

transparent

);

}


/*=========================================================
DESKTOP MENU SPACING
=========================================================*/

@media(min-width:1200px){

.nav-links{

gap:45px;

}

}


/*=========================================================
LARGE DESKTOP
=========================================================*/

@media(min-width:1500px){

.logo h2{

font-size:30px;

}

.nav-links a{

font-size:17px;

}

}


/*=========================================================
TABLET
=========================================================*/

@media (max-width: 992px) {

    .topbar {

        display: none;

    }

    #header {

        position: sticky;

        top: 0;

        z-index: 9999;

    }

    .navbar {

        position: relative;

        z-index: 9999;

    }

    .navbar .container {

        position: relative;

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

    .logo img {

        width: 60px;

        height: 60px;

    }

    .logo h2 {

        font-size: 24px;

    }

    .logo p {

        font-size: 11px;

    }

    .mobile-menu {

        position: relative;

        z-index: 10002;

        display: flex;

        width: 46px;

        height: 46px;

        padding: 0;

        flex: 0 0 46px;

        align-items: center;

        justify-content: center;

        background: transparent;

        color: var(--maroon, #5B1E1E);

        border: 1px solid rgba(91, 30, 30, 0.25);

        border-radius: 8px;

        font-size: 30px;

        line-height: 1;

        cursor: pointer;

        transition:
            background 0.3s ease,
            color 0.3s ease,
            border-color 0.3s ease;

    }

    .mobile-menu:hover,
    .mobile-menu:focus-visible {

        background: var(--maroon, #5B1E1E);

        color: #FFFFFF;

        border-color: var(--maroon, #5B1E1E);

    }

    .mobile-menu i {

        pointer-events: none;

    }

    .nav-links {

        position: absolute;

        top: calc(100% + 1px);

        left: 0;

        right: 0;

        z-index: 10001;

        display: flex;

        width: 100%;

        max-height: 0;

        margin: 0;

        padding: 0 24px;

        overflow: hidden;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        background: #FFFFFF;

        border-top: 1px solid rgba(91, 30, 30, 0.12);

        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15);

        opacity: 0;

        visibility: hidden;

        transform: translateY(-10px);

        transition:
            max-height 0.35s ease,
            padding 0.35s ease,
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.35s ease;

    }

    .nav-links.show {

        max-height: 650px;

        padding-top: 18px;

        padding-bottom: 18px;

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }

    .nav-links li {

        display: block;

        width: 100%;

        margin: 0;

        border-bottom: 1px solid rgba(91, 30, 30, 0.10);

    }

    .nav-links li:last-child {

        border-bottom: none;

    }

    .nav-links a {

        display: block;

        width: 100%;

        padding: 14px 6px;

        color: var(--maroon, #5B1E1E);

        font-size: 15px;

        font-weight: 500;

        text-align: left;

    }

    .nav-links a::after {

        display: none;

    }

    .nav-links a:hover,
    .nav-links a.active {

        color: var(--gold, #D4AF37);

    }

}


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

@media (max-width: 576px) {

    .navbar {

        height: 80px;

    }

    .logo img {

        width: 54px;

        height: 54px;

    }

    .logo h2 {

        font-size: 21px;

    }

    .logo p {

        display: none;

    }

    .mobile-menu {

        width: 42px;

        height: 42px;

        flex-basis: 42px;

        font-size: 27px;

    }

    .nav-links {

        padding-left: 18px;

        padding-right: 18px;

    }

    .nav-links.show {

        padding-top: 14px;

        padding-bottom: 14px;

    }

    .nav-links a {

        padding: 13px 4px;

        font-size: 14px;

    }

}


/*=========================================================
MODULE 03
HERO SECTION
=========================================================*/

.hero{

min-height:720px;

display:flex;

align-items:center;

overflow:hidden;

background:

linear-gradient(
90deg,
rgba(248,242,231,.98) 0%,
rgba(248,242,231,.92) 50%,
rgba(248,242,231,.78) 100%
),

url("../images/hero-bg.webp")
center / cover no-repeat;

position:relative;

}


/*=========================================================
HERO DECORATIVE BACKGROUNDS
=========================================================*/

.hero::before{

content:"";

position:absolute;

right:-160px;

top:-170px;

width:650px;

height:650px;

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

opacity:.10;

pointer-events:none;

animation:heroMandalaRotate 100s linear infinite;

}

.hero::after{

content:"";

position:absolute;

left:-180px;

bottom:-230px;

width:600px;

height:600px;

background:url("../images/zodiac-wheel.png")
center / contain no-repeat;

opacity:.07;

pointer-events:none;

animation:heroZodiacRotate 120s linear infinite;

}


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

.hero .container{

position:relative;

z-index:2;

}

.hero-grid{

display:grid;

grid-template-columns:1.08fr .92fr;

gap:70px;

align-items:center;

}


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

.hero-content{

max-width:720px;

animation:heroFadeUp .9s ease both;

}

.hero-tag{

display:inline-flex;

align-items:center;

justify-content:center;

padding:10px 24px;

margin-bottom:25px;

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

border-radius:50px;

background:rgba(255,253,248,.84);

color:var(--primary);

font-family:'Noto Serif Devanagari',serif;

font-size:18px;

font-weight:700;

box-shadow:0 8px 24px rgba(91,30,30,.08);

}

.hero h1{

font-size:60px;

font-weight:700;

line-height:1.12;

color:var(--primary);

margin-bottom:25px;

letter-spacing:-1px;

}

.hero h1 span{

display:block;

font-family:'Cinzel',serif;

font-size:31px;

line-height:1.35;

color:#A77E16;

margin-top:18px;

letter-spacing:.3px;

}

.hero-description{

font-size:18px;

line-height:1.9;

color:var(--text-light);

max-width:680px;

margin-bottom:34px;

}


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

.hero-buttons{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin-bottom:32px;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

min-width:190px;

gap:10px;

}


/*=========================================================
HERO INFORMATION
=========================================================*/

.hero-info{

display:flex;

align-items:center;

gap:16px;

flex-wrap:wrap;

}

.hero-info > div{

display:flex;

align-items:center;

gap:9px;

padding:11px 16px;

background:rgba(255,253,248,.85);

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

border-radius:12px;

font-size:14px;

font-weight:500;

color:var(--text);

box-shadow:0 8px 22px rgba(0,0,0,.05);

}

.hero-info i{

color:var(--secondary);

font-size:18px;

}


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

.hero-image{

display:flex;

align-items:center;

justify-content:center;

position:relative;

animation:heroFadeUp 1.1s ease both;

}

.hero-image::before{

content:"";

position:absolute;

width:440px;

height:440px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(212,175,55,.24) 0%,
rgba(212,175,55,.10) 45%,
transparent 72%
);

filter:blur(5px);

}

.hero-image img{

width:100%;

max-width:540px;

height:auto;

position:relative;

z-index:2;

border-radius:28px;

box-shadow:0 24px 60px rgba(91,30,30,.18);

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

}


/*=========================================================
OPTIONAL ZODIAC IMAGE MODE
Use this class if hero image is zodiac-wheel.png
=========================================================*/

.hero-image.is-zodiac img{

max-width:500px;

border-radius:0;

box-shadow:none;

filter:drop-shadow(0 24px 35px rgba(91,30,30,.20));

}


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

@keyframes heroMandalaRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes heroZodiacRotate{

from{

transform:rotate(360deg);

}

to{

transform:rotate(0deg);

}

}

@keyframes heroFloat{

0%,
100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes heroFadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=========================================================
HERO TABLET
=========================================================*/

@media(max-width:1100px){

.hero{

min-height:auto;

padding:90px 0;

}

.hero-grid{

grid-template-columns:1fr;

gap:55px;

text-align:center;

}

.hero-content{

max-width:820px;

margin:auto;

}

.hero-description{

margin-left:auto;

margin-right:auto;

}

.hero-buttons,

.hero-info{

justify-content:center;

}

.hero-image img{

max-width:500px;

}

}


/*=========================================================
HERO MOBILE
=========================================================*/

@media(max-width:700px){

.hero{

padding:70px 0;

background:

linear-gradient(
rgba(248,242,231,.95),
rgba(248,242,231,.95)
),

url("../images/hero-bg.webp")
center / cover no-repeat;

}

.hero::before{

width:420px;

height:420px;

right:-220px;

top:-110px;

}

.hero::after{

width:390px;

height:390px;

left:-190px;

bottom:-170px;

}

.hero-tag{

font-size:16px;

padding:9px 18px;

}

.hero h1{

font-size:39px;

}

.hero h1 span{

font-size:23px;

}

.hero-description{

font-size:16px;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

align-items:stretch;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

width:100%;

}

.hero-info{

display:grid;

grid-template-columns:1fr;

}

.hero-info > div{

justify-content:center;

}

.hero-image img{

max-width:390px;

}

}


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

@media(max-width:420px){

.hero h1{

font-size:33px;

}

.hero h1 span{

font-size:20px;

}

.hero-tag{

font-size:15px;

}

}



/*=========================================================
MODULE 04
ABOUT SECTION
=========================================================*/

.about-section{

background:var(--surface);

overflow:hidden;

}


/*=========================================================
ABOUT DECORATION
=========================================================*/

.about-section::before{

content:"";

position:absolute;

right:-180px;

top:40px;

width:430px;

height:430px;

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

opacity:.045;

pointer-events:none;

}


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

.about-grid{

display:grid;

grid-template-columns:.92fr 1.08fr;

gap:75px;

align-items:center;

}


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

.about-image{

position:relative;

padding:20px;

}

.about-image::before{

content:"";

position:absolute;

left:0;

top:0;

width:70%;

height:70%;

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

border-radius:24px;

opacity:.65;

}

.about-image::after{

content:"";

position:absolute;

right:0;

bottom:0;

width:70%;

height:70%;

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

border-radius:24px;

}

.about-image img{

width:100%;

min-height:520px;

object-fit:cover;

position:relative;

z-index:2;

border-radius:20px;

box-shadow:0 22px 55px rgba(91,30,30,.16);

}


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

.about-badge{

position:absolute;

right:-18px;

bottom:45px;

z-index:3;

min-width:190px;

padding:18px 22px;

background:var(--primary);

color:var(--white);

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

border-radius:16px;

text-align:center;

box-shadow:0 16px 35px rgba(91,30,30,.25);

}

.about-badge strong{

display:block;

font-family:'Cinzel',serif;

font-size:25px;

color:var(--secondary-light);

margin-bottom:3px;

}

.about-badge span{

font-size:13px;

line-height:1.5;

}


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

.about-content{

position:relative;

z-index:2;

}

.about-subtitle{

display:inline-flex;

align-items:center;

gap:10px;

margin-bottom:18px;

font-size:14px;

font-weight:700;

color:var(--secondary);

letter-spacing:2px;

text-transform:uppercase;

}

.about-subtitle::before{

content:"";

width:45px;

height:2px;

background:var(--secondary);

}

.about-content h2{

font-size:44px;

color:var(--primary);

margin-bottom:24px;

}

.about-content h2 span{

color:var(--secondary);

}

.about-content > p{

font-size:16px;

line-height:1.9;

color:var(--text-light);

margin-bottom:20px;

}


/*=========================================================
ABOUT HIGHLIGHTS
=========================================================*/

.about-highlights{

display:grid;

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

gap:18px;

margin-top:30px;

margin-bottom:34px;

}

.about-highlight{

display:flex;

align-items:flex-start;

gap:14px;

padding:20px;

background:var(--background);

border:1px solid var(--border);

border-radius:14px;

transition:var(--transition);

}

.about-highlight:hover{

transform:translateY(-4px);

border-color:var(--secondary);

box-shadow:0 12px 28px rgba(91,30,30,.08);

}

.about-highlight-icon{

width:48px;

height:48px;

min-width:48px;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary);

color:var(--secondary-light);

border-radius:50%;

font-size:21px;

}

.about-highlight h3{

font-family:'Poppins',sans-serif;

font-size:16px;

font-weight:600;

color:var(--primary);

margin-bottom:5px;

}

.about-highlight p{

font-size:13px;

line-height:1.6;

color:var(--text-light);

margin:0;

}


/*=========================================================
ABOUT QUOTE
=========================================================*/

.about-quote{

position:relative;

padding:24px 26px 24px 62px;

margin-top:30px;

background:linear-gradient(
135deg,
rgba(91,30,30,.96),
rgba(115,38,38,.96)
);

color:var(--white);

border-left:5px solid var(--secondary);

border-radius:14px;

box-shadow:var(--shadow);

}

.about-quote::before{

content:"“";

position:absolute;

left:20px;

top:5px;

font-family:Georgia,serif;

font-size:62px;

line-height:1;

color:var(--secondary);

}

.about-quote p{

font-family:'Noto Serif Devanagari',serif;

font-size:17px;

line-height:1.8;

margin:0;

}

.about-quote span{

display:block;

margin-top:10px;

font-family:'Poppins',sans-serif;

font-size:13px;

color:var(--secondary-light);

}


/*=========================================================
ABOUT BUTTON
=========================================================*/

.about-actions{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin-top:32px;

}


/*=========================================================
ABOUT TABLET
=========================================================*/

@media(max-width:1050px){

.about-grid{

grid-template-columns:1fr;

gap:55px;

}

.about-image{

max-width:680px;

margin:auto;

}

.about-content{

text-align:center;

}

.about-subtitle{

justify-content:center;

}

.about-content > p{

max-width:820px;

margin-left:auto;

margin-right:auto;

}

.about-actions{

justify-content:center;

}

}


/*=========================================================
ABOUT MOBILE
=========================================================*/

@media(max-width:700px){

.about-section{

padding:70px 0;

}

.about-image{

padding:12px;

}

.about-image img{

min-height:390px;

}

.about-badge{

position:relative;

right:auto;

bottom:auto;

width:calc(100% - 30px);

margin:-35px auto 0;

}

.about-content h2{

font-size:34px;

}

.about-highlights{

grid-template-columns:1fr;

}

.about-content{

text-align:left;

}

.about-subtitle{

justify-content:flex-start;

}

.about-actions{

flex-direction:column;

align-items:stretch;

}

.about-actions .btn-primary,
.about-actions .btn-secondary{

width:100%;

}

}


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

@media(max-width:420px){

.about-content h2{

font-size:30px;

}

.about-image img{

min-height:330px;

}

.about-quote{

padding:24px 20px 24px 52px;

}

.about-quote p{

font-size:15px;

}

}

/*=========================================================
MODULE 05
SERVICES SECTION
=========================================================*/

.services-section{

background:linear-gradient(
180deg,
#FFFDF8 0%,
#F8F2E7 100%
);

overflow:hidden;

}

.services-section::before{

content:"";

position:absolute;

top:-180px;

left:-180px;

width:500px;

height:500px;

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

opacity:.04;

pointer-events:none;

}

.services-grid{

display:grid;

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

gap:32px;

margin-top:20px;

}


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

.service-card{

background:var(--white);

border-radius:20px;

padding:38px 30px;

text-align:center;

border:1px solid var(--border);

box-shadow:var(--shadow);

transition:var(--transition);

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:var(--secondary);

transform:scaleX(0);

transition:.4s;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.service-card:hover::before{

transform:scaleX(1);

}


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

.service-icon{

width:90px;

height:90px;

margin:0 auto 24px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--primary),
#7A2C2C
);

color:var(--secondary);

font-size:38px;

border-radius:50%;

box-shadow:0 10px 25px rgba(91,30,30,.18);

transition:var(--transition);

}

.service-card:hover .service-icon{

transform:rotateY(180deg);

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

color:var(--primary);

}


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

.service-card h3{

font-size:24px;

color:var(--primary);

margin-bottom:18px;

}

.service-card p{

font-size:15px;

line-height:1.8;

color:var(--text-light);

margin-bottom:25px;

}


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

.service-features{

margin-bottom:28px;

}

.service-features li{

padding:8px 0;

font-size:14px;

color:var(--text);

display:flex;

align-items:center;

justify-content:center;

gap:8px;

}

.service-features li i{

color:var(--secondary);

font-size:16px;

}


/*=========================================================
SERVICE BUTTON
=========================================================*/

.service-card .btn-primary{

padding:12px 28px;

font-size:15px;

}


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

.service-card:hover h3{

color:var(--secondary);

}

.service-card:hover p{

color:var(--text);

}


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

.service-banner{

margin-top:70px;

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

border-radius:24px;

padding:55px;

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

color:white;

overflow:hidden;

position:relative;

}

.service-banner::before{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:300px;

height:300px;

background:url("../images/zodiac-wheel.png")
center/contain no-repeat;

opacity:.08;

}

.service-banner h2{

font-size:38px;

margin-bottom:15px;

color:white;

}

.service-banner p{

font-size:17px;

max-width:700px;

margin:0;

color:#F2F2F2;

}

.service-banner .btn-primary{

background:var(--secondary);

color:#222;

white-space:nowrap;

}


/*=========================================================
TABLET
=========================================================*/

@media(max-width:1100px){

.services-grid{

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

}

.service-banner{

flex-direction:column;

text-align:center;

}

}


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

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

.service-card{

padding:34px 24px;

}

.service-banner{

padding:40px 30px;

}

.service-banner h2{

font-size:30px;

}

.service-banner p{

font-size:16px;

}

}


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

@media(max-width:420px){

.service-icon{

width:75px;

height:75px;

font-size:30px;

}

.service-card h3{

font-size:21px;

}

.service-banner h2{

font-size:26px;

}

}

/*=========================================================
MODULE 06
PANCHANGA DASHBOARD
=========================================================*/

.panchanga-section{

background:
linear-gradient(
135deg,
rgba(91,30,30,.97),
rgba(116,43,43,.96)
),

url("../images/parchment-texture.webp")
center / cover no-repeat;

color:var(--white);

overflow:hidden;

}


/*=========================================================
PANCHANGA DECORATION
=========================================================*/

.panchanga-section::before{

content:"";

position:absolute;

left:-180px;

top:-180px;

width:520px;

height:520px;

background:url("../images/zodiac-wheel.png")
center / contain no-repeat;

opacity:.06;

pointer-events:none;

animation:panchangaRotate 120s linear infinite;

}

.panchanga-section::after{

content:"";

position:absolute;

right:-160px;

bottom:-180px;

width:450px;

height:450px;

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

opacity:.06;

pointer-events:none;

}


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

.panchanga-section .section-title{

position:relative;

z-index:2;

}

.panchanga-section .section-title h2{

color:var(--white);

}

.panchanga-section .section-title p{

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

}

.panchanga-section .section-title h2::after{

background:var(--secondary);

}


/*=========================================================
PANCHANGA HEADER
=========================================================*/

.panchanga-header{

position:relative;

z-index:2;

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

margin-bottom:35px;

padding:24px 28px;

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

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

border-radius:18px;

backdrop-filter:blur(10px);

}

.panchanga-location{

display:flex;

align-items:center;

gap:14px;

}

.panchanga-location i{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--secondary);

color:var(--primary);

font-size:22px;

}

.panchanga-location h3{

font-family:'Poppins',sans-serif;

font-size:18px;

font-weight:600;

color:var(--white);

margin-bottom:3px;

}

.panchanga-location p{

font-size:13px;

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

margin:0;

}

.panchanga-date{

text-align:right;

}

.panchanga-date strong{

display:block;

font-family:'Cinzel',serif;

font-size:19px;

color:var(--secondary-light);

margin-bottom:3px;

}

.panchanga-date span{

font-size:13px;

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

}


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

.panchanga-grid{

position:relative;

z-index:2;

display:grid;

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

gap:24px;

}


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

.panchanga-card{

position:relative;

min-height:190px;

padding:30px 24px;

text-align:center;

background:rgba(255,253,248,.96);

color:var(--text);

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

border-radius:18px;

box-shadow:0 16px 38px rgba(0,0,0,.16);

overflow:hidden;

transition:var(--transition);

}

.panchanga-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

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

}

.panchanga-card::after{

content:"";

position:absolute;

right:-45px;

bottom:-45px;

width:125px;

height:125px;

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

border-radius:50%;

}

.panchanga-card:hover{

transform:translateY(-8px);

box-shadow:0 22px 48px rgba(0,0,0,.24);

border-color:var(--secondary);

}


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

.panchanga-icon{

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 18px;

border-radius:50%;

background:rgba(91,30,30,.10);

color:var(--primary);

font-size:26px;

transition:var(--transition);

}

.panchanga-card:hover .panchanga-icon{

background:var(--primary);

color:var(--secondary-light);

transform:scale(1.08);

}


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

.panchanga-card h3{

font-family:'Poppins',sans-serif;

font-size:14px;

font-weight:600;

letter-spacing:1.3px;

text-transform:uppercase;

color:var(--text-light);

margin-bottom:10px;

}

.panchanga-value{

display:block;

font-family:'Cinzel',serif;

font-size:23px;

font-weight:700;

line-height:1.35;

color:var(--primary);

margin-bottom:7px;

}

.panchanga-note{

display:block;

font-size:12px;

line-height:1.6;

color:var(--text-light);

}


/*=========================================================
AUSPICIOUS AND INauspicious CARD VARIANTS
=========================================================*/

.panchanga-card.auspicious{

background:
linear-gradient(
135deg,
rgba(255,253,248,.98),
rgba(250,240,205,.96)
);

}

.panchanga-card.inauspicious{

background:
linear-gradient(
135deg,
rgba(255,253,248,.98),
rgba(247,230,230,.96)
);

}

.panchanga-card.inauspicious .panchanga-icon{

background:rgba(130,36,36,.10);

color:#812424;

}


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

.panchanga-footer{

position:relative;

z-index:2;

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;

margin-top:35px;

padding:22px 26px;

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

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

border-radius:16px;

backdrop-filter:blur(10px);

}

.panchanga-footer-text{

display:flex;

align-items:flex-start;

gap:13px;

}

.panchanga-footer-text i{

font-size:21px;

color:var(--secondary-light);

margin-top:3px;

}

.panchanga-footer-text p{

font-size:13px;

line-height:1.7;

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

margin:0;

}

.panchanga-footer .btn-primary{

min-width:190px;

white-space:nowrap;

}


/*=========================================================
PANCHANGA LOADING STATE
=========================================================*/

.panchanga-value.loading{

position:relative;

color:transparent;

overflow:hidden;

border-radius:8px;

background:rgba(91,30,30,.08);

}

.panchanga-value.loading::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.75),
transparent
);

animation:panchangaLoading 1.4s infinite;

}


/*=========================================================
PANCHANGA ERROR STATE
=========================================================*/

.panchanga-error {

    position: relative;

    z-index: 2;

    display: none;

    width: 100%;

    margin-bottom: 28px;

    padding: 16px 20px;

    background: rgba(255, 235, 235, 0.96);

    color: #7A2020;

    border: 1px solid rgba(166, 61, 61, 0.25);

    border-left: 4px solid #A63D3D;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.6;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

}

.panchanga-error.show {

    display: block;

}


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

@keyframes panchangaRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes panchangaLoading{

from{

transform:translateX(-100%);

}

to{

transform:translateX(100%);

}

}


/*=========================================================
PANCHANGA LARGE TABLET
=========================================================*/

@media(max-width:1120px){

.panchanga-grid{

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

}

}


/*=========================================================
PANCHANGA TABLET
=========================================================*/

@media(max-width:850px){

.panchanga-header{

align-items:flex-start;

}

.panchanga-grid{

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

}

.panchanga-footer{

flex-direction:column;

text-align:center;

}

.panchanga-footer-text{

justify-content:center;

}

}


/*=========================================================
PANCHANGA MOBILE
=========================================================*/

@media(max-width:600px){

.panchanga-section{

padding:70px 0;

}

.panchanga-header{

flex-direction:column;

padding:21px;

}

.panchanga-date{

text-align:left;

}

.panchanga-grid{

grid-template-columns:1fr;

gap:18px;

}

.panchanga-card{

min-height:auto;

padding:27px 22px;

}

.panchanga-footer{

padding:22px;

}

.panchanga-footer .btn-primary{

width:100%;

}

}


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

@media(max-width:420px){

.panchanga-value{

font-size:20px;

}

.panchanga-location h3{

font-size:16px;

}

}


/*=========================================================
MODULE 07
WHY CHOOSE SARVAMCHANDHA
=========================================================*/

.why-section{

background:var(--surface);

overflow:hidden;

}

.why-section::before{

content:"";

position:absolute;

right:-170px;

top:-150px;

width:460px;

height:460px;

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

opacity:.045;

pointer-events:none;

}


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

.why-grid{

display:grid;

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

gap:26px;

position:relative;

z-index:2;

}


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

.why-card{

position:relative;

padding:34px 26px;

background:var(--white);

border:1px solid var(--border);

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

transition:var(--transition);

overflow:hidden;

}

.why-card::before{

content:"";

position:absolute;

left:50%;

top:0;

width:70px;

height:4px;

transform:translateX(-50%);

background:var(--secondary);

border-radius:0 0 20px 20px;

transition:var(--transition);

}

.why-card::after{

content:"";

position:absolute;

right:-48px;

bottom:-48px;

width:130px;

height:130px;

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

border-radius:50%;

}

.why-card:hover{

transform:translateY(-8px);

border-color:var(--secondary);

box-shadow:var(--shadow-hover);

}

.why-card:hover::before{

width:100%;

}


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

.why-icon{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 22px;

border-radius:50%;

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

color:var(--secondary-light);

font-size:32px;

box-shadow:0 12px 28px rgba(91,30,30,.18);

transition:var(--transition);

}

.why-card:hover .why-icon{

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

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

color:var(--primary);

}


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

.why-card h3{

font-family:'Poppins',sans-serif;

font-size:18px;

font-weight:600;

color:var(--primary);

margin-bottom:12px;

}

.why-card p{

font-size:14px;

line-height:1.8;

color:var(--text-light);

margin:0;

}


/*=========================================================
CONSULTATION PROCESS
=========================================================*/

.process-section{

background:
linear-gradient(
180deg,
#F8F2E7 0%,
#FFFDF8 100%
);

overflow:hidden;

}

.process-section::after{

content:"";

position:absolute;

left:-150px;

bottom:-170px;

width:420px;

height:420px;

background:url("../images/zodiac-wheel.png")
center / contain no-repeat;

opacity:.035;

pointer-events:none;

}


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

.process-grid{

display:grid;

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

gap:28px;

position:relative;

z-index:2;

}

.process-grid::before{

content:"";

position:absolute;

left:10%;

right:10%;

top:48px;

height:2px;

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

z-index:-1;

}


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

.process-item{

text-align:center;

position:relative;

}

.process-number{

width:96px;

height:96px;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 24px;

border-radius:50%;

background:var(--primary);

border:5px solid var(--background);

box-shadow:
0 0 0 2px var(--secondary),
0 15px 30px rgba(91,30,30,.18);

font-family:'Cinzel',serif;

font-size:30px;

font-weight:700;

color:var(--secondary-light);

transition:var(--transition);

}

.process-item:hover .process-number{

transform:translateY(-6px) scale(1.05);

background:var(--secondary);

color:var(--primary);

}

.process-content{

padding:28px 22px;

background:var(--white);

border:1px solid var(--border);

border-radius:17px;

box-shadow:var(--shadow);

transition:var(--transition);

}

.process-item:hover .process-content{

transform:translateY(-5px);

border-color:var(--secondary);

box-shadow:var(--shadow-hover);

}

.process-content h3{

font-family:'Poppins',sans-serif;

font-size:18px;

font-weight:600;

color:var(--primary);

margin-bottom:12px;

}

.process-content p{

font-size:14px;

line-height:1.8;

color:var(--text-light);

margin:0;

}


/*=========================================================
PROCESS NOTE
=========================================================*/

.process-note{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

max-width:850px;

margin:48px auto 0;

padding:20px 24px;

background:rgba(91,30,30,.06);

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

border-radius:14px;

text-align:center;

position:relative;

z-index:2;

}

.process-note i{

font-size:22px;

color:var(--secondary);

}

.process-note p{

font-size:14px;

line-height:1.7;

color:var(--text-light);

margin:0;

}


/*=========================================================
CONSULTATION HIGHLIGHT
=========================================================*/

.consultation-highlight{

margin-top:65px;

padding:48px 50px;

display:grid;

grid-template-columns:1.25fr .75fr;

gap:40px;

align-items:center;

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

border-radius:24px;

color:var(--white);

box-shadow:0 22px 55px rgba(91,30,30,.22);

position:relative;

overflow:hidden;

z-index:2;

}

.consultation-highlight::before{

content:"";

position:absolute;

right:-85px;

top:-95px;

width:300px;

height:300px;

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

opacity:.08;

pointer-events:none;

}

.consultation-highlight h2{

font-size:35px;

color:var(--white);

margin-bottom:14px;

}

.consultation-highlight p{

max-width:720px;

font-size:16px;

line-height:1.8;

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

margin:0;

}

.consultation-highlight-actions{

display:flex;

justify-content:flex-end;

align-items:center;

gap:15px;

flex-wrap:wrap;

position:relative;

z-index:2;

}

.consultation-highlight .btn-primary{

white-space:nowrap;

}

.consultation-highlight .btn-secondary{

background:transparent;

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

}

.consultation-highlight .btn-secondary:hover{

background:var(--white);

color:var(--primary);

}


/*=========================================================
LARGE TABLET
=========================================================*/

@media(max-width:1120px){

.why-grid{

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

}

.process-grid{

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

}

.process-grid::before{

display:none;

}

.consultation-highlight{

grid-template-columns:1fr;

text-align:center;

}

.consultation-highlight p{

margin-left:auto;

margin-right:auto;

}

.consultation-highlight-actions{

justify-content:center;

}

}


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

@media(max-width:700px){

.why-section,
.process-section{

padding:70px 0;

}

.why-grid,
.process-grid{

grid-template-columns:1fr;

}

.why-card{

padding:30px 23px;

}

.process-number{

width:82px;

height:82px;

font-size:26px;

}

.consultation-highlight{

margin-top:50px;

padding:38px 26px;

}

.consultation-highlight h2{

font-size:29px;

}

.consultation-highlight-actions{

flex-direction:column;

align-items:stretch;

}

.consultation-highlight-actions .btn-primary,
.consultation-highlight-actions .btn-secondary{

width:100%;

}

.process-note{

align-items:flex-start;

text-align:left;

}

}


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

@media(max-width:420px){

.why-card h3,
.process-content h3{

font-size:17px;

}

.consultation-highlight h2{

font-size:26px;

}

}


/*=========================================================
MODULE 08
CONSULTATION BOOKING
=========================================================*/

.consultation-section{

background:linear-gradient(
180deg,
#FFFDF8 0%,
#F8F2E7 100%
);

overflow:hidden;

}

.consultation-section::before{

content:"";

position:absolute;

right:-180px;

top:-180px;

width:500px;

height:500px;

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

opacity:.04;

pointer-events:none;

}


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

.consultation-grid{

display:grid;

grid-template-columns:.95fr 1.05fr;

gap:55px;

align-items:start;

position:relative;

z-index:2;

}


/*=========================================================
LEFT INFORMATION PANEL
=========================================================*/

.consultation-info{

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

padding:45px;

border-radius:22px;

color:var(--white);

box-shadow:0 22px 55px rgba(91,30,30,.20);

position:relative;

overflow:hidden;

}

.consultation-info::before{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:260px;

height:260px;

background:url("../images/zodiac-wheel.png")
center / contain no-repeat;

opacity:.08;

}

.consultation-info h2{

font-size:36px;

color:var(--white);

margin-bottom:18px;

}

.consultation-info p{

font-size:15px;

line-height:1.9;

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

margin-bottom:30px;

}


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

.consultation-features{

display:grid;

gap:18px;

margin-bottom:35px;

}

.consultation-feature{

display:flex;

align-items:flex-start;

gap:16px;

}

.consultation-feature i{

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

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

border-radius:50%;

font-size:20px;

color:var(--secondary-light);

flex-shrink:0;

}

.consultation-feature h4{

font-family:'Poppins',sans-serif;

font-size:17px;

font-weight:600;

margin-bottom:5px;

color:var(--secondary-light);

}

.consultation-feature p{

margin:0;

font-size:14px;

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

}


/*=========================================================
WORKING HOURS
=========================================================*/

.working-hours{

margin-top:35px;

padding-top:25px;

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

}

.working-hours h3{

font-size:22px;

color:var(--secondary-light);

margin-bottom:18px;

}

.working-hours ul{

display:grid;

gap:12px;

}

.working-hours li{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 0;

border-bottom:1px dashed rgba(255,255,255,.15);

font-size:14px;

}


/*=========================================================
FORM PANEL
=========================================================*/

.booking-form{

background:var(--white);

padding:45px;

border-radius:22px;

box-shadow:var(--shadow);

border:1px solid var(--border);

}

.booking-form h2{

font-size:34px;

color:var(--primary);

margin-bottom:12px;

}

.booking-form p{

margin-bottom:30px;

color:var(--text-light);

}


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

.form-grid{

display:grid;

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

gap:22px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group.full-width{

grid-column:1 / -1;

}


/*=========================================================
LABELS
=========================================================*/

.form-group label{

font-size:14px;

font-weight:600;

margin-bottom:8px;

color:var(--primary);

}


/*=========================================================
INPUTS
=========================================================*/

.form-group input,

.form-group select,

.form-group textarea{

width:100%;

padding:15px 18px;

background:#FFFDF8;

border:1px solid var(--border);

border-radius:12px;

font-size:15px;

transition:var(--transition);

}

.form-group textarea{

resize:vertical;

min-height:140px;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

border-color:var(--secondary);

box-shadow:0 0 0 4px rgba(212,175,55,.18);

background:#FFFFFF;

}


/*=========================================================
PLACEHOLDER
=========================================================*/

::placeholder{

color:#999;

}


/*=========================================================
FORM BUTTON
=========================================================*/

.booking-form .btn-primary{

margin-top:12px;

width:100%;

padding:16px;

font-size:17px;

}


/*=========================================================
SUCCESS MESSAGE
=========================================================*/

.form-success{

display:none;

margin-top:22px;

padding:18px;

background:#EAF7EC;

border-left:5px solid #28A745;

border-radius:10px;

font-size:14px;

color:#216838;

}

.form-success.show{

display:block;

}


/*=========================================================
ERROR MESSAGE
=========================================================*/

.form-error{

display:none;

margin-top:20px;

padding:18px;

background:#FCEAEA;

border-left:5px solid #B3261E;

border-radius:10px;

font-size:14px;

color:#8A1C1C;

}

.form-error.show{

display:block;

}


/*=========================================================
FIELD ERROR
=========================================================*/

.form-group.error input,

.form-group.error select,

.form-group.error textarea{

border-color:#C62828;

background:#FFF8F8;

}

.form-group small{

margin-top:6px;

font-size:12px;

color:#C62828;

display:none;

}

.form-group.error small{

display:block;

}


/*=========================================================
TABLET
=========================================================*/

@media(max-width:1050px){

.consultation-grid{

grid-template-columns:1fr;

}

.booking-form,

.consultation-info{

padding:38px;

}

}


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

@media(max-width:700px){

.consultation-section{

padding:70px 0;

}

.form-grid{

grid-template-columns:1fr;

}

.booking-form,

.consultation-info{

padding:28px;

}

.booking-form h2,

.consultation-info h2{

font-size:30px;

}

.booking-form .btn-primary{

font-size:16px;

}

}


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

@media(max-width:420px){

.booking-form,

.consultation-info{

padding:22px;

}

.booking-form h2,

.consultation-info h2{

font-size:26px;

}

}


/*=========================================================
MODULE 09
FAQ SECTION
=========================================================*/

.faq-section{

background:var(--surface);

overflow:hidden;

}

.faq-section::before{

content:"";

position:absolute;

left:-170px;

top:-150px;

width:440px;

height:440px;

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

opacity:.04;

pointer-events:none;

}

.faq-wrapper{

max-width:950px;

margin:auto;

position:relative;

z-index:2;

}

.faq-item{

margin-bottom:18px;

background:var(--white);

border:1px solid var(--border);

border-radius:16px;

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

overflow:hidden;

transition:var(--transition);

}

.faq-item:hover{

border-color:var(--secondary);

box-shadow:var(--shadow);

}

.faq-item summary{

position:relative;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

padding:24px 28px;

font-family:'Poppins',sans-serif;

font-size:17px;

font-weight:600;

color:var(--primary);

cursor:pointer;

list-style:none;

}

.faq-item summary::-webkit-details-marker{

display:none;

}

.faq-item summary::after{

content:"+";

width:34px;

height:34px;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

border-radius:50%;

background:rgba(91,30,30,.08);

color:var(--primary);

font-size:23px;

font-weight:500;

transition:var(--transition);

}

.faq-item[open] summary::after{

content:"−";

background:var(--primary);

color:var(--secondary-light);

transform:rotate(180deg);

}

.faq-answer{

padding:0 28px 24px;

}

.faq-answer p{

font-size:15px;

line-height:1.85;

color:var(--text-light);

margin:0;

}

.faq-item[open]{

border-color:var(--secondary);

}


/*=========================================================
TESTIMONIALS SECTION
=========================================================*/

.testimonials-section{

background:linear-gradient(
180deg,
#F8F2E7 0%,
#FFFDF8 100%
);

overflow:hidden;

}

.testimonials-placeholder{

max-width:900px;

margin:auto;

padding:55px 45px;

text-align:center;

background:var(--white);

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

border-radius:22px;

box-shadow:var(--shadow);

position:relative;

z-index:2;

}

.testimonials-placeholder::before{

content:"";

position:absolute;

left:50%;

top:-1px;

transform:translateX(-50%);

width:130px;

height:4px;

background:var(--secondary);

border-radius:0 0 20px 20px;

}

.testimonials-placeholder i{

width:82px;

height:82px;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 24px;

border-radius:50%;

background:rgba(91,30,30,.08);

color:var(--primary);

font-size:34px;

}

.testimonials-placeholder h3{

font-size:28px;

color:var(--primary);

margin-bottom:16px;

}

.testimonials-placeholder p{

max-width:680px;

margin:0 auto;

font-size:15px;

line-height:1.85;

color:var(--text-light);

}


/*=========================================================
CONTACT SECTION
=========================================================*/

.contact-section{

background:
linear-gradient(
135deg,
rgba(91,30,30,.97),
rgba(116,43,43,.96)
),

url("../images/parchment-texture.webp")
center / cover no-repeat;

color:var(--white);

overflow:hidden;

}

.contact-section::before{

content:"";

position:absolute;

right:-150px;

top:-150px;

width:440px;

height:440px;

background:url("../images/zodiac-wheel.png")
center / contain no-repeat;

opacity:.06;

pointer-events:none;

}

.contact-section .section-title h2{

color:var(--white);

}

.contact-section .section-title p{

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

}

.contact-grid{

display:grid;

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

gap:24px;

position:relative;

z-index:2;

}

.contact-card{

padding:34px 24px;

text-align:center;

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

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

border-radius:18px;

backdrop-filter:blur(10px);

transition:var(--transition);

}

.contact-card:hover{

transform:translateY(-7px);

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

border-color:var(--secondary);

}

.contact-card i{

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 20px;

border-radius:50%;

background:var(--secondary);

color:var(--primary);

font-size:27px;

box-shadow:0 12px 26px rgba(0,0,0,.14);

}

.contact-card h3{

font-family:'Poppins',sans-serif;

font-size:18px;

font-weight:600;

color:var(--secondary-light);

margin-bottom:10px;

}

.contact-card p,

.contact-card a{

font-size:14px;

line-height:1.75;

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

margin:0;

}

.contact-card a:hover{

color:var(--secondary-light);

}


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

.location-card{

margin-top:40px;

padding:34px;

display:grid;

grid-template-columns:1.2fr .8fr;

gap:35px;

align-items:center;

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

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

border-radius:20px;

backdrop-filter:blur(10px);

position:relative;

z-index:2;

}

.location-content h3{

font-size:28px;

color:var(--secondary-light);

margin-bottom:14px;

}

.location-content p{

font-size:15px;

line-height:1.85;

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

margin-bottom:20px;

}

.location-actions{

display:flex;

gap:14px;

flex-wrap:wrap;

}

.location-visual{

min-height:240px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

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

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

}

.location-visual i{

font-size:72px;

color:var(--secondary-light);

}


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

.footer{

background:#2E1010;

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

padding:75px 0 0;

position:relative;

overflow:hidden;

}

.footer::before{

content:"";

position:absolute;

left:-160px;

bottom:-190px;

width:450px;

height:450px;

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

opacity:.035;

pointer-events:none;

}

.footer-grid{

display:grid;

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

gap:45px;

position:relative;

z-index:2;

}

.footer-brand img{

width:90px;

height:90px;

object-fit:contain;

margin-bottom:20px;

}

.footer-brand h2{

font-size:28px;

color:var(--white);

margin-bottom:8px;

}

.footer-brand h2 span{

color:var(--secondary-light);

}

.footer-brand p{

font-size:14px;

line-height:1.85;

max-width:390px;

}

.footer h3{

font-family:'Poppins',sans-serif;

font-size:18px;

font-weight:600;

color:var(--secondary-light);

margin-bottom:22px;

}

.footer-links{

display:grid;

gap:12px;

}

.footer-links a{

font-size:14px;

display:inline-flex;

align-items:center;

gap:9px;

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

}

.footer-links a::before{

content:"›";

font-size:20px;

color:var(--secondary);

transition:var(--transition);

}

.footer-links a:hover{

color:var(--secondary-light);

transform:translateX(5px);

}

.footer-contact-list{

display:grid;

gap:15px;

}

.footer-contact-list li{

display:flex;

align-items:flex-start;

gap:12px;

font-size:14px;

line-height:1.65;

}

.footer-contact-list i{

font-size:18px;

color:var(--secondary-light);

margin-top:3px;

}

.footer-social{

display:flex;

align-items:center;

gap:12px;

margin-top:24px;

}

.footer-social a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

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

color:var(--secondary-light);

font-size:18px;

}

.footer-social a:hover{

background:var(--secondary);

color:var(--primary);

transform:translateY(-4px);

}


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

.footer-bottom{

margin-top:55px;

padding:22px 0;

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

position:relative;

z-index:2;

}

.footer-bottom .container{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

}

.footer-bottom p{

font-size:13px;

margin:0;

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

}

.footer-bottom-links{

display:flex;

align-items:center;

gap:22px;

}

.footer-bottom-links a{

font-size:13px;

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

}

.footer-bottom-links a:hover{

color:var(--secondary-light);

}


/*=========================================================
BACK TO TOP
=========================================================*/

#backToTop{

position:fixed;

right:24px;

bottom:24px;

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--secondary);

color:var(--primary);

font-size:22px;

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

opacity:0;

visibility:hidden;

transform:translateY(18px);

z-index:998;

transition:var(--transition);

}

#backToTop.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

#backToTop:hover{

background:var(--primary);

color:var(--secondary-light);

transform:translateY(-4px);

}


/*=========================================================
TABLET
=========================================================*/

@media(max-width:1050px){

.contact-grid{

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

}

.location-card{

grid-template-columns:1fr;

text-align:center;

}

.location-actions{

justify-content:center;

}

.footer-grid{

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

}

}


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

@media(max-width:700px){

.faq-section,
.testimonials-section,
.contact-section{

padding:70px 0;

}

.faq-item summary{

padding:21px;

font-size:15px;

}

.faq-answer{

padding:0 21px 21px;

}

.testimonials-placeholder{

padding:42px 25px;

}

.testimonials-placeholder h3{

font-size:24px;

}

.contact-grid{

grid-template-columns:1fr;

}

.location-card{

padding:28px 22px;

}

.location-content h3{

font-size:25px;

}

.location-actions{

flex-direction:column;

align-items:stretch;

}

.location-actions .btn-primary,
.location-actions .btn-secondary{

width:100%;

}

.footer{

padding-top:60px;

}

.footer-grid{

grid-template-columns:1fr;

gap:38px;

}

.footer-bottom .container{

flex-direction:column;

text-align:center;

}

.footer-bottom-links{

justify-content:center;

flex-wrap:wrap;

}

#backToTop{

right:16px;

bottom:16px;

width:44px;

height:44px;

}

}


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

@media(max-width:420px){

.faq-item summary{

font-size:14px;

}

.testimonials-placeholder h3{

font-size:22px;

}

.contact-card{

padding:29px 20px;

}

.footer-brand h2{

font-size:25px;

}

}


/*=========================================================
MODULE 10
FINAL UTILITIES, RESPONSIVE REFINEMENTS,
ACCESSIBILITY AND ANIMATION COMPLETION
=========================================================*/


/*=========================================================
UTILITY CLASSES
=========================================================*/

.text-center{

text-align:center;

}

.text-left{

text-align:left;

}

.text-right{

text-align:right;

}

.d-flex{

display:flex;

}

.align-center{

align-items:center;

}

.justify-center{

justify-content:center;

}

.justify-between{

justify-content:space-between;

}

.flex-wrap{

flex-wrap:wrap;

}

.w-100{

width:100%;

}

.hidden{

display:none !important;

}

.visible{

display:block !important;

}

.position-relative{

position:relative;

}

.overflow-hidden{

overflow:hidden;

}


/*=========================================================
SPACING UTILITIES
=========================================================*/

.mt-0{

margin-top:0 !important;

}

.mt-20{

margin-top:20px !important;

}

.mt-30{

margin-top:30px !important;

}

.mt-40{

margin-top:40px !important;

}

.mb-0{

margin-bottom:0 !important;

}

.mb-20{

margin-bottom:20px !important;

}

.mb-30{

margin-bottom:30px !important;

}

.mb-40{

margin-bottom:40px !important;

}


/*=========================================================
SECTION ALTERNATE BACKGROUNDS
=========================================================*/

.section-light{

background:var(--surface);

}

.section-cream{

background:var(--background);

}

.section-maroon{

background:var(--primary);

color:var(--white);

}

.section-maroon .section-title h2{

color:var(--white);

}

.section-maroon .section-title p{

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

}


/*=========================================================
DECORATIVE DIVIDER
=========================================================*/

.decorative-divider{

display:flex;

align-items:center;

justify-content:center;

gap:16px;

margin:28px auto;

}

.decorative-divider::before,
.decorative-divider::after{

content:"";

width:80px;

height:1px;

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

}

.decorative-divider::after{

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

}

.decorative-divider i{

font-size:22px;

color:var(--secondary);

}


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

.image-frame{

position:relative;

overflow:hidden;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.image-frame img{

width:100%;

transition:transform .65s ease;

}

.image-frame:hover img{

transform:scale(1.05);

}


/*=========================================================
LINK FOCUS STATES
=========================================================*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{

outline:3px solid rgba(212,175,55,.65);

outline-offset:4px;

}


/*=========================================================
BUTTON DISABLED STATE
=========================================================*/

button:disabled,
.btn-primary.disabled,
.btn-secondary.disabled{

opacity:.55;

cursor:not-allowed;

pointer-events:none;

transform:none;

box-shadow:none;

}


/*=========================================================
BUTTON LOADING STATE
=========================================================*/

.btn-loading{

position:relative;

color:transparent !important;

pointer-events:none;

}

.btn-loading::after{

content:"";

position:absolute;

left:50%;

top:50%;

width:20px;

height:20px;

margin-left:-10px;

margin-top:-10px;

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

border-top-color:var(--white);

border-radius:50%;

animation:buttonSpinner .75s linear infinite;

}

.btn-primary.btn-loading::after{

border-color:rgba(91,30,30,.28);

border-top-color:var(--primary);

}


/*=========================================================
GENERAL REVEAL ANIMATIONS
=========================================================*/

.reveal{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.reveal-left{

opacity:0;

transform:translateX(-45px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal-left.active{

opacity:1;

transform:translateX(0);

}

.reveal-right{

opacity:0;

transform:translateX(45px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal-right.active{

opacity:1;

transform:translateX(0);

}

.reveal-scale{

opacity:0;

transform:scale(.92);

transition:
opacity .75s ease,
transform .75s ease;

}

.reveal-scale.active{

opacity:1;

transform:scale(1);

}


/*=========================================================
STAGGERED ANIMATION DELAYS
=========================================================*/

.delay-1{

transition-delay:.08s;

}

.delay-2{

transition-delay:.16s;

}

.delay-3{

transition-delay:.24s;

}

.delay-4{

transition-delay:.32s;

}

.delay-5{

transition-delay:.40s;

}

.delay-6{

transition-delay:.48s;

}


/*=========================================================
FLOATING DECORATION
=========================================================*/

.floating-element{

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

}

.slow-rotate{

animation:slowRotate 90s linear infinite;

}


/*=========================================================
SELECTION
=========================================================*/

::selection{

background:var(--primary);

color:var(--secondary-light);

}

::-moz-selection{

background:var(--primary);

color:var(--secondary-light);

}


/*=========================================================
FORM AUTOFILL
=========================================================*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{

-webkit-text-fill-color:var(--text);

-webkit-box-shadow:0 0 0 1000px #FFFDF8 inset;

transition:background-color 5000s ease-in-out 0s;

}


/*=========================================================
SMOOTH DETAILS OPENING
=========================================================*/

details[open] .faq-answer{

animation:faqOpen .35s ease both;

}


/*=========================================================
GLOBAL HOVER SAFETY
=========================================================*/

@media(hover:none){

.card:hover,
.service-card:hover,
.why-card:hover,
.process-item:hover .process-content,
.panchanga-card:hover,
.contact-card:hover{

transform:none;

}

}


/*=========================================================
LARGE SCREEN REFINEMENTS
=========================================================*/

@media(min-width:1400px){

.container{

width:90%;

}

section{

padding:105px 0;

}

.section-title h2{

font-size:44px;

}

.hero h1{

font-size:64px;

}

}


/*=========================================================
DESKTOP REFINEMENTS
=========================================================*/

@media(max-width:1200px){

:root{

--container:1120px;

}

section{

padding:85px 0;

}

.section-title{

margin-bottom:52px;

}

.section-title h2{

font-size:38px;

}

}


/*=========================================================
TABLET REFINEMENTS
=========================================================*/

@media(max-width:992px){

:root{

--container:900px;

}

section{

padding:80px 0;

}

.container{

width:90%;

}

.section-title h2{

font-size:36px;

}

.section-title p{

font-size:16px;

}

}


/*=========================================================
MOBILE REFINEMENTS
=========================================================*/

@media(max-width:768px){

section{

padding:68px 0;

}

.container{

width:92%;

}

.section-title{

margin-bottom:42px;

}

.section-title h2{

font-size:32px;

}

.section-title p{

font-size:15px;

line-height:1.8;

}

.card{

padding:28px 22px;

}

.btn-primary,
.btn-secondary{

padding:13px 26px;

}

.decorative-divider::before,
.decorative-divider::after{

width:55px;

}

}


/*=========================================================
SMALL MOBILE REFINEMENTS
=========================================================*/

@media(max-width:480px){

section{

padding:60px 0;

}

.container{

width:91%;

}

.section-title h2{

font-size:29px;

}

.section-title h2::after{

width:62px;

}

.btn-primary,
.btn-secondary{

padding:13px 22px;

font-size:14px;

}

.card{

padding:24px 18px;

}

.decorative-divider{

gap:12px;

}

.decorative-divider::before,
.decorative-divider::after{

width:40px;

}

}


/*=========================================================
VERY SMALL DEVICES
=========================================================*/

@media(max-width:360px){

.container{

width:94%;

}

.section-title h2{

font-size:26px;

}

.logo h2{

font-size:18px;

}

.mobile-menu{

font-size:29px;

}

}


/*=========================================================
LANDSCAPE MOBILE
=========================================================*/

@media(max-height:520px) and (orientation:landscape){

.hero{

min-height:auto;

padding:60px 0;

}

.navbar{

height:72px;

}

.nav-links{

top:72px;

max-height:calc(100vh - 72px);

overflow-y:auto;

}

}


/*=========================================================
REDUCED MOTION ACCESSIBILITY
=========================================================*/

@media(prefers-reduced-motion:reduce){

html{

scroll-behavior:auto;

}

*,
*::before,
*::after{

animation-duration:.01ms !important;

animation-iteration-count:1 !important;

transition-duration:.01ms !important;

scroll-behavior:auto !important;

}

}


/*=========================================================
HIGH CONTRAST SUPPORT
=========================================================*/

@media(prefers-contrast:more){

:root{

--text:#1F1F1F;

--text-light:#444444;

--border:#B99732;

}

.card,
.service-card,
.why-card,
.panchanga-card,
.booking-form,
.faq-item{

border-width:2px;

}

}


/*=========================================================
PRINT STYLES
=========================================================*/

@media print{

.topbar,
#header,
.hero-buttons,
.mobile-menu,
#backToTop,
.footer-social,
.location-actions,
.booking-form button{

display:none !important;

}

body{

background:#FFFFFF;

color:#000000;

font-size:12pt;

}

section{

padding:30px 0;

page-break-inside:avoid;

}

.container{

width:100%;

max-width:none;

}

.hero,
.panchanga-section,
.contact-section,
.footer,
.consultation-info{

background:#FFFFFF !important;

color:#000000 !important;

box-shadow:none !important;

}

.hero h1,
.section-title h2,
.footer h2,
.footer h3,
.consultation-info h2{

color:#000000 !important;

}

.card,
.service-card,
.why-card,
.panchanga-card,
.booking-form,
.faq-item,
.contact-card{

box-shadow:none !important;

border:1px solid #999999 !important;

}

a{

color:#000000;

text-decoration:none;

}

}


/*=========================================================
KEYFRAMES
=========================================================*/

@keyframes buttonSpinner{

to{

transform:rotate(360deg);

}

}

@keyframes gentleFloat{

0%,
100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@keyframes slowRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes faqOpen{

from{

opacity:0;

transform:translateY(-8px);

}

to{

opacity:1;

transform:translateY(0);

}

}