/* responsive.css - Modern Version */

/* Extra small devices (phones, 576px and down) */
@media (max-width: 576px) {
	.banner {
	  min-height: 300px;
	  background-attachment: scroll; /* Disable parallax on mobile */
	}
	
	.block-title {
	  font-size: 1.8rem;
	}
	
	.navbar-brand {
	  font-size: 1.2rem;
	}
	
	.menu-tabs .nav-link {
	  padding: 8px 10px;
	  font-size: 0.8rem;
	}
  }
  
  /* Small devices (landscape phones, 576px - 768px) */
  @media (min-width: 576px) and (max-width: 767.98px) {
	.banner-text h1 {
	  font-size: 2.5rem;
	}
  }
  
  /* Medium devices (tablets, 768px - 992px) */
  @media (min-width: 768px) and (max-width: 991.98px) {
	.footer-box {
	  margin-bottom: 30px;
	}
  }
  
  /* Special cases for menu tabs on smaller screens */
  @media (max-width: 991.98px) {
	#menuTabs {
	  overflow-x: auto;
	  flex-wrap: nowrap;
	  white-space: nowrap;
	  padding-bottom: 10px;
	}
	
	#menuTabs .nav-item {
	  display: inline-block;
	  float: none;
	}
  }
  
  /* Adjust gallery layout on mobile */
  @media (max-width: 767.98px) {
	.gallery-item {
	  margin-bottom: 15px;
	}
  }
  
  /* Footer adjustments */
  @media (max-width: 767.98px) {
	.footer-box {
	  text-align: center;
	  margin-bottom: 30px;
	}
	
	.social-icons {
	  justify-content: center;
	}
  }
  
  /* Mobile menu adjustments */
  @media (max-width: 991.98px) {
	  .navbar-nav .nav-link::after {
		  display: none; /* Disable underline effect on mobile */
	  }
  }
  
  /* Hover state - only animate on devices that support hover */
  @media (hover: hover) and (pointer: fine) {
	  .navbar-nav .nav-link:hover::after {
		  width: calc(100% - 30px);
	  }
  }
  
  /* Mobile menu adjustments */
  @media (max-width: 991.98px) {
	  .navbar-nav {
		  padding: 10px 0;
	  }
	  
	  .navbar-nav .nav-link {
		  padding: 10px 20px;
	  }
	  
	  /* Show underline for active item in mobile menu */
	  .navbar-nav .nav-link.active::after {
		  width: calc(100% - 40px);
		  left: 20px;
		  transform: none;
	  }
	  
	  /* Disable hover effects on touch devices */
	  .navbar-nav .nav-link::after {
		  display: none;
	  }
	  .navbar-nav .nav-link.active::after {
		  display: block;
	  }
  }
  @media (min-width: 1200px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
	  max-width: 1197px !important;
	}
  }