/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* BODY BACKGROUND - LEMON YELLOW TEMPLE STYLE */
body{
    font-family:'Poppins', sans-serif;
    background: linear-gradient(135deg,#fff8cc,#fff2a8,#ffe680);
    color:#3b0000;
    overflow-x:hidden;

    display:flex;
    flex-direction:column;
    min-height:100vh; /* KEY */
}

/* BODY */


/* PARTICLES behind everything */
.particles{
    z-index:0;
}

/* HEADER - PREMIUM GOLD TEMPLE STYLE */
.main-header{
    text-align:center;
    padding:22px 15px;
    background: linear-gradient(135deg,#7a0000,#b30000,#7a0000);
    position:relative;
}

/* GOLD GLOW LINE */
.main-header::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(to right,transparent,gold,transparent);
}

/* TITLE */
.main-header h1{
    font-family:'Playfair Display', serif;
    font-size:30px;
    letter-spacing:2px;

    /* GOLD GRADIENT TEXT */
    background: linear-gradient(to right,#ffd700,#fff5b7,#ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:0 0 10px rgba(255,215,0,0.6);
}

/* NAVBAR */
/* NAV ALWAYS VISIBLE */
.main-nav{
    display:flex !important;
    justify-content:center;
    gap:35px;
    padding:14px;
    background: linear-gradient(to right,#8b0000,#a80000,#8b0000);
}

/* NAV LINKS */
.main-nav a{
    color:#ffd700;
    text-decoration:none;
    font-weight:600;
    position:relative;
    transition:0.3s;
}

/* UNDERLINE ANIMATION */
.main-nav a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0%;
    height:2px;
    background:gold;
    transition:0.3s;
}

.main-nav a:hover::after{
    width:100%;
}

/* HOVER GLOW */
.main-nav a:hover{
    color:#fff5b7;
    text-shadow:0 0 8px gold;
}

/* HERO */
.hero{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:50px 20px;
    flex-wrap:wrap;
    gap:30px;
}

/* IMAGE */
.hero img{
    width:280px;
    border-radius:20px;
    box-shadow:0 0 25px rgba(255,215,0,0.6);
    animation:glow 3s infinite alternate;
}

@keyframes glow{
    from{ box-shadow:0 0 10px gold; }
    to{ box-shadow:0 0 35px orange; }
}

/* CARD - LIGHT THEME */
.card{
    max-width:600px;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.card p{
    color:#333;
}

.card h2{
     color:#b8860b; /* temple gold */
    margin-bottom:15px;
    font-family:'Playfair Display', serif;
}

.card p{
    line-height:1.7;
    font-size:15px;
}

/* ANIMATION */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* BUTTON */
.btn{
    display:inline-block;
    margin-top:15px;
    padding:10px 20px;
    background:linear-gradient(45deg,gold,orange);
    color:#000;
    border-radius:25px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.btn:hover{
    transform:scale(1.1);
}
/* MAIN CONTENT AREA */
section{
    flex:1; /* pushes footer down */
}
/* ================= FOOTER PREMIUM ================= */

.main-footer{
    text-align:center;
    padding:25px 15px;
    margin-top:40px;

    /* LIGHT GOLD BACKGROUND */
    background: linear-gradient(to right,#fff2a8,#ffe680,#fff2a8);

    /* TOP BORDER */
    border-top:2px solid rgba(184,134,11,0.5);

    /* TEXT STYLE */
    color:#5a0000;
    font-size:14px;
    font-weight:500;
}

/* MOBILE */
@media(max-width:768px){
    .hero{
        flex-direction:column;
        text-align:center;
    }

    .main-nav{
        flex-wrap:wrap;
        gap:15px;
    }

    .main-header h1{
        font-size:22px;
    }
}
/* SWAMIJI PAGE */

.swamiji-page{
    padding:50px 20px;
}

.swamiji-container{
    display:flex;
    gap:40px;
    align-items:flex-start;
    max-width:1100px;
    margin:auto;
    flex-wrap:wrap;
}

/* IMAGE */
.swamiji-image img{
    width:320px;
    border-radius:20px;
    box-shadow:0 0 30px rgba(255,215,0,0.6);
    animation:glow 3s infinite alternate;
}

/* SWAMIJI CONTENT - WHITE PREMIUM CARD */
.swamiji-content{
    flex:1;
    background:#ffffff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
    animation:fadeUp 1.2s ease;
}

/* TEXT COLORS FIX */
.swamiji-content p{
    color:#333;
}

.swamiji-content h2{
    color:#b8860b; /* temple gold */
}

.swamiji-content h3{
    color:#5a0000;
}

.swamiji-content h4{
    color:#b8860b;
}

/* DIVIDER */
.divider{
    height:2px;
    background:linear-gradient(to right,transparent,gold,transparent);
    margin:20px 0;
}

/* ABOUT PAGE */

.about-page{
    padding:80px 20px;
    text-align:center;
}

.about-container{
    max-width:800px;
    margin:auto;
}

/* WHITE CARD */
.about-card{
    background:#ffffff;
    padding:50px 30px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
    border:2px solid rgba(184,134,11,0.3);
}

/* HEADING */
.about-card h2{
    font-family:'Playfair Display', serif;
    color:#b8860b;
    margin-bottom:20px;
}

/* TEXT */
.about-card p{
    font-size:18px;
    color:#444;
}
/* SERVICES PAGE */

.services-page{
    padding:60px 20px;
    text-align:center;
}

/* TITLE */
.section-title{
    font-family:'Playfair Display', serif;
    color:#b8860b;
    margin-bottom:40px;
}

/* GRID */
.services-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
    max-width:1100px;
    margin:auto;
}

/* CARD */
.service-card{
    background:#ffffff;
    padding:25px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
    border:2px solid rgba(184,134,11,0.3);
    transition:0.3s;
}

/* HOVER */
.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

/* TITLE */
.service-card h3{
    color:#5a0000;
    margin-bottom:10px;
}

/* TEXT */
.service-card p{
    color:#444;
    font-size:14px;
    line-height:1.6;
}

/* BUTTON */
.service-card .btn{
    margin-top:12px;
}
/* CONTACT PAGE */

.contact-page{
    padding:60px 20px;
    text-align:center;
}

/* GRID */
.contact-container{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    max-width:800px;
    margin:auto;
}

/* CARD */
.contact-card{
    background:#ffffff;
    padding:30px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
    border:2px solid rgba(184,134,11,0.3);
    min-width:260px;
}

/* TITLE */
.contact-card h3{
    color:#b8860b;
    margin-bottom:10px;
}

/* TEXT */
.contact-card p{
    font-size:16px;
}

/* LINKS */
.contact-card a{
    color:#5a0000;
    text-decoration:none;
    font-weight:500;
}

.contact-card a:hover{
    text-decoration:underline;
}

/* ================= MOBILE RESPONSIVE (GLOBAL FIX) ================= */
@media(max-width:768px){

    /* HEADER */
    .main-header h1{
        font-size:22px;
        line-height:1.3;
        padding:0 10px;
    }

    /* NAV */
    .main-nav{
        flex-wrap:wrap;
        gap:12px;
        padding:10px;
    }

    .main-nav a{
        font-size:14px;
    }

    /* HERO */
    .hero{
        flex-direction:column;
        text-align:center;
        padding:30px 15px;
    }

    .hero img{
        width:85%;
        max-width:300px;
        margin:auto;
        display:block;
    }

    /* COMMON CARD */
    .card{
        width:100%;
        padding:20px;
    }
    

    /* ================= SWAMIJI ================= */
    .swamiji-container{
        flex-direction:column;
        align-items:center; /* IMPORTANT FIX */
        text-align:center;
        gap:20px;
    }

    .swamiji-image{
        width:100%;
        text-align:center;
    }

    .swamiji-image img{
        width:85%;
        max-width:280px;
        margin:auto;
        display:block; /* CENTER FIX */
    }

    .swamiji-content{
        width:100%;
        padding:20px;
        text-align:left; /* better reading */
    }

    /* ================= ABOUT ================= */
    .about-page{
        padding:40px 15px;
    }

    .about-card{
        padding:30px 20px;
    }

    /* ================= SERVICES ================= */
    .services-page{
        padding:40px 15px;
    }

    .services-container{
        grid-template-columns:1fr; /* single column */
        gap:20px;
    }

    .service-card{
        padding:20px;
    }

    /* ================= CONTACT ================= */
    .contact-page{
        padding:40px 15px;
    }

    .contact-container{
        flex-direction:column;
        gap:20px;
    }

    .contact-card{
        width:100%;
    }

}