/* Theme Variables */
:root {
  --bg: #f8f9fa;
  --bg-gradient: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  --text: #212529;
  --text-muted: #6c757d;
  --card-bg: rgba(255, 255, 255, 0.95);
  --navbar-bg: rgba(255, 255, 255, 0.95);
  --navbar-text: #212529;
  --accent: #2dd4bf;
  --radius: 12px;
  --gap: 1.5rem;
  --max-width: 1320px;
  --overlay-opacity: 0.1;
  --border-color: rgba(0, 0, 0, 0.1);
  --toggler-filter: none;
}

[data-theme="dark"] {
  --bg: #071029;
  --bg-gradient: linear-gradient(180deg, #071029 0%, #041126 70%);
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.7);
  --card-bg: rgba(15, 23, 36, 0.6);
  --navbar-bg: rgba(7, 16, 41, 0.95);
  --navbar-text: #ffffff;
  --accent: #2dd4bf;
  --overlay-opacity: 0.9;
  --border-color: rgba(255, 255, 255, 0.1);
  --toggler-filter: invert(1);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  background: var(--bg-gradient);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.container { max-width: var(--max-width); }
h1, h2, h3, h4, h5, h6 { 
  color: var(--text); 
  font-weight: 300 !important; 
}

/* Header adjustments for visibility */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { 
  color: var(--text) !important; 
  font-weight: 300 !important;
}
.lead { color: var(--text-muted) !important; }

/* Sticky Navbar Styling */
.main-navbar {
  padding: 1.25rem 0;
  background: transparent;
  transition: all 0.5s ease;
  z-index: 2000;
  backdrop-filter: blur(0px);
}

.main-navbar.navbar-scrolled {
  padding: 0.75rem 0;
  background: var(--navbar-bg);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .main-navbar.navbar-scrolled {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.main-navbar .navbar-brand {
  color: var(--navbar-text) !important;
}

.main-navbar .nav-link {
  color: var(--navbar-text) !important;
  opacity: 0.9;
  font-weight: 500;
  margin: 0 10px;
  position: relative;
  transition: all 0.3s ease;
  padding: 0.5rem 0;
}

/* Ensure hamburger menu is visible in both modes */
.main-navbar .navbar-toggler {
  border-color: var(--border-color) !important;
}

.main-navbar .navbar-toggler-icon {
  filter: var(--toggler-filter);
}

.main-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
  box-shadow: 0 0 10px var(--accent);
}

.main-navbar .nav-link:hover {
  color: var(--accent) !important;
}

[data-theme="dark"] .main-navbar .nav-link:hover {
  color: #fff !important;
}

.main-navbar .nav-link:hover::after {
  width: 100%;
}

.main-navbar .btn-primary {
  background: var(--accent);
  border: none;
  color: #000;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(45, 212, 191, 0.2);
}

.navbar-brand img {
  height: 86px; /* Desktop logo height limit */
  width: auto;
  transition: height 0.3s ease;
}

.main-navbar {
  padding: 1.25rem 0; /* Slightly more compact than default */
  background: transparent;
  transition: all 0.4s ease;
  z-index: 2000;
}

.theme-toggle-btn {
  background: transparent;
  border: none;
  color: var(--navbar-text);
  font-size: 1.25rem;
  padding: 0.5rem;
  margin-left: 1rem;
  transition: transform 0.3s ease;
}

.theme-toggle-btn:hover {
  transform: scale(1.1);
}

/* Fixed Footer Styling */
.main-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2000;
  background: transparent;
  backdrop-filter: blur(0px);
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
  transition: all 0.5s ease;
  color: var(--text-muted); /* Broadly set the default text color */
}

.main-footer .text-white-50, 
.main-footer span, 
.main-footer small {
  color: var(--text-muted) !important;
}

.social-links a, 
.social-links a i {
  color: var(--text-muted) !important;
}

.main-footer a {
  color: var(--text-muted) !important;
  transition: all 0.3s ease;
}

.main-footer a:hover {
  color: var(--accent) !important;
}

.social-links a i {
  font-size: 1.15rem;
}

/* Background overlay used for smooth color transitions */
#bg-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: var(--bg-gradient);
  transition: background 0.8s ease;
  opacity: var(--overlay-opacity);
}

/* GSAP-pinned slider container */
.gsap-slider-wrap{
  position:relative;
  width: 100%;
  overflow: hidden;
}

.gsap-slider {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.gsap-slider .slides {
  display: flex;
  height: 100vh;
  flex-wrap: nowrap;
  /* width will be calculated by JS */
  will-change: transform;
}

.gsap-slider .slide {
  flex-shrink: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Modern Card layout inside each slide */
.card-modern {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}

.gsap-slider .slide .card-modern {
  background: transparent;
  box-shadow: none;
  padding: 1rem;
}

/* Row alignment to center content pairs */
.gsap-slider .slide .card-modern .row {
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

/* Columns widths */
.gsap-slider .slide .card-modern .col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

/* Modern Image styling */
.gsap-slider .slide img {
  height: 65vh; /* Increased from 60vh for a more impactful desktop view */
  max-height: 650px; /* Increased from 550px */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

/* Base Desktop Fonts - Constraining Bootstrap's very large defaults */
.display-1 { font-size: 4.5rem !important; line-height: 1.1; }
.display-3 { font-size: 3.5rem !important; line-height: 1.1; }
.display-4 { font-size: 2.75rem !important; }
.display-5 { font-size: 2.25rem !important; }
.lead { font-size: 1.15rem !important; line-height: 1.6; } /* Slightly larger for better readability */

/* Section adjustments */
.section-title {
  font-size: 3.5rem !important;
}

.card-modern .display-5 {
  font-size: 2.2rem !important;
}

.btn-outline-primary{ border-color:rgba(45,212,191,0.18); color:var(--accent); }
.btn-outline-primary:hover{ background: rgba(45,212,191,0.06); }

/* Global Button Overrides to match theme */
.btn-primary {
  background: var(--accent) !important;
  border: none !important;
  color: #000 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(45, 212, 191, 0.2) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  background: #25b8a6 !important; /* Slightly darker accent */
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 212, 191, 0.3) !important;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  backdrop-filter: blur(5px);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #fff !important;
  transform: translateY(-2px);
}

/* Slider Controls (Arrow Navigation) */
.slider-controls {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 40px;
  pointer-events: none; /* so we can click through the container */
  z-index: 9999; /* Extremely high to be on top of everything */
}

.slider-btn {
  pointer-events: auto; /* re-enable for buttons */
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(15, 23, 36, 0.85); /* More solid */
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.slider-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000 !important;
  transform: translateZ(0) scale(1.15);
  box-shadow: 0 0 50px rgba(45, 212, 191, 0.7);
}

.slider-btn:active {
  transform: scale(0.95);
}

.slider-btn i {
  font-size: 1.8rem;
}

/* Pagination Dots (At the bottom center) */
.slider-pagination {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  background: rgba(15, 23, 36, 0.6);
  padding: 12px 25px;
  border-radius: 40px;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dot-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dot-btn.active {
  background: var(--accent);
  width: 32px;
  border-radius: 6px;
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.5);
  border-color: var(--accent);
}

.dot-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

/* Modern Section Headers */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 15px var(--accent);
}

.section-title.text-start::after {
  left: 0;
  transform: none;
}

/* Enhanced Modern Card */
.card-modern {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
}

.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.12);
  border-color: var(--accent);
}

/* Icon Box enhancements */
.icon-box {
  width: 64px;
  height: 64px;
  background: rgba(45, 212, 191, 0.1);
  color: var(--accent);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 1px solid rgba(45, 212, 191, 0.2);
  transition: all 0.3s ease;
}

.card-hover:hover .icon-box {
  background: var(--accent);
  color: #000;
  transform: scale(1.1) rotate(5deg);
}

.text-accent { color: var(--accent) !important; }

/* Responsive Image Hover */
.hover-scale-img {
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

/* Responsive tweaks */
@media (max-width:992px){ 
  .gsap-slider .slide img{ height:50vh; max-height:50vh; }
  .gsap-slider .slide .card-modern .col-md-6 {
    max-width: 48%;
  }
}

@media (max-width:768px){ 
  .navbar-brand img {
    height: 35px; /* Control logo size on mobile */
    width: auto;
  }
  .main-navbar {
    padding: 0.5rem 0;
  }
  #navContent {
    background: var(--navbar-bg);
    margin-top: 10px;
    padding: 15px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
  }
  .section-title {
    text-align: center !important;
  }
  .slide.slide-overlay::after {
    background: linear-gradient(to top, rgba(3, 32, 58, 0.95) 20%, rgba(3, 32, 58, 0.4) 100%);
  }
  .slide.slide-overlay .container {
    padding-bottom: 3rem;
  }
  .gsap-slider .slide .card-modern {
    padding: 1.5rem !important;
  }
  .gsap-slider .slide .card-modern .row {
    flex-direction: column-reverse;
  }
  .gsap-slider .slide img {
    height: 35vh;
    max-height: 35vh;
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .gsap-slider .slide .card-modern .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center !important;
  }
  .display-1 { font-size: 2.22rem !important; margin-bottom: 0.5rem !important; }
  .display-3 { font-size: 2.1rem !important; margin-bottom: 0.5rem !important; }
  .display-4 { font-size: 1.8rem !important; }
  .display-5 { font-size: 1.65rem !important; }
  .lead { font-size: 0.9rem !important; line-height: 1.4 !important; opacity: 0.8; }
  
  /* Mobile slider controls positioning */
  .slider-controls { padding: 0 15px; }
  .slider-btn { width: 44px; height: 44px; }
  .slider-btn i { font-size: 1.1rem; }
  
  /* Mobile pagination dots positioning */
  .slider-pagination { bottom: 120px; padding: 6px 15px; }
  
  .gsap-slider .slide .mt-4 { margin-top: 1rem !important; }
  .btn-lg { padding: 0.6rem 1.25rem !important; font-size: 0.95rem !important; }
  .card-modern .display-5 { font-size: 1.5rem !important; }
  
  #mission-vision { margin-top: 1rem !important; }
  .img-wrapper { margin-top: 2rem; }
  
  /* Remove section title underline on mobile to simplify */
  .section-title::after { width: 50px; }
  
  /* Adjust slider overlay padding */
  .gsap-slider .slide {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
}

/* Contact Form Specific Styling */
.contact-form-wrap {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.form-floating > .form-control {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text) !important;
}

.form-floating > .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent) !important;
}

.form-floating > label {
  color: var(--text-muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--accent);
}

.form-control:focus {
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.15);
  border-color: var(--accent);
}

/* Full-screen Background Slides */
.slide.slide-overlay {
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #03203a; /* Fallback for dark images */
}

/* Ensure slide text is ALWAYS visible (Force white text on slides because images are usually dark) */
.slide.slide-overlay h1, 
.slide.slide-overlay p, 
.slide.slide-overlay .lead {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.slide.slide-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Fixed dark gradient for slider background images to ensure contrast */
  background: linear-gradient(to right, rgba(3, 32, 58, 0.9) 0%, rgba(3, 32, 58, 0.4) 100%);
  z-index: 1;
  opacity: 1 !important; /* Always visible for slides */
}

.slide.slide-overlay .container {
  position: relative;
  z-index: 2;
}

.icon-box {
  width: 60px;
  height: 60px;
  background: rgba(45, 212, 191, 0.1);
  color: var(--accent);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: 1px solid rgba(45, 212, 191, 0.15);
}

/* Reference Logos Carousel */
.logo-slider-container {
  overflow: hidden;
  padding: 4rem 0;
  background: transparent;
  width: 100%;
  position: relative;
}

.logo-track {
  display: flex;
  gap: 8rem;
  width: max-content;
  animation: logo-scroll 30s linear infinite;
}

.logo-track:hover {
  animation-play-state: paused;
}

.logo-item {
  width: 220px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Removed grayscale and opacity to make them colorful by default */
  opacity: 0.95;
  transition: all 0.4s ease;
}

.logo-item:hover {
  opacity: 1;
  transform: scale(1.1);
}

.logo-item i {
  display: none; /* Icons are replaced by images */
}

.logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  .logo-item {
    width: 140px;
    height: 70px;
  }
  .logo-track {
    gap: 3rem;
  }
  .logo-slider-container {
    padding: 3rem 0;
  }
}

@keyframes logo-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

[data-theme="dark"] .logo-item {
  filter: brightness(1.1); /* Slight boost for dark mode, but keeps color */
}

[data-theme="dark"] .logo-item:hover {
  filter: brightness(1.2);
}