/* Fixed Navbar */
.navbar {
  background: linear-gradient(
    135deg,
    #e0f7fa,
    #bbdefb
  ); /* Light Cyan-Blue Gradient */
  padding: 12px 20px;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  border-bottom: none; /* Removed bottom line */
}

/* Add space to body so content doesn’t go under navbar */
body {
  padding-top: 70px;
}

/* School Name Styling */
.school-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0056b3 !important; /* Deep Blue */
  text-shadow: 0px 0px 5px rgba(0, 91, 187, 0.7);
}

/* Always Glowing Navbar Links */
.navbar-nav .nav-link {
  color: #0056b3 !important;
  font-weight: bold;
  font-size: 1.1rem;
  text-shadow: 0px 0px 12px rgba(0, 91, 187, 0.9);
  transition: all 0.3s ease-in-out;
}

/* Navbar Link Hover (Extra Scaling) */
.navbar-nav .nav-link:hover {
  color: #003366 !important;
  text-shadow: 0px 0px 16px rgba(0, 70, 150, 1);
  transform: scale(1.1);
}

/* Login Button */
.btn-light {
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 20px;
  transition: 0.3s;
  background: #004085; /* Dark Blue Button */
  color: white;
}

.btn-light:hover {
  background: #002752; /* Darker Blue on Hover */
  color: white;
  font-weight: bold; /* Make login button bold on hover */
}

/* Hero Banner */
.hero-banner {
  background: url("images/hero-bg.jpg") no-repeat center center/cover;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* Dark Overlay */
.hero-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Dark Transparent Overlay */
}

/* Text Content */
.hero-banner .container {
  position: relative;
  z-index: 2;
}

/* Hero Text */
.hero-banner h1 {
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-banner p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* CTA Button */
.btn-primary {
  font-size: 1.2rem;
  padding: 12px 25px;
  border-radius: 25px;
  transition: 0.3s;
}

.btn-primary:hover {
  background: #004085;
}
/* Slideshow (Carousel) */
#heroCarousel {
  max-height: 500px;
  overflow: hidden;
}

/* Fix Overlapping Navbar */
body {
  padding-top: 70px; /* Adjust based on navbar height */
}

/* Slideshow (Carousel) */
#heroCarousel {
  max-height: 500px;
  overflow: hidden;
  margin-top: 0; /* Ensure no overlap */
}

/* Make sure images fit properly */
.carousel-item img {
  height: 500px;
  object-fit: cover;
}

/* Make sure images fit properly */
.carousel-item img {
  height: 500px;
  object-fit: cover;
}

/* Hero Banner (Initially Hidden) */
.hero-banner {
  background: url("images/hero-bg.jpg") no-repeat center center/cover;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Show Hero Banner After Slideshow Ends */
.hero-banner.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Text */
.hero-banner h1 {
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-banner p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* CTA Button */
.btn-primary {
  font-size: 1.2rem;
  padding: 12px 25px;
  border-radius: 25px;
  transition: 0.3s;
}

.btn-primary:hover {
  background: #004085;
}

/* Space between Slideshow and Hero Text */
.hero-text {
  padding: 50px 15px;
}

/* Hero Section */
.hero-section {
  margin-top: 20px;
  padding: 50px 0;
}

@media (max-width: 768px) {
  .hero-section {
    margin-top: 20px;
    padding: 50px 0;
  }
}

/* Image on Left */
.hero-section img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Add spacing between Slideshow and Hero Section */
.hero-section {
  margin-top: 50px; /* Adjust this to create space */
  padding: 50px 0;
}

/* Remove square box (shadow & border-radius) */
.hero-section img {
  max-width: 100%;
  height: auto;
  border-radius: 0; /* Removes round edges */
  box-shadow: none; /* Removes shadow */
}
@media (max-width: 768px) {
  .hero-section img {
    max-width: 200px; /* Reduce width on mobile */
    display: block;
    margin: 0 auto;
  }
}

.hero-text {
  text-align: left; /* Aligning text to the left */
  color: white;
  padding: 50px;
}

.hero-text h1 {
  font-size: 1.9rem;
  font-weight: bold;
  color: #ffcc00; /* Golden Yellow */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-family: "Poppins", serif;
}

.hero-text h2 {
  font-size: 1.4rem;
  font-weight: bold;
  color: #ff8800; /* Deep Orange */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  margin-top: 10px;
}

.hero-text p {
  font-size: 1.2rem;
  color: rgb(164, 149, 11);
  margin-bottom: 20px;
  line-height: 1.6;
}

.admission-btn {
  display: inline-block;
  padding: 12px 25px;
  background: #ff5733; /* Attractive Orange */
  color: white;
  font-size: 1.3rem;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .admission-btn {
    display: block; /* Make it a block element */
    text-align: center; /* Center text inside */
    width: max-content; /* Set width as per content */
    margin: 20px auto; /* Center horizontally */
  }
}

.admission-btn:hover {
  background: #c70039; /* Darker Red */
  transform: scale(1.08);
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.4);
}

/* Main Navigation Cards */
.nav-cards {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}

/* Bootstrap Card Styling */
.nav-cards .card {
  background: linear-gradient(135deg, #007bff, #00d4ff); /* Gradient blue */
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  border: none;
  color: white;
}

/* Card Hover Effect */
.nav-cards .card:hover {
  transform: scale(1.05);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  background: linear-gradient(
    135deg,
    #0056b3,
    #0093ff
  ); /* Darker gradient on hover */
}

/* Icons */
.nav-cards .card i {
  font-size: 35px;
  color: white;
  margin-bottom: 10px;
}

/* Card Titles */
.nav-cards .card h5 {
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
}

/* About Section */
.about-section {
  margin-top: 100px;
  padding: 80px 0;
  background: linear-gradient(
    135deg,
    #e3f2fd,
    #bbdefb
  ); /* Light blue gradient */
  text-align: left;
}

/* About Section */
.about-section {
  padding: 50px 0;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  text-align: left;
}

/* About Image */
.about-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: none;
}

@media (max-width: 768px) {
  .about-img {
    max-width: 250px; /* Reduce width on mobile */
    display: block;
    margin: 0 auto;
  }
}

/* Title */
.about-title {
  font-size: 2rem;
  font-weight: bold;
  color: #0056b3;
  margin-bottom: 15px;
}

/* About Text */
.about-text {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 15px;
}

/* List Styling */
.about-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  gap: 10px;
}

.about-list li {
  font-size: 1rem;
  color: #0056b3;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.about-list i {
  color: #007bff;
  margin-right: 10px;
  font-size: 1.2rem;
}

/* Academic Section */
.academic-section {
  padding: 80px 0;
  background: linear-gradient(
    135deg,
    #f8f9fa,
    #e3f2fd
  ); /* Light gradient background */
  text-align: center;
}

/* Section Title */
.section-title {
  font-size: 2rem;
  font-weight: bold;
  color: #0056b3;
  margin-bottom: 20px;
}

/* Tab Navigation */
.nav-tabs {
  justify-content: center;
  margin-bottom: 20px;
}

.nav-tabs .nav-link {
  color: #0056b3;
  font-weight: bold;
  border: none;
}

.nav-tabs .nav-link.active {
  background-color: #0056b3;
  color: white;
  border-radius: 8px;
}

/* Tab Content */
.tab-pane {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.tab-pane h3 {
  color: #0056b3;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

/* List Styling */
.tab-pane ul {
  list-style: none;
  padding: 0;
}

.tab-pane ul li {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.tab-pane ul li i {
  color: #007bff;
  margin-right: 10px;
  font-size: 1.2rem;
}

/* News Cards */
/* News Section */
.news-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  text-align: center;
}

/* Section Title */
.section-title {
  font-size: 2rem;
  font-weight: bold;
  color: #0056b3;
  margin-bottom: 30px;
}

/* News Cards */
.news-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Hover Effect */
.news-card:hover {
  transform: scale(1.05);
}

/* Centered Icons */
.card-icon {
  font-size: 4rem;
  color: #0056b3;
  opacity: 0.7;
  margin-bottom: 15px;
}

.news-card h3 {
  font-size: 1.3rem;
  color: #0056b3;
  font-weight: bold;
}

.news-card p {
  font-size: 0.9rem;
  color: #333;
  margin: 2px 0;
}

/* Gallery Section */
/* Gallery Section (No Outer Background) */
.gallery-section {
  padding: 20px 0; /* Reduced Top & Bottom Spacing */
  text-align: center;
  background: white; /* Keep it clean */
}

/* Gallery Container */
.gallery-container {
  width: 85%;
  margin: auto;
}

/* Section Title (Now Darker for Visibility) */
.section-title {
  font-size: 2rem;
  font-weight: bold;
  color: #0056b3; /* Dark Blue Text */
  margin-bottom: 20px;
}

/* Gallery Box (Still White with Padding) */
.gallery-box {
  background: white;
  padding: 10px; /* Adjusted Padding */
  border-radius: 15px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Gallery Box Hover Effect */
.gallery-box:hover {
  transform: scale(1.02);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

/* Gallery Image Container */
.gallery-item {
  width: 100%;
  height: 160px; /* Slightly Reduced */
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px; /* Reduced Space */
}

/* Gallery Images */
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Hover Effect */
.gallery-img:hover {
  transform: scale(1.05);
}

/* View All Button */
.view-all-btn {
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  background: #007bff; /* Solid Blue */
  border: none;
  color: white;
  border-radius: 8px;
  transition: background 0.3s ease-in-out;
}

.view-all-btn:hover {
  background: #0056b3;
}

/* Contact Section */
.contact-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #007bff, #00d4ff);
  text-align: center;
  color: white;
}

/* Contact Title */
.section-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
}

/* Contact Info */
.contact-info {
  text-align: left;
  padding: 20px;
}

.contact-info h4 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.contact-info p {
  font-size: 1rem;
  margin: 8px 0;
}

.contact-info i {
  margin-right: 10px;
  color: white;
}

/* Social Icons */
.social-icons a {
  font-size: 1.5rem;
  color: white;
  margin: 0 10px;
  transition: transform 0.3s ease-in-out;
}

.social-icons a:hover {
  transform: scale(1.1);
  color: #ffeb3b;
}

/* Contact Form */
/* Contact Section */
.contact-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #007bff, #00d4ff);
  text-align: center;
  color: white;
}

/* Section Title */
.section-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
}

/* Contact Info */
/* Contact Section (Smaller & Light Background) */
.contact-section {
  padding: 40px 0;
  background: #f9f9f9; /* Light Background */
  text-align: center;
  color: #333;
}

/* Section Title */
.section-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Contact Info */
.contact-info {
  text-align: left;
  padding: 10px;
}

.contact-info h4 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.contact-info p {
  font-size: 0.95rem;
  margin: 5px 0;
}

.contact-info i {
  margin-right: 8px;
  color: #007bff;
}

/* Social Media Icons */
.social-icons a {
  font-size: 1.5rem;
  color: #007bff;
  margin: 0 8px;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

.social-icons a:hover {
  transform: scale(1.1);
  color: #0056b3;
}

/* Google Map */
.google-map {
  margin-top: 15px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
}

/* Footer Section */
.footer-section {
  background: linear-gradient(135deg, #0056b3, #007bff); /* Blue Gradient */
  color: white;
  padding: 40px 0;
  text-align: center;
}

.footer-section h4 {
  font-size: 1.3rem;
  margin-bottom: 15px;
}

.footer-section p {
  font-size: 0.95rem;
}

/* Footer Links */
/* Footer Section */
.footer-section {
  background: #0056b3; /* Dark Blue */
  color: white;
  padding: 15px 0;
  text-align: center;
}

/* Copyright */
.copyright {
  font-size: 0.9rem;
  opacity: 0.8;
}