/*==============================================================
            INDIANASTROVEDIC PREMIUM ONLINE PUJA
                    PART 5A
==============================================================*/

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

:root{

--primary:#0B3D91;
--primary-dark:#072B67;

--gold:#D4AF37;
--gold-light:#FFD95A;

--white:#FFFFFF;
--bg:#F7F9FC;

--text:#183153;
--text-light:#6C757D;

--border:#E8ECF3;

--radius:24px;

--shadow-sm:0 10px 25px rgba(0,0,0,.06);

--shadow-md:0 20px 50px rgba(0,0,0,.10);

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

}


/*==========================
BODY
==========================*/

body{

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

background:var(--bg);

color:var(--text);

overflow-x:hidden;

}


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

section{

padding:90px 0;

position:relative;

}

.container{

position:relative;

z-index:2;

}


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

.section-heading{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-heading span{

display:inline-block;

padding:10px 24px;

background:#FFF8E5;

color:#A97800;

font-size:14px;

font-weight:700;

border-radius:50px;

letter-spacing:.8px;

text-transform:uppercase;

margin-bottom:20px;

}

.section-heading h2{

font-size:46px;

font-weight:700;

line-height:1.2;

margin-bottom:20px;

color:var(--text);

}

.section-heading p{

font-size:18px;

line-height:1.8;

color:var(--text-light);

}


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

.puja-hero{

background:

linear-gradient(135deg,

#071B44 0%,

#0B3D91 45%,

#0F5DC7 100%);

color:#fff;

padding:120px 0;

overflow:hidden;

position:relative;

}

.puja-hero::before{

content:"";

position:absolute;

width:650px;

height:650px;

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

border-radius:50%;

top:-250px;

right:-200px;

}

.hero-badge{

display:inline-flex;

align-items:center;

padding:12px 26px;

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

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

backdrop-filter:blur(10px);

border-radius:50px;

font-size:14px;

font-weight:600;

}

.puja-hero h1{

font-size:58px;

font-weight:700;

line-height:1.15;

margin:30px 0;

}

.puja-hero h1 span{

display:block;

color:var(--gold-light);

}

.puja-hero p{

font-size:19px;

line-height:1.9;

opacity:.95;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:45px;

}


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

.hero-btn{

background:linear-gradient(135deg,

var(--gold-light),

var(--gold));

color:#1A1A1A;

padding:16px 34px;

border-radius:50px;

font-weight:700;

text-decoration:none;

transition:.35s;

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

}

.hero-btn:hover{

transform:translateY(-4px);

color:#1A1A1A;

}

.hero-btn-outline{

padding:16px 34px;

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

border-radius:50px;

color:#fff;

text-decoration:none;

transition:.35s;

}

.hero-btn-outline:hover{

background:#fff;

color:var(--primary);

}


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

.hero-features{

display:grid;

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

gap:18px;

}

.hero-features div{

display:flex;

align-items:center;

font-size:16px;

font-weight:500;

}

.hero-features i{

margin-right:12px;

color:var(--gold-light);

}


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

.hero-image{

text-align:center;

}

.hero-image img{

max-width:100%;

border-radius:30px;

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

transition:.5s;

}

.hero-image:hover img{

transform:scale(1.03);

}


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

.trust-section{

margin-top:-70px;

padding:0 0 70px;

position:relative;

z-index:5;

}

.trust-box{

background:#fff;

border-radius:22px;

padding:35px;

text-align:center;

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

transition:.35s;

height:100%;

}

.trust-box:hover{

transform:translateY(-8px);

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

}

.trust-box h2{

font-size:44px;

font-weight:700;

color:var(--gold);

margin-bottom:10px;

}

.trust-box p{

margin:0;

font-size:16px;

color:var(--text-light);

}


/*==========================
FEATURE CARDS
==========================*/

.feature-card{

background:#fff;

padding:40px 30px;

border-radius:28px;

text-align:center;

height:100%;

transition:.4s;

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

}

.feature-card:hover{

transform:translateY(-10px);

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

}

.feature-icon{

width:90px;

height:90px;

margin:0 auto 28px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(135deg,

var(--gold-light),

var(--gold));

font-size:34px;

color:#fff;

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

}

.feature-card h4{

font-size:24px;

font-weight:700;

margin-bottom:18px;

}

.feature-card p{

font-size:16px;

line-height:1.8;

color:var(--text-light);

}
/*==============================================================
                PREMIUM PUJA CARDS
==============================================================*/

#featured-pujas{
    background:#F8FAFD;
}

#pujaContainer{
    row-gap:40px;
}

/* Card */

.puja-card-v2{

    position:relative;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    height:100%;

    transition:.45s ease;

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

    border:1px solid #EEF2F7;

}

.puja-card-v2:hover{

    transform:translateY(-12px);

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

}


/* Gold strip */

.puja-top-strip{

    height:6px;

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

}


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

.puja-circle{

    width:100%;

    height:240px;

    overflow:hidden;

    background:#F4F6FA;

    position:relative;

}

.puja-circle img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.55s;

}

.puja-card-v2:hover .puja-circle img{

    transform:scale(1.08);

}


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

.puja-card-v2 h3{

    font-size:26px;

    font-weight:700;

    color:#163A63;

    text-align:center;

    padding:28px 24px 10px;

    min-height:88px;

    line-height:1.35;

}


/*==============================================================
                PRICE
==============================================================*/

.starting{

    text-align:center;

    font-size:15px;

    color:#888;

}

.price{

    text-align:center;

    font-size:42px;

    color:#D4AF37;

    font-weight:800;

    margin-top:4px;

    margin-bottom:22px;

}


/*==============================================================
                INFO BOXES
==============================================================*/

.info-box{

    margin:0 20px 15px;

    background:#F8FAFD;

    border-radius:18px;

    padding:18px;

    border:1px solid #EDF1F7;

    transition:.35s;

    text-align:center;

}

.info-box:hover{

    border-color:#D4AF37;

    background:#fff;

    transform:translateY(-3px);

}

.info-box small{

    display:block;

    color:#8C96A5;

    text-transform:uppercase;

    font-size:12px;

    letter-spacing:1px;

    margin-bottom:8px;

}

.info-box strong{

    display:block;

    color:#163A63;

    font-size:18px;

    font-weight:700;

}


/*==============================================================
                CATEGORY
==============================================================*/

.category-badge{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin:18px auto;

    padding:12px 24px;

    background:#FFF7E2;

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

    border-radius:40px;

    color:#A17700;

    font-weight:700;

    font-size:14px;

}

.category-badge i{

    margin-right:8px;

}


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

.buttons{

    padding:0 20px 22px;

    display:flex;

    flex-direction:column;

    gap:14px;

}


/* Common */

.buttons .btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:16px;

    font-weight:700;

    transition:.35s;

    position:relative;

    overflow:hidden;

    text-decoration:none;

}

.buttons .btn i{

    margin-right:10px;

}


/*==============================================================
            QUICK VIEW
==============================================================*/

.quickViewBtn{

    background:
    linear-gradient(
    135deg,
    #F9FBFE,
    #EEF3FA);

    color:#163A63;

    border:2px solid #D4AF37 !important;

}

.quickViewBtn:hover{

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

    color:#163A63;

    transform:translateY(-4px);

}


/*==============================================================
            DETAILS
==============================================================*/

.btn-details{

    background:
    linear-gradient(
    135deg,
    #2567DD,
    #0B3D91);

    color:#fff;

}

.btn-details:hover{

    color:#fff;

    transform:translateY(-4px);

    background:
    linear-gradient(
    135deg,
    #0B3D91,
    #082C69);

}


/*==============================================================
            BOOK NOW
==============================================================*/

.btn-book{

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

    color:#183153;

    font-size:17px;

}

.btn-book:hover{

    color:#183153;

    transform:translateY(-4px);

}


/*==============================================================
            BUTTON SHINE
==============================================================*/

.buttons .btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.8s;

}

.buttons .btn:hover::before{

    left:150%;

}


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

.puja-card-v2::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    border:2px solid transparent;

    transition:.35s;

}

.puja-card-v2:hover::after{

    border-color:#D4AF37;

}


/*==============================================================
            SEARCH
==============================================================*/

#pujaSearch{

    height:62px;

    border-radius:60px;

    border:2px solid #ECECEC;

    padding:0 28px;

    font-size:17px;

    transition:.35s;

}

#pujaSearch:focus{

    border-color:#D4AF37;

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

}

/*==============================================================
                QUICK VIEW MODAL
==============================================================*/

#quickViewModal .modal-dialog{

    max-width:1150px;

}

#quickViewModal .modal-content{

    border:none;

    border-radius:30px;

    overflow:hidden;

    background:#fff;

    box-shadow:
        0 40px 100px rgba(0,0,0,.22);

}

#quickViewModal .modal-header{

    padding:28px 35px;

    border:none;

    background:
    linear-gradient(135deg,#0B3D91,#072C69);

    color:#fff;

}

#quickViewModal .modal-title{

    font-size:34px;

    font-weight:700;

    color:#fff;

}

#quickViewModal .btn-close{

    filter:invert(1);

}

#quickViewModal .modal-body{

    padding:0;

}

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

#modalImage{

    width:100%;

    height:420px;

    object-fit:cover;

    background:#F8FAFD;

}

.modal-body .p-4{

    padding:40px !important;

}

/*==============================================================
                    CATEGORY
==============================================================*/

#modalCategory{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:40px;

    background:#FFF7E5;

    color:#A97800;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

/*==============================================================
                    PRICE
==============================================================*/

#modalPrice{

    font-size:42px;

    color:#D4AF37;

    font-weight:800;

    margin-top:8px;

}

#modalDuration,
#modalBestFor{

    font-size:18px;

    color:#163A63;

    line-height:1.8;

}

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

.puja-section{

    margin-top:35px;

    padding-top:30px;

    border-top:1px solid #EEF2F6;

}

.puja-section h4{

    font-size:24px;

    color:#163A63;

    font-weight:700;

    margin-bottom:18px;

    position:relative;

}

.puja-section h4::after{

    content:"";

    width:70px;

    height:4px;

    background:#D4AF37;

    display:block;

    margin-top:10px;

    border-radius:10px;

}

#modalDescription,
#modalBenefits,
#modalProcedure,
#modalIncludes,
#modalFaqs{

    font-size:17px;

    color:#5F6775;

    line-height:1.95;

}

/*==============================================================
                FAQ BOX
==============================================================*/

#modalFaqs .mb-3{

    background:#F8FAFD;

    border-radius:18px;

    padding:20px;

    margin-bottom:16px;

    border:1px solid #EEF2F7;

}

#modalFaqs h6{

    color:#163A63;

    font-weight:700;

    margin-bottom:10px;

}

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

#quickViewModal .modal-footer{

    border:none;

    padding:30px;

    background:#fff;

}

#modalBookBtn{

    height:62px;

    border:none;

    border-radius:18px;

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

    color:#163A63;

    font-size:20px;

    font-weight:700;

    transition:.35s;

}

#modalBookBtn:hover{

    transform:translateY(-4px);

    color:#163A63;

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

}

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

.puja-card-v2{

    animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.feature-card{

    animation:fadeUp .8s ease both;

}

.trust-box{

    animation:fadeUp .8s ease both;

}

/* Floating effect */

.puja-card-v2:hover{

    animation:floatCard 2.5s ease-in-out infinite;

}

@keyframes floatCard{

0%{

transform:translateY(-10px);

}

50%{

transform:translateY(-16px);

}

100%{

transform:translateY(-10px);

}

}

/*==============================================================
                SCROLLBAR
==============================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#D4AF37;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#F4F6FA;

}

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

@media(max-width:1200px){

.puja-hero h1{

font-size:50px;

}

.section-heading h2{

font-size:40px;

}

}

@media(max-width:992px){

section{

padding:70px 0;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

grid-template-columns:1fr;

}

#modalImage{

height:320px;

}

.puja-card-v2 h3{

font-size:23px;

min-height:auto;

}

}

@media(max-width:768px){

.puja-hero{

padding:90px 0;

text-align:center;

}

.puja-hero h1{

font-size:38px;

}

.section-heading h2{

font-size:32px;

}

.hero-buttons{

flex-direction:column;

}

.hero-btn,
.hero-btn-outline{

width:100%;

text-align:center;

}

.puja-circle{

height:220px;

}

#modalImage{

height:260px;

}

.modal-body .p-4{

padding:25px !important;

}

#quickViewModal .modal-title{

font-size:26px;

}

#modalPrice{

font-size:34px;

}

}

@media(max-width:576px){

.puja-card-v2{

border-radius:22px;

}

.puja-card-v2 h3{

font-size:21px;

padding:22px 16px 10px;

}

.price{

font-size:34px;

}

.info-box{

margin:0 14px 14px;

}

.buttons{

padding:0 14px 18px;

}

.buttons .btn{

height:52px;

font-size:15px;

}

#modalBookBtn{

height:56px;

font-size:18px;

}

}