/* Global Styles */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f0f0f0;
  color: #333;
}

h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #ff4500;
}

p, li {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #666;
}
/* Header */
header {
  background-color: #222;
  color: #fff;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hamburger {
  display: none; /* Initially hidden */
  font-size: 30px;
  cursor: pointer;
}

/* Navigation Styles */
nav {
  flex-grow: 1; /* Allow nav to take remaining space */
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  justify-content: flex-end; /* Align items to the right */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .hamburger {
    display: block; /* Show hamburger on mobile */
  }

  nav {
    display: none; /* Hide nav initially on mobile */
    flex-direction: column; /* Stack items vertically */
    position: absolute; /* Position it on top of content */
    top: 70px; /* Adjust as needed */
    right: 0;
    background-color: #222; /* Match header background */
    width: 100%; /* Full width */
    z-index: 10; /* On top of other content */
  }

  nav.active {
    display: flex; /* Show nav when active */
  }

  nav ul {
    flex-direction: column; /* Stack menu items vertically */
    padding: 10px; /* Padding for better spacing */
  }

  nav ul li {
    padding: 10px 0; /* Padding around each item */
  }
}

/* Add hover effects */
nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background 0.3s ease;
}

nav ul li a:hover {
  background-color: #ff4500;
}
/* App Section */
#app {
  padding: 80px 5%;
  background-color: #fff;
}

.app-content {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Image on the left */
.app-image-container {
  flex: 1;
  text-align: center;
}

.app-image {
  width: 650px;
  height: auto;
  margin-right: 100px; /* Add some spacing between the image and details */
  transition: transform 0.3s ease;
}

.app-image:hover {
  transform: scale(1.05);
}

/* Details on the right */
.app-details {
  flex: 1;
  text-align: left;
}

#app h2 {
  font-size: 36px;
  color: #ff4500;
}

.app-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.app-badge {
  width: 150px;
  transition: transform 0.3s ease;
}

.app-badge:hover {
  transform: scale(1.1);
}

.app-details p {
  font-size: 18px;
  margin: 10px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .app-content {
    flex-direction: column;
  }

  .app-image {
    margin-right: 0;
    margin-bottom: 30px;
  }

  .app-details {
    text-align: center;
  }
}

To ensure that the Android and iOS badges are aligned properly in the mobile view, you can adjust the CSS styling of the .app-buttons container to center its contents and possibly modify the margin and alignment properties. Here’s an updated version of your CSS to help achieve better alignment for the app badges on smaller screens.

Updated CSS
css
Copy code
/* App Section */
#app {
  padding: 80px 5%;
  background-color: #fff;
}

.app-content {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Image on the left */
.app-image-container {
  flex: 1;
  text-align: center;
}

.app-image {
  width: 650px;
  height: auto;
  margin-right: 100px; /* Add some spacing between the image and details */
  transition: transform 0.3s ease;
}

.app-image:hover {
  transform: scale(1.05);
}

/* Details on the right */
.app-details {
  flex: 1;
  text-align: center;
}

#app h2 {
  font-size: 36px;
  color: #ff4500;
}

.app-buttons {
  display: flex;
  justify-content: center; /* Center badges */
  gap: 15px;
  margin-bottom: 20px;
}


.app-badge {
  width: 150px;
  transition: transform 0.3s ease;
}


.app-badge:hover {
  transform: scale(1.1);
}

.app-details p {
  font-size: 18px;
  margin: 10px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .app-content {
    flex-direction: column;
  }

  .app-image {
    margin-right: 0;
    margin-bottom: 30px;
  }

  .app-details {
    text-align: center; /* Center text on mobile */
  }

  .app-buttons {
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center badges */
  }

  .app-badge {
    margin-bottom: 10px; /* Add spacing between badges */
  }
}


/* WakaOnline NZ Section */
#wakaonline {
  padding: 80px 5%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wakaonline-content {
  display: flex;
  align-items: center;
  max-width: 1200px;
  width: 100%;
}

/* Details on the left */
.wakaonline-details {
  flex: 1;
  text-align: left;
}

/* Add more space between image and details */
.wakaonline-image {
  flex: 1;
  margin-left: 60px; /* Increased space between text and image */
}

/* Image styling with shadow */
.wakaonline-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Added shadow */
}

.wakaonline-details h2 {
  font-size: 36px;
  margin-bottom: 30px;
}

.wakaonline-details p {
  font-size: 18px;
  color: #333; /* General text color */
}

.wakaonline-details ul {
  list-style-type: none;
  padding: 0;
}

.wakaonline-details li {
  font-size: 18px;
  margin: 10px 0;
}

.wakaonline-details a {
  text-decoration: none;
  color: #ff4500;
  font-weight: bold;
  display: block;
  margin-bottom: 20px;
  transition: color 0.3s ease;
}

.wakaonline-details a:hover {
  color: #ff6347;
}

/* Responsive Design */
@media (max-width: 768px) {
  .wakaonline-content {
    flex-direction: column;
  }

  .wakaonline-image {
    margin-left: 0;
    margin-bottom: 30px;
  }

  .wakaonline-details {
    text-align: center;
  }
}


/* Insurance Section */
#insurance {
  padding: 80px 5%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.insurance-content {
  display: flex;
  align-items: center;
  max-width: 1200px;
  width: 100%;
}

/* Details on the left */
.insurance-details {
  flex: 1;
  text-align: left;
  padding-right: 40px; /* Add some spacing between text and image */
}

#insurance h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

#insurance ul {
  list-style-type: none;
  padding: 0;
}

#insurance li {
  font-size: 18px;
  margin: 10px 0;
}

#insurance p {
  font-size: 18px;
  color: #333;
}

.btn-visit {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #ff4500;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-visit:hover {
  background-color: #ff6347;
}

/* Image on the right */
.insurance-image {
  flex: 1;
  text-align: right;
}

.insurance-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Add shadow effect */
}

/* Responsive Design */
@media (max-width: 768px) {
  .insurance-content {
    flex-direction: column;
  }

  .insurance-details {
    text-align: center;
    padding-right: 0;
    margin-bottom: 30px;
  }

  .insurance-image {
    text-align: center;
  }

  .insurance-image img {
    width: 80%; /* Reduce image size for smaller screens */
  }
}

footer {
  display: flex;
  justify-content: space-between; /* Space between the left, center, and right sections */
  align-items: center; /* Center vertically */
  padding: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
  flex-wrap: wrap; /* Allow wrapping for mobile mode */
}

/* Left section */
.footer-left {
  display: flex;
  align-items: center;
}

.footer-left a {
  margin: 0 10px;
  color: #333;
  text-decoration: none;
}

.footer-left a:hover {
  text-decoration: underline;
}

/* Center section */
.contact-link {
  text-align: center; /* Center the 'Connect with us' in the middle */
  flex-grow: 1; /* Allow it to take up the middle space */
}

/* Right section */
.footer-right {
  display: flex;
  align-items: center;
}

/* LinkedIn logo */
.linkedin-logo img {
  width: 24px; /* Adjust size */
  vertical-align: middle; /* Align with text */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  footer {
    flex-direction: column; /* Stack elements top to bottom */
    align-items: center; /* Center everything on mobile */
  }

  .footer-left,
  .footer-right {
    justify-content: center; /* Center left and right sections on mobile */
    margin-bottom: 10px; /* Add space between stacked sections */
  }

  .contact-link {
    margin-bottom: 10px; /* Add space between contact section and others */
  }
}



/* Responsive Styles */
@media (max-width: 768px) {
  .app-promo {
    flex-direction: column;
  }

  .app-image {
    width: 80%; /* Make the app image responsive */
  }
}
.contact-link {
  display: flex;
  align-items: center; /* Vertically center the items */
  justify-content: center; /* Center the items horizontally (optional) */
  gap: 10px; /* Adds space between the text and logo */
}

.linkedin-logo img {
  width: 30px; /* Increase the width of the LinkedIn logo */
  height: auto; /* Maintain aspect ratio */
}
.btn-visit {
  display: inline-block;
  background-color: #ff6347; /* Green background */
  color: white; /* White text */
  padding: 15px 30px; /* Padding for size */
  font-size: 18px; /* Larger font size */
  border-radius: 5px; /* Rounded corners */
  text-decoration: none; /* Remove underline */
  transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
}

.btn-visit:hover {
  background-color: #ff4500; /* Darker green on hover */
  transform: scale(1.05); /* Slightly enlarge button */
}

.btn-visit:active {
  transform: scale(0.95); /* Shrink when clicked */
}

@media (max-width: 768px) {
  .app-promo {
    flex-direction: column;
  }

  .app-image {
    width: 80%; /* Make the app image responsive */
  }

  header .logo img {
    width: 100px; /* Adjust the logo size for mobile */
  }

  nav ul {
    flex-direction: column; /* Stack the navigation items vertically */
    gap: 10px; /* Adjust the spacing between items */
    align-items: center; /* Center the items horizontally */
  }

  nav ul li a {
    padding: 10px 20px; /* Increase padding for easier clicking */
    font-size: 16px; /* Adjust font size for mobile */
  }
}