* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%;
    }

.icon-container {
  display: flex;
/*  justify-content: space-between;*/
  flex-direction: column;
  align-items: left;
  gap:30px;/* Adjust vertical gap between rows */
  padding: 0;
  margin-top: 20px;
}

.icon-row {
  display: flex;
  justify-content: space-between;
  gap: 70px;
  width: 100%;
  max-width: 800px; /* Adjust the container width */
  box-sizing: border-box;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 10px;
}

.icon {
  width: 15%;  /* Adjust the icon size */
  height: 15%; /* Adjust the icon size */
  display: flex; /* Use flex to control child alignment */
 justify-content: center; /* Center the image horizontally */
 align-items: center; /* Center the image vertically */
 overflow: hidden; /* Hide overflow if image is too big */
  flex-shrink: 0;
  flex-grow: 0; /* Prevent icons from growing */
  margin: 0; /* Remove any margin */
}

/* Images inside the icons */
.icon img {
  width: 100%;  /* Ensure the image takes up full width */
  height: 100%; /* Ensure the image takes up full height */
  object-fit: cover; /* Ensure image covers the container without distortion */
}

.icon:hover {
  transform: scale(1.3); /* Add hover effect */
}

.icon-row > .icon {
  max-width: 16.66%; /* Each icon should take up 1/6th of the row */
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0; /* Remove any padding */
 margin: 0; /* Remove any margin */
}


/* Prevent the negative margins and padding of .row class from affecting icon rows */
.row {
  margin-top: 0 !important; /* Override any negative margin-top */
  margin-right: 0 !important; /* Override any negative margin-right */
  margin-left: 0 !important; /* Override any negative margin-left */
  padding: 0 !important; /* Ensure padding does not interfere */
}

.row > * {
  padding-right: 0 !important; /* Remove padding */
  padding-left: 0 !important; /* Remove padding */
  margin-top: 0 !important; /* Remove margin-top */
}

/* Responsive design: Show menu icon on mobile */
@media (max-width: 768px) {
.menu-icon {
 display: flex; /* Show the hamburger menu icon on smaller screens */
}

/* On larger screens, show the hamburger icon on the right side */
@media (min-width: 769px) {
 .menu-icon {
     display: flex; /* Ensure hamburger icon is shown on larger screens */
 }