/* Side bar */
.sidebar {
    position: fixed;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    transition: right 0.5s ease;
    z-index: 5;
}
.slide-in {
        right: 0;
}

.sidebar-container {
    background-color: #a19d9db6;
    padding: 10px;
    border-radius: 8px 0 0 8px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin-bottom: 10px;
}

/* Cross-pattern style */
.cross-pattern.top {
    position: absolute;
    top: 8%;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
    grid-gap: 1em;
    pointer-events: auto;
}

.cross-pattern.bottom {
    position: absolute;
    bottom: 6%;
    left: 0;
    width: 100%;
    /* Adjust height to cover only the intended bottom area */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
    grid-gap: 1em;
    pointer-events: auto;
}

.cross {
    content: "";
    width: 8em;
    height: 8em;
    background-image: url(assets/cross.png);
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.cross:hover {
    transform: rotate(90deg);
}

/* Hide cross pattern on small screens */
@media (max-width: 1489px) {
    .cross-pattern.top{
        display: none;
    }
    .cross-pattern.bottom{
        display: none;
    }
}

/* Service grid styling */

#services-grid {
    display: flex;
    flex-wrap: wrap;
}

.spacing {
    flex: 1;
    min-width: 400px; /* Adjust the min-width as needed */
    margin: 18px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .spacing {
        flex: 1 1 100%; /* On small screens, take full width */
        min-width: 0; /* Override min-width to allow full width on small screens */
    }
}

#pricing-grid {
    display: flex;
    flex-wrap: wrap;
}

.image-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fonts */
.ibm-plex-mono-thin {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 100;
    font-style: normal;
  }
  
  .ibm-plex-mono-extralight {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 200;
    font-style: normal;
  }
  
  .ibm-plex-mono-light {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: normal;
  }
  
  .ibm-plex-mono-regular {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-style: normal;
  }
  
  .ibm-plex-mono-medium {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: normal;
  }
  
  .ibm-plex-mono-semibold {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 600;
    font-style: normal;
  }
  
  .ibm-plex-mono-bold {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 700;
    font-style: normal;
  }
  
  .ibm-plex-mono-thin-italic {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 100;
    font-style: italic;
  }
  
  .ibm-plex-mono-extralight-italic {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 200;
    font-style: italic;
  }
  
  .ibm-plex-mono-light-italic {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: italic;
  }
  
  .ibm-plex-mono-regular-italic {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-style: italic;
  }
  
  .ibm-plex-mono-medium-italic {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: italic;
  }
  
  .ibm-plex-mono-semibold-italic {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 600;
    font-style: italic;
  }
  
  .ibm-plex-mono-bold-italic {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 700;
    font-style: italic;
  }

  body, h1 {
    font-family: 'IBM Plex Mono', monospace;
  }
  
    /* Hover button */
.hover-button {
    border: none; /* Remove border */
    padding: 10px 20px; /* Padding around text */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Change cursor on hover */
    text-decoration: none; /* Remove underline */
    transition: text-decoration 0.3s; /* Smooth transition */
}

.hover-button:hover {
    text-decoration: underline; /* Underline text on hover */
    background-color: rgba(165, 165, 165, 0.429);
    border-radius: 8px;
}

.flex-container {
  display: flex;
  flex-direction: row; /* Default: two columns (items in a row) */
  gap: 20px; /* Adds space between items */
  justify-content: space-between; /* Distributes space between the items */
}

.flex-item {
  flex: 50%; /* Makes items take 50% width, minus the gap */
  box-sizing: border-box; /* Includes padding and borders in width calculations */
  padding: 10px; /* Optional padding for items */
  background-color: lightgray; /* Background color for visual distinction */
  border-radius: 8px;
}

/* Responsive layout - switches to one column layout for smaller screens */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column; /* Stacks items in a column */
  }

  .flex-item {
    flex: 1 1 100%; /* Each item takes full width */
  }
}



.hidden {
  opacity: 0;
  filter: blur(5px);
  transition: all 2s;
}

.show {
  opacity: 1;
  filter: blur(0);
}

/* Default animation direction (e.g., from the left) */
[data-direction="left"].hidden {
  transform: translateX(-100%);
}
[data-direction="right"].hidden {
  transform: translateX(100%);
}
[data-direction="up"].hidden {
  transform: translateY(-100%);
}
[data-direction="down"].hidden {
  transform: translateY(100%);
}

[data-direction="left"].show,
[data-direction="right"].show,
[data-direction="up"].show,
[data-direction="down"].show {
  transform: translate(0);
}

.mnb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.mnb > div {
  flex: 1 1 45%; /* Ensures the divs take 45% of the width on larger screens */
  max-width: 45%; /* Max width for larger screens */
  min-width: 300px; /* Ensures a minimum size for smaller screens */
  padding: 10px;
  box-sizing: border-box; /* Ensures padding doesn't break the layout */
}

.w3-padding {
  padding: 16px;
}

.w3-card {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow to the card */
}

.w3-round-large {
  border-radius: 16px;
}

img {
  width: 100%; /* Image takes up full width of its container */
  max-width: 100%; /* Ensures image doesn't overflow */
  border-radius: 16px;
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
  .mnb {
    flex-direction: column;
    align-items: center;
  }
  
  .mnb > div {
    width: 100%; /* Full width on smaller screens */
    max-width: 100%;
  }
}