@import url(styles.css);


.sclbanner-container img {
  width: 100% !important;
  height: 200px !important;
}

.sclbanner-container {
  /* width: 100%; */
  margin-top: -10px;

}

.scl-cards {
  .scl-card {
    display: flex;
    flex-flow: wrap;
    flex: 100%;
    margin-bottom: 40px;

    &:nth-child(even) .sclcard-img-body {
      order: 2;
    }

    &:nth-child(even) .scl-card-body {
      padding-left: 0;
      padding-right: 1.25rem;
    }

    @media (max-width: 576px) {
      display: block;
    }

  }

  .sclcard-img-body {

    box-shadow: inset;
    border-radius: 20px;
    flex: 2;
    overflow: hidden;
    position: relative;
    height: 370px;

    @media (max-width: 576px) {
      width: 100%;
      height: 300px;
      margin-bottom: 20px;
    }

  }

  .scl-card-img {
    width: 100%;
    height: auto;
    position: absolute;
    /* margin-left: 20%; */
    transform: translateX(-50%);

    /* margin-top: -20px; */
    @media (max-width: 1140px) {
      margin: 0;
      transform: none;
      width: 100%;
      height: auto;
    }

  }

  .scl-card-body {
    margin-top: 30px;
    flex: 2;
    padding: 0 0 0 1.25rem;

    @media (max-width: 576px) {
      padding: 0;
    }

  }
}

.scl-card-body .card-text {
  color: var(--scl-card-body-card-text);
  justify-content: center;

}

.scl-card-body .card-title {
  font-size: 2em;
  color: var(--scl-card-body-card-tittle);

}

.ph-card-img2 {
  width: 100%;
  height: auto;
  position: absolute;
  /* margin-left: 20%; */
  transform: translateX(-50%);
  border-radius: 20px;

  @media (max-width: 1140px) {
    margin: 0;
    transform: none;
    width: 100%;
    height: auto;
  }

}

/* ------------------------------Carousel----------------------- */
/* import url("https://fonts.googleapis.com/css?family=Poppins|Lato|Roboto+Mono&display=swap");
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #d3979a;
  font-family: "Helvetica Neue", "Roboto Mono", "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
} */



#sclcarousel-wrapper {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#sclcarousel-wrapper #sclmenu {
  height: 380px;
  width: 820px;
  overflow: hidden;
  font-weight: 700;
  line-height: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: all 0.6s ease-in-out;
}

#sclcarousel-wrapper #sclmenu #sclcurrent-option {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate(-25%, 0%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#sclcarousel-wrapper #sclmenu #sclcurrent-option #sclcurrent-option-text1 {
  font-size: 1.6rem;
  line-height: 2.2rem;
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#sclcarousel-wrapper #sclmenu #sclcurrent-option #sclcurrent-option-text1::before {
  content: attr(data-next-text);
  position: absolute;
  transform: translate(0%, 380px);
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#sclcarousel-wrapper #sclmenu #sclcurrent-option #sclcurrent-option-text1::after {
  content: attr(data-previous-text);
  position: absolute;
  transform: translate(0%, -380px);
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#sclcarousel-wrapper #sclmenu #sclcurrent-option #sclcurrent-option-text2 {
  font-size: 0.8rem;
  width: 220px;
  height: 40px;
  display: flex;
  margin-top: -120px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

#sclcarousel-wrapper #sclmenu #sclcurrent-option #sclcurrent-option-text2::before {
  content: attr(data-next-text);
  position: absolute;
  transform: translate(0%, 380px);
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

#sclcarousel-wrapper #sclmenu #sclcurrent-option #sclcurrent-option-text2::after {
  content: attr(data-previous-text);
  position: absolute;
  transform: translate(0%, -380px);
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

#sclcarousel-wrapper #sclmenu #sclprevious-option {
  width: 1.5rem;
  height: 2.5rem;
  border: none;
  display: block;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23333'%3E%3C/polygon%3E%3C/svg%3E");
  background-size: cover;
  position: absolute;
  transform: translate(310px, 50px);
}

#sclcarousel-wrapper #sclmenu #sclnext-option {
  width: 1.5rem;
  height: 2.5rem;
  border: none;
  display: block;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23333'%3E%3C/polygon%3E%3C/svg%3E");
  background-size: cover;
  position: absolute;
  transform: translate(310px, -50px) rotate(180deg);
}

#sclcarousel-wrapper #sclimage {
  height: 200px;
  width: 340px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 101;
  margin-right: 50px;
  position: absolute;
  transform: translate(140px, 0);
  border-radius: 50px;
}

#sclcarousel-wrapper.anim-next {
  pointer-events: none;
}

#sclcarousel-wrapper.anim-next #sclcurrent-option-text1 {
  animation: next-text 0.65s 0.085s;
}

#sclcarousel-wrapper.anim-next #sclcurrent-option-text2 {
  animation: next-text 0.65s 0.085s;
}

#sclcarousel-wrapper.anim-next #sclprevious-option {
  animation: next-top-arrow 0.65s 0.085s;
}

#sclcarousel-wrapper.anim-next #sclnext-option {
  animation: next-bottom-arrow 0.65s 0.085s;
}

#sclcarousel-wrapper.anim-next #sclimage {
  animation: next-image 0.65s 0.085s;
}

#sclcarousel-wrapper.anim-previous {
  pointer-events: none;
}

#sclcarousel-wrapper.anim-previous #sclcurrent-option-text1 {
  animation: previous-text 0.65s 0.085s;
}

#sclcarousel-wrapper.anim-previous #sclcurrent-option-text2 {
  animation: previous-text 0.65s 0.085s;
}

#sclcarousel-wrapper.anim-previous #sclprevious-option {
  animation: previous-top-arrow 0.65s 0.085s;
}

#sclcarousel-wrapper.anim-previous #sclnext-option {
  animation: previous-bottom-arrow 0.65s 0.085s;
}

#sclcarousel-wrapper.anim-previous #sclimage {
  animation: previous-image 0.65s 0.085s;
}

@keyframes previous-text {

  50%,
  55% {
    transform: translate(0%, 390px);
  }

  to {
    transform: translate(0%, 380px);
  }
}

@keyframes previous-top-arrow {
  50% {
    transform: translate(310px, 53px);
  }
}

@keyframes previous-bottom-arrow {
  50% {
    transform: translate(310px, -47px) rotate(180deg);
  }
}

@keyframes previous-image {
  0% {
    transform: translate(140px, 0) scale(1);
    opacity: 1;
  }

  70% {
    transform: translate(140px, 0) scale(1.1);
    opacity: 0;
  }

  100% {
    transform: translate(140px, 0) scale(1);
    opacity: 1;
  }
}

@keyframes next-text {

  50%,
  55% {
    transform: translate(0%, -390px);
  }

  to {
    transform: translate(0%, -380px);
  }
}

@keyframes next-top-arrow {
  50% {
    transform: translate(310px, 47px);
  }
}

@keyframes next-bottom-arrow {
  50% {
    transform: translate(310px, -53px) rotate(180deg);
  }
}

@keyframes next-image {
  0% {
    transform: translate(140px, 0) scale(1);
    opacity: 1;
  }

  70% {
    transform: translate(140px, 0) scale(1.1);
    opacity: 0;
  }

  100% {
    transform: translate(140px, 0) scale(1);
    opacity: 1;
  }
}

/* -------------------------------------------Media Queries ---------------------------------- */

@media screen and (min-width:425px) {}

@media screen and (max-width: 900px) {

  /* /* .scl-card {
    display: flex !important;
    flex-direction: column !important;
    width: 50% !important;
  } */
  #scl-card-img1 {

    margin-left: -180px !important;
  }

  .scl-card-img {

    width: 90% !important;
    margin-left: 40px !important;
  }

  #sclcurrent-option {
    margin-left: -10px !important;
  }

  /* .sclbanner-container {
      width: 50% !important;
      padding: 0 !important;
    }
  .sclbanner-container img{
    width: 50% !important;
  }
  .sclbanner{
    width: 100% !important;
    padding:0 !important;
  }
  .scl-card-img{
    width: 70%;
  }


  #sclimage {
      width: 100%;
      height: 200px;
  }
  #sclmenu {
    height: 380px;
    width: 180px !important;
    overflow: hidden;
    font-weight: 700;
    line-height: 1;
    display: flex;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: all 0.6s ease-in-out;
    z-index: 100 !important;
}
   */
}

@media screen and (max-width: 600px) {
  #sclcarousel-wrapper {
    height: 150vh !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100% !important;
  }

  #sclmenu {
    width: 100% !important;
    flex: 1 1 100% !important;
    order: 1;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;

  }

  #sclimage {
    margin-top: -100px !important;
    flex: 1 1 100%;
    order: 2;
    width: 50%;
    height: 200px;
    margin-bottom: 20px;
    margin-left: -55% !important;
  }

  #sclcurrent-option {
    padding-bottom: 30px !important;
    width: 700% !important;
    margin-top: 500px !important;
    margin-left: 130px !important;
    display: flex !important;
    /* flex-direction: row !important; */
  }

  #sclprevious-option,
  #sclnext-option {
    position: absolute;
    left: 70px;
    margin-top: -100px !important;
    /* margin-left: -70px !important; */
    /* margin: 5px 0;
    padding: 8px 16px; */
    font-size: 14px;
  }

  #sclcurrent-option-text1,
  #sclcurrent-option-text2 {
    height: 100vh !important;
    /* margin-left: 100px !important; */
    width: 100% !important;
    font-size: 14px;
  }
}