section.herb {
   height: 100vh;
   min-height: 600px;
   display: flex;
   align-items: flex-end;
   background-image: url('img/DO YOU KNOW HERB/bg-export-do2.webp');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

.con-herb {
   height: 100%;
   padding-top: 10em;
}

#container-herb {
   /* position: relative; */
   position: absolute;
   display: flex;
   align-items: center;
   height: 60vh;
   min-height: 370px;
   /* width: 100%; */
   width: 100vw;
   left:0;
}

#container-herb .slide {
   position: relative;
   flex: 1;
   height: 100%;
   top: -8em;
   overflow: hidden;
   cursor: pointer;
   transition: all 1s;
}

#container-herb .slide.active {
   cursor: default;
}

#container-herb .slide.last-viewed .btn-close:after {
   transition-delay: 0s;
}

#container-herb .slide.last-viewed .btn-close:before {
   transition-delay: 0.1s;
}

#container-herb .slide.last-viewed .content .city-info {
   transition-delay: 0s;
}

#container-herb .slide.last-viewed .content .city-info li:nth-of-type(1) {
   transition-delay: 0.2s;
}

#container-herb .slide.last-viewed .content .city-info li:nth-of-type(2) {
   transition-delay: 0.4s;
}

#container-herb .slide.last-viewed .content .city-info li:nth-of-type(3) {
   transition-delay: 0.6s;
}

/* #container-herb .slide.last-viewed .content .emblem {
   transition: all 0.8s;
   transition-delay: 0s;
   width: 100%;
   height: 70%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(0deg);
} */

#container-herb .slide.last-viewed .image-herb,
#container-herb .slide.active .image-herb{
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   transition: all 0.5s ease-in-out;
   transition-delay: 0.5s;
}
#container-herb .slide.active .image-herb {
   /* ying 09-01-24 */
   /* display: none; */
   transform: rotate(-40deg) scale(1.4);
}
#container-herb .slide.last-viewed .image-herb{
   transition-delay: 0s;
}


#container-herb .slide.active .overlay {
   width: 25%;
   background-size: 100% 100%;
   transition: all 1.25s;
   transition-delay: 1.75s;
}

#container-herb .slide.active .content {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   opacity: 1;
}

/* #container-herb .slide.active {
   cursor: default;
   background-image: url('img/DO YOU KNOW HERB/CLICK/bg export erd doyou.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100% auto;
} */

#container-herb .slide.active .title-herb {
   width: 25%;
   height: 50%;
   left: 8%;
   opacity: 1;
   transform: translateY(30px);
   transition: all 1s;
   transition-delay: 1.25s;
   font-size: 2.5em;
}

/* #container-herb .slide.active .title-herb:after {
   height: 100%;
   overflow: initial;
} */

#container-herb .slide.active .title-herb:before {
   /* transform: scaleX(1); */
   transform: scaleY(1);
   transition-delay: 2s;
}

#container-herb .slide.active .content .city-info {
   opacity: 1;
}

#container-herb .slide.active .content .city-info li {
   opacity: 1;
   transform: translateX(0);
}

/* #container-herb .slide.active .content .emblem {
   opacity: 1;
   width: 20%;
   height: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(-35deg);
} */

#container-herb .slide.active .btn-close {
   cursor: pointer;
   pointer-events: auto;
}

#container-herb .slide.active .btn-close:before,
#container-herb .slide.active .btn-close:after {
   opacity: 1;
}

#container-herb .slide.active .btn-close:after {
   transform: rotate(45deg) translateX(0px);
}

#container-herb .slide.active .btn-close:before {
   transform: rotate(-45deg) translateX(0px);
}

#container-herb .slide.anim-in {
   transition-delay: 0.5s;
}

#container-herb .slide.anim-in .image-herb {
   top: -20%;
   left: -140%;
   height: 140%;
   width: 140%;
   -webkit-animation: img-anim-in 1.2s forwards;
   animation: img-anim-in 1.2s forwards;
}

#container-herb .slide.anim-out {
   flex: 0;
   cursor: default;
   transition-delay: 0.5s;
}

#container-herb .slide.anim-out .image-herb {
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   transform: scale(0.5);
   opacity: 0;
   -webkit-animation: img-anim-out 1.2s forwards;
   animation: img-anim-out 1.2s forwards;
}

#container-herb .slide:nth-of-type(1).anim-in .image-herb {
   -webkit-animation-delay: 0.2s;
   animation-delay: 0.2s;
}

#container-herb .slide:nth-of-type(1).anim-out .image-herb {
   -webkit-animation-delay: 0.2s;
   animation-delay: 0.2s;
}

#container-herb .slide:nth-of-type(2).anim-in .image-herb {
   -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;
}

#container-herb .slide:nth-of-type(2).anim-out .image-herb {
   -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;
}

#container-herb .slide:nth-of-type(3).anim-in .image-herb {
   -webkit-animation-delay: 0.6s;
   animation-delay: 0.6s;
}

#container-herb .slide:nth-of-type(3).anim-out .image-herb {
   -webkit-animation-delay: 0.6s;
   animation-delay: 0.6s;
}

#container-herb .slide:nth-of-type(4).anim-in .image-herb {
   -webkit-animation-delay: 0.8s;
   animation-delay: 0.8s;
}

#container-herb .slide:nth-of-type(4).anim-out .image-herb {
   -webkit-animation-delay: 0.8s;
   animation-delay: 0.8s;
}

#container-herb .slide .image-herb {
   position: absolute;
   /* background-size: cover; */
   background-size: auto 70%;
   background-repeat: no-repeat;
   background-position: center center;
   z-index: +1;
   pointer-events: none;
   transition: all 1s;
}

#container-herb .slide:nth-of-type(1) .image-herb {
   background-image: url('img/DO YOU KNOW HERB/h-1.webp');
}
#container-herb .slide:nth-of-type(1) .image-herb {
   background-image: url('img/DO YOU KNOW HERB/h-1.webp');
}

#container-herb .slide:nth-of-type(2) .image-herb {
   background-image: url('img/DO YOU KNOW HERB/h-2.webp');
}
#container-herb .slide:nth-of-type(2) .image-herb {
   background-image: url('img/DO YOU KNOW HERB/h-2.webp');
}

#container-herb .slide:nth-of-type(3) .image-herb {
   background-image: url('img/DO YOU KNOW HERB/h-3.webp');
}
#container-herb .slide:nth-of-type(3) .image-herb {
   background-image: url('img/DO YOU KNOW HERB/h-3.webp');
}

#container-herb .slide:nth-of-type(4) .image-herb {
   background-image: url('img/DO YOU KNOW HERB/h-4.webp');
}
#container-herb .slide:nth-of-type(4) .image-herb {
   background-image: url('img/DO YOU KNOW HERB/h-4.webp');
}

#container-herb .slide:nth-of-type(5) .image-herb {
   background-image: url('img/DO YOU KNOW HERB/h-5.webp');
}
#container-herb .slide:nth-of-type(5) .image-herb {
   background-image: url('img/DO YOU KNOW HERB/h-5.webp');
}

#container-herb .slide .overlay {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   /* background-image: linear-gradient(rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0)); */
   background-position: 0 0;
   background-size: 100% 200%;
   opacity: 1;
   pointer-events: none;
   transition: all 0.5s;
}

#container-herb .slide .content {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   pointer-events: none;
   /* background-image: url('img/DO YOU KNOW HERB/CLICK/bg+export+erd+doyou.webp'); */
   background-image: url('img/DO YOU KNOW HERB/CLICK/test.png');
   background-repeat: no-repeat;
   background-position: left;
   background-size: 100% auto;
   opacity: 0;
   transition: all 1s ;
   transition-delay: 0.5s;
}

#container-herb .slide .title-herb {
   position: absolute;
   bottom: 0;
   height: 65px;
   width: 100%;
   box-sizing: border-box;
   font-family: "Arnova ITC";
   text-transform: capitalize;
   font-size: 1.5em;
   text-align: center;
   text-shadow: 0 2px 2px #2f2f2f;
   color: #d3b26d;
   opacity: 0;
   pointer-events: none;
   transition: all 0.5s;
}

#container-herb .slide .title-herb:before {
   position: absolute;
   top: 10%;
   left: 15%;
   display: block;
   content: "";
   height: 80%;
   width: 10px;
   /* box-shadow: 0 2px 6px #2f2f2f; */
   transform-origin: left top;
   transform: scaleY(0);
   transition: transform 1.25s;

   background-image: url('img/DO YOU KNOW HERB/CLICK/yellow-line.webp');
   background-position: center;
   background-size: cover;
}

#container-herb .slide .content .city-info {
   position: absolute;
   width: 25%;
   top: 60%;
   left: 14%;
   padding-top: 1rem;
   font-size: 1em;
   color: white;
   opacity: 0;
   transition: all 1s;
   transition-delay: 2s;
   list-style: none;
   font-family: Arial, Helvetica, sans-serif;
}

#container-herb .slide .content .city-info li {
   position: relative;
   margin-bottom: 5px;
   opacity: 0;
   transform: translateX(-30px);
   transition: all 0.75s;
}

#container-herb .slide .content .city-info li:nth-of-type(1) {
   transition-delay: 2.7s;
}

#container-herb .slide .content .city-info li:nth-of-type(2) {
   transition-delay: 2.9s;
}

#container-herb .slide .content .city-info li:nth-of-type(3) {
   transition-delay: 3.1s;
}

#container-herb .slide .btn-close {
   position: absolute;
   z-index: 100;
   top: 20px;
   right: 20px;
   height: 24px;
   width: 24px;
   pointer-events: none;
}

#container-herb .slide .btn-close:before,
#container-herb .slide .btn-close:after {
   position: absolute;
   top: 12px;
   display: block;
   content: "";
   width: 100%;
   height: 4px;
   background-color: white;
   opacity: 0;
   cursor: pointer;
   transition: all 0.5s;
}

#container-herb .slide .btn-close:after {
   transform: rotate(45deg) translateX(-12px);
   transition-delay: 3s;
}

#container-herb .slide .btn-close:before {
   transform: rotate(-45deg) translateX(12px);
   transition-delay: 3.2s;
}

#container-herb .slide:hover:not(.active):not(.anim-out) .image-herb {
   transform: scale(1.1);
}

#container-herb .slide:hover:not(.active):not(.anim-out) .overlay {
   opacity: 0.6;
}

#container-herb .slide:hover:not(.active):not(.anim-out) .title-herb {
   opacity: 1;
   transform: translateY(30px);
}

@-webkit-keyframes img-anim-in {
   to {
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
   }
}

@keyframes img-anim-in {
   to {
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
   }
}

@-webkit-keyframes img-anim-out {
   to {
      left: -100%;
   }
}

@keyframes img-anim-out {
   to {
      left: -100%;
   }
}

@media (max-height: 600px) {
   #container-herb .slide .content .city-info {
      font-size: 0.75rem;
   }
   #container-herb .slide.active .title-herb {
      transform: translateY(0) !important;
   }
}