@media (max-width: 1169px) {
  .desktop {
    padding-right: 3rem;
  }
  .feature-container {
    padding-left: 3rem;
  }
}
@media (max-width: 998px) {
  .feature-img-container img {
    height: 80%;
    align-self: center;
  }
  .infrastructure-container {
    padding-right: 0;
  }
  .desktop img {
    height: 400px;
  }
  footer {
    padding: 2rem 5rem 3rem 5rem;
  }
  .header-container {
    padding: 0 2rem;
  }
}
@media (max-width: 878px) {
  .feature-img-container img {
    height: 70%;
  }
  .desktop img {
    height: 300px;
  }
  .Infrastructure-img img {
    height: 350px;
    top: -29px;
  }
  h3 {
    font-size: 1.3rem;
  }
}
@media (max-width: 768px) {
  .mobile-img {
    display: none !important;
  }
  .img {
    display: block;
  }
  .header-ul {
    background-color: #fff;
    border-radius: 0.8rem;
    color: #000;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 80px; /* Adjusted to ensure consistent top positioning */
    transform: translateX(-50%); /* Only translate X to avoid vertical shift */
    width: 90%; /* Responsive width */
    max-width: 500px;
    padding: 3rem 2rem;
    text-align: center;
    display: none;
  }
  .list-item {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .arrow {
    justify-content: center;
    width: min-content;
    margin: 0 auto;
  }
  .items {
    background-color: hsla(0, 3%, 80%, 0.5);
    box-shadow: none;
    position: relative;
    top: 0;
    justify-content: center;
    margin: 1rem 0;
  }
  .items li {
    margin-bottom: 1rem;
  }
  .items li:last-child {
    margin-bottom: 0;
  }
  .arrow-down,
  .arrow-up {
    filter: sepia(100%) hue-rotate(336deg) saturate(200%) brightness(80%);
    height: 10px;
    max-width: 15px;
  }
  hr {
    display: block;
    margin: 2rem 0;
    max-width: 100%;
  }
  .mobile-signIn-btn {
    display: block;
  }
  .mobile-sign {
    background-image: linear-gradient(
      to right,
      hsl(355, 100%, 74%),
      hsl(356, 100%, 66%)
    );
    border-radius: 1.2rem;
    color: #fff;
    padding: 0.5rem 0rem;
    width: 100px;
    margin: 0 auto;
    margin-top: 1rem;
  }
  .signIn-btn {
    display: none;
  }
  #menu {
    display: block;
    height: 20px;
  }
  #close-bar {
    height: 30px;
    max-width: 25px;
  }
  .feature {
    flex-direction: column;
  }
  .feature-container {
    padding: 0 3rem;
    margin-bottom: 10rem;
  }
  .feature div:first-child {
    text-align: center;
  }
  .feature-img-container {
    justify-content: center;
    order: -1;
    margin-top: 3rem;
  }
  .feature-img-container img {
    height: 400px;
  }
  .infrastructure-container {
    grid-template-columns: 1fr;
    justify-content: center;
    /* position: static; */
  }
  h3 {
    font-size: 1.5rem;
  }
  .infrastructure-details {
    padding: 5rem 3rem 0 3rem;
    text-align: center;
    width: 100%;
    z-index: 1;
  }
  .Infrastructure-img img {
    left: 50%;
    transform: translate(-50%, 0);
    top: -152px;
  }
  .desktop {
    flex-direction: column;
    text-align: center;
    padding-left: 3rem;
  }
  .desktop img {
    justify-items: center;
    height: 400px;
    margin: 0 auto;
  }
  footer {
    grid-template-columns: 1fr;
  }
  footer img {
    margin-bottom: 3rem;
  }
}
@media (max-width: 600px) {
  .desktop img,
  .feature-img-container img,
  .Infrastructure-img img {
    height: 300px;
  }
  .feature-container h2,
  h1 {
    font-size: 2.5rem;
  }
  footer {
    padding: 2rem 3rem 3rem 3rem;
  }
}
@media (max-width: 500px) {
  .header-ul {
    width: 400px;
  }
  .feature-container h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.3rem;
  }
}
@media (max-width: 420px) {
  .header-ul {
    width: 300px;
  }
  h1 {
    font-size: 2rem;
  }
  .feature-container h2 {
    font-size: 1.5rem;
  }
  .desktop img,
  .feature-img-container img,
  .Infrastructure-img img {
    height: 250px;
  }
  footer {
    text-align: center;
  }
  .footer-ul {
    flex-direction: column;
    gap: 3rem;
  }
  .header-list {
    margin-bottom: 1rem;
  }
  .footer-ul ul {
    row-gap: 0.5rem;
  }
  footer img {
    margin: 0 auto;
    margin-bottom: 3rem;
  }
}
@media (max-width: 370px) {
  .desktop img,
  .feature-img-container img,
  .Infrastructure-img img {
    height: 200px;
  }
  h1 {
    font-size: 1.8rem;
  }
  .feature-container h2 {
    font-size: 2rem;
  }
}