*,
*::before,
*::after {
    animation: none !important;
    transition: none !important;
}
/*=========================================
GENERAL
=========================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:

    linear-gradient(

        rgba(255,248,231,.96),

        rgba(255,248,231,.96)

    ),

    url('../images/pattern.png');

}

a{

    text-decoration:none;

}

img{

    max-width:100%;

}

.section-padding{

    padding:20px 0;

}

.section-title{

    margin-bottom:50px;

    text-align:center;

}

.section-title h2{

    color:var(--primary);

    font-size:42px;

    position:relative;

    display:inline-block;

    padding-bottom:18px;

}

.section-title h2::after{

    content:'';

    position:absolute;

    width:80px;

    height:4px;

    background:var(--gold);

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    border-radius:10px;

}


body{

    background:

    linear-gradient(

    rgba(255,248,231,.95),

    rgba(255,248,231,.95)

    ),

    url("../images/pattern.png");

}

.temple-navbar{

    transition:.5s;

    padding:18px 0;

    background:transparent;

}

.temple-navbar.scrolled{

    background:var(--primary);

    box-shadow:var(--shadow);

}

.navbar-brand{

    color:white;

    font-size:28px;

    font-weight:bold;

}

.navbar-brand i{

    color:gold;

    margin-right:10px;

}

.nav-link{

    color:white;

    margin-left:25px;

    font-weight:600;

    position:relative;

}

.nav-link::after{

    content:'';

    position:absolute;

    bottom:-5px;

    left:0;

    width:0;

    height:2px;

    background:gold;

    transition:.4s;

}

.nav-link:hover::after{

    width:100%;

}

.section-divider{

    text-align:center;

    margin:60px 0;

}

.section-divider img{

    width:250px;

}


.temple-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    padding:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

    transition:.4s;

    border-top:5px solid var(--gold);

}

.temple-card:hover{

    transform:translateY(-10px);

}

.hero-bg{

    position:absolute;

    inset:0;

    background:url('../images/godess_varahi.png');

    background-size:cover;

    background-position:center;

    animation:heroZoom 25s linear infinite alternate;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(70,0,0,.65),
        rgba(0,0,0,.55)
    );

}

.hero-section{

border-bottom:6px solid gold;

}

.hero-section::after{

content:"";

position:absolute;

bottom:0;

left:0;

width:100%;

height:180px;

background:

linear-gradient(

transparent,

#fff8e7

);

}

.hero-top-border{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:18px;

    background:

    linear-gradient(
        90deg,
        #7a0000,
        gold,
        #7a0000
    );

}

.scroll-indicator{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:28px;

    animation:bounce 2s infinite;

}

.hero-section{

    height:100vh;

    background-size:cover;

    background-position:center;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

}

.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    rgba(70,0,0,.70),

    rgba(0,0,0,.55)

    );

}

.hero-content{

    position:relative;

    z-index:10;

    color:white;

}

.hero-content h1{

    font-size:70px;

    margin:20px 0;

    font-weight:700;

}

.hero-content h4{

    color:gold;

    letter-spacing:3px;

}

.hero-content p{

    font-size:20px;

    max-width:800px;

    margin:auto;

    line-height:1.8;

}

.temple-btn{

    background:linear-gradient(

    45deg,

    #ffc107,

    #ffeb3b

    );

    color:#5A0016;

    margin-top:35px;

    padding:14px 40px;

    border-radius:40px;

    font-weight:bold;

    transition:.4s;

    box-shadow:

    0 10px 30px rgba(255,193,7,.5);

}

.temple-btn:hover{

    transform:translateY(-5px);

}

.temple-img{

    border:8px solid white;

    box-shadow:var(--shadow);

    border-radius:25px;

}

.gallery-img{

    border-radius:18px;

    transition:.5s;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.gallery-img:hover{

    transform:scale(1.08);

}

.contact-section{

    background:#fffaf0;

}

.contact-section i{

    color:var(--primary);

    font-size:22px;

    margin-right:10px;

}

footer{

    background:var(--maroon);

    color:white;

    padding:40px 0;

    text-align:center;

}

footer h4{

    color:gold;

}

.scrollTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    background:gold;

    color:maroon;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    z-index:999;

    box-shadow:var(--shadow);

}


#preloader{

    position:fixed;

    inset:0;

    background:#3d0000;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader{

    color:gold;

    font-size:90px;

}

/* Bells */

.bell{

    position:absolute;

    top:15px;

    font-size:50px;

    color:gold;

    z-index:50;

    animation:bellSwing 4s infinite;

    width: 60px;

    height: 60px;

    object-fit: contain;

}

.bell-left{

    left:80px;

}

.bell-right{

    right:80px;

}

/* Flowers */

.flowers{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.flowers span{

    position:absolute;

    top:-100px;

    font-size:24px;

    animation:flowerFall linear infinite;

}

.flowers span:nth-child(1){

    left:10%;
    animation-duration:15s;

}

.flowers span:nth-child(2){

    left:30%;
    animation-duration:18s;

}

.flowers span:nth-child(3){

    left:55%;
    animation-duration:13s;

}

.flowers span:nth-child(4){

    left:75%;
    animation-duration:17s;

}

.flowers span:nth-child(5){

    left:90%;
    animation-duration:20s;

}

.whatsapp{

    position:fixed;

    bottom:95px;

    right:25px;

    width:60px;

    height:60px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:28px;

    z-index:9999;

    animation:pulse 2s infinite;

}

/* Gallery */

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:15px;

}

.gallery-item img{

    transition:.6s;

}

.gallery-overlay{

    position:absolute;

    inset:0;

    background:

    rgba(80,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.4s;

}

.gallery-item:hover img{

    transform:scale(1.1);

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.temple-quote{

    padding:80px 0;

    background:white;

}

.quote-box{

    background:linear-gradient(
        135deg,
        #fff8e7,
        #fff2cc
    );

    border-radius:25px;

    padding:60px;

    position:relative;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.quote-box h2{

    color:var(--primary);

    margin-bottom:25px;

}

.quote-box p{

    font-size:20px;

    line-height:1.8;

}

.quote-om{

    width:70px;

    margin-bottom:20px;

}

.timing-card{

    background:white;

    padding:50px;

    border-radius:25px;

    text-align:center;

    box-shadow:var(--shadow);

    border-top:5px solid var(--gold);

    transition:.4s;

}

.timing-card:hover{

    transform:translateY(-10px);

}

.timing-card h1{

    font-size:50px;

    color:var(--primary);

}

.about-list{

    list-style:none;

    padding:0;

}

.about-list li{

    padding:12px 0;

    border-bottom:1px dashed #ddd;

}

.about-list li::before{

    content:"🪔 ";

}

.bg-mandala{

    position:fixed;

    width:350px;

    height:350px;

    opacity:.05;

    z-index:-1;

    background:url('../images/mandala.png');

    background-size:cover;

}

.left{

    left:-120px;

    top:150px;

}

.right{

    right:-120px;

    bottom:100px;

}

.diya{

    position:fixed;

    bottom:15px;

    width:70px;

    opacity:.9;

    z-index:50;

}

.diya-left{

    left:20px;

}

.diya-right{

    right:20px;

}

.temple-bg{

background:

linear-gradient(

rgba(255,248,231,.95),

rgba(255,248,231,.95)

),

url("../images/pattern.png");

}

.festival-card{

background:white;

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:0 15px 35px rgba(0,0,0,.12);

transition:.4s;

position:relative;

overflow:hidden;

}

.festival-card:hover{

transform:translateY(-12px);

}

.festival-card::before{

content:"";

position:absolute;

top:0;

left:0;

height:5px;

width:100%;

background:linear-gradient(

90deg,

gold,

#ff9800

);

}

.festival-day{

width:75px;

height:75px;

background:var(--primary);

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

margin:auto;

font-weight:bold;

margin-bottom:20px;

font-size:18px;

}

.festival-card h4{

color:var(--primary);

margin-bottom:20px;

}

.seva-card{

background:white;

padding:40px;

border-radius:20px;

text-align:center;

transition:.4s;

box-shadow:var(--shadow);

}

.seva-card:hover{

background:var(--primary);

color:white;

}

.seva-card i{

font-size:45px;

color:gold;

margin-bottom:20px;

}

.seva-card:hover i{

color:white;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:20px;

box-shadow:var(--shadow);

}

.gallery-item img{

width:100%;

height:320px;

object-fit:cover;

transition:.6s;

}

.gallery-item:hover img{

transform:scale(1.12);

}

.gallery-overlay{

position:absolute;

left:0;

bottom:0;

width:100%;

padding:25px;

background:linear-gradient(

transparent,

rgba(0,0,0,.85)

);

color:white;

opacity:0;

transition:.5s;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.timeline{

position:relative;

margin-top:60px;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

width:4px;

height:100%;

background:gold;

}

.timeline-item{

width:45%;

background:white;

padding:30px;

border-radius:20px;

margin-bottom:40px;

box-shadow:var(--shadow);

}

.left{

margin-right:auto;

}

.right{

margin-left:auto;

}

.timeline-item h4{

color:var(--primary);

}

.festival-banner{

padding:120px 0;

text-align:center;

color:white;

background:

linear-gradient(

rgba(90,0,0,.82),

rgba(40,0,0,.82)

),

url("../images/varahi_ammavari_navaratri_1_kalabhairava.jpeg");

background-size:cover;

background-position:center;

background-attachment:fixed;

}

.festival-banner h1{

font-size:55px;

margin:25px 0;

}