/* Responsive Enhancements for The Chandrasheel School Website */

/* Mobile-First Approach */
@media (max-width: 576px) {
  /* Typography adjustments */
  h1 {
    font-size: 2rem !important;
  }
  
  h2 {
    font-size: 1.6rem !important;
  }
  
  .title-section {
    font-size: 1.6rem !important;
  }
  
  /* Navbar adjustments */
  .navbar-brand img {
    width: 40px !important;
  }
  
  /* Card adjustments */
  .card-service {
    margin-bottom: 20px;
  }
  
  /* Banner adjustments */
  .home-banner {
    border-radius: 0 0 30px 30px;
  }
  
  /* Spacing adjustments */
  .page-section {
    padding: 40px 0;
  }
  
  /* Gallery adjustments */
  .gallery-item img {
    height: 180px;
  }
}

/* Tablet Adjustments */
@media (min-width: 577px) and (max-width: 991px) {
  /* Typography adjustments */
  h1 {
    font-size: 2.4rem !important;
  }
  
  /* Navbar adjustments */
  .navbar-nav .nav-link {
    padding: 8px 10px !important;
    margin: 0 2px;
  }
  
  /* Card adjustments */
  .card-service {
    margin-bottom: 25px;
  }
  
  /* Gallery adjustments */
  .gallery-item img {
    height: 200px;
  }
}

/* Animation Enhancements */
.btn-pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
}

/* Hover Effects */
.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Focus Styles for Accessibility */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid rgba(250, 208, 61, 0.5);
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  .navbar, .footer, .back-to-top {
    display: none !important;
  }
  
  .container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  
  a {
    color: #000 !important;
    text-decoration: underline;
  }
}