.carousel{height: 100vh; overflow: hidden; position: relative;}
.carousel .list .item{width: 100%; height: 100%; position: absolute; inset: 0 0 0 0;}
.carousel .list .item img{width: 100%; height: 100%; object-fit: cover;}
.carousel .list .item .content{position: absolute; top: 20%; width: 1140px; max-width: 80%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); padding-left: 30%; box-sizing: border-box; color: #fff; line-height: 1.8rem; text-align: justify; direction: rtl; text-shadow: 0 5px 10px #0004;}
.glass-box {background: rgba(255, 255, 255, 0.18); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3);}
.carousel .list .item .author{font-weight: bold;}
.carousel .list .item .title, .carousel .list .item .topic{font-size: 2rem; font-weight: bold; line-height: 3.2rem;}
.carousel .list .item .topic{color: #f1683a;}
.carousel .list .item .title {color: #eac80d;}
.carousel .list .item .buttons{display: grid; grid-template-columns: repeat(2, 130px); grid-template-rows: 40px; gap: 5px; margin-top: 20px; direction: ltr;}
.carousel .list .item .buttons button{border: none; background-color: #eee; font-weight: 500;}
.carousel .list .item .buttons button:nth-child(2){background-color: transparent; border: 1px solid #fff; color: #eee;}
.thumbnail{position: absolute; bottom: 50px; left: 50%; width: max-content; z-index: 100; display: flex; gap: 20px;}
.thumbnail .item{width: 140px; height: 210px; flex-shrink: 0; position: relative;}
.thumbnail .item img{width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}
.thumbnail .item .content{color: #fff; position: absolute; bottom: 10px; left: 10px; right: 10px;}
.thumbnail .item .content .title{font-weight: 500;}
.thumbnail .item .content .description{font-weight: 300;}
.arrows{position: absolute; top: 80%; right: 48%; z-index: 100; width: 300px; max-width: 30%; display: flex; gap: 10px; align-items: center;}
.arrows button{width: 40px; height: 40px; border-radius: 50%; background-color: #eee4; border: none; color: #fff; font-family: monospace; font-weight: bold; transition: .5s;}
.arrows button:hover{background-color: #fff; color: #000;}
.carousel .list .item:nth-child(1){z-index: 1;}
/* animation text in first item */
.carousel .list .item:nth-child(1) .content .author, .carousel .list .item:nth-child(1) .content .title, .carousel .list .item:nth-child(1) .content .glass-box,
.carousel .list .item:nth-child(1) .content .topic, .carousel .list .item:nth-child(1) .content .des, .carousel .list .item:nth-child(1) .content .buttons {transform: translateY(50px); filter: blur(20px); opacity: 0; animation: showContent .5s 1s linear 1 forwards;}  @keyframes showContent {to {transform: translateY(0px); filter: blur(0px); opacity: 1;}}
.carousel .list .item:nth-child(1) .content .glass-box {animation-delay: 0.9s!important;}
.carousel .list .item:nth-child(1) .content .title {animation-delay: 1.2s!important;}
.carousel .list .item:nth-child(1) .content .topic {animation-delay: 1.4s!important;}
.carousel .list .item:nth-child(1) .content .des {animation-delay: 1.6s!important;}
.carousel .list .item:nth-child(1) .content .buttons {animation-delay: 1.8s!important;}
/* create animation when next click */
.carousel.next .list .item:nth-child(1) img {width: 150px; height: 220px; position: absolute; bottom: 50px; left: 50%; border-radius: 30px; animation: showImage .5s linear 1 forwards;}
@keyframes showImage {to {bottom: 0; left: 0; width: 100%; height: 100%; border-radius: 0;}}
.carousel.next .thumbnail .item:nth-last-child(1) {overflow: hidden; animation: showThumbnail .5s linear 1 forwards;}
.carousel.prev .list .item img {z-index: 100;}
@keyframes showThumbnail {from {width: 0; opacity: 0;}}
.carousel.next .thumbnail {animation: effectNext .5s linear 1 forwards;}
@keyframes effectNext {from {transform: translateX(150px);}}
.carousel.next .time, .carousel.prev .time{animation: runningTime 3s linear 1 forwards;}
@keyframes runningTime{from{width: 100%} to{width: 0}}
.carousel.prev .list .item:nth-child(2){z-index: 2;}
.carousel.prev .list .item:nth-child(2) img{animation: outFrame 0.5s linear 1 forwards; position: absolute; bottom: 0; left: 0;}
@keyframes outFrame{to{width: 150px; height: 220px; bottom: 50px; left: 50%; border-radius: 20px;}}
.carousel.prev .thumbnail .item:nth-child(1){overflow: hidden; opacity: 0; animation: showThumbnail .5s linear 1 forwards;}
.carousel.next .arrows button, .carousel.prev .arrows button{pointer-events: none;}
.carousel.prev .list .item:nth-child(2) .content .author, .carousel.prev .list .item:nth-child(2) .content .title, .carousel.prev .list .item:nth-child(2) .content .topic, .carousel.prev .list .item:nth-child(2) .content .des, .carousel.prev .list .item:nth-child(2) .content .buttons{animation: contentOut 1.5s linear 1 forwards!important;}
@keyframes contentOut{to{transform: translateY(-150px); filter: blur(20px); opacity: 0;}}
@media (max-width: 575.98px){.carousel .list .item .title, .carousel .list .item .topic{font-weight: bold; line-height: 2rem;} .carousel .list .item .content{top: 15%; max-width: 80%; left: 50%; padding-left: 0%; line-height: 1.5rem; font-size: 0.8rem;} .carousel .list .item .content .title{font-size: 19px;} .arrows{right: 58%; gap: 15px;} .thumbnail{bottom: 50px; left: 41%; gap: 100px;} .thumbnail .item{width: 175px; height: 262.5px;}}
@media (min-width: 576px) and (max-width: 767.98px){.carousel .list .item .title, .carousel .list .item .topic{font-weight: bold; line-height: 2rem;} .carousel .list .item .content{top: 15%; max-width: 80%; left: 50%; padding-left: 0%; line-height: 1.5rem; font-size: 0.8rem;} .carousel .list .item .content .title{font-size: 20px;} .arrows{right: 58%; gap: 15px;} .thumbnail{bottom: 50px; left: 41%; gap: 100px;} .thumbnail .item{width: 175px; height: 262.5px;}}
@media (min-width: 768px) and (max-width: 991.98px){}
@media (min-width: 992px) and (max-width: 1199.98px){}
@media (min-width: 1200px){.thumbnail-item-1{display: none;}}