/* =========================================
   THE INNOVATORS — GLOBAL STYLES ONLY
   (Keep this file lightweight & shared)
   ========================================= */

/* ---------- Base typography ---------- */
body {
padding:20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

/* ---------- Global Hero (shared shell) ---------- */
.hero {
  background: url('../images/bg1.jpeg') no-repeat center center / cover;
 background-image: image-set(
    url('../images/bg1.webp') type('image/webp'),
    url('../images/bg1.jpeg') type('image/jpeg')
  );
  color: #fff;
  padding: 120px 0;
  position: relative;
  overflow: visible;
}
.hero .container { position: relative; z-index: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0,0,0,.4);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='2' fill='rgba(255,255,255,0.1)'/></svg>") repeat;
  opacity: .1;
}
@media(max-width: 576px){
	.hero{
		background: url('../images/bg1-mobile.webp') no-repeat center center / cover;
  }
}
/* Hero buttons */
.hero .btn-light {
  border-radius: 25px;
  padding: 12px 30px;
  transition: .3s all;
  color: #343a40;
  font-weight: 500;
}
.hero .btn-light:hover {
  background: #f8f9fa;
  transform: scale(1.05);
}

/* ---------- Global components ---------- */
.navbar-brand { font-weight: 700; font-size: 1.5rem; }

.card {
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,.2);
}

.btn-primary {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  transition: .3s all;
}
.btn-primary:hover {
  background: linear-gradient(45deg, #764ba2, #667eea);
  transform: scale(1.05);
}

.section-padding { padding: 80px 0; }

.testimonial {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 30px;
  margin: 20px 0;
}

/* ---------- Utilities ---------- */
.animate-fade-in { animation: fadeIn 1s ease-in; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.service-icon { font-size: 3rem; color: #667eea; margin-bottom: 20px; }

.feature-list { list-style: none; padding: 0; }
.feature-list li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.feature-list li::before {
  content: '✓';
  color: #28a745;
  font-weight: 700;
  margin-right: 10px;
}

/* =========================================
   GLOBAL FOOTER
   ========================================= */
.site-footer {
  position: relative;
  color: #f1f5ff;
  padding: 48px 0 22px;
  background: #0b1324 url('../images/footer-bg.jpg') center/cover no-repeat; /* optional bg */
  overflow: hidden;
}
.site-footer .footer-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,77,255,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(0,214,255,.14), transparent 55%),
    rgba(8,12,24,.86);
  pointer-events: none;
}
.site-footer .ft-title {
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: 14px;
}
.site-footer .ft-text { color: #d7def2; margin-bottom: 14px; }

.site-footer .ft-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border: 1px solid rgba(170,195,255,.28);
  border-radius: 10px;
  color: #cfe6ff;
  background: rgba(255,255,255,.06);
  transition: .2s ease;
}
.site-footer .ft-social a:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: #7c4dff;
}

.site-footer .ft-links,
.site-footer .ft-contact { list-style: none; padding: 0; margin: 0; }
.site-footer .ft-links li { margin: .35rem 0; }
.site-footer .ft-links a {
  color: #d7def2;
  text-decoration: none;
}
.site-footer .ft-links a:hover {
  color: #8fd1ff;
  text-decoration: underline;
}

.site-footer .ft-contact li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: .45rem 0;
  color: #d7def2;
}
.site-footer .ft-contact i {
  color: #8fd1ff;
  margin-top: .2rem;
  min-width: 16px;
}

.site-footer .ft-sep {
  border-color: rgba(170,195,255,.22);
  margin: 18px 0 10px;
}

.site-footer .ft-brand {
  color: #8fd1ff;
  font-weight: 800;
  text-decoration: none;
}
.site-footer .ft-brand:hover {
  color: #b9f1ff;
  text-decoration: underline;
}

/* compact on small screens */
@media (max-width: 576px) {
  .site-footer { padding: 40px 0 18px; }
}
/* Ensure Bootstrap collapse works even if custom styles exist */
.navbar-collapse.collapse { display: none; }
.navbar-collapse.collapse.show { display: block; }
@media (min-width: 992px) { /* lg breakpoint for navbar-expand-lg */
  .navbar-expand-lg .navbar-collapse { display: flex !important; }
}

/* Reset unwanted gaps */
html, body {
  margin: 0;
  padding: 0;
}
.navbar {
  margin-top: 0 !important;
}

/* mini-SPA frame *
/* ===== Nav user pill (avatar + name) ===== */
.navbar .user-pill{
  padding: .35rem .75rem;
  border-radius: 999px;
  line-height: 1;
  color: #eaf2ff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(170,195,255,.20);
  transition: .18s ease;
}
.navbar .user-pill:hover,
.navbar .user-pill:focus{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-color: rgba(170,195,255,.35);
}

/* Avatar ring (soft neon) */
.navbar .avatar-ring{
  display:inline-grid;
  place-items:center;
  width:30px; height:30px;
  border-radius:50%;
  padding:2px;                  /* ring thickness */
  background: conic-gradient(#7c4dff, #00d6ff, #7c4dff);
  box-shadow: 0 0 0 2px rgba(3,12,28,.6) inset, 0 0 12px rgba(124,77,255,.25);
}
.navbar .user-avatar{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

/* Name text */
.navbar .user-name{
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Dropdown styling just for this menu */
.dropdown-menu.user-dd{
  border-radius: 14px;
  border: 1px solid rgba(170,195,255,.22);
  background: rgba(20,26,42,.98);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.dropdown-menu.user-dd .dropdown-item{
  color: #eaf2ff;
  border-radius: 10px;
  padding: .55rem .75rem;
}
.dropdown-menu.user-dd .dropdown-item:hover{
  background: rgba(0,214,255,.10);
  color: #fff;
}
.dropdown-menu.user-dd .dropdown-divider{
  border-color: rgba(170,195,255,.18);
}

/* --- Fix user pill width on small screens --- */
.navbar .navbar-nav .user-pill{
  display: inline-flex !important;       /* stop full-width block */
  align-items: center;
  width: auto !important;
  max-width: calc(100vw - 140px);        /* keeps it safe inside viewport */
  white-space: nowrap;                   /* name doesn't wrap */
}

/* Compact the pill & avatar on phones */
@media (max-width: 576px){
  .navbar .user-pill{
    padding: .30rem .55rem;
    border-radius: 999px;
  }
  .navbar .avatar-ring{
    width: 26px; 
    height: 26px;
    padding: 2px;
  }
  .navbar .user-name{
    font-size: .95rem;
  }
}

/* Optional: a bit tighter on very narrow devices */
@media (max-width: 400px){
  .navbar .user-name{ display:inline-block; max-width: 56vw; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width: 576px) {
  body {
    padding-top: 40px;
	padding-bottom:10px; /* give extra room for taller mobile navbar */
  }
}
/* Background video in hero */
.hero { position: relative; overflow: hidden; }
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;              /* behind content */
}
/* make sure your hero text stays above */
.hero .container{ position: relative; z-index: 1; }
/* ===== Festival video section (full width, no crop) ===== */
/* ===== Festival Video (no-crop) ===== */
.festival-video {

padding-top: 5%;
 position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.festival-video__el {
  width: 100%;
  height: auto;
 padding:5%;
 display: block;
}

.fv-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.45);
  color: #fff;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.fv-btn:hover { transform: translateY(-1px); background: rgba(0,0,0,.6); }
.fv-btn i { font-size: 1rem; }

/* Mobile tweaks */
@media (max-width: 576px) {
  .festival-video__wrap { border-radius: 10px; }
.festival-video__el {
padding-left:20%;  
width: 80%;
  height: 100%;          /* maintain aspect ratio */
  object-fit:cover;
background:#000;
padding-bottom:4%;     /* video ko crop/cover karke fit kare */
}
 
 .fv-btn { right: 8px; bottom: 8px; padding: 6px 8px; }
}

/* kill the tiny white gap under the navbar on mobile */
/* =========================================
   END OF GLOBALS
   Page-specific styles must live in:
   /css/home.css, /css/about.css, /css/services.css, /css/contact.css,
   /css/blog.css, /css/login.css, /css/signup.css, /css/queries.css,
   /css/dashboard.css, /css/admin.css, /css/admin-login.css, etc.
   ========================================= */