/*
Theme Name: My Custom Theme
Author: Lakshmi
Version: 1.0
*/
:root {
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #b91c1c;  /* maroon */
  --accent: #ff9933;   /* saffron */
  --surface: #f8fafc;
  --border: #e5e7eb;
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0;  color: var(--text); }
body { max-width: 100%;font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;line-height: 1.6;background:url('https://res.cloudinary.com/deom1kk59/image/upload/v1756811034/background_img_hranpg.jpg');}

img {  display: block;  }
a{text-decoration:none;}
li{list-style: none;}
.container-fliud { width: 100vw !important;  max-width: 100% !important; margin: 0 auto; }

/* Header */
.site-header { width: 100% !important;max-width: 100% !important; background-color:#b91c1c;position: sticky; top: 0;  border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); font-weight: 800; letter-spacing: .2px; }
.logo-head{padding:10px;color:#fce803;}
.menu { display: flex; gap: .25rem; align-items: center;}
.menu a { text-decoration: none; color: #fce803; font-weight: 600; padding: .5rem .75rem; border-radius: 999px; }
.menu a:hover { color: var(--bg); background: var(--text); }
.menu-toggle { display: none; background: none; border: 1px solid var(--border); padding: .4rem .6rem; border-radius: .5rem; }
.banner{ margin-top:0px;height:130px;}
.login-tab{color:#fce803;padding:15px;}
/* Hero */
.hero { width:100%;background: linear-gradient(180deg, #fff7ed, #ffffff); border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; padding: 2rem 0; }
.hero-text h1 { font-family: Merriweather, Georgia, serif; font-size: clamp(2.2rem, 3.4vw, 3.2rem); margin: 0 0 .5rem;padding-top:20px; }
.title{color:var(--accent);}
.hero-text p { color: var(--muted); margin: 0 0 1rem; }
.cta-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-art img { border: 1px solid var(--border); background: var(--surface); }
#myCarousel{
    width: 100vw;       /* Full browser width */
  margin-left: calc(-50vw + 50%); /* Remove container centering */
}
.carousel-item img {
  height: 500px;
  object-fit: cover;
  width:100%;
}
/*sub-temples-section*/
.sub-temple-container{
  margin-top:20px;
}
.sub-temple{
  display:flex;
  align-items: center;
  justify-content: space-between;
  

}
.card-title{
  color:#fff;

}

/* services-section*/
.services .single-service .serviece-content .content-title {
    font-size: 20px;
    color: #333;
    text-transform: capitalize;
    margin: 0 0 5px 0;
     background: #ffffff;
}

@media only screen and (max-width: 990px) {
    .services .single-service {
        margin-bottom: 30px;
    }
}
.service-img-block{
  padding-right:10px;
}
.about-img{
  width:100%;
  height:500px;
}
.about-temple .section-title .font-alt{
  color:#b91c1c;
}


/* About Us Section */
.about-us {
  padding: 60px 0;
  /* light background */
}

.about-us h4 {
  font-size: 28px;
  font-weight: 600;

  margin-bottom: 10px;
}

.about-us h2 {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin-top: 20px;
}

.about-us h3 {
  font-size: 22px;
  font-weight: 500;
  color: #444;
}

/* Center content inside cards */
.theme-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Table Styling */
.sevas-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  font-size: 15px;
  text-align: center;
}

.sevas-table th,
.sevas-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

.sevas-table th {
  background-color: #b91c1c; ;
  color: #fce803;
  font-weight: bold;
}

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

.sevas-table tr:hover {
  background-color: #f1f1f1;
  transition: 0.3s;
}

/* Images */
.about-us img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .about-us h2 {
    font-size: 26px;
  }

  .about-us h3 {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .theme-card {
    padding: 20px;
  }
  .about-desc{
  font-size:20px;
}
}

/* Buttons */
.btn { display: inline-block; text-decoration: none; border: 1px solid var(--border); padding: .65rem 1rem; border-radius: .75rem; font-weight: 700; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--primary); color: white; border-color: transparent; }
.btn.small { padding: .45rem .75rem; font-size: .92rem; }

/* Cards & grids */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 2rem 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }


/* Events */

.events { grid-template-columns: repeat(2, 1fr); }
.meta { color: var(--muted); font-weight: 600; }

/* Darshan */
.darshan .video { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: black; }
.darshan iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* About */
.about-container{

  background-color:#ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-top:10px;
  position:relative;
  padding:2rem;
  border-radius:4px;
  width:80%;
  margin:0 auto;
  margin-top:30px;
}

.about-top{
  display:flex;
  align-items: center;
  justify-content: space-between;
  margin-top:10px;
  padding-left:20px;
}
.rounded{
  width:100%;
  height:130px;
  vertical-align:middle;
   padding-left:20px;
}
.about-bottom{
  display:flex;
  align-items: center;
  justify-content: space-between;
  margin-top:15px;
}
.about-text{
  padding:20px;
}
.about-desc{
  font-size:15px;
}
.about-bottom .about-img{
  width:500px;
  
}

/* Booking */
.booking-container{
   background-color:#ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-top:10px;
  position:relative;
  padding:2rem;
  border-radius:4px;
  width:90%;
  margin:0 auto;
  margin-top:30px;
}

/* Gallery */
.gallery-container{
    background-color:#ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-top:10px;
  position:relative;
  padding:2rem;
  border-radius:4px;
  width:95%;
  margin:0 auto;
  margin-top:30px;
  
}
.gallery-card-container{
  display:flex;
  justify-content:center;
  align-items: center;
 
}
.gallery-img{
  padding-right: 10px;
}
.gallery-caption{
  font-size:20px;
  font-weight:bold;
  color:#1f2937;
}
/* contact us*/
.contact-container{
  background-color:#ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-top:10px;
  position:relative;
  padding:2rem;
  border-radius:4px;
  width:90%;
  margin:0 auto;
  margin-top:30px;
  
}
.contact-card{
  display:flex;
  justify-content: space-around;
}

/* Forms */
.form label { display: grid; gap: .35rem; margin-bottom: .8rem; font-weight: 600; }
.form input, .form select, .form textarea { padding: .65rem .7rem; border: 1px solid var(--border); border-radius: .6rem; font: inherit; }
.form .actions { display: flex; align-items: center; gap: .75rem; }

.status { color: var(--muted); min-height: 1.2rem; }

/* Footer */
.site-footer {color:#fce803; margin-top: 3rem; padding: 2rem 0; border-top: 1px solid var(--border); background: var( --muted) !important; }
.footer-grid {width:100%;color: #fce803; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top:3px; }
.copy { color: #fce803; text-align: center;margin-top:20px; }
.list-name{color: #fce803}
/* Responsive */
@media (max-width: 900px) {
  .menu { display: none; position: absolute; right: 4%; top: 56px; background: var(--bg); border: 1px solid var(--border); padding: .5rem; border-radius: .75rem; flex-direction: column; }
  .menu-toggle { display: inline-block; }
  .hero-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .events { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .grid.two { grid-template-columns: 1fr; }
}

@media (min-width: 1200px) {
  .container-fluid { width: 1200px; }
}