/* Global Reset & Box Model */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Ensures that padding and borders are included in the element's total width and height */
}

body {
  font-family: Arial, sans-serif; /* Default font */
  background-color: #f0f4f8; /* Background color to match the page */
  color: #333; /* Text color for better readability */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Navbar container */
.navbar {
  display: flex;
  justify-content: center; /* Center the menu and logo horizontally */
  align-items: center;     /* Align items vertically to the center */
  padding: 20px 15px;      /* Padding around the navbar */
  background-color: #333;
  width: 100%;  /* Full width */
  max-width: 100%;  /* Prevent overflow */
  position: relative; /* Ensure navbar doesn't affect other elements */
}

/* Menu styling */
.menu {
  display: flex;
  gap: 20px;  /* Space between menu items */
  flex-wrap: wrap;  /* Allow items to wrap on smaller screens */
  justify-content: center;  /* Center the menu items horizontally */
  align-items: center;      /* Center items vertically */
  transition: all 0.3s ease; /* Smooth transition */
}

/* The rest of your menu styling remains the same */


/* Logo styling */
.logo-img {
  height: 50px;
  width: auto;
  max-width: 100%;  /* Ensure logo scales down on smaller screens */
  margin-right: 20px;  /* Add space to the right of the logo */
}

/* Menu styling */
.menu {
  display: flex;
  gap: 20px;  /* Add space between menu items */
  margin-left: 0;
  flex-wrap: wrap;  /* Allow items to wrap on smaller screens */
  justify-content: flex-start;  /* Align items to the left by default */
  transition: all 0.3s ease; /* Smooth transition */
}

/* Menu links styling */
.menu-link {
  color: white;  /* Default color for links */
  text-decoration: none;  /* No underline */
  font-size: 18px;
  padding: 10px 15px;
  transition: background-color 0.3s, color 0.3s;  /* Added color transition */
}

/* Menu link hover effect */
.menu-link:hover {
  background-color: #555;  /* Background color on hover */
  color: white;  /* Ensure the text stays white */
  border-radius: 5px;  /* Add rounded corners to hover */
}

/* Call-to-action button styling */
.cta-button {
  background-color: #E02735;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s, transform 0.3s;
  display: inline-block;
  z-index: 10;
  margin-left: 50px;
  max-width: 100%;  /* Ensure button doesn't overflow */
}

/* Call-to-action button hover effect */
.cta-button:hover {
  background-color: #BD0F0F;
  transform: scale(1.1);  /* Slightly increase the size when hovered */
}

/* For screens smaller than 768px (tablets and mobile) */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;  /* Stack navbar items vertically */
    align-items: center;  /* Center the items */
    padding: 10px;
    justify-content: center;
  }

  .menu {
    flex-direction: column;  /* Stack the menu vertically on smaller screens */
    align-items: center;  /* Center the menu items */
    gap: 10px;
    justify-content: center;
    width: 100%;
  }

  .cta-button {
    margin-left: 0;  /* Remove margin to center the button */
    width: 100%;  /* Button takes full width */
    padding: 12px 20px;
    font-size: 18px;
  }

  .logo-img {
    height: 40px;  /* Make the logo smaller on mobile */
  }
}

/* For screens smaller than 480px (very small devices) */
@media (max-width: 480px) {
  .cta-button {
    padding: 12px 15px;
    font-size: 16px;
  }

  .menu-link {
    font-size: 16px;
  }
    
}