/* ------------------------------------------------------------

Template Name: Moo Slider
Description: Moo Slider - A Modern Image Slider with Advanced Effects.
Template URI: https://maindustries.in/mooslider
Version:  1.0
Author:		Alteen

------------------------------------------------------------- */

/* CSS INDEX ------------------------------------------------ 

  1. General CSS
  2. Header
  3. Carousel
  4. Navigation Arrows
  5. Buttons
  6. Next click slider effect
  7. Previous click slider effect
  8. Item detail effect
  9. Media queries

*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --item1-transform: translateX(-100%) translateY(-5%) scale(1.5);
  --item1-zIndex: 11;
  --item1-opacity: 0;

  --item2-transform: translateX(0);
  --item2-zIndex: 10;
  --item2-opacity: 1;

  --item3-transform: translate(50%,10%) scale(0.8);
  --item3-zIndex: 9;
  --item3-opacity: 1;

  --item4-transform: translate(90%,20%) scale(0.5);
  --item4-zIndex: 8;
  --item4-opacity: 1;
  
  --item5-transform: translate(120%,30%) scale(0.3);
  --item5-zIndex: 7;
  --item5-opacity: 0;
}

/* ********************************
1. General CSS
******************************** */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
*:focus {
  outline: none;
}

/* ********************************
2. Header
******************************** */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 114rem;
  height: 9.6rem;
  max-width: 90%;
  margin: auto;
  position: relative;
  z-index: 999;
}


.logo span {
  color:mediumvioletred;
}

/* ********************************
3. Carousel
******************************** */
.carousel {
  margin-top: -9.6rem;
  height: 80rem;
  overflow: hidden;
  position: relative;
}

.carousel .list {
  position: absolute;
  top: 0;
  left: 50%;
  width: 114rem;
  max-width: 90%;
  height: 80%;
  transform: translateX(-50%);
}

.carousel .list .item {
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
  height: 100%;
  font-size: 1.6rem;
}

.carousel .list .item img {
  position: absolute;
  width: 50%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.carousel .list .item .detail {
  opacity: 0;
  pointer-events: none;
}

.carousel .list .item .intro {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40rem;
  opacity: 0;
  pointer-events: none;
}

.carousel .list .item:nth-child(2) .intro {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s;
}

.carousel .list .item:nth-child(n + 6) {
  opacity: 0;
  pointer-events: none;
}

.carousel .list .item:nth-child(2) {
  opacity: var(--item2-opacity);
  filter: var(--item2-filter);
  transform: var(--item2-transform);
  z-index: var(--item2-zIndex);
}

.carousel .list .item:nth-child(1) {
  opacity: var(--item1-opacity);
  filter: var(--item1-filter);
  transform: var(--item1-transform);
  z-index: var(--item1-zIndex);
  pointer-events: none;
}

.carousel .list .item:nth-child(3) {
  opacity: var(--item3-opacity);
  filter: var(--item3-filter);
  transform: var(--item3-transform);
  z-index: var(--item3-zIndex);
}

.carousel .list .item:nth-child(4) {
  opacity: var(--item4-opacity);
  filter: var(--item4-filter);
  transform: var(--item4-transform);
  z-index: var(--item4-zIndex);
}

.carousel .list .item:nth-child(5) {
  opacity: var(--item5-opacity);
  filter: var(--item5-filter);
  transform: var(--item5-transform);
  z-index: var(--item5-zIndex);
  pointer-events: none;
}

/* ********************************
4. Navigation Arrows
******************************** */
.arrows {
  position: absolute;
  width: 20rem;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 0.5rem;
  left: 50%;
  bottom: 25%;
  transform: translateX(-50%);
  
}

.arrows #prev,
.arrows #next,
.arrows #back {
  font-size: 1.3rem;
  font-family: Poppins;
  cursor: pointer;
  border: none;
}

.arrows #prev:hover,
.arrows #next:hover, 
.arrows #back:hover {
  color: #333;
}

.arrows #back {
  pointer-events: none;
  opacity: 0;
}

.arrows #back span {
  display: inline-block;
  animation: move 1s infinite alternate;
}

@keyframes move {
  0% {
    transform: translateX(0rem);
  }
  100% {
    transform: translateX(-1rem);
  }
}

.carousel .list .item .intro .title {
  font-weight: 500;
}

.carousel .list .item .intro .topic {
  font-size: 4rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.carousel .list .item:nth-child(2) .intro .description,
.carousel.showDetail .list .item:nth-child(2) .detail .description {
    margin-bottom: 2.4rem;
}
  
/* ********************************
5. Buttons
******************************** */
.carousel .list .item .intro .seeMore, .detail .buynow {
  position: relative;
  border: none;
  border-radius: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  cursor: pointer;
}

.carousel .list .item:nth-child(2) .intro .title,
.carousel .list .item:nth-child(2) .intro .topic,
.carousel .list .item:nth-child(2) .intro .description,
.carousel .list .item:nth-child(2) .intro .seeMore {
  opacity: 0;
  animation: showContent 0.5s 0.7s ease-in-out 1 forwards;
}

@keyframes showContent{
  from{
      transform: translateY(5rem);
      filter: blur(0rem);
  }to{
      transform: translateY(0);
      opacity: 1;
      filter: blur(0px);
  }
}

.seeMore span {
  font-family: 'Poppins';
}

.carousel .list .item:nth-child(2) .intro .topic {
  animation-delay: 0.9s;
}

.carousel .list .item:nth-child(2) .intro .description {
  animation-delay: 1.1s;
}

.carousel .list .item:nth-child(2) .intro .seeMore {
  animation-delay: 1.3s;
}

/* ********************************
6. Next click slider effect
******************************** */
.carousel.next .list .item:nth-child(1) {
  animation: positionItem2 0.5s ease-in-out 1 forwards;
}

@keyframes positionItem2 {
  from{
      transform: var(--item2-transform);
      filter: var(--item2-filter);
      opacity: var(--item2-opacity);
      z-index: var(--item2-zIndex);
  }
}

.carousel.next .list .item:nth-child(2){
  animation: positionItem3 0.7s ease-in-out 1 forwards;
}

@keyframes positionItem3 {
  from{
      transform: var(--item3-transform);
      filter: var(--item3-filter);
      opacity: var(--item3-opacity);
      z-index: var(--item3-zIndex);
  }
}

.carousel.next .list .item:nth-child(3) {
  animation: positionItem4 0.9s ease-in-out 1 forwards;
}

@keyframes positionItem4 {
  from{
      transform: var(--item4-transform);
      filter: var(--item4-filter);
      opacity: var(--item4-opacity);
      z-index: var(--item4-zIndex);
  }
}

.carousel.next .list .item:nth-child(4) {
  animation: positionItem5 1.1s ease-in-out 1 forwards;
}

@keyframes positionItem5 {
  from{
      transform: var(--item5-transform);
      filter: var(--item5-filter);
      opacity: var(--item5-opacity);
      z-index: var(--item5-zIndex);
  }
}

/* ********************************
7. Previous click slider effect
******************************** */
.carousel.prev .list .item:nth-child(2) {
  animation: positionItem1 0.5s ease-in-out 1 forwards;
}

@keyframes positionItem1 {
  from {
      transform: var(--item1-transform);
      filter: var(--item1-filter);
      opacity: var(--item1-opacity);
      z-index: var(--item1-zIndex);
  }
}

.carousel.prev .list .item:nth-child(3) {
  animation: positionItem2 0.7s ease-in-out 1 forwards;
}

.carousel.prev .list .item:nth-child(4) {
  animation: positionItem3 0.9s ease-in-out 1 forwards;
}

.carousel.prev .list .item:nth-child(5) {
  animation: positionItem4 1.1s ease-in-out 1 forwards;
}

/* ********************************
8. Item detail effect
******************************** */
.carousel .list .item {
  transition: left 0.5s, opacity 0.5s, width 0.5s;
}

.carousel.showDetail .list .item:nth-child(3),
.carousel.showDetail .list .item:nth-child(4) {
  left: 100%;
  opacity: 0;
  pointer-events: none;
}

.carousel.showDetail .list .item:nth-child(2) {
  width: 100%;
}

.carousel.showDetail .list .item:nth-child(2) .intro {
  opacity: 0;
  pointer-events: none;
}

.carousel .list .item:nth-child(2) img {
  transition: right 0.5s;
}

.carousel.showDetail .list .item:nth-child(2) img {
  right: 50%;
}

.carousel.showDetail .list .item:nth-child(2) .detail {
  opacity: 1;
  width: 45%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  font-size: small;
}

.carousel.showDetail .list .item:nth-child(2) .detail .title {
  font-size: 4rem;
  font-weight: 500;
}

.carousel.showDetail .list .item:nth-child(2) .detail .description {
  border-bottom: 1px solid #999;
  padding-bottom: 2rem;
}

.carousel.showDetail .list .item:nth-child(2) .detail .specifications {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 3.2rem;
  margin: 2rem 0 3.2rem;
}

.carousel.showDetail .list .item:nth-child(2) .detail .specifications div p:nth-child(1) {
  font-weight: bold;
}

.carousel.showDetail .list .item:nth-child(2) .detail .title,
.carousel.showDetail .list .item:nth-child(2) .detail .description,
.carousel.showDetail .list .item:nth-child(2) .detail .specifications,
.carousel.showDetail .list .item:nth-child(2) .detail .buynow{
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

.carousel.showDetail .list .item:nth-child(2) .detail .description {
  animation-delay: 1.2s;
}

.carousel.showDetail .list .item:nth-child(2) .detail .specifications{
  animation-delay: 1.4s;
}

.carousel.showDetail .list .item:nth-child(2) .detail .buynow{
  animation-delay: 1.6s;
}

.carousel.showDetail #next,
.carousel.showDetail #prev {
  opacity: 0;
  pointer-events: none;
}

.carousel.showDetail #back {
  opacity: 1;
  pointer-events: auto;
}

.carousel::before{
  content: '';
  width: 50rem;
  height: 30rem;
  background-image: linear-gradient(70deg, #DC422A, #0404ff);
  position: absolute;
  z-index: -1;
  border-radius: 20% 30% 80% 10%;
  filter: blur(15rem);
  top: 50%;
  left: 50%;
  transform: translate(-10%, -50%);
  transition: 1s;
}

.carousel.showDetail::before{
  transform: translate(-100%, -50%) rotate(90deg);
  filter: blur(13rem);
}

/* ********************************
9. Media queries
******************************** */

/* Below 992px (Tablets) */
@media screen and (max-width: 62em){
  .carousel .list .item {
      width: 90%;
  }
}

/* Below 768px (Smaller tablets) */
@media screen and (max-width: 48em) {
  html {
    font-size: 58%;
  }

  .carousel .list .item {
    width: 100%;
  }

  .carousel .list .item:nth-child(2) .intro {
    width: 50%;
  }

  .carousel.showDetail .list .item:nth-child(2) .detail {
    top: 20%;
    transform: none;
  }

  .carousel.showDetail .list .item:nth-child(2) .detail .title {
    font-size: 3.2rem;
  }
}

/* Below 544px (Phones) */
@media screen and (max-width: 34em) {
  html {
    font-size: 55%;
  }

  .carousel {
    height: 90rem;
  }

  .carousel .list {
    top: -12%;
  }

  .carousel .list .item:nth-child(2) .intro, .carousel.showDetail .list .item:nth-child(2) .detail {
    width: 100%;
    top: 75%;
    text-align: center;
    transform: none;
  }

  .carousel .list .item img, .carousel.showDetail .list .item:nth-child(2) img {
    right: 25%;
  }

  .carousel.showDetail .list .item:nth-child(2) .detail .specifications {
    justify-content: space-evenly;
    gap: 1.8rem;
  }

  .arrows {
    position: relative;
    top: 40%;
    width: 48rem;
  }

  .arrows #back {
    position: absolute;
    top: 0%;
  }
  
  .carousel.showDetail::before{
    filter: blur(15rem);
  }
  
   @-moz-document url-prefix() {
    .carousel::before {
      background: linear-gradient(to right, #aa3feca8, #8430ea93);
      filter: blur(20rem);
      transform: translate(-10%, -90%);
    }
  }
  
}

/* Below 384px (Phones) */
@media screen and (max-width: 24em) {
  html {
    font-size: 50%;
  }
}