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

body {
  font-family: 'Poppins', sans-serif;
  background-color: #050816; /* Pure black background */
  color: #ffffff;
  line-height: 1.8;
}

/* Navigation Bar */
header {
  display: flex;
  justify-content: space-between; /* Space between logo and navigation */
  align-items: center; /* Align items vertically centered */
  padding: 1rem 2rem;
  background-color: #050816; /* Deep navy background */
  /* border-bottom: 1px solid #00F0FF; Neon blue border for distinction */
  position: fixed; /* Fixed position */
  top: 0; /* Stick to the top */
  left: 0;
  width: 100%; /* Make sure the navbar spans the entire width */
  z-index: 1000; /* Ensure navbar is always above content */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optional shadow for depth */
}

.navbar {
  display: flex;
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center the items vertically */
  width: 100%;
}

.logo {
  font-size: 2rem;
  color: #FFD700; /* Dark Yellow for logo */
  font-weight: bold;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.logo:hover {
  color: #FF4500; /* Glowing orange effect on hover */
  text-shadow: 0 0 10px #FF4500, 0 0 20px #FF4500, 0 0 30px #FF4500;
}

nav {
  flex-grow: 1; /* Allow the nav section to grow and take up available space */
}

.nav-links {
  display: flex;
  justify-content: center; /* Center navigation items */
  list-style: none;
  gap: 2rem;
  margin: 0;
}

.nav-links li {
  position: relative; /* For dropdown positioning */
}

.nav-links li a {
  text-decoration: none;
  color: #00F0FF; /* Light cyan for nav links */
  font-size: 1.2rem;
  font-weight: 500;
  transition: color 0.3s ease, transform 0.3s ease;
}

.nav-links li a:hover {
  color: #00B5E2; /* Neon blue on hover */
  transform: scale(1.1); /* Slightly increase link size on hover */
}

/* Dropdown Menu */
.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #050816;
  padding: 1rem;
  border: 1px solid #00F0FF;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap; /* Prevent dropdown items from wrapping */
  z-index: 1000; /* Ensure dropdown appears above other content */
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* Dropdown Links */
.dropdown-menu a {
  display: block; /* Make sure items appear vertically */
  text-decoration: none;
  color: #00F0FF;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.dropdown-menu a:hover {
  color: #00B5E2;
  transform: scale(1.1);
}


/* Sections */
section {
  padding: 4rem 2rem;
  text-align: center;
  margin-top: 80px; /* Prevent content from being hidden under fixed navbar */
}

h1, h2, h3, h4 {
  font-weight: 600;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

p {
  font-size: 1.2rem;
  color: #d1d1d1;
}

/* Button Glow Effect */
.btn.glow {
  position: relative;
  overflow: hidden;
  background-color: #00f0ff;
  color: #000000;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn.glow:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
  transform: scale(0);
  opacity: 0.7;
  transition: transform 0.3s ease;
}

.btn.glow:active:after {
  transform: scale(2.5);
}



/*------------------------------ Footer ----------------------------*/
.humcare-footer {
  background-color: #100D25; /* Deep navy background matching the navbar */
  color: #A0A0A0; /* Pale blue text color */
  text-align: center;
  padding: 2rem;
  margin-top: 20%;
  border-top: 1px solid transparent; /* Set transparent border */
  border-image: linear-gradient(to right, #2176c0, #681840) 1; /* Horizontal gradient border */
  width: 100vw; /* Ensure full width */
  left: 0;
  right: 0;
  position: relative; /* Keeps it in document flow */
}

.humcare-footer a {
  color: #00F0FF; /* Light cyan for links */
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
  margin: 0 0.3rem;
}

.humcare-footer a:hover {
  color: #FF4500; /* Neon blue for links on hover */
  text-shadow: 0 0 10px #FF4500, 0 0 20px #FF4500, 0 0 30px #FF4500;
}

.humcare-footer p {
  font-size: 1rem;
  margin: 0.5rem 0;
}

/*--------------------For h1 (HumCare)-------------------*/

.home-content h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #050816; /* Pure black background */
  font-size: 7rem;
  margin-top: 1%;
  color: #FFD700; /* Dark Yellow color */
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  height: 10%;
}
/*---------------------------------------*/



/* Space Adjustment Between Navbar and Content */
.home {
  margin-top: 150px; /* Adds space between the navbar and "HumCare" */
}

/* H2 with Typewriter Effect */
.home-content h2 {
  font-size: 2rem;
  color: #ffffff;
  overflow: hidden; /* Ensures hidden text does not show */
  border-right: 2px solid #FFD700; /* Adds a blinking cursor effect */
  white-space: nowrap; /* Prevents wrapping */
  width: 0; /* Start with no width for typewriter effect */
  text-align: center; /* Centers the text */
  margin: 0 auto; /* Centers the container */
  animation: typing-effect 7s steps(40, end) infinite, blink-cursor 0.5s step-end infinite; /* Typing and cursor blinking animations */
}

@keyframes typing-effect {
  0% {
    width: 0; /* Start with no width */
  }
  50% {
    width: 31ch; /* Match the length of the text */
  }
  100% {
    width: 0; /* Reset for infinite loop */
  }
}

@keyframes blink-cursor {
  50% {
    border-color: transparent; /* Cursor blinks */
  }
}

/*---------------------- Carousel Section -------------------------*/
@layer setup, demo;

@layer demo {
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr); /* Staggered grid */
    gap: 1rem;
    width: 90vw; 
    margin: 0 auto;
  }

  /* Staggered Panel Sizing */
  .img-1 { grid-column: span 5; grid-row: span 1; }
  .img-2 { grid-column: span 5; grid-row: span 1; }
  .img-3 { grid-column: span 4; grid-row: span 2; }
  .img-4 { grid-column: span 3; grid-row: span 2; }
  .img-5 { grid-column: span 7; grid-row: span 2; }
  .img-6 { grid-column: span 4; grid-row: span 1; }
  .img-7 { grid-column: span 6; grid-row: span 1; }
  .img-8 { grid-column: span 4; grid-row: span 1; }
  .img-9 { grid-column: span 4; grid-row: span 1; }
  .img-10 { grid-column: span 5; grid-row: span 1; }
  .img-11 { grid-column: span 5; grid-row: span 1; }
  .img-12 { grid-column: span 4; grid-row: span 1; }


  /* Base Card Styles */
  .card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  /* Hover Effect */
  .card:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 0 15px #00f0ff, 0 0 30px #00f0ff;
  }
}

@layer setup {
  :root {
    --grid-gap: 1rem;
    --primary-color: #333745;
    --hover-glow: #00f0ff;
  }

  * {
    box-sizing: border-box;
  }

  .gallery-section {
    text-align: center;
    padding: 40px 20px;
  }

  .section-title {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--hover-glow);
  }
}

/*-------------------------------- Feature Container ------------------------------*/
.feature-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 20px;
  margin: 20px 0;
  min-height: 50vh; /* Adjust height for visibility */
}

/* Feature Card */
.feature-card {
  background-color: #151030; /* Dark background for card */
  color: #F1F1F1; /* Light text color */
  padding: 20px;
  border: 1px solid transparent;
  border-image: linear-gradient(to bottom, #3a81c0, #a8577f) 1;
  border-radius: 10px;
  width: 900px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
  text-align: center;
  opacity: 0; /* Initially hidden for AOS animation */
  transform: translateY(30px); /* Start position for animation */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Heading Style */
.feature-card h2 {
  font-size: 1.8rem;
  color: #FFD700; /* Dark yellow color */
  margin-bottom: 15px;
}

/* Paragraph Style */
.feature-card p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #FFFFFF; /* White color for the text */
}

/* Hover Effect (Glow) */
.feature-card:hover {
  transform: scale(1.05); /* Slight scale effect */
  box-shadow: 0px 0px 20px rgba(255, 215, 0, 0.7); /* Glowing effect */
}

/* AOS Animation (on Scroll) */
[data-aos="fade-up"] {
  opacity: 1; /* Visible after animation */
  transform: translateY(0); /* Reset translate */
  transition: transform 0.5s ease, opacity 0.5s ease;
}




  /* Buttons */
  .btn.glow {
    padding: 0.6rem 1rem;
    font-size: 0.9rem; /* Reduced button size */
  }



/*------------------------ Mobile Optimization ------------------------*/
/* Mobile Optimization */
/* Mobile Optimization */
@media (max-width: 768px) {
  /* Navigation Bar */
  header {
    position: relative;
    flex-direction: column !important; /* For Handling Overriding Issue */
    text-align: center !important;
    padding: 0.5rem !important;
  }

  .logo {
    font-size: 1.5rem; /* Smaller logo size */
  }

  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .nav-links {
    flex-direction: column;
    gap: 0.5rem; /* Reduced gap between links */
    margin-top: 0.5rem;
  }

  .nav-links li a {
    font-size: 1rem; /* Smaller font size */
    padding: 0.3rem 0;
  }

  .dropdown .dropdown-menu {
    position: static;
    width: 100%;
    border-top: 1px solid #00F0FF;
    text-align: center;
  }

  .dropdown-menu a {
    font-size: 0.9rem; /* Slightly smaller font size for dropdown links */
    padding: 0.5rem 0;
  }

  /* Black Background Below Navbar */
  .home {
    margin-top: 100px; /* Add enough margin to clear the navbar */
    padding: 2rem 1rem;
    background-color: #050816; /* Pure black background */
    padding-top: 50px;
  }

  .home-content h1 {
    font-size: 2rem; /* Adjusted font size for mobile */
    color: #FFD700; /* Dark yellow color */
    margin-top: 0;
  }

  .home-content h2 {
    font-size: 0.7rem; /* Adjusted font size for mobile */
    margin-top: 1rem;
    color: #FFFFFF; /* White color */
  }

  /* Sections */
  section {
    padding: 1.5rem 1rem; /* Reduced padding for smaller screens */
  }

  h1, h2, h3 {
    font-size: 1.2rem; /* Adjust heading sizes */
  }

  p {
    font-size: 0.9rem; /* Smaller paragraph font size */
  }

   /* Feature Card */
   .feature-card {
    width: 100%; /* Make card responsive */
    padding: 15px; /* Adjust padding */
    box-shadow: none; /* Remove box-shadow */
  }

  .feature-card h2 {
    font-size: 1.4rem; /* Adjust font size */
  }

  .feature-card p {
    font-size: 1rem; /* Smaller text for mobile */
  }

  /* Carousel */
  .carousel-container {
    width: 100%; /* Full width */
    padding: 0 15px; /* Add some padding to prevent images from touching edges */
  }

  .carousel {
    flex-direction: column; /* Stack cards vertically on mobile */
    gap: 10px; /* Reduced gap between cards */
  }

  .card {
    width: 100%; /* Full width on mobile */
    height: 200px; /* Adjust height for mobile */
  }

  .card img {
    object-fit: contain; /* Adjust image fit for mobile */
  }

    /* Staggered Panel Sizing */
  .img-1 { grid-column: span 7; grid-row: span 1; }
  .img-2 { grid-column: span 7; grid-row: span 1; }
  .img-3 { grid-column: span 7; grid-row: span 1; }
  .img-4 { grid-column: span 7; grid-row: span 1; }
  .img-5 { grid-column: span 7; grid-row: span 1; }
  .img-6 { grid-column: span 7; grid-row: span 1; }
  .img-7 { grid-column: span 7; grid-row: span 1; }
  .img-8 { grid-column: span 7; grid-row: span 1; }
  .img-9 { grid-column: span 7; grid-row: span 1; }
  .img-10 { grid-column: span 7; grid-row: span 1; }
  .img-11 { grid-column: span 7; grid-row: span 1; }
  .img-12 { grid-column: span 7; grid-row: span 1; }

}