html {
  overflow: hidden;
}

body {
  height: 100vh;
  width: 100vw;
  background-color: #1a1919 !important;
  margin: 0rem;
  overflow-x: hidden;
}

#image-track {
  display: flex;
  gap: 4vmin;
  position: absolute;
  left: 20%;
  top: 60%;
  transform: translate(0%, -50%);
  user-select: none;

}

#image-track>.image {
  width: 40vmin;
  height: 56vmin;
  object-fit: cover;
  object-position: 100% center;
  transition: width 1.5s ease-in-out;
}

#image-track .selected {

  width: 90vw;
}

@media (max-width:800px) {

  #image-track .selected {
    object-fit: contain;
  }

}

h1 {
  text-align: center;
  color: #007bff !important;
  margin-bottom: 20px;
}



.nav_sec {

  .navbar {
    background-color: #1a1919;
    font-family: "Arbutus Slab";
  }

  .navbar {
    position: relative;
    transition: border-bottom-color 0.3s ease-in-out;
  }

  .navbar:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00054d;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
  }

  .navbar:hover {
    border-bottom-color: #00054d;
  }

  .navbar:hover:before {
    transform: scaleX(1);
  }

  .logo-img {
    transition: transform 0.3s ease-in-out;
  }

  .logo-img:hover {
    transform: scale(1.1);
    border: 2px solid #000;
    animation: border-animation 2s infinite;
  }

  @keyframes border-animation {
    0% {
      border-color: #007bff;
    }

    25% {
      border-color: #66adff;
    }

    50% {
      border-color: #0047cc;
    }

    75% {
      border-color: #070066;
    }

    100% {
      border-color: #001a00;
    }
  }

  .navbar-nav {
    list-style: none;
    padding: 0;
  }

  .nav-item {
    display: inline-block;
    margin-right: 15px;
    position: relative;
    padding-top: 12px;
  }

  .nav-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-size: 23px;
    color: white;
    transition: transform 0.3s ease-in-out;
  }

  .nav-link:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.5s ease-in-out;
  }

  .nav-link:hover {
    transform: scale(1.1);
    font-weight: bold;
    color: #007bff;
  }

  .nav-link:hover:before {
    width: 100%;
    animation: underline 0.6s linear;
  }

  @keyframes underline {
    0% {
      left: 0;
      width: 0;
    }

    25% {
      left: 0;
      width: 100%;
    }

    50% {
      left: 100%;
      width: 0;
    }

    75% {
      left: 0;
      width: 100%;
    }

    100% {
      left: 0;
      width: 100%;
    }
  }



  @keyframes border-animation {
    0% {
      border-color: #001f4d;
      box-shadow: 0 0 5px #002e4d;
    }

    50% {
      border-color: #0047cc;
      box-shadow: 0 0 5px #0047cc;
    }

    100% {
      border-color: #00054d;
      box-shadow: 0 0 5px #00054d;
    }
  }


  @media (max-width: 576px) {
    .nav-item {
      padding-left: 10%;
    }

    .dropdown {
      padding-left: 8%;
    }

    .dropdown-menu.dropdown-menu-center {
      left: 30% !important;
      right: 0 !important;
      transform: translateX(0) !important;
    }
  }

  .navbar-toggler {
    background-color: white;
  }
}



.images {
  border-radius: 1em;
  display: flex;
  justify-content: center;
  color: white;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.images:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}

#images-track {
  margin: 50px auto;
  width: 80%;
  height: auto;
  display: grid;
  grid-auto-columns: 1fr;
  gap: 1em;
  grid-template-areas:
    "one one eight eight"
    "one one eight eight"
    "one one eight eight"
    "one one eight eight"
    "one one eight eight"
    "one one eight eight"
    "four four eight eight"
    "four four eight eight"
    "four four eight eight"
    "four four eight eight"
    "four four eight eight"
    "four four eight eight"
    "four four eight eight"
    "four four eight eight"
    "seven seven seven seven"
    "seven seven seven seven"
    "seven seven seven seven"
    "seven seven seven seven"
    "seven seven seven seven"
    "seven seven seven seven"
    "seven seven seven seven"
    "six six five five"
    "six six five five"
    "six six five five"
    "six six five five"
    "six six five five"
    "six six five five"
    "three three five five"
    "three three five five"
    "two two two two"
    "two two two two"
    "two two two two"
    "two two two two"
    "two two two two"
}


.images:nth-child(1) {
  grid-area: one;
  background-color: #222E50;
}

.images:nth-child(2) {
  grid-area: two;
  background-color: #007991;
}

.images:nth-child(3) {
  grid-area: three;
  background-color: #439a86;
}

.images:nth-child(4) {
  grid-area: four;
  background-color: #f6511d;
}

.images:nth-child(5) {
  grid-area: five;
  background-color: #c1292e;
}

.images:nth-child(6) {
  grid-area: six;
  background-color: green;
}

.images:nth-child(7) {
  grid-area: seven;
  background-color: #f6511d;
}

.images:nth-child(8) {
  grid-area: eight;
  background-color: #c1292e;
}