@import url(styles.css);

.envbanner-container img{
    height: 400px;
    width: 100%;
}
.envbanner-container{
    margin-top: -10px;
}

.envcontent-container{
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px; 

/* From https://css.glass */
 background: rgba(var(--color-white-rgb), 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(var(--color-white-rgb), 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(var(--color-white-rgb), 0.3);


    /* background-color: #f3eeee3c ; */
     border-radius: 10px;
    transition: bottom 0.5s ease;
    animation: slideUp 2s ease forwards;
    color: var(--color-white); 
    /* border-top: 4px solid orangered; */
    width: 400px;
    text-align: center;
}

@keyframes slideUp {
    0% {
        bottom: -100%;
    }

    100% {
        bottom: 200px;
    }
} 
.heading-txt-ps{

  color:var(--color-green-rgb);
}
.pccarousel-container {
    width: 50%;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--lx-gap);
  
    .pccarousel {
      aspect-ratio: 16/9;
      width: 100%;
      position: relative;
      overflow: hidden;
  
      .pcitem {
        opacity: 0;
        width: 100%;
        height: 100%;
        display: none;
        transition: opacity 0.5s ease-in-out;
  
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
  
        .caption {
            color: var(--color-white);
          width: 100%;
          height: 50px;
          padding: var(--lx-space-01);
          position: absolute;
          bottom: 0;
          text-transform: uppercase;
          text-align: center;
          font-size: 25px;
          background-color: rgba(var(--color-white-rgb) 0.5);
        }
  
        &.active {
          opacity: 1;
          display: block;
        }
      }
    }
  
    .ptcbtn {
      padding: 1em 2em;
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      outline: none;
      border: none;
      cursor: pointer;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 900;
      color: var(--envprot-button-color);
      background-color: var(--color-white);
      transition: transform 0.2s ease-in-out;
  
      &:active,
      &:focus {
        transform: translateY(-50%) scale(0.9);
      }
  
      &:hover {
        transform: translateY(-50%) scale(0.96);
      }
    }
  
    .prev {
      left: -10%;
    }
  
    .next {
      right: -10%;
    }
  
    .dots {

      display: none;
      align-items: center;
      justify-content: center;
      gap: 10px;
  
      .dot {
        cursor: pointer;
        height: 10px;
        width: 10px;
        background-color:var(--color-white);
        transition: background-color 0.2s ease;
  
        &.active,
        &:hover {
          background-color: var(--envprot-button-activebg);
        }
      }
    }
  }
  .envcontent h2{
    font-weight: 300!important;
    color:var(--color-green-rgb) !important;
  }
 /*-----------------------Media Queries -----------------------  */
 @media screen and (max-width: 600px){
 #envitem p{
      height: 30vh !important;
}
#envcarousel {
  height: 70vh !important;
}
.pccarousel-container{
  margin-top: 0px !important;
  padding-top: 0px !important;
}
/* .envitem{
  margin-top: 30px !important;
} */
.envcontent{
 
  margin-top: 70px !important;
}
 }