@charset "utf-8";
/* CSS Document */
 #container-imgs {
  position: relative;
  width: 90%;
  display: flex;
  gap: 5px;
  overflow-x: auto;
    margin: 0 auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
#container-imgs > div {
  height: 250px;
  flex: none;
  scroll-snap-align: center;
}

#container-imgs img {
  width: 100%;
    height: 200px;
    object-fit:cover;
  flex: none;
  scroll-snap-align: center;
}
#container-btn {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%);
}

#container-btn > button {
  appearance: none;

  width: 100px;
  height: 35px;

  background: #333;
  border-radius: 5px;
  border: none;

  color: #999;
  font: 18px sans-serif;

  cursor: pointer;
}

#container-btn > button:hover {
  color: #ddd;
}
/* width */
::-webkit-scrollbar {
  width: 2px;
    height:6px
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #E04C00;
    width: 5px;
    height:4px;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #005A7F;
    }
@media only screen and (max-width: 480px) {
#Offerings #container-imgs {  
  position: relative;
  width: 90%;
  display: flex;
  gap: 5px;
  overflow-x: auto;
    margin: 0 auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
}
@media only screen and (min-width: 481px) and (max-width: 769px) {
#Offerings #container-imgs {  
  position: relative;
  width: 90%;
  display: flex;
  gap: 5px;
  overflow-x: auto;
    margin: 0 auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
#Projects #container-imgs {
  position: relative;
  width: 90%;
  display: flex;
  gap: 5px;
  overflow-x: auto;
    margin: 0 auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
}