.s-s-dp {
  width: 100vw;
  height: 75vh;
  /* margin-top: -11vh; */
  background: #0d0d0d !important;
}
#about-container {
  background-image: url("../ASSETS/DeliveredProjects/exotica.jpg");
}
/* SLIDER */
#slider-container {
  width: 90vw;
  margin-left: 3.8vw;
  padding-top: 7vh;
  background: #0d0d0d;
  height: 70vh;
  overflow-y: hidden;
  margin-bottom: 20vh;
}
.slider {
  display: flex;
  height: 91vh;
  overflow-x: scroll !important;
  transform: scroll(calc(var(--i, 0) / var(--n) * -100%));
  scroll-behavior: smooth;
}
.slider::-webkit-scrollbar {
  height: 5px;
  width: 150px;
  display: none;
}
.slider::-webkit-scrollbar-track {
  background: transparent;
}
.slider::-webkit-scrollbar-thumb {
  background: #888;
}
.slider::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.slide_crousel {
  position: relative;
  transition: 0.4s;
}
.img {
  height: 250px;
  width: 260px !important;
  margin: 0 15px;
  object-fit: cover;
  cursor: pointer;
  transition: 0.25s ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #ffc006;
  border-bottom: none;
}
.con {
  text-align: center;
  height: 95px;
  background: #222222;
  width: 260px !important;
  margin: 0 15px;
  border: 2px solid #ffc006;
  object-fit: cover;
}
.con > h4 {
  font-family: "Oswald", sans-serif !important;
  padding-top: 2vh;
  padding-bottom: 0;
  color: #fff;
  font-size: 22px;
  text-transform: uppercase;
}
.con > p {
  font-family: "Roboto", sans-serif !important;
  font-size: 14px;
  line-height: 28.8px;
  color: #c2c2c2;
  padding-left: 42px;
  padding-right: 44px;
}
#first-i {
  background-image: url("../ASSETS/DeliveredProjects/homeTwo.jpg");
}
#sec-i {
  background-image: url("../ASSETS/DeliveredProjects/vatikaTwo.jpg");
}
#third-i {
  background-image: url("../ASSETS/DeliveredProjects/vihar.png");
}
#fourth-i {
  background-image: url("../ASSETS/DeliveredProjects/plaza.png");
}
#fifth-i {
  background-image: url("../ASSETS/DeliveredProjects/cosmo.jpg");
}
#sixth-i {
  background-image: url("../ASSETS/DeliveredProjects/kunj.jpg");
}
#seventh-i {
  background-image: url("../ASSETS/DeliveredProjects/homes.png");
}
#eight-i {
  background-image: url("../ASSETS/DeliveredProjects/exotica.jpg");
}
#ninth-i {
  background-image: url("../ASSETS/DeliveredProjects/dhaam.gif");
}
#first-con {
  margin-left: -15px;
}
#last-con {
  margin-right: -15px;
}
p {
  z-index: 100;
  color: red;
}
.control-prev-btn {
  left: 10px;
}
.control-next-btn {
  right: 10px;
}
.direc {
  position: absolute;
  margin-top: 35vh;
  color: #ffc006;
  cursor: pointer;
  font-size: 18px;
  user-select: none;
}

@media only screen and (max-width: 1100px) {
  .s-s-dp {
    height: 110vh;
  }
  /* SLIDER */
  #slider-container {
    height: 75vh;
  }
  .img {
    width: 460px !important;
  }
  .con {
    width: 460px !important;
  }
  .direc {
    /* display: none; */
  }
}
@media only screen and (max-width: 800px) {
  h1 {
    font-size: 56px;
  }
  /* SLIDER */
  #slider-container {
    height: 95vh;
  }
  .img {
    width: 320px !important;
  }
  .con {
    width: 320px !important;
  }
  .head > p {
    width: 80vw;
  }
}
@media only screen and (max-width: 600px) {
  .direc {
    margin-top: 25vh !important;
  }
  .s-s-dp {
    height: fit-content;
    padding-bottom: 5vh;
  }
  h1 {
    font-size: 60px;
  }
  /* SLIDER */
  #slider-container {
    margin-left: 5.6vw;
    background: #0d0d0d;
    height: fit-content;
    margin-bottom: 0;
  }
  .img {
    width: 330px !important;
  }
  .con {
    width: 330px !important;
  }
  .head > p {
    width: 80vw;
  }
  .head > h2 {
    width: 85vw;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 412px) {
  /* SLIDER */
  #slider-container {
    /* background: RED; */
    height: fit-content;
  }
  .img {
    width: 300px !important;
  }
  .con {
    width: 300px !important;
  }
  .head > p {
    width: 80vw;
  }
  .head > h2 {
    width: 85vw;
    margin: 0 auto;
  }

  #card-btn {
    display: none;
  }
}
@media only screen and (max-width: 365px) {
  /* SLIDER */
  #slider-container {
    background: #0d0d0d;
    height: fit-content;
  }
  .img {
    width: 290px !important;
  }
  .con {
    width: 290px !important;
  }
  .head > p {
    width: 100vw;
  }
  .head > h2 {
    width: 100vw;
    margin: 0 auto;
  }
}