/* ========================= */
/* GLOBAL MOBILE OPTIMIZATION */
/* ========================= */

img{
max-width:100%;
height:auto;
display:block;
}

section{
padding:60px 5%;
}

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

@media(max-width:768px){

header{
padding:10px 5%;
flex-wrap:wrap;
}

/* STACK LOGO + MENU */
.logo-area{
width:100%;
justify-content:space-between;
}

/* MENU MOBILE */
.menu{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:center;
margin-top:10px;
}

.menu a{
margin:8px 12px;
font-size:14px;
}

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

.hero{
height:80vh;
}

.hero h1{
font-size:26px;
}

.hero-content{
padding:15px;
}

/* ========================= */
/* NOTICE */
/* ========================= */

.notice-content{
padding:10px;
}

.notice-content h3{
font-size:20px;
}

.notice-content p{
font-size:14px;
}

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

.about-container{
flex-direction:column;
gap:25px;
}

.about-content h2{
font-size:24px;
text-align:center;
}

.about-text{
font-size:15px;
text-align:center;
}

/* ========================= */
/* OBJECTIVES */
/* ========================= */

.objectives-container h2{
font-size:24px;
}

.objectives-list li{
font-size:14px;
padding:12px;
}

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

.section-title{
font-size:26px;
}

.service-card img{
height:150px;
}

/* ========================= */
/* GALLERY */
/* ========================= */

.gallery-item img{
height:160px;
}

/* ========================= */
/* EVENTS */
/* ========================= */

.event-card{
padding:20px;
}

/* ========================= */
/* DONATION */
/* ========================= */

.donation-container{
grid-template-columns:1fr;
text-align:center;
}

.donation-content h2{
font-size:26px;
}

.donation-buttons{
flex-direction:column;
align-items:center;
}

.donate-btn,
.donate-outline{
width:80%;
}

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

.footer-container{
text-align:center;
}

.footer-box{
margin-bottom:15px;
}

.map-container{
height:180px;
}

}

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

@media(max-width:480px){

.hero h1{
font-size:22px;
}

.section{
padding:50px 4%;
}

.menu a{
font-size:13px;
}

.donate-btn,
.donate-outline{
width:100%;
}

}

/* ========================= */
/* TOUCH UX IMPROVEMENT */
/* ========================= */

button,
a{
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
}

/* ========================= */
/* SMOOTH SCROLL OFFSET FIX */
/* ========================= */

section{
scroll-margin-top:80px;
}
/* ============ */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins;
}

body{
background:#fff6e5;
color:#333;
scroll-behavior:smooth;
}

/* HEADER */

header{
position:fixed;
top:0;
width:100%;
background:#8b0000;
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 8%;
z-index:1000;
box-shadow:0 3px 10px rgba(0,0,0,0.2);
animation:slideDown 0.8s ease;
}

/* HEADER ANIMATION */

@keyframes slideDown{
from{
transform:translateY(-100%);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}

/* LOGO AREA */

.logo-area{
display:flex;
align-items:center;
gap:12px;
}

.logo{
width:45px;
height:45px;
border-radius:50%;
object-fit:cover;
}

/* TRUST NAME */

.trust-name{
color:white;
font-size:18px;
font-weight:600;
letter-spacing:1px;
}

/* MENU */

.menu a{
color:white;
margin-left:25px;
text-decoration:none;
font-weight:500;
position:relative;
transition:0.3s;
}

/* MENU HOVER ANIMATION */

.menu a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0%;
height:2px;
background:#ff7a00;
transition:0.4s;
}

.menu a:hover::after{
width:100%;
}

.menu a:hover{
color:#ff7a00;
}

.hero{
height:100vh;
position:relative;
display:flex;
align-items:flex-end;
justify-content:center;
text-align:center;
color:white;
overflow:hidden;
}

.slides{
position:absolute;
width:100%;
height:100%;
}

.slide{
position:absolute;
width:100%;
height:150%;
background-size:cover;
background-position:center;
opacity:0;
transition: 1s;
}

.slide.active{
opacity:1;
}
/* SLIDER BUTTONS */

.slider-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
color:white;
border:none;
font-size:30px;
padding:10px 15px;
cursor:pointer;
z-index:5;
}

.slider-btn:hover{
background:#ff7a00;
}

.prev{
left:20px;
}

.next{
right:20px;
}
.hero-content{
z-index:2;
background:rgba(0, 0, 0, 0);
padding:30px;
border-radius:10px;
}

.hero h1{
font-size:45px;
}

.donate-btn{
padding:5px 35px;
background:#ff7a00;
border:none;
color:white;
margin-top:10px;
}

.mantra-heading{
text-align:center;
font-size:32px;
margin-bottom:30px;
animation:fadeDown 1s ease;
}

.mantra-item{
background:#fff;
padding:20px;
margin:15px auto;
border-radius:12px;
max-width:700px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
}
/* LETTER JUMP */

.jump-text span{
display:inline-block;
opacity:0;
transform:translateY(40px);
animation:jumpUp 0.9s ease forwards;
}

/* KEYFRAME */

@keyframes jumpUp{
0%{
opacity:0;
transform:translateY(40px);
}
50%{
opacity:1;
transform:translateY(-10px);
}
100%{
transform:translateY(0);
}
}
.jump-text span{
text-shadow:0 0 5px #fff, 0 0 10px #ffcc00, 0 0 20px #ff7a00;
}
/* objectives*/ 
.objectives-list li{
cursor:pointer;
transition:0.5s;
}

.objectives-list li:hover{
background:#fff3e0;
transform:translateX(5px);
}
/* Active animation */
.mantra-item.show{
opacity:1;
transform:translateY(0);
}

/* Titles */
.title{
font-weight:bold;
font-size:20px;
margin-bottom:10px;
}

.big{
font-size:24px;
text-align:center;
color:#8B0000;
}

/* Content */
.content{
line-height:1.8;
font-size:18px;
color:#520202;
}

/* Special Boxes */
.center-box{
text-align:center;
background:#fff8e1;
}

.footer-box{
text-align:center;
background:#ab1515fd;
color:#ffffff;
}

/* Highlight effect */
.highlight{
background:linear-gradient(135deg,#ffe0b2,#ffcc80);
animation:pulseGlow 2s infinite alternate;
}

/* Chant animation */
.chant{
font-size:22px;
font-weight:bold;
animation:zoomIn 1.2s ease infinite alternate;
}

/* Hover effect */
.mantra-item:hover{
transform:translateY(-5px) scale(1.02);
}

/* Keyframes */
@keyframes fadeDown{
from{opacity:0; transform:translateY(-30px);}
to{opacity:1; transform:translateY(0);}
}

@keyframes pulseGlow{
from{box-shadow:0 0 10px rgba(255,140,0,0.5);}
to{box-shadow:0 0 25px rgba(255,87,34,0.9);}
}

@keyframes zoomIn{
from{transform:scale(1);}
to{transform:scale(1.1);}
}
/*notice */
.notice{
background:#fff8f0;
}

.notice-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.notice-image img{
width:100%;
border-radius:10px;
box-shadow:0 5px 15px rgba(201, 5, 5, 0.872);
transition:0.3s;
}

.notice-image img:hover{
transform:scale(1.05);
}

.notice-content h3{
font-size:28px;
margin-bottom:15px;
color:#8B0000;
}

.notice-content{
  text-align: center;
  max-width: 800000px;
  margin: 0 auto;
  
}

.notice-content h3{
  margin-bottom: 15px;
}

.notice-content p{
  line-height: 1.6;
}

.view-btn{
display:inline-block;
padding:10px 20px;
background:#8B0000;
color:#fff;
text-decoration:none;
border-radius:5px;
transition:0.3s;
}

.view-btn:hover{
background:#a30000;
}

/* Responsive */
@media(max-width:768px){
.notice-wrapper{
grid-template-columns:1fr;
text-align:center;
}
}
/* ABOUT */

.about-section{
padding:80px 10%;
background:#ffffff;
}

.about-container{
display:flex;
align-items:center;
gap:60px;
flex-wrap:wrap;
}

.about-image{
flex:1;
}

.about-image img{
width:100%;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.about-content{
flex:1;
}

.about-content h2{
font-size:32px;
color:#8B0000;
margin-bottom:15px;
}

.trustees{
padding-left:20px;
line-height:1.8;
}

.about-text{
margin-top:10px;
line-height:1.7;
color:#444;
}


/* OBJECTIVES */

.objectives-section{
padding:80px 10%;
background:#f7f7f7;
}

.objectives-container{
max-width:1000px;
margin:auto;
}

.objectives-container h2{
text-align:center;
margin-bottom:40px;
font-size:30px;
color:#8B0000;
}

.objectives-list{
padding-left:20px;
}

.objectives-list li{
background:white;
margin-bottom:15px;
padding:15px 20px;
border-left:5px solid #8B0000;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
border-radius:5px;
line-height:1.6;
}


/* ANIMATION */

.slide-left,
.slide-right,
.fade-up{
opacity:0;
transition:all 1s ease;
}

.slide-left{
transform:translateX(-80px);
}

.slide-right{
transform:translateX(80px);
}

.fade-up{
transform:translateY(40px);
}

.show{
opacity:1;
transform:translateX(0) translateY(0);
}
/* SERVICES */

.section{
padding:80px 10%;
background:#fff;
text-align:center;
}

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

.section-title{
font-size:34px;
margin-bottom:10px;
color:#8b0000;
}

.section-subtitle{
color:#555;
margin-bottom:50px;
}

/* SERVICES */

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.service-card{
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}

.service-card:hover{
transform:translateY(-8px);
}

.service-card img{
width:100%;
height:180px;
object-fit:cover;
}

.service-content{
padding:20px;
}

/* GALLERY */

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.gallery-item img{
width:100%;
height:200px;
object-fit:cover;
cursor:pointer;
border-radius:8px;
transition:0.3s;
}

.gallery-item img:hover{
transform:scale(1.05);
}

/* POPUP */

.img-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:none;
align-items:center;
justify-content:center;
}

.img-popup img{
max-width:80%;
max-height:80%;
border-radius:10px;
}

/* EVENTS */

.event-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.event-card{
background:#f9f9f9;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}

.event-card:hover{
background:#fff3e0;
transform:translateY(-5px);
}

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

.donation{
background:linear-gradient(rgba(139,0,0,0.85),rgba(139,0,0,0.85)),
url("temple/temple2.jpg");
background-size:cover;
background-position:center;
color:white;
overflow:hidden;
}

/* GRID */

.donation-container{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px;
}

/* TEXT */

.donation-content{
animation:slideLeft 1.2s ease;
}

.donation-content h2{
font-size:36px;
margin-bottom:15px;
}

.donation-content p{
font-size:17px;
margin-bottom:25px;
line-height:1.6;
}

/* BUTTONS */

.donation-buttons{
display:flex;
gap:15px;
}

.donate-btn{
background:#ffd700;
border:none;
padding:12px 28px;
font-size:16px;
cursor:pointer;
border-radius:5px;
font-weight:600;
transition:0.3s;
}

.donate-btn:hover{
transform:scale(1.08);
background:#ffcc00;
}

.donate-outline{
background:transparent;
border:2px solid #fff;
padding:12px 28px;
color:#fff;
cursor:pointer;
border-radius:5px;
transition:0.3s;
}

.donate-outline:hover{
background:white;
color:#aa0707e7;
transform:scale(1.05);
}

/* IMAGE */

.donation-image img{
width:100%;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
animation:slideRight 1.2s ease;
transition:0.4s;
}

.donation-image img:hover{
transform:scale(1.05);
}

/* ANIMATIONS */

@keyframes slideLeft{
from{
opacity:0;
transform:translateX(-80px);
}
to{
opacity:1;
transform:translateX(0);
}
}

@keyframes slideRight{
from{
opacity:0;
transform:translateX(80px);
}
to{
opacity:1;
transform:translateX(0);
}
}

/* FOOTER */

.footer{
background:#b30000;
color:#fff;
padding:50px 20px 20px;
}

.footer-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
max-width:1200px;
margin:auto;
}

.footer-box h3{
margin-bottom:15px;
color:#ffcc00;
}

.footer-box p{
line-height:1.7;
font-size:14px;
}

.footer-box a{
color:#ddd;
text-decoration:none;
}

.footer-box a:hover{
color:#ffcc00;
}

.footer-box ul{
list-style:none;
padding:0;
}

.footer-box ul li{
margin:8px 0;
}

.footer-bottom{
text-align:center;
margin-top:30px;
border-top:1px solid #333;
padding-top:15px;
font-size:14px;
}
/* FOOTER */

footer{
background:#5a0000;
color:white;
text-align:center;
padding:20px;
}
html {
    scroll-behavior: smooth;
}
.map-container{
margin-top:15px;
width:100%;
height:200px;
border-radius:8px;
overflow:hidden;
}

.map-container iframe{
width:100%;
height:100%;
border:0;
}
.map-btn{
display:inline-block;
margin-top:10px;
padding:8px 15px;
background:#0073ff48;
color:#000;
text-decoration:none;
border-radius:5px;
font-size:14px;
}

.map-btn:hover{
background:#ffd633;
}