*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI', sans-serif;
}

body{
    background:#ececec;
    color:#333;
    letter-spacing: 0.5px;
}


/* ================= BACK TO TOP BUTTON ================= */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    background-color: #3d0026; /* dark brown/purple */
    color: white;
    border: none;
    width: 50px;       /* circle width */
    height: 50px;      /* circle height */
    border-radius: 50%; /* makes it perfectly circular */
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: none; /* hidden by default */
    transition: background-color 0.3s, transform 0.3s;
}

#backToTop:hover {
    background-color: #be4f00; /* hover color */
    transform: scale(1.2);      /* slightly bigger on hover */
}


/* ================= NAVBAR ================= */
.header{
    background:#300010;
    padding:20px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
    z-index:1000;
}

.logo{
    color:white;
    font-size:40px;
    font-weight:bold;
  
}

.nav ul{
    list-style:none;
    display:flex;
    gap:10px;
    font-size:15px;

}

.nav a{
    text-decoration:none;
    color:white;
    transition:0.3s;
    font-weight:500;
    padding:5px 10px;
}

.nav a:hover{
    color:#ffae00;
}



/* ================= BUTTON ================= */
.btn-apply{
    background:#3f0906;
    font-size:15px;
    padding:10px 15px;
    border-radius:25px;
    font-weight:bold;
}

.nav .btn-apply {
    font-size: 15px;
    color:#ffffff;
}



/* ================= MOBILE NAVIGATION ================= */
.menu-toggle{
    display:none;
    width:30px;
    height:25px;
    position:relative;
    cursor:pointer;
    z-index:1100;
}

.menu-toggle span{
    position:absolute;
    width:100%;
    height:3px;
    background:white;
    border-radius:3px;
    transition:0.4s ease;
}

.menu-toggle span:nth-child(1){ top:0; }
.menu-toggle span:nth-child(2){ top:10px; }
.menu-toggle span:nth-child(3){ top:20px; }

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg);
    top:10px;
}
.menu-toggle.active span:nth-child(2){
    opacity:0;
}
.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg);
    top:10px;
}

@media(max-width:768px){

    .menu-toggle{
        display:block;
    }

   

    .nav{
        position:relative;     /* 🔥 IMPORTANT CHANGE */
        top:100%;
        right:0; /* FIXED */
        width:100%;
        background:#27150a; 
        padding:15px 20px;      /* ✅ Smaller height */
        display:none;
        text-align:left;
        box-shadow:0 8px 20px rgba(0,0,0,0.2);
        animation:slideDown 0.3s ease;
       
    }

    .nav ul{
        flex-direction:column;
        gap:5px;
    }

    .nav a{
        font-size:18px;
        display:block;
        padding:10px 0;
    }

    .nav.active{
        display:block;
    }
}

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



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

.hero{
    display: flex;
    min-height: 400px;   /* FIXED HEIGHT instead of vh */
    overflow: hidden;
    gap: 10px;
    background-color: #fff4e5;
}


/* ===== LEFT SIDE SLIDER ===== */
.hero-slider{
    flex: 2;
    position: relative;
    min-height: 400px;   /* Important */
}

.slide{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Dark overlay */
.slide::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(206, 252, 2, 0.034), rgba(0,0,0,0.3));
}

.slide.active{
    opacity: 1;
}



/* ===== RIGHT SIDE TEXT ===== */
.hero-text{
    flex: 1;
    background: #fff4e5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 40px;
}

.hero-text h2{
    font-size: 50px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: 1px;
    color: #3d0119;
}

.hero-text p{
    font-size: 20px;
    margin-bottom: 30px;
    color: #1d1c1c;
   
}

.btnindex{
    display: inline-block;
    padding: 12px 25px;
    background: #3d0026;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 18px;
    transition: 0.3s;
}

.btnindex:hover{
    background: #be4f00;
    transform: translateY(-3px);
}


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

@media(max-width:768px){

    .hero{
        flex-direction: column;
        height: auto;
    }

    .hero-slider{
        width: 100%;
        height: 45vh;   /* Important: Give fixed height */
        position: relative;
    }

    .hero-text{
        width: 100%;
        padding: 30px 20px;
        text-align: center;
        align-items: center;
    }

    /* 🔥 MAKE TITLE LARGE ONLY IN MOBILE */
    .hero-text h2{
        font-size: 42px;   /* Increase this if you want bigger */
        line-height: 1.2;
    }


    .hero-text p{
        font-size: 18px;
    }
}

/* ================= Heepitiya Purana Viharaya ================= */

.about{
    padding:50px 50px;
    text-align:center;
    background-color:#ffffff;
    margin-top:10px; 
   
}

/* Remove large gap */
.about h2{
    margin-bottom:15px;
    font-size: 30px;
    color: #300010;
   
}

.about p{
    font-size: 20px;
    color: #300010;
    text-align: justify;
   
}

/* ================= VISION ================= */

.vision-mission{
    display:flex;
    justify-content:center;
    gap:40px;
    padding:30px 8%;
    background-color: #ffffff;

}

.vision-mission h3{
    font-size: 30px;
    text-align: center;
}
.box1{
    background:#300010;
    color:rgb(255, 208, 0);
    padding:30px;
    width:500px;
    text-align:center;
    font-size: 18px;
    border-radius:10px;
    gap: 10px;
    text-align: justify;
}



/* TEMPLE PLACES SECTION */
/* ===== TEMPLE PLACES SECTION ===== */

.temple-places {
    padding: 80px 20px;
    background: #ffffff;
    margin-top:10px; 
}

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

.section-title {
    text-align: center;
    font-size: 30px;
    color: #300010;
    margin-bottom: 60px;
    font-weight: 700;
}

/* GRID LAYOUT */
.places-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* SECOND ROW CENTER ALIGN (for 5 items layout) */
.places-wrapper .place-card:nth-child(4),
.places-wrapper .place-card:nth-child(5) {
    grid-column: span 1;
}

/* CARD DESIGN */
.place-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: 0.3s ease;
}

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

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

.place-content {
    padding: 20px;
}

.place-content h3 {
    font-size: 20px;
    color: #300010;
    margin-bottom: 12px;
    text-align: center;
}

.place-content p {
    font-size: 15px;
    color: #494949;
    line-height: 1.6;
    text-align: justify;
}

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

/* Tablet */
@media (max-width: 992px) {
    .places-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .places-wrapper {
        grid-template-columns: 1fr;
    }

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


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

@media(max-width:768px){

    .menu-toggle{
        display:block;
    }

    .nav{
        position:absolute;
        top:70px;
        right:-100%;
        width:220px;
        background:#300010;
        padding:20px;
        border-radius:10px 0 0 10px;
        transition:0.4s;
    }

    .nav ul{
        flex-direction:column;
        gap:20px;
    }

    .nav.active{
        right:0;
    }

    /* HERO STACK MOBILE */
    .hero{
        flex-direction:column;
        gap:20px;
    }

    .hero-slider{
        width:100%;
        height:300px;
    }

    .hero-text{
        width:100%;
        padding:30px;
        text-align:center;
    }

    .vision-mission{
        flex-direction:column;
        align-items:center;
        padding: 8px;
    }
}


/* ================= EVENTS ================= */ 
.events{ 
    padding:60px 10%; 
    background:#ffffff;
    margin-top:10px; 
} 

.events h2{ 
    text-align:center; 
    margin-bottom:50px; 
    font-size:30px;
    color: #300010;
} 

.event-container{ 
    display:flex; 
    flex-wrap:initial; 
    gap:10px; 
    font-size: 15px;
    color: #333;
    
} 

.event-card
{ background:white; 
    width:300px; 
    border-radius:10px;
    overflow:hidden; 
    box-shadow:0 4px 15px rgba(0,0,0,0.1);
    transition:0.3s; } 
    
    
.event-card:hover{ 
    transform:translateY(-5px); 
} 
    
.event-card img{ 
    width:100%; 
    height:200px; 
    object-fit:cover; 
}
    
.event-content{ 
    padding:20px;
   
 } 

 .event-content p {
    text-align: justify;
 }
    
.btn-small{ 
    display:inline-block; 
    margin-top:10px; 
    padding:8px 10px; 
    background:#e45b00;
    color:white; 
    text-decoration:none; 
    border-radius:20px; 
}




/* ================= TEMPLE PROGRAMMES ================= */

.temple-programmes{
    padding:60px 8%;
    background:#ffffff;
    text-align:center;
     margin-top: 10px;
}

.temple-programmes h2{
    font-size:30px;
    color:#300010;
    margin-bottom:40px;
}

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

.programme-card{
    background:#ffffff;
    padding:20px;
    border-radius:15px;
    box-shadow:0 4px 15px rgba(0,0,0,0.1);
    transition:0.3s;
}

.programme-card:hover{
    transform:translateY(-5px);
}

.programme-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:15px;
}

.programme-card h3{
    font-size:20px;
    color:#300010;
    margin-bottom:8px;
}

.programme-card p{
    font-size:15px;
    color:#333;
}



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

@media(max-width:768px){

    .seela-card img,
    .programme-card img{
        height:180px;
    }

    .seela-section h2,
    .temple-programmes h2{
        font-size:30px;
    }
}

/* ================= SEELA WADASATAHAN ================= */

.seela-section{
    padding:60px 8%;
    background:#ffffff;
    text-align:center;
     margin-top: 10px;
}

.seela-section h2{
    font-size:30px;
    color:#300010;
    margin-bottom:40px;
}

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

.seela-card{
    background:#f8f8f8;
    padding:20px;
    border-radius:15px;
    box-shadow:0 4px 15px rgba(0,0,0,0.1);
    transition:0.3s;
}

.seela-card:hover{
    transform:translateY(-5px);
}

.seela-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:15px;
}

.seela-card h3{
    font-size:20px;
    color:#300010;
    margin-bottom:8px;
}

.seela-card p{
    font-size:15px;
    color:#333;
}


/* ================= PROGRAMME CONTACT ================= */

.programme-contact{
    margin-top:10px;
    padding:40px;
    background:#300010;
    color:white;
    border-radius:15px;
    text-align:center;
}

.programme-contact h3{
    font-size:30px;
    margin-bottom:15px;
}

.programme-contact p{
    font-size:15px;
    margin-bottom:20px;
    opacity:0.9;
}

.contact-details{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
    margin-bottom:25px;
    text-align:left;
}

.contact-item{
    background:rgba(112, 1, 1, 0.514);
    padding:15px;
    border-radius:10px;
}

.contact-item strong{
    display:block;
    margin-bottom:8px;
}

.donate-btn{
    display:inline-block;
    padding:12px 25px;
    background:#ffffff;
    color:#300010;
    text-decoration:none;
    border-radius:30px;
    font-weight:600;
    transition:0.3s;
}

.donate-btn:hover{
    background:#f5d9a0;
    transform:translateY(-3px);
}



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

@media(max-width:768px){

    .programme-contact{
        padding:25px 15px;
    }

    .contact-details{
        text-align:center;
    }
}

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

.darmadeshana-gallery{
    padding:60px 8%;
    background:#ffffff;
    text-align:center;
    margin-top: 10px;
}

.darmadeshana-gallery h2{
    font-size:30px;
    color:#300010;
    margin-bottom:40px;
}

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

.darma-card{
    background:#ffffff;
    padding:20px;
    border-radius:15px;
    box-shadow:0 4px 15px rgba(0,0,0,0.1);
    transition:0.3s;
}

.darma-card:hover{
    transform:translateY(-5px);
}

.darma-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:15px;
}

.darma-card h3{
    font-size:20px;
    color:#300010;
    margin-bottom:8px;
}

.darma-card p{
    font-size:15px;
    color:#333;
    margin-bottom:6px;
}



/* ================= DARMADESHANA VIDEOS ================= */

.darmadeshana-videos{
    padding:60px 8%;
    background:#ffffff;
    text-align:center;
     margin-top: 10px;
}

.darmadeshana-videos h2{
    font-size:30px;
    color:#300010;
    margin-bottom:40px;
}

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

.video-card{
    background:#f8f8f8;
    padding:20px;
    border-radius:15px;
    box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.video-card iframe{
    width:100%;
    height:220px;
    border-radius:10px;
    margin-bottom:15px;
}

.video-card h3{
    font-size:20px;
    color:#300010;
    margin-bottom:8px;
}

.video-card p{
    font-size:15px;
    color:#333;
}



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

@media(max-width:768px){

    .darma-card img,
    .video-card iframe{
        height:180px;
    }

    .darmadeshana-gallery h2,
    .darmadeshana-videos h2{
        font-size:30px;
    }
}




/* 3rd page */

/* Dhamma school */



/* ================= Who WE Are ================= */
.history{
    padding:20px 8%;
    text-align:center;
    background:#ffffff;
    margin-top:10px; 

}

.history h2{
    font-size:30px;
    color:#300010;
    margin-bottom:20px;
}

.history p{
    font-size:20px;
    color:#333;
    text-align: justify;
}



/* ================= ACADEMIC STAFF ================= */

.academic-staff{
    padding:70px 8%;
    background:#300010;
    margin-top: 10px;
}

.staff-header{
    text-align:center;
    margin-bottom:30px;
}

.staff-header h2{
    font-size:30px;
    color:#ffffff;
    margin-bottom:10px;
}

.staff-header p{
    color:#ffffff;
    font-size: 20px;
}

.staff-group{
    margin-bottom:30px;
}

.group-title{
    font-size:20px;
    color:#fff5f5;
    margin-bottom:30px;
    border-left:5px solid #fff5f5;
    padding-left:10px;
}

/* Staff Grid */
.staff-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

/* Staff Card */
.staff-card{
    background:#ffffff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    display:flex;
    gap:20px;
    align-items:center;
}

/* Head Staff Bigger Image */
.head-staff img{
    width:180px;
    height:180px;
}

/* Normal Staff Image */
.staff-card img{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
}

.staff-info h4{
    font-size:18px;
    color:#300010;
    margin-bottom:5px;
}

.staff-info p{
    font-size:15px;
    color:#444;
}


/* Mobile Responsive */
@media(max-width:768px){

    .staff-card{
        flex-direction:column;
        text-align:center;
        padding: 10px 5px;
    }

    .head-staff img{
        width:160px;
        height:160px;
    }
}

/* ================= STUDENTS (Smaller Cards) ================= */
.students{
    padding:40px 8%;   /* Reduce padding a bit */
    background:#fcfcfc;
    text-align:center;
    margin-top:10px; 
}

.students h2{
    font-size:28px;    /* Slightly smaller heading */
    color:#300010;
    margin-bottom:30px;
}

.student-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  /* smaller cards */
    gap:50px;       /* Reduce gap */
    justify-items:center;
}

.student-card{
    background:#ffffff;
    padding:15px;           /* Less padding */
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1); /* Slightly lighter shadow */
    max-width:220px;        /* Limit card width */
    text-align:center;
}

.student-card img{
    width:180px;           /* Smaller image */
    height:180px;
    border-radius:10px;   
    object-fit:cover;
    margin-bottom:12px;
}

.student-card h3{
    font-size:20px;        /* Smaller font */
    color:#300010;
    margin-bottom:8px;
}

.student-card p{
    font-size:15px;        /* Smaller text */
    color:#333;
    margin-bottom:5px;
}

/* ================= MOBILE VIEW ================= */
@media (max-width:768px){
    .student-container{
        grid-template-columns: 1fr;   /* One card per row */
        gap:30px;                     /* Reduce gap on mobile */
    }

    .student-card{
        max-width:90%;                /* Fit nicely on mobile */
        padding:12px;
    }

    .student-card img{
        width:100%;
        height:250px;
    }

    .student-card h3{
        font-size:18px;
    }

    .student-card p{
        font-size:14px;
    }
}


/* ================= PDF LESSONS TABLE ================= */
.lessons{
    padding:60px 8%;
    background:#fcfcfc;
    text-align:center;
    margin-top: 10px;
}

.lessons h2{
    font-size:30px;
    color:#300010;
    margin-bottom:40px;
}

/* Table container for overflow on mobile */
.lesson-table-container{
    overflow-x:auto;
}

/* Table styling */
.lesson-table{
    width:100%;
    border-collapse: collapse;
    min-width:600px; /* Allows horizontal scroll on mobile */
}

.lesson-table th,
.lesson-table td{
    padding:12px 15px;
    border:1px solid #ddd;
    text-align:left;
    font-size:15px;
    color:#333;
}

.lesson-table th{
    background-color:#300010;
    color:#fff;
}

.lesson-table tr:nth-child(even){
    background-color:#f8f8f8;
}

.lesson-table a{
    color:#3d0026;
    text-decoration:none;
    font-weight:bold;
}

.lesson-table a:hover{
    color:#be4f00;
    text-decoration:underline;
}

/* ================= MOBILE VIEW ================= */
@media (max-width:768px){
    .lesson-table{
        font-size:14px;
        min-width:0;
    }

    .lesson-table th, .lesson-table td{
        padding:10px;
    }

    .lesson-table-container{
        overflow-x:auto; /* Allows horizontal scroll if needed */
    }
}

/* ================= VIDEO LESSONS ================= */
.video-lessons{
    padding:60px 8%;
    background:#ffffff;
    text-align:center;
    margin-top: 10px;
}

.video-lessons h2{
    font-size:30px;
    color:#300010;
    margin-bottom:40px;
}

.video-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:30px;
    justify-items:center;
}

.video-card iframe{
    width:100%;
    height:200px;
    border-radius:10px;
}

/* Video Card Text */
.video-card h3{
    font-size:16px;
    color:#300010;
    margin-top:10px;
}

/* ================= MOBILE VIEW ================= */
@media (max-width:768px){

    .lesson-container, .video-container{
        grid-template-columns: 1fr; /* One card per row */
        gap:25px;
    }

    .lesson-card img{
        width:60px;
        height:60px;
    }

    .video-card iframe{
        height:180px;
    }
}


/* ================= PROGRAMS & EVENTS ================= */
.programs-events{
    padding:60px 8%;
    background-color: #ffffff;
    text-align:center;
    margin-top:10px; 
}

.programs-events h2{
    font-size:30px;
    color:#300010;
    margin-bottom:40px;
}

.program-container1{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 cards in one row */
    gap: 10px;
}

.program-card{
    background:#ffffff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    transition:all 0.4s ease;
    text-align:left;
}

.program-card:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

/* Image Zoom Effect */
.program-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition: transform 0.5s ease;
}

.program-card:hover img{
    transform: scale(1.08);
}

/* Content spacing */
.program-card h3{
    font-size:20px;
    color:#300010;
    padding:15px 20px 0 20px;
}


.program-card p{
    font-size:15px;
    color:#555;
    padding:10px 20px 20px 20px;
    line-height:1.6;
    text-align: justify;
}


/* ================= PROGRAMS MOBILE RESPONSIVE ================= */

/* Tablet View */
@media (max-width: 992px){
    .program-container1{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile View */
@media (max-width: 768px){
     .program-container1{
        grid-template-columns: 1fr;
        justify-items: center;   /* Center the card */
    }

    .program-card{
        width: 90%;              /* Not full width */
        max-width: 400px;        /* Keep nice size */
    }
    .program-card img{
        height: 200px;   /* Slightly smaller image */
    }

    .program-card h3{
        font-size:18px;
    }

    .program-card p{
        font-size:14px;
    }
}




/* ================= GALLERY ================= */
.gallery{
    padding:60px 8%;
    background:#ffffff;
    text-align:center;
    margin-top:10px; 
}

.gallery h2{
    font-size:30px;
    color:#300010;
    margin-bottom:40px;
}

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

.gallery-container img{
    width:100%;
    border-radius:10px;
    height:180px;
    object-fit:cover;
}

/* ================= VIDEOS ================= */
.videos{
    padding:60px 8%;
    background:#fffcf3;
    text-align:center;
    margin-top:10px; 
}

.videos h2{
    font-size:36px;
    color:#300010;
    margin-bottom:40px;
}

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

.video-container iframe{
    width:100%;
    height:200px;
    border-radius:10px;
}

/* ================= MOBILE ================= */
@media(max-width:768px){
    .hero-text-d h2{ font-size:28px; }
    .hero-text-d p{ font-size:16px; }
}




/*  4th Page */

/*  Dayaka Saba */


/* ================= MEMBERS (Smaller Cards, 4 per row) ================= */
.members{
    padding: 30px 8%;    /* reduce padding */
    background: #ffffff;
    text-align: center;
    margin-top: 10px;
}

.members h2{
    font-size: 30px;     /* slightly smaller heading */
    color: #300010;
    margin-bottom: 30px;
}

.member-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4 cards in a row */
    gap: 20px;                               /* smaller gap */
    justify-items: center;
}

.member-card{
    width: 180px;           /* smaller card width */
    background: #f4f4f4;
    border-radius: 10px;
    padding: 15px;          /* smaller padding */
    text-align: center;
    transition: transform 0.3s;
}

.member-card:hover{
    transform: translateY(-5px);
}

.member-card img{
    width: 120px;           /* smaller image */
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

.member-card h3{
    font-size: 20px;
    color: #300010;
    margin-bottom: 8px;
}

.member-card p{
    font-size: 13px;
    color: #333;
    margin-bottom: 5px;
}

/* ================= MOBILE / TABLET VIEW ================= */
@media (max-width: 1024px){
    .member-container{
        grid-template-columns: repeat(2, 1fr);  /* 2 cards per row */
        gap: 20px;
    }

    .member-card{
        width: 160px;
        padding: 12px;
    }

    .member-card img{
        width: 100px;
        height: 100px;
    }

    .member-card h3{
        font-size: 20px;
    }

    .member-card p{
        font-size: 15px;
    }
}

@media (max-width: 768px){
    .member-container{
        grid-template-columns: 1fr;  /* 1 card per row on mobile */
        gap: 20px;
    }

    .member-card{
        width: 90%;
        padding: 12px;
    }

    .member-card img{
        width: 100px;
        height: 100px;
    }
}



/* ================= MEETINGS ================= */
.meetings{
    padding: 50px 8%;
    background: #ffeaa4;
    text-align: center;
     margin-top: 10px;
}

.meetings h2{
    color: #300010;
    font-size: 30px;
    margin-bottom: 20px;
}

.meetings ul{
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.meetings li{
    margin: 10px 0;
   
}

/* ================= PROGRAMS ================= */
.programs{
    padding: 60px 8%;
    background: #ffffff;
    text-align: center;
    margin-top: 10px;
}

.programs h2{
    font-size: 30px;
    color: #300010;
    margin-bottom: 40px;

}

.program-container{
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: nowrap;   /* Prevent wrapping */
}

.program-card{
    width: 300px;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.program-card:hover{
    transform: translateY(-5px);
}

.program-card h3{
    color: #300010;
    margin-bottom: 10px;
}

.program-card p{
    font-size: 15px;
    color: #333;
}

/* ================= RESPONSIVE ================= */
@media(max-width: 768px){
    .member-container, .program-container{
        flex-direction: column;
        align-items: center;
    }
    .hero-dayaka{
        padding: 60px 5%;
    }
    .hero-dayaka .hero-text h2{
        font-size: 36px;
    }
    .hero-dayaka .hero-text p{
        font-size: 18px;
    }
}




/* 5th page*/

/* ========== HERO PROGRAMMES ========== */
.hero-programmes{
   
    padding: 50px 8%;
    text-align: center;
    color: white;
    position: relative;
    margin-top: 10px;
}


.hero-text{
    background: none;      /* remove white background */
    padding: 20px;            /* remove extra padding */
    display: inline-block;
    max-width: 800px;
}


.hero-programmes .hero-text h2{
    font-size: 50px;
    color: #ffffff;
    margin-bottom: 20px;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

.hero-programmes .hero-text p{
    font-size: 22px;
    color: #f8f8f8;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}



/* ========== DHARMA SCHEDULE (Smaller Cards) ========== */
.dharma-schedule{
    padding: 20px 8%;      /* slightly smaller padding */
    background-color: #ffffff;
    text-align: center;
    margin-top: 10px;
}

.dharma-schedule h2{
    font-size: 30px;       /* slightly smaller heading */
    color: #300010;
    margin-bottom: 30px;
}

.schedule-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cards per row desktop */
    gap: 20px;                               /* smaller gap */
    justify-items: center;
}

.schedule-card{
    background: rgb(255, 248, 248);
    border-radius: 10px;
    width: 250px;            /* smaller card width */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.schedule-card:hover{
    transform: translateY(-5px);
}



/* ========== DHARMA DESHANA SCHEDULE ========== */

.schedule-card{
    background: rgb(255, 248, 248);
    border-radius: 0px;
    width: 230px;   /* slightly smaller card */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.schedule-link {
    text-decoration: none;
    color: inherit;
}



.schedule-card:hover{
    transform: translateY(-5px);
}

/* ✅ Square Image */
.schedule-card img{
    width: 85%;
    height: 200px;       /* equal height */
    object-fit: cover;
}

/* Content */
.schedule-content{
    padding: 14px;
    text-align: left;
}

.schedule-content h3{
    font-size: 18px;
    color: #300010;
    margin-bottom: 6px;
}

.schedule-content p{
    font-size: 14px;
    margin-bottom: 5px;
}

.schedule-content{
    padding: 15px;            /* smaller padding */
    text-align: left;
}

.schedule-content h3{
    font-size: 20px;          /* smaller heading */
    color: #300010;
    margin-bottom: 8px;
}

.schedule-content p{
    font-size: 15px;          /* smaller text */
    margin-bottom: 6px;
}



/* ================= MOBILE / TABLET VIEW ================= */
@media (max-width: 1024px){
    .schedule-container{
        grid-template-columns: repeat(2, 1fr);  /* 2 cards per row */
        gap: 20px;
    }

    .schedule-card{
        width: 220px;
    }

    .schedule-card img{
        height: 180px;
    }

    .schedule-content h3{
        font-size: 17px;
    }

    .schedule-content p{
        font-size: 13px;
    }
}

@media (max-width: 768px){
    .schedule-container{
        grid-template-columns: 1fr;  /* 1 card per row on mobile */
        gap: 20px;
    }
@media (max-width: 768px){

    .schedule-card{
        width: 85%;
    }

    .schedule-card img{
        width: 100%;
        height: 200px;   /* keep square shape */
    }
}

    .schedule-content h3{
        font-size: 16px;
    }

    .schedule-content p{
        font-size: 13px;
    }
}


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

.temple-gallery {
    padding: 50px 8%;
    background: #fff;
    text-align: center;
    margin-top: 10px;
}

.temple-gallery h2 {
    font-size: 30px;
    color: #300010;
    margin-bottom: 40px;
}

/* Grid Layout */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Gallery Items */
.gallery-item {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: #fff;
    transition: transform 0.3s ease;
}

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

/* Images */
.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

/* Videos */
.video-item iframe {
    width: 100%;
    height: 250px;
}

/* Gallery Info Section */
.gallery-info {
    padding: 15px;
    text-align: left;
}

.gallery-info h4 {
    font-size: 20px;
    color: #300010;
    margin-bottom: 5px;
}

.gallery-date {
    font-size: 15px;
    color: #a67c00;  /* soft gold color */
    font-weight: 600;
    margin-bottom: 6px;
}

.gallery-desc {
    font-size: 14px;
    color: #383838;
}


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

@media (max-width: 1024px) {
    .gallery-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .gallery-container {
        grid-template-columns: 1fr;
    }

    .gallery-item img,
    .video-item iframe {
        height: 220px;
    }
}




/* ========== NEWS & EVENTS ========== */
.events{
    padding: 60px 8%;
    background: #ffffff;
    margin-top: 10px;
}

.events h2{
    text-align: center;
    font-size: 30px;
    color: #300010;
    margin-bottom: 40px;
}

.event-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.event-card{
    background:rgb(255, 248, 248);
    width:300px;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

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

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

.event-content{
    padding:15px;
}

.event-content h3{
    font-size:18px;
    color:#300010;
    margin-bottom:5px;
}

.btn-small{
    display:inline-block;
    margin-top:10px;
    padding:8px 15px;
    background:#e45b00;
    color:white;
    text-decoration:none;
    border-radius:20px;
}



/* ========== MOBILE RESPONSIVE ========== */
@media(max-width:768px){
    .schedule-container, .event-container{
        flex-direction: column;
        align-items: center;
    }

    .hero-programmes .hero-text h2{
        font-size:36px;
    }

    .hero-programmes .hero-text p{
        font-size:18px;
    }
}


/* RESPONSIVE */
@media (max-width: 768px) {
    .donation-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .bank-details, .participation-contact {
        min-width: 100%;
    }
}



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

@media (max-width: 768px) {
    .viharadhipathi-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .viharadhipathi-content {
        flex: 1;
    }
}


/* 6th page */

/* ABOUT */

/* PAGE BANNER */

.page-banner{
    background:#ffffff;
    padding:60px 10%;
    text-align:center;
}

.page-banner h1{
    font-size:30px;
    color:#300010;
}


.about-content{
    padding:20px 10%;
    background:rgb(255, 255, 255);
}

.about-content p{
    font-size:18px;
    line-height:1.8;
    color:#300010;
    margin-bottom:20px;
    text-align: justify;
}

.about-content ul{
    margin:20px 0;
    padding-left:20px;
}

.about-content li{
    margin-bottom:10px;
}



/* VISION MISSION */

.vision-mission{
    display:flex;
    justify-content:center;
    gap:40px;
    padding:60px 10%;
    background:#ffffff;
     margin-top:10px; 
}

.box{
    background:#300010;
    color:#ffd000;
    padding:40px;
    width:400px;
    text-align:center;
    border-radius:10px;
}



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

.viharadhipathi-section {
    padding: 80px 20px;
    background: #fff8e6;
     margin-top:10px; 
}

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

.viharadhipathi-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.viharadhipathi-image {
    flex: 1;
    text-align: center;
}

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

.viharadhipathi-content {
    flex: 2;
}

.viharadhipathi-content h2 {
    font-size: 30px;
    color: #380114;
    margin-bottom: 20px;
}

.viharadhipathi-content p {
    font-size: 16px;
    color: #272626;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify;
}

.viharadhipathi-content h4 {
    margin-top: 20px;
    font-size: 18px;
    color: #e45b00;
}

.viharadhipathi-content span {
    font-size: 14px;
    color: #666;
}



/* 2nd page */

/* ================= MONKS SECTION ================= */
.monks{
    padding:60px 8%;
    background:#ffffff;
    text-align:center;
    margin-top: 10px;
}

.monks h2{
    font-size:30px;
    color:#300010;
    margin-bottom:40px;
}

.monk-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap:30px;
    justify-items:center;
}

.monk-card{
    background:#ffffff;
    padding:20px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 4px 15px rgba(0,0,0,0.1);
    transition:0.3s;
}

.monk-card:hover{
    transform:translateY(-5px);
}

.monk-card img{
    width:150px;
    height:150px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:15px;
}

.monk-card h3{
    font-size:20px;
    color:#300010;
    margin-bottom:10px;
}

.monk-card p{
    font-size:15px;
    color:#333;
    margin-bottom:8px;
}





/* ===== DONATION & PARTICIPATION SECTION ===== */

.donation-section {
    padding: 80px 20px;
    background: #ffffff;
    color: #242323;
     margin-top:10px; 
}

.donation-section h2 {
    font-size: 30px;
    color: #380114;
    text-align: center;
    margin-bottom: 10px;
}

.donation-section p {
    font-size: 18px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 40px auto;
    line-height: 1.8;
}

.donation-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
}

/* Bank Details */
.bank-details, 
.participation-contact {
    flex: 1;
    min-width: 300px;
    background: #f8ebd6;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
   
  
}

.bank-details h3, .participation-contact h3 {
    font-size: 20px;
    color: #311105;
    margin-bottom: 15px;
    text-align:center;
}

.bank-details ul, .participation-contact ul {
    list-style: none;
    padding-left: 0;
    font-weight: 400;
    
}

.bank-details li, .participation-contact li {
    font-size: 18px;
    margin-bottom: 10px;
    text-align: justify;

}






/* ================= FOOTER ================= */ 
    
    footer{ 
        background:#1b000a; 
        color:white;
        padding:40px 10%; 
        text-align:center; 
        margin-top: 10px;} 
         
    
    .newsletter{ 
        margin:20px 0; 
    } 
    
    .newsletter input{ 
        padding:8px; 
        width:250px; 
    } 
    
    .newsletter button{ 
        padding:8px 15px; 
        background:#e45b00; 
        border:none; 
        color:white; }
    

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

.temple-footer {
    background: #1b000a;
    color: #ffffff;
    padding: 50px 10%;
    text-align: center;
}

.footer-content h3 {
    font-size: 22px;
    color: #f4c430; /* Gold */
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.footer-sub {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 25px;
}

/* Social Icons */
.footer-social {
    margin: 20px 0;
}

.footer-social a {
    display: inline-block;
    margin: 0 12px;
    transition: 0.3s ease;
}

.footer-social img {
    width: 50px;
    height: 50px;
    filter: brightness(0) invert(1);
}

.footer-social a:hover {
    transform: translateY(-6px);
}

/* Copyright */
.copyright {
    margin-top: 25px;
    font-size: 13px;
    opacity: 0.7;
}

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

@media (max-width: 768px) {

    .temple-footer {
        padding: 40px 5%;
    }

    .footer-content h3 {
        font-size: 18px;
    }

    .footer-social img {
        width: 50px;
        height: 50px;
    }

}





    /* ================= MOBILE ================= */
    
    @media(max-width:768px){ .menu-toggle{ display:block; } .nav{ position:absolute; top:60px; right:-100%; width:220px; background:#880E4F; padding:20px; border-radius:10px 0 0 10px; transition:0.4s; } .nav ul{ flex-direction:column; gap:20px; } 
    .nav.active{ right:0; } 
    .vision-mission{ flex-direction:column; align-items:center; } 
    
    .hero-text h2{ font-size:28px; } }