/* Body styles for the entire page */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #333;
  background: #E6F0FA; /* Edit this value to change the background color */
  line-height: 1.6;
  scroll-behavior: smooth; /* Enables smooth scrolling for anchor links */
}

/* Header styles for the fixed navigation bar */
header {
  position: fixed;
  width: 100%;
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
  padding: 15px 0; /* Default padding for desktop */
  z-index: 1000; /* Ensures header stays above other content */
}

/* Navigation container styles */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Logo styles */
.logo {
  font-size: 22px;
  font-weight: 700;
  color: #4A90E2; /* Blue color for the logo */
}

/* Navigation list styles */
nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

/* Navigation list item styles */
nav ul li {
  margin-left: 25px;
}

/* Navigation link styles */
nav ul li a {
  color: #333;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.3s; /* Smooth color transition on hover */
}

/* Hover effect for navigation links */
nav ul li a:hover {
  color: #4A90E2; /* Changes to blue on hover */
}

/* Hero section styles (landing page) */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  background: url('pictures/hero-bg.jpg') no-repeat center center/cover; /* Background image for hero section */
  overflow: visible; /* Ensure content isn’t clipped */
}

/* Overlay for hero section to improve button visibility */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Semi-transparent dark overlay */
  z-index: 1; /* Places overlay behind content but above background */
}

/* Container for social media buttons */
.social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: 600px;
  width: 100%;
  position: relative; /* Ensures buttons sit above the overlay */
  z-index: 2; /* Places buttons above the overlay */
}

/* Individual social media button styles */
.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF; /* White background for buttons */
  padding: 15px 30px;
  border-radius: 10px;
  text-decoration: none;
  color: #333; /* Dark text for visibility on white background */
  font-size: 18px;
  font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s; /* Smooth hover effects */
  flex: 1 1 45%;
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Hover effect for social buttons */
.social-button:hover {
  transform: scale(1.05); /* Slightly enlarges button */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Deeper shadow on hover */
}

/* SVG icon styles inside social buttons */
.social-button svg {
  margin-right: 10px;
  stroke: #333; /* Dark stroke for visibility on white background */
}

/* Animated scroll arrow styles */
.scroll-arrow {
  position: absolute;
  bottom: 20px;
  left: 50%; /* Centers arrow horizontally */
  transform: translateX(-50%); /* Adjusts position to true center */
  z-index: 2; /* Places arrow above the overlay */
  display: block; /* Ensure element is visible */
  visibility: visible; /* Ensure element is not hidden */
}

/* CSS animation for the scroll arrow */
.scroll-arrow.animate {
  animation: bounce 1.5s infinite !important; /* Apply bouncing animation */
  -webkit-animation: bounce 1.5s infinite !important; /* Vendor prefix for mobile */
}

/* Bouncing animation keyframes */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

/* Vendor-prefixed animation for better mobile compatibility */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% { -webkit-transform: translateX(-50%) translateY(0); }
  40% { -webkit-transform: translateX(-50%) translateY(-10px); }
  60% { -webkit-transform: translateX(-50%) translateY(-5px); }
}

/* SVG styles for the scroll arrow */
.scroll-arrow svg {
  stroke: #FFFFFF; /* Edit this value to change the arrow color (white to match buttons) */
}

/* General section styles */
.section {
  padding: 70px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Section heading styles */
.section h2 {
  font-size: 40px;
  margin-bottom: 30px;
  color: #4A90E2; /* Blue color for headings */
  text-align: center;
}

/* About section content styles */
.about-content {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

/* About section image styles */
.about-img {
  max-width: 250px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* About section text styles */
.about-text p {
  max-width: 600px;
  font-size: 16px;
}

/* Highlights section masonry styles */
.highlights-grid {
  column-count: 3; /* Creates 3 columns for masonry layout */
  column-gap: 20px; /* Space between columns */
}

/* Individual highlight item styles */
.highlight-item {
  break-inside: avoid; /* Prevents items from breaking across columns */
  margin-bottom: 20px; /* Space between items */
}

/* Highlight item image styles */
.highlight-item img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

/* Footer styles */
footer {
  text-align: center;
  padding: 15px;
  background: #FFFFFF; /* White background */
  color: #333;
}

/* Fade-in animation for sections */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Apply fade-in animation to sections */
.section {
  animation: fadeIn 1s ease-out;
}

/* Responsive styles for mobile devices */
@media (max-width: 991px) {
  /* Reduce header size on mobile with maximum specificity */
  header {
    padding: 2px 0 !important; /* Drastically reduce padding */
    min-height: 0 !important; /* Prevent any minimum height */
    line-height: 1 !important; /* Minimize vertical space */
  }
  /* Adjust navigation styles for mobile */
  nav {
    padding: 0 5px !important; /* Minimize horizontal padding */
    align-items: flex-start !important; /* Align items to the top */
    flex-wrap: wrap !important; /* Allow wrapping */
    margin: 0 !important;
  }
  /* Compact navigation list on mobile */
  nav ul {
    flex-direction: column !important;
    gap: 1px !important; /* Minimize gap between links */
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Adjust navigation list items on mobile */
  nav ul li {
    margin: 0 !important; /* Remove all margins */
    padding: 0 !important;
  }
  /* Reduce logo size on mobile */
  nav .logo {
    font-size: 12px !important; /* Minimize logo text size */
    line-height: 1 !important; /* Minimize vertical space */
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Reduce nav link font size on mobile */
  nav ul li a {
    font-size: 10px !important; /* Minimize font size for links */
    line-height: 1 !important; /* Minimize vertical space */
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Ensure hero section padding doesn’t interfere with positioning */
  .hero {
    padding: 20px 0; /* Remove horizontal padding to avoid misalignment */
    box-sizing: border-box; /* Ensure padding is included in width */
    position: relative; /* Ensure positioning context for arrow */
  }
  /* Ensure social buttons stack vertically on mobile */
  .social-buttons {
    flex-direction: column !important; /* Force vertical stacking */
    gap: 15px; /* Space between buttons */
    width: 90%; /* Slightly less than full width for better spacing */
    max-width: none; /* Remove max-width constraint */
    margin: 0 auto; /* Center the container */
    padding: 0; /* Remove any padding that might cause misalignment */
  }
  /* Reinforce social button styles on mobile with higher specificity */
  section.hero .social-buttons .social-button {
    flex: 0 0 auto !important; /* Override flex properties */
    width: 100%; /* Full width of the container */
    background: #FFFFFF !important; /* Ensure white background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* Ensure shadow */
    color: #333 !important; /* Ensure text color */
    padding: 15px !important; /* Consistent padding */
    border-radius: 10px !important; /* Ensure rounded corners */
    font-size: 16px !important; /* Slightly smaller font size for mobile */
    display: flex !important; /* Ensure flex display */
    align-items: center !important; /* Center content vertically */
    justify-content: center !important; /* Center content horizontally */
    min-width: 0 !important; /* Remove min-width constraint */
    box-sizing: border-box; /* Include padding in width */
  }
  /* Ensure SVG icon styles on mobile */
  section.hero .social-buttons .social-button svg {
    stroke: #333 !important; /* Ensure SVG stroke color */
    margin-right: 10px !important; /* Ensure spacing between icon and text */
  }
  /* Adjust section heading size on mobile */
  .section h2 {
    font-size: 32px; /* Smaller heading size */
  }
  /* Stack about content vertically on mobile */
  .about-content {
    flex-direction: column; /* Stack content vertically */
  }
  /* Single column for highlights on mobile */
  .highlights-grid {
    column-count: 1; /* Single column on mobile */
  }
  /* Ensure scroll arrow is centered and visible on mobile */
  section.hero .scroll-arrow {
    left: 50% !important; /* Force center alignment */
    right: auto !important; /* Prevent right alignment interference */
    transform: translateX(-50%) !important; /* Adjust position to true center */
    display: block !important; /* Ensure element is visible */
    visibility: visible !important; /* Ensure element is not hidden */
    opacity: 1 !important; /* Ensure it’s not hidden */
    pointer-events: auto !important; /* Ensure it’s interactive */
  }
  /* Ensure the SVG inside the scroll arrow is visible */
  section.hero .scroll-arrow svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}