/* ============================================
   MITS PREMIUM REDESIGN - Full Website
   ============================================ */

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* === CSS VARIABLES === */
:root {
  --primary: #F27120;
  --primary-dark: #d45a0e;
  --primary-light: #ff8c42;
  --secondary: #048DD0;
  --secondary-dark: #0370a8;
  --accent: #e63946;
  --dark: #1a1a2e;
  --darker: #16213e;
  --gray: #2d3436;
  --light-gray: #f8f9fa;
  --text: #4a5568;
  --white: #ffffff;
  --gradient-primary: linear-gradient(135deg, #F27120 0%, #e85d04 50%, #048DD0 100%);
  --gradient-warm: linear-gradient(135deg, #f97316 0%, #F27120 100%);
  --gradient-cool: linear-gradient(135deg, #048DD0 0%, #06b6d4 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-glow: 0 0 40px rgba(242,113,32,0.2);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-full: 50px;
  --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.25s ease;
  --perspective: 1000px;
}

/* === GLOBAL === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Roboto', sans-serif !important;
  color: var(--text);
  overflow-x: hidden;
  background: var(--white);
}

::selection {
  background: var(--primary);
  color: var(--white);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--light-gray);
}
::-webkit-scrollbar-thumb {
  background: var(--gradient-primary);
  border-radius: 10px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', 'Roboto-Bold', serif !important;
}

/* === SCROLL ANIMATIONS === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes rotateGlow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === HEADER === */
.header_section {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(242,113,32,0.1) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: var(--transition);
}

.header_section:hover {
  box-shadow: 0 4px 30px rgba(0,0,0,0.08) !important;
}

.header_section h3 {
  font-family: 'Playfair Display', serif !important;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header_part img {
  transition: var(--transition);
}
.header_part img:hover {
  transform: scale(1.08) rotate(-2deg);
}

/* === BANNER === */
.banner_page {
  position: relative !important;
  height: 600px !important;
  overflow: hidden;
}

.banner_page::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(26,26,46,0.85) 0%, rgba(242,113,32,0.4) 50%, rgba(4,141,208,0.6) 100%);
  z-index: 1;
}

.banner_page::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  animation: float 8s ease-in-out infinite;
  z-index: 1;
}

.stay_overlay {
  display: none !important;
}

.banner_content {
  position: relative;
  z-index: 2;
}

.banner_content h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 62px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  animation: fadeInUp 1s ease both;
}

.banner_content h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: 22px !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.9;
  animation: fadeInUp 1s ease 0.2s both;
}

.contact_bttn a {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 36px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: 1px;
  border-radius: var(--radius-full) !important;
  background: var(--gradient-warm) !important;
  color: var(--white) !important;
  border: none !important;
  box-shadow: 0 8px 30px rgba(242,113,32,0.4) !important;
  transition: var(--transition) !important;
  animation: fadeInUp 1s ease 0.4s both;
  position: relative;
  overflow: hidden;
}

.contact_bttn a::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}

.contact_bttn a:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 15px 40px rgba(242,113,32,0.5) !important;
  color: var(--white) !important;
  background: var(--gradient-primary) !important;
}

.contact_bttn a:hover::before {
  left: 100%;
}

/* === SECTION HEADINGS (h1 in sections) === */
.matter_page h1,
.about_page h1,
.admission h1,
.our_story h1,
.headtag,
.about_img .headtag {
  position: relative;
  display: inline-block;
  padding-bottom: 15px !important;
}

.matter_page h1::after,
.about_page h1::after,
.admission h1::after,
.headtag::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: 4px;
}

/* === MATTER PAGE (Vision/Mission cards) === */
.matter_page {
  padding: 70px 0 !important;
  background: var(--light-gray) !important;
}

.bg_color {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 45px !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid rgba(0,0,0,0.04);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.bg_color::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.bg_color:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.bg_color:hover::before {
  transform: scaleX(1);
}

.bg_color h1 {
  font-family: 'Playfair Display', serif !important;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 28px !important;
}

/* === CREDENTIALS === */
.credential {
  padding: 70px 0 !important;
}

.credential h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 36px !important;
  color: var(--dark) !important;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.credential h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: 4px;
}

.credential p {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: var(--text) !important;
  max-width: 800px;
  margin: 0 auto;
}

.credential i {
  font-size: 40px !important;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 15px;
}

/* === ABOUT PAGE === */
.about_page {
  margin-top: 0 !important;
}

.about_img img {
  border-radius: 0 !important;
  filter: brightness(0.95);
  transition: var(--transition);
}

.about_img img:hover {
  filter: brightness(1);
}

.about_img h1,
.about_img .headtag {
  font-family: 'Playfair Display', serif !important;
}

/* === OUR STORY === */
.our_story {
  margin-top: 0 !important;
}

.our_color {
  background: var(--gradient-dark) !important;
  padding: 70px 50px !important;
  position: relative;
  overflow: hidden;
}

.our_color::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(242,113,32,0.2) 0%, transparent 70%);
  border-radius: 50%;
}

.our_color::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(4,141,208,0.2) 0%, transparent 70%);
  border-radius: 50%;
}

.our_story h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 38px !important;
  position: relative;
  z-index: 1;
}

.seminary {
  position: relative;
  z-index: 1;
}

.seminary h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 22px !important;
  margin-bottom: 10px;
}

.seminary p {
  line-height: 1.9 !important;
  opacity: 0.95;
}

.seminary a {
  border-radius: var(--radius-full) !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  border: 2px solid var(--primary) !important;
  background: transparent !important;
  color: var(--primary-light) !important;
  transition: var(--transition) !important;
  position: relative;
  overflow: hidden;
}

.seminary a::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--gradient-warm);
  transition: left 0.4s ease;
  z-index: -1;
}

.seminary a:hover {
  color: var(--white) !important;
  border-color: transparent !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(242,113,32,0.4);
}

.seminary a:hover::before {
  left: 0;
}

.seminary img {
  border-radius: var(--radius) !important;
  height: 450px !important;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}

.seminary img:hover {
  transform: scale(1.02);
}

/* === ADMISSION CARDS === */
.admission {
  padding: 70px 0 !important;
}

.admission h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 38px !important;
}

.admission_content {
  padding-top: 40px !important;
}

.admission_content img {
  border-radius: var(--radius) var(--radius) 0 0 !important;
  height: 220px !important;
  transition: var(--transition);
}

.admission_content:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
}

.admission_content p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--text) !important;
}

.admission_content a {
  border-radius: var(--radius-full) !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  background: var(--gradient-warm) !important;
  color: var(--white) !important;
  border: none !important;
  transition: var(--transition) !important;
  box-shadow: 0 6px 20px rgba(242,113,32,0.3);
}

.admission_content a:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 12px 35px rgba(242,113,32,0.45) !important;
  color: var(--white) !important;
  background: var(--gradient-primary) !important;
}

/* === MAKE DONATION === */
.make_donation {
  position: relative !important;
  height: 320px !important;
  overflow: hidden;
}

.make_donation::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(230,57,70,0.9) 0%, rgba(242,113,32,0.85) 100%);
  z-index: 1;
}

.donate_content {
  position: relative;
  z-index: 2;
}

.donate_content h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 32px !important;
  line-height: 1.4 !important;
  text-shadow: 0 3px 15px rgba(0,0,0,0.2);
  animation: fadeInUp 1s ease both;
}

/* === ABOUT MATTER === */
.about_matter {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 45px !important;
  box-shadow: var(--shadow-md) !important;
}

.about_matter p {
  font-size: 18px !important;
  line-height: 1.8 !important;
  padding-left: 0 !important;
}

.about_matter a {
  border-radius: var(--radius-full) !important;
  padding: 13px 32px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  background: var(--gradient-warm) !important;
  color: var(--white) !important;
  border: none !important;
  transition: var(--transition) !important;
  box-shadow: 0 6px 20px rgba(242,113,32,0.3);
}

.about_matter a:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 12px 35px rgba(242,113,32,0.45) !important;
  color: var(--white) !important;
  background: var(--gradient-primary) !important;
}

/* === TEAM CARDS (team.php) === */
.member {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 35px 25px !important;
  text-align: center !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(0,0,0,0.04);
  transition: var(--transition) !important;
  position: relative;
  overflow: hidden;
}

.member::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.member::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(242,113,32,0.03) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.member:hover {
  transform: translateY(-12px) !important;
  box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
  border-color: rgba(242,113,32,0.15);
}

.member:hover::before {
  transform: scaleX(1);
}

.member:hover::after {
  opacity: 1;
}

.member img {
  border-radius: 50% !important;
  border: 4px solid transparent !important;
  background-image: linear-gradient(var(--white), var(--white)), var(--gradient-primary);
  background-origin: border-box;
  background-clip: content-box, border-box;
  transition: var(--transition) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.member:hover img {
  transform: scale(1.1) !important;
  box-shadow: 0 12px 35px rgba(242,113,32,0.25);
}

.member h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  color: var(--dark) !important;
  margin: 18px 0 6px !important;
  transition: var(--transition-fast);
}

.member:hover h3 {
  color: var(--primary) !important;
}

.member span {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--secondary) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.member p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--text) !important;
  margin: 12px 0 !important;
}

.member .button {
  border-radius: var(--radius-full) !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  background: var(--white) !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  transition: var(--transition) !important;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.member .button::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--gradient-warm);
  transition: left 0.4s ease;
  z-index: -1;
}

.member .button:hover {
  color: var(--white) !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(242,113,32,0.35);
}

.member .button:hover::before {
  left: 0;
}

/* === GALLERY === */
.gallery-grids {
  gap: 15px !important;
}

.gallery-grid img {
  border-radius: var(--radius) !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-sm);
}

.gallery-grid img:hover {
  transform: scale(1.05) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* === PACKAGE / COURSE CARDS === */
.package {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-sm);
}

.package:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-lg) !important;
}

button#toggle,
.package button {
  border-radius: var(--radius-full) !important;
  background: var(--gradient-warm) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  transition: var(--transition) !important;
  box-shadow: 0 6px 20px rgba(242,113,32,0.3);
}

button#toggle:hover,
.package button:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 12px 35px rgba(242,113,32,0.45) !important;
  background: var(--gradient-primary) !important;
  color: var(--white) !important;
}

/* === FOOTER === */
.footer {
  background: var(--gradient-dark) !important;
  margin-top: 0 !important;
  border-top: none !important;
  padding: 60px 0 30px !important;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: var(--gradient-primary);
}

.footer::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(242,113,32,0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.phone h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  color: var(--primary-light) !important;
  text-align: left !important;
  padding: 0 0 15px 0 !important;
  position: relative;
  display: inline-block;
}

.phone h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 3px;
}

.phone p {
  color: rgba(255,255,255,0.7) !important;
  text-align: left !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

.phone p a {
  color: rgba(255,255,255,0.7) !important;
  text-align: left !important;
  transition: var(--transition-fast);
}

.phone p a:hover {
  color: var(--primary-light) !important;
}

.phone img {
  transition: var(--transition);
  opacity: 0.8;
}

.phone img:hover {
  transform: translateY(-3px) scale(1.15);
  opacity: 1;
}

.footer_down {
  background: rgba(0,0,0,0.3) !important;
  padding: 20px 0 !important;
  margin-top: 40px !important;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.rights ul li {
  color: rgba(255,255,255,0.5) !important;
}

.rights ul li a {
  color: var(--primary-light) !important;
  transition: var(--transition-fast);
}

.rights ul li a:hover {
  color: var(--white) !important;
}

/* === CONTACT BTNN === */
.contact_bttn {
  margin-top: 25px !important;
}

/* === GENERAL BUTTONS (all pages) === */
a[href]:not(.nav-link):not(.navbar-brand) {
  transition: var(--transition);
}

/* === IMAGES GLOBALLY === */
img {
  transition: var(--transition);
}

/* === SECTION SPACING === */
.section-spacing {
  padding: 80px 0;
}

/* === ACADEMIC CALENDAR TABLE === */
table {
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
}

/* === FORMS (contact, admission) === */
input, textarea, select {
  border-radius: var(--radius) !important;
  border: 2px solid rgba(0,0,0,0.08) !important;
  padding: 14px 18px !important;
  font-family: 'Inter', sans-serif !important;
  transition: var(--transition) !important;
  background: var(--white) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(242,113,32,0.1) !important;
  outline: none !important;
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
  .banner_content h1 {
    font-size: 38px !important;
  }
  .banner_content h2 {
    font-size: 16px !important;
  }
  .our_color {
    padding: 50px 25px !important;
  }
  .phone h1 {
    text-align: center !important;
  }
  .phone p {
    text-align: center !important;
  }
}

@media (max-width: 767px) {
  .banner_page {
    height: 450px !important;
  }
  .banner_content h1 {
    font-size: 28px !important;
  }
  .bg_color {
    padding: 30px 20px !important;
    margin-bottom: 20px !important;
  }
  .donate_content h1 {
    font-size: 22px !important;
    line-height: 1.5 !important;
  }
}

/* === TEAM LAYOUT FIX (deterministic 3-col grid) === */
.container .team {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding: 20px 15px 40px 15px;
  justify-content: center;
}

.container .team > .row {
  display: contents;
}

.container .team > .row::before,
.container .team > .row::after {
  content: none !important;
  display: none !important;
}

.container .team .col-md-4 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  display: flex;
}

.container .team .member {
  width: auto !important;
  margin: 0 !important;
  min-height: 400px;
  height: 100%;
  flex: 1 1 auto;
}

.container .team .member.animate-on-scroll,
.container .team .col-md-4.animate-on-scroll {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

@media (max-width: 991px) {
  .container .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
  }
}

@media (max-width: 600px) {
  .container .team {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}