/* style.css - professional, modern look */

/* Variables */
:root{
  --black:#000;
  --white:#fff;
  --cherry:#7D1201;
  --green:#228B22;
  --muted:#f4f4f6;
  --container:1100px;
  --radius:8px;
  --shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Reset and typography */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Roboto',sans-serif;
  color:#222;
  background:var(--muted);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

/* Header */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  background:var(--black);
  color:var(--white);
  z-index:1000;
  box-shadow:var(--shadow);
}

/* Title container */
.title-container{
  padding:5px 5px;
  text-align:center;
}
.title-hindi{font-size:0.9rem; font-weight:700; letter-spacing:0.3px}
.title-english{font-size:1.1rem; font-weight:800; margin-top:2px; opacity:1.0}

/* Menu bar (inside header so it sits just below title) */
.menu-bar{
  background:var(--cherry);
  border-top:1px solid rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px 5px;
  position:relative;
}

/* Hamburger (mobile) */
.hamburger{
  display:none;
  background:transparent;
  border:0;
  color:var(--white);
  font-size:18px;
  margin-right:auto;
  padding:3px 6px;
}

/* Menu */
.menu{
  display:flex;
  gap:6px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}
.menu li{position:relative}
.menu > li > a{
  display:block;
  color:var(--white);
  text-decoration:none;
  padding:8px 10px;
  font-weight:500;
  border-radius:6px;
  transition:background .18s, transform .12s;
}
.menu > li > a:hover{background:rgba(255,255,255,0.06); transform:translateY(-1px)}

/* Dropdown */
.dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#222;
  border-radius:6px;
  min-width:220px;
  padding:6px 0;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
.dropdown li a{
  padding:8px 10px;
  color:#fff;
  display:block;
  white-space:nowrap;
}
.menu > li:hover > .dropdown{display:block}

/* MAIN LAYOUT */
main{margin-top: calc( (12px + 1.05rem + 12px) * 1 ); /* safe top offset */}

/* Slider */
.slider{
  width:100%;
  height:60vh;
  max-height:720px;
  overflow:hidden;
  position:relative;
  margin-top:8px;
}
.slides{display:flex; height:100%; transition:transform .9s ease; will-change:transform}
.slide{flex:0 0 100%; height:100%; position:relative}
.slide img{width:100%; height:100%; object-fit:cover; display:block}

/* slider controls */
.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.35);
  color:#fff;
  border:0;
  width:44px; height:44px;
  border-radius:50%;
  cursor:pointer;
  backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
}
.slider-btn.prev{left:14px}
.slider-btn.next{right:14px}
.slider-btn:hover{background:rgba(0,0,0,0.6)}

/* dots */
.dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:8px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,0.45);cursor:pointer}
.dots button.active{background:var(--white)}

/* Actions (intro + CTA) */
.actions{padding:28px 12px;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent)}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.intro{max-width:820px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;border:0;cursor:pointer}
.btn.primary{background:var(--green);color:var(--white);box-shadow:0 6px 18px rgba(139,0,0,0.12)}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,0.08)}
.btn:hover{transform:translateY(-2px)}

/* Articles */
.articles{padding:26px 16px}
.articles h2{margin-bottom:14px}
.card{display:flex;gap:16px;background:#fff;border-radius:12px;padding:12px;box-shadow:var(--shadow);margin-bottom:12px;align-items:stretch}
.card img{width:250px; height:160px; object-fit:cover; border-radius:8px}
.card-body{padding:6px 8px}
.card-body h3{margin:0 0 8px}
.card-body p{margin:0 0 10px}
.card .read-more{color:var(--cherry);text-decoration:none;font-weight:600}

/* Events */
.events-section{padding:22px 16px}
.event-card{background:#fff;padding:16px;border-radius:10px;box-shadow:var(--shadow)}

/* Contact */
.contact-section{padding:22px 16px;background:#fff;border-radius:10px;max-width:var(--container);margin:18px auto;box-shadow:var(--shadow)}

/* Modal (registration) */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.5); z-index:2000; padding:20px;
}
.modal[aria-hidden="false"], .modal.visible{display:flex}
.modal-content{
  width:100%; max-width:720px; background:#fff; border-radius:10px; padding:18px; position:relative;
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
}
.modal-close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:20px;cursor:pointer}

/* Form steps */
.form-step{display:none}
.form-step.active{display:block}
.form-step legend{font-weight:700;margin-bottom:10px}
label{display:block;margin-bottom:10px;font-size:0.95rem}
input[type="text"],input[type="number"],input[type="email"],input[type="tel"],input[type="date"]{
  width:100%; padding:10px;border-radius:6px;border:1px solid #ddd;font-size:0.95rem;
}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}

/* Terms */
.terms{max-height:220px;overflow:auto;padding:8px;border:1px solid #eee;background:#fafafa;border-radius:6px}
.accept{display:block;margin-top:12px}

/* Success panel */
.reg-success{padding:12px;text-align:center}

/* Responsive */
@media (max-width:900px){
  .card{flex-direction:column}
  .card img{width:100%; height:220px}
}
@media (max-width:768px){
  .menu{display:none; flex-direction:column; width:100%}
  .menu.active{display:flex}
  .hamburger{display:inline-block}
  .menu > li > a{padding:12px 16px}
  .dropdown{position:static; display:none}
  .menu li.open > .dropdown{display:block}
  .slider{height:48vh}
}
@media (max-width:480px){
  .title-hindi{font-size:1rem}
  .title-english{font-size:0.95rem}
  .slides img{object-position:center 30%}
}


/* Logo in header */
.site-logo {
  height: 80px;
  margin-right: 15px;
  vertical-align: middle;
}
.title-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-text {
  text-align: center;
}

/* Event Section */
.event-section {
  margin: 40px auto;
  max-width: 900px;
  text-align: center;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.event-section .event-title {
  font-size: 1.8em;
  margin-bottom: 20px;
  color: #003366;
}
.event-poster {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}
.event-description {
  font-size: 1.1em;
  margin-bottom: 20px;
  color: #333;
}
.register-button {
  display: inline-block;
  background: #ffcc00;
  color: #000;
  font-weight: bold;
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.register-button:hover {
  background: #ff9900;
  color: #fff;
}