* {
  box-sizing: border-box;
}

html {
  /* To make REM useful as measurement across the entire site for the fonts */
  font-size: 100%;

  /* Setting global defaults */
  line-height: 1.6;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  color: #161616;
}

body {
  overflow-x: hidden;

  /* Inherit defaults from from the root element (html) - cannot be set in body since gets overridden by some browsers. */
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  text-align: inherit;
  color: inherit;
}

h1 {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 400;
}

h2 {
  font-size: 3rem;
  line-height: 1.4;
  font-weight: 600;
}

p {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 400;
}

ul li {
  display: inline;
  text-decoration: none;
  font-weight: 400;
  font-size: 1rem; /* Matches base font size */
}

/* Make sure content does not go wider than 1800px (but can go smaller) */
.container {
  max-width: 1800px; /* Constrain content */
  margin: 0 auto; /* Center the content */
  padding: 0 1rem; /* Add side padding */
}

.blackSection {
  background-color: black;
  color: white;
}

.whiteSection {
  background-color: white;
  color: black;
}

/** HEADER */

header {
  background-color: black;
  padding: 1rem;
  height: 10vh; /* 10% of the viewport height */
}

/* NAV */

/* General styles for nav */
nav {
  background-color: #161616; /* Dark gray background for nav */
  text-align: center; /* Center-align links */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    /* Subtle top highlight */ 0 2px 4px rgba(0, 0, 0, 0.4); /* Soft drop shadow for depth */
  padding: 0.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border for top edge */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Darker border for bottom edge */
}

/* Style links */
nav a {
  text-decoration: none;
  color: #ccc; /* Light gray for default link state */
  font-weight: bold;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

nav a:hover,
nav a:focus {
  color: #fff; /* White on hover */
  background-color: #333; /* Darker gray background */
}

nav a:active {
  background-color: #555; /* Slightly lighter gray for active state */
}

/* Burger menu styles */
.menu-toggle {
  display: none; /* Hidden by default for larger screens */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  width: 30px;
  height: 24px;
}

.menu-toggle .burger-line {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #ccc;
  margin-bottom: 5px;
  border-radius: 2px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.menu-toggle .burger-line:last-child {
  margin-bottom: 0;
}

.menu-toggle:hover .burger-line {
  background-color: #fff; /* Change color on hover */
}

/* Large screen layout */
@media (min-width: 769px) {
  nav {
    display: flex;
    justify-content: center;
    flex-direction: row;
  }

  .menu-toggle {
    display: none; /* Hide toggle button */
  }

  .menu {
    display: flex; /* Show menu as a horizontal row */
    gap: 20px; /* Spacing between links */
  }

  .menu li {
    margin: 0; /* Adjust margin for inline display */
  }
}

/* Small screen layout */
@media (max-width: 768px) {
  nav {
    position: relative; /* Make nav the positioning context */
    display: flex;
    justify-content: center; /* Center the button */
    align-items: center; /* Vertically center the button if needed */
  }

  .menu {
    display: none; /* Hide the menu by default */
    position: absolute; /* Position relative to nav */
    top: 100%; /* Position just below the button */
    left: 0;
    right: 0; /* Stretch the menu to the full width of the screen */
    background: #222; /* Match nav background */
    border: 1px solid #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 1rem 0;
    z-index: 1000; /* Ensure the menu appears above other elements */
  }

  .menu.active {
    display: block; /* Show the menu when active */
  }

  .menu li {
    margin: 5px 0; /* Stack links vertically */
  }

  .menu a {
    display: block; /* Ensure links are block-level elements for full-width clicking */
    padding: 1rem; /* Add padding for better click targets */
    text-align: center; /* Center-align text */
  }

  .menu-toggle {
    display: inline-block; /* Show toggle button on small screens */
  }
}

/* HERO */

#hero .container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  text-align: center;
  height: 90vh; /* 90% of the viewport height */
}

#hero article {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  width: 40%;
}

#CTA {
  width: 30%;
  height: auto;
  padding-top: 2rem;
}

#heroImgDiv {
  height: 100%; /* Let the container control the height */
  width: 40%;
  display: flex; /* Make the div a flex container */
  justify-content: center; /* Center the image horizontally */
  align-items: center; /* Center the image vertically */
  overflow: hidden; /* Ensure the image doesn't overflow */
  padding: 5% 0;
}

#heroImg {
  height: 100%;
  width: auto;
  max-width: 100%; /* Constrain the image to the container's width */
  max-height: 100%; /* Constrain the image to the container's height */
  object-fit: contain; /* Ensure the image scales properly */
}

@media (max-width: 1200px) {
  #CTA {
    width: 40%;
  }

  #hero h1 {
    font-size: 2rem;
  }

  #hero h2 {
    font-size: 2.5rem;
  }

  #hero p {
    font-size: 1.2rem;
  }

  #heroImgDiv {
    padding: 3% 0; /* Keep consistent padding */
  }
}

@media (max-width: 810px) {
  #CTA {
    width: 50%;
  }
}

@media (max-width: 768px) {
  #hero .container {
    flex-direction: column; /* Stack text and image vertically */
    padding: 1.5rem;
    height: auto; /* Allow content to determine height */
  }

  #hero article {
    max-width: 100%; /* Use full width for text */
    width: 100%;
  }

  #CTA {
    width: 30%;
  }

  #hero h1 {
    visibility: hidden;
  }

  #heroImgDiv {
    width: 100%; /* Use full width for image */
    height: auto; /* Allow content to determine height */
    padding: 1rem 0; /* Adjust padding */
  }

  #heroImg {
    max-width: 80%; /* Scale down the image */
    max-height: 100%; /* Ensure the image remains contained */
    object-fit: contain; /* Maintain aspect ratio */
    padding: 0.5rem 0;
  }
}

@media (max-width: 530px) {
  #CTA {
    width: 40%;
  }
}

@media (max-width: 360px) {
  #CTA {
    width: 50%;
  }

  #hero h2 {
    font-size: 2rem;
  }

  #hero p {
    font-size: 1rem;
  }
}

/* FEATURES */
#features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  padding: 5rem;
}

#features.whiteSection {
  background-color: white;
  color: black;
}

#features article {
  display: flex;
  flex-direction: column; /* Stack content inside articles */
  justify-content: space-between; /* Spread content evenly */
  text-align: center;
  padding: 20px; /* Add padding to avoid margin collapse */
  width: 30%; /* Default width for larger screens */
  height: auto;
}

#featuresTop,
#featuresBottom {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: stretch; /* Ensure all articles have equal height */
  gap: 2rem; /* Space between articles */
}

#features h2 {
  font-size: 2rem;
  font-weight: bold;
  margin: 0; /* Reset default margins */
  padding: 20px 0; /* Consistent spacing with padding */
  color: #161616;
  min-height: 3rem; /* Ensure all headings have the same height */
  display: flex; /* Flexbox for vertical centering */
  align-items: center; /* Center text vertically */
  justify-content: center; /* Optional: Center text horizontally */
  text-align: center;
}

#features p {
  font-size: 1.2rem;
  margin: 0; /* Reset default margins */
  padding: 10px 0; /* Consistent spacing */
  text-align: justify;
  color: #161616;
}



/* Responsive Adjustments for Smaller Screens */
@media (max-width: 768px) {
  #features {
    padding: 2rem; /* Reduce padding for smaller screens */
  }

  #features article {
    width: 90%; /* Use full width for articles */
    margin-bottom: 2rem; /* Add spacing between stacked articles */
  }

  #featuresTop,
  #featuresBottom {
    flex-direction: column; /* Stack articles vertically */
    gap: 1.5rem; /* Adjust gap between articles */
  }

  #features h2 {
    font-size: 1.6rem; /* Slightly smaller headings */
    padding: 10px;
  }

  #features p {
    font-size: 1rem; /* Adjust text size for readability */
    padding: 10px;
    text-align: justify;
  }
}

@media (max-width: 1200px) {
  
}

@media (max-width: 810px) {
}

@media (max-width: 768px) {
}

@media (max-width: 530px) {
  
}

@media (max-width: 360px) {
  
}

/* TESTIMONIALS */

#testimonials .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;
  width: 100%;
}

#testimonials h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: white; /* Changed to white for black background */
}

.testimonials-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  width: 80%;
}

.testimonial {
  background-color: #222; /* Dark gray instead of light gray */
  border-radius: 10px;
  padding: 2rem;
  width: 30%;
  text-align: left;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  color: #f4f4f4; /* Lighter text color for readability */
}

.testimonial p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #e0e0e0; /* Lighter text for better readability */
}

.testimonial-author {
  display: flex;
  align-items: center;
}

.testimonial-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 1rem;
}

.testimonial-name {
  font-weight: bold;
  margin-right: 0.5rem;
  color: white;
}

.testimonial-title {
  color: #aaa; /* Slightly lighter for subtle differentiation */
  font-size: 0.8rem;
}

/* Responsive design */
@media (max-width: 768px) {
  .testimonials-container {
    flex-direction: column;
    align-items: center;
  }

  .testimonial {
    width: 90%;
    margin-bottom: 1rem;
  }
}

/* PRICING */

#pricing .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;
  text-align: center;
}

#pricing h2 {
  font-size: 2rem;
  margin-bottom: 5rem;
  color: #161616;
}

.pricing-container {
  display: flex;
  justify-content: center;
  gap: 2rem; /* Consistent spacing between cards */
  width: 80%; /* Matches testimonial-container width */
  align-items: stretch; /* Ensures all cards have equal height */
}

.pricing-card {
  display: flex;
  flex-direction: column; /* Stacks elements vertically */
  justify-content: space-between; /* Ensures proper spacing within the card */
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  padding: 2rem;
  width: 30%; /* Matches testimonial width */
  text-align: center;
}

.pricing-card.featured {
  border: 2px solid #204475;
  background-color: #eef5ff;
}

.pricing-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #161616;
}

.pricing-card .price {
  font-size: 2rem;
  font-weight: bold;
  color: #2b2a2a;
  margin: 1rem 0;
}

.pricing-card ul {
  list-style: none;
  margin: 3rem 0;
  margin-top: 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.pricing-card ul li {
  margin: 0.5rem 0;
  color: #333;
}

.pricing-card .button {
  background-color: #2b2a2a;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 1rem;
  font-size: 1rem;
  margin-top: auto; /* Pushes the button to the bottom of the card */
  width: 40%; /* Ensures consistent button width */
  align-self: center; /* Centers the button horizontally */
  text-align: center;
}

.pricing-card .button:hover {
  background-color: #162f54;
}

/* Responsive design */
@media (max-width: 768px) {
  .pricing-container {
    flex-direction: column;
    align-items: center;
  }

  .pricing-card {
    width: 90%;
    margin-bottom: 1rem;
  }
}

/* FOOTER */

footer {
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.2);
  background-color: #161616;
  padding: 1rem 0 1rem;
  padding-bottom: 3rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

footer p {
  margin: 20px 0;
}

#copyright {
  color: rgb(120, 120, 120);
}

.footerLinks {
  display: flex;
  justify-content: center;
  flex-direction: row;
  text-align: center;
}

.footerLinks a {
  color: rgb(120, 120, 120);
  text-decoration: none;
  font-size: 1rem;

  width: 170px; /* Fixed width for each link */
  text-align: center;
  display: inline-block;
}