html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}
html,
body {
  overflow-x: hidden;
}
header {
  height: 100vh;
  background-image: linear-gradient(
      to right bottom,
      rgba(0, 0, 0, 0.253),
      rgba(0, 0, 0, 0.253)
    ),
    url("assests/WhatsApp\ Image\ 2023-06-28\ at\ 09.47\ 1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}
.links {
  font-family: "IBM Plex Sans", sans-serif;
}
.heading {
  font-family: "Old Standard TT";
}
.ibm-font {
  font-family: "IBM Plex Sans", sans-serif;
}
.old-font {
  font-family: "Old Standard TT";
}
.image-container {
  background-image: linear-gradient(
      to right bottom,
      rgba(48, 48, 63, 0.397),
      rgba(48, 48, 63, 0.349)
    ),
    url("assests/WhatsApp\ Image\ 2023-06-28\ at\ 09.47\ 2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.welcome {
  background-image: linear-gradient(
      to right bottom,
      rgba(0, 0, 0, 0.253),
      rgba(0, 0, 0, 0.253)
    ),
    url("assests/ALIS5798\ 1.png");
  background-position: center;
  overflow: hidden;
}
.overlock-font {
  font-family: "Overlock SC", cursive;
}
@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

.email-login {
  outline: none;
}
.email-login:invalid {
  animation: shake 0.2s ease-in-out 0s 2;
}

.signup:invalid {
  box-shadow: 0 0 0.6rem #ff0000;
  animation: shake 0.2s ease-in-out 0s 2;
}

#blurryscroll {
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  position: fixed;
  /* filter: blur(4px); */
}
nav {
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  position: fixed;
  /* filter: blur(4px); */
}
.blur-back {
  backdrop-filter: blur(30px);
  z-index: 1;
}
.hidden {
  display: none;
}
.slider {
  position: relative;
  max-width: 100%;
  height: 20rem;
  margin: 0 auto;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1s;
}
.slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* button {
  background: none;
  border: none;
}
button .fas {
  color: rgba(255, 255, 255, 0.5);
} */
.btn-slide {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 10;

  height: 5.5rem;
  width: 5.5rem;
  cursor: pointer;
}
.prev {
  left: 3rem;
  transform: translate(-50%, -50%);
}
.next {
  right: 3rem;
  transform: translate(50%, -50%);
}
.dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.dot {
  width: 10px;
  height: 10px;
  margin: 15px 5px;
  border-radius: 100%;
  background: rgba(39, 39, 39, 0.5);
  cursor: pointer;
}
.dot.active {
  background: #272727;
}

/* .slideshow-header {
  background-image: url("assets/uploads/slider-5.jpg");
  animation: slideshow 20s infinite;
}

@keyframes slideshow {
  0% {
    background-image: url("assets/uploads/slider-5.jpg");
  }

  33% {
    background-image: url("assets/uploads/slider-1.png");
  }

  66% {
    background-image: url("assets/uploads/slider-3.png");
  }

  100% {
    background-image: url("assets/uploads/slider-5.jpg");
  } */
/* } */
.dot-white {
  width: 10px;
  height: 10px;
  margin: 15px 5px;
  border-radius: 100%;
  background: white;
  cursor: pointer;
}

/* Background Image for mobile */
/* Media query for mobile devices */
@media only screen and (max-width: 767px) {
  header {
    background-size: cover;
    background-position: center;
  }
  #divGrid {
    grid-column-start: 1;
    grid-column-end: 4;
  }
  .image-container {
    background-image: linear-gradient(
        to right bottom,
        rgba(0, 0, 0, 0.253),
        rgba(0, 0, 0, 0.253)
      ),
      url("assests/ALIS5798\ 1.png");

    overflow: hidden;
    background-size: cover;
    background-position: center;
  }

  /* .slideshow-header {
    background-image: url("assets/uploads/slider-5.jpg");
    background-position: center;
    background-size: cover;
    animation: slideshow 20s infinite;
  }

  @keyframes slideshow {
    0% {
      background-image: url("assets/uploads/slider-5.jpg");
      background-position: center;
      background-size: cover;
    }

    33% {
      background-image: url("assets/uploads/slider-1.png");
      background-position: center;
      background-size: cover;
    }

    66% {
      background-image: url("assets/uploads/slider-3.png");
      background-position: center;
      background-size: cover;
    }

    100% {
      background-image: url("assets/uploads/slider-5.jpg");
      background-position: center;
      background-size: cover;
    }
  } */
}