/* Ocean Theme CSS */
:root {
  --ocean-dark: #0a1628;
  --ocean-deep: #1a3a5c;
  --ocean-blue: #2d6a9f;
  --ocean-light: #4a90c2;
  --ocean-cyan: #00bcd4;
  --ocean-teal: #008080;
  --ocean-foam: #e0f7fa;
  --ocean-sand: #f5f5dc;
  --ocean-coral: #ff7f50;
  --ocean-white: #ffffff;
  --ocean-gray: #b0bec5;
}
/* polution-info, slides-container, slide -> classes*/
.polution-info {
  display: flex;
  flex-direction: column;
  /* width: 100vw;  */
  position: relative;  
}
.slides-container {
  position: relative;
  /* width: 100vw; */
  /* height: 90vh; */
  /* padding: 20px; */
  display: flex;
  gap: 4vw;
  /* overflow-x: scroll;
  scroll-snap-type: x mandatory; */
  overflow: hidden;
  /* scrollbar-color: var(--ocean-cyan) var(--ocean-deep); */  
}

/* .slides-container::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: black;
  opacity: 0.7;
  cursor: pointer;
}

.slides-container::scroll-button(*):hover,
.slides-container::scroll-button(*):focus {
  opacity: 1;
}

.slides-container::scroll-button(*):active {
  translate: 1px 1px;
}

.slides-container::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}
.slides-container::scroll-button(left) {
  content: "◄" / "Previous";
  color: var(--ocean-sand);
}

.slides-container::scroll-button(right) {
  content: "►" / "Next";
  color: var(--ocean-sand);
}
.slides-container {
  anchor-name: --my-carousel;
}

.slides-container::scroll-button(*) {
  position: absolute;
  position-anchor: --my-carousel;
}
.slides-container::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(bottom) + 50vh);
}
.slides-container::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(bottom) + 50vh);
}
@media screen and (max-width: 850px) {
  .slides-container::scroll-button(left) {
    right: calc(anchor(left) - 15vw);
    bottom: calc(anchor(bottom) + 50vh);
  }
  .slides-container::scroll-button(right) {
    left: calc(anchor(right) - 15vw);
    bottom: calc(anchor(bottom) + 50vh);
  }
} */

.slide {
  transition: 0.7s ease-in-out all;
  list-style-type: none;
  background-color: #eeeeee;  
  padding: 20px;
  flex: 0 0 100%;
  scroll-snap-align: center;  
  background-color: var(--ocean-deep);
  text-align: center  ;
  /* Fade in/out effects */
  opacity: 0.3;
  transform: scale(0.95);
  ul {
    list-style-position: inside;
    list-style-type: square;
  }  
  h2 {
    background-color: red;
  }
}

.slide.active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 10px 40px rgba(0, 188, 212, 0.4);
  padding-bottom: 20px;
  margin-bottom: 150px;
  height: 100%;
  /* border: 2px solid var(--ocean-cyan); */
}

.slide.fade-in {
  animation: fadeIn 0.7s ease-in-out forwards;
}

.slide.fade-out {
  animation: fadeOut 0.7s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0.3;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.3;
    transform: scale(0.95);
  }
}

.arrow-wrapper {
  width: 100%;
  position: absolute;  
  z-index: 999;
  height: 50px;
  top: 25%;
}
.left, .right {  
  position: absolute;
  border: 0;  
  font-size: 2.5rem;
  background: none;  
  opacity: 0.7;
  cursor: pointer;
  color: var(--ocean-white);    
  transition: .5s ease-in-out all;
  padding: 10px;
  &:hover {
    color: var(--ocean-cyan);
    box-shadow: 0 0 20px var(--ocean-cyan);
    background-color: transparent;
    border-radius: 100%;
    padding: 15px;
    opacity: 1;
  }
}
.left {left: 5%;} .right {right: 5%;}

@media screen and (max-width: 850px) {
  .slide.active{ margin-bottom: 0px ; }
  .arrow-wrapper {
    top: 15%;
  }
  .left, .right {font-size: 1.5rem; background-color: var(--ocean-white); color: var(--ocean-cyan); 
    padding: 5px  ; padding-right: 0;}
  .left {left: -1%;} .right {right: -1%;}
}


/* common slide content styles */
.slide5-content, .slide6-content, .slide7-content, .slide8-content, .slide9-content, .slide1-content {
  width: 80%; margin: 2% auto;  
}

/* each slide styles */
/* slide 1*/
.slide1-content {margin-top: 5%;}
.slide1-ul {margin-bottom: 50px;}

/* slide 2 */
.img-slide2-wrapper {
  display: flex;
  justify-content: center;   
  width: 80%;
  margin: 0 auto;
}
.slide2-img1 {  width: 80%;}
.slide2-img2 { width: 50%;}  
@media screen and (max-width: 850px) {
  .img-slide2-wrapper {
    flex-direction: column;
    align-items: center;    
    .slide2-img2 { width: 70%;}
  }
}

/* slide 3 */
.slide3-ul {
  padding: 10px;
  li {margin-bottom: 10px;}
}
li div {
  display: flex;
  justify-content: center;
  height: 150px;
}
@media screen and (max-width:850px) {
  .slide3-wrapper {
    width: 60%;
    margin: 0 auto;
  }
  li div {
    scale: .5;
  }
}

/* slide 4 */
.slide4img-wrapper {  
  width: 40%; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  gap: 0px;
  img {width: 100%; height: 100%;}
}
/* slide 5 */

.slide5-img-wrapper { display: flex;  justify-content: center;}
.first-arrow, .second-arrow {color: red; align-self: center;}

@media screen and (max-width: 850px) {
  .slide5-content {
    img {
      width: 75%;
    }    
  }
  .slide5-img-wrapper { flex-direction: column; align-items: center;}
  .first-arrow, .second-arrow {rotate: 90deg; scale: .9;}
}

/* slide 6 */
.slide6-img-wrapper {height: 250px; display: flex; justify-content: center; margin-top: 5%;}
.map-image { width: 40%; margin-top: 5%; }
@media screen and (max-width: 850px) {
  .slide6-img-wrapper {
    height: auto; flex-direction: column; 
    img { width: 70%; margin: 0 auto;}
  }
  .map-image {
    width: 80%;
  }
}

/* slide 9 */
.slide9-img-wrapper {  
  margin-top: 2%;  
}
@media screen and (max-width: 850px) {
  .slide9-img-wrapper  {
    display: flex;flex-direction: column;  gap: 10px;
  }
}