.hr-hero-banner {
  height:800px;
  position:relative;
  background:#000;
  overflow:hidden
}
.home-slider-right img {
  border-radius:10px;
  border:5px solid #fff;
  width:100%;
  border-radius:25px;
  max-width:440px;
  border:5px solid #fff
}
.hr-hero-banner .swiper-container .swiper-slide::after {
  z-index:999;
  background-color:rgb(0 0 0 / .5);
  top:0;
  left:0;
  width:100%;
  height:100%;
  position:absolute;
  content:""
}
.hr-hero-banner .swiper-container {
  height:100%
}
.hr-hero-banner .swiper-container .swiper-slide {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform:translateY(-100px);
  background-size:100% 100%!important;
  transition:opacity 0.8s ease-in-out,transform 0.8s ease-in-out
}
.hr-hero-banner .hr-content {
  padding-top:100px;
  padding-left:0
}
.home-slider-right {
  text-align:right
}
.hr-hero-banner .swiper-container .swiper-slide-active {
  opacity:1!important;
  transform:translateY(0);
  animation:zoomInSlow 5s ease-out forwards
}
.hr-desktop-slider .hr-btn.btn-main {
  width:max-content;
  position:relative;
  color:var(--white)
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-sub-titel {
  font-size:1rem;
  font-weight:600;
  margin-bottom:1rem;
  text-transform:uppercase;
  color:var(--white);
  letter-spacing:.5px;
  position:relative;
  width:max-content;
  padding-right:70px
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-sub-titel::after {
  content:"";
  position:absolute;
  right:0;
  top:12px;
  width:50px;
  height:2px;
  background:var(--color-2)
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-titel {
  font-size:60px;
  font-weight:700;
  line-height:1.2;
  color:var(--white)
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-titel span {
  color:var(--color-6)
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-text {
  margin-bottom:1rem;
  font-size:18px;
  color:var(--white)
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-btns-wrap {
  margin-top:1.5rem;
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.8s ease-in-out,transform 0.8s ease-in-out
}
.hr-hero-banner .swiper-container .swiper-slide-active .hr-content .hr-btns-wrap {
  opacity:1;
  transform:translateY(0)
}
.animate-content {
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.8s ease-in-out,transform 0.8s ease-in-out
}
.hr-hero-banner .swiper-button-prev {
  left:50px
}
.hr-hero-banner .swiper-button-next {
  right:50px
}
.hr-desktop-slider .hr-btn.btn-main {
  width:max-content;
  position:relative;
  color:var(--white)
}
.hr-desktop-slider .hr-btn.btn-main:hover::after {
  left:-11px;
  top:-11px;
  transition:.3s ease-in-out
}
.hr-hero-banner .swiper-button-next,
.hr-hero-banner .swiper-button-prev {
  display:flex;
  align-items:center;
  justify-content:center;
  width:45px;
  height:45px;
  background:var(--white);
  color:var(--color-2);
  border-radius:50%
}
.hr-hero-banner .swiper-button-next:hover,
.hr-hero-banner .swiper-button-prev:hover {
  background:var(--color-2);
  color:var(--white)
}
.hr-desktop-slider {
  display:block
}
.hr-tablet-slider {
  display:none
}
.hr-mobile-slider {
  display:none
}
.banner-lawer-img img {
  width:100%;
  max-width:400px;
  margin:0
}
.home-banner-content {
  position:relative;
  height:100%;
  display:flex;
  align-items:center
}
.banner-lawer-img {
  position:absolute;
  bottom:0;
  right:70px;
  margin:0
}
.hr-desktop-slider .swiper-slide .container {
  height:100%
}
@keyframes zoomInSlow {
  from {
    background-size:100%
  }
  to {
    background-size:110%
  }
}
.slider5 .carousel {
  height:100%;
  width:100%;
  overflow:hidden;
  position:relative
}
.slider5 .carousel .list .item {
  width:100%;
  height:100%;
  position:absolute;
  inset:0 0 0 0
}
.slider5 .carousel .list .item img {
  width:100%;
  height:100%;
  object-fit:cover
}
.slider5 .carousel .list .item .content {
  position:absolute;
  top:55%;
  width:1070px;
  max-width:80%;
  left:45%;
  transform:translate(-50%,-50%);
  padding-right:30%;
  box-sizing:border-box;
  color:#fff;
  text-shadow:0 5px 10px #0004;
  z-index:9999
}
.slider5 .slider5 .carousel .list .item .title,
.slider5 .carousel .list .item .topic {
  font-size:5em;
  font-weight:700;
  line-height:1.3em
}
.slider5 .carousel .list .item .topic {
  color:#f1683a
}
.slider5 .carousel .list .item .buttons {
  display:grid;
  grid-template-columns:repeat(2,130px);
  grid-template-rows:40px;
  gap:5px;
  margin-top:20px
}
.slider5 .carousel .list .item .buttons button {
  border:none;
  background-color:#eee;
  letter-spacing:3px;
  font-family:Poppins;
  font-weight:500
}
.slider5 .carousel .list .item .buttons button:nth-child(2) {
  background-color:#fff0;
  border:1px solid #fff;
  color:#eee
}
.slider5 .thumbnail {
  position:absolute;
  bottom:50px;
  left:50%;
  width:max-content;
  z-index:100;
  display:flex;
  gap:20px
}
.slider5 .thumbnail .item {
  width:150px;
  height:170px;
  flex-shrink:0;
  position:relative
}
.slider5 .thumbnail .item img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:20px
}
.slider5 .thumbnail .item .content {
  color:#fff;
  position:absolute;
  bottom:10px;
  left:10px;
  right:10px
}
.slider5 .thumbnail .item .content .title {
  font-weight:500
}
.slider5 .thumbnail .item .content .description {
  font-weight:600;
  font-size:16px
}
.slider5 .arrows {
  position:absolute;
  bottom:5%;
  left:9%;
  z-index:100;
  width:300px;
  max-width:30%;
  display:flex;
  gap:10px;
  align-items:center
}
.slider5 .arrows button {
  width:40px;
  height:40px;
  border-radius:50%;
  background-color:var(--color-2);
  border:none;
  color:#fff;
  font-family:monospace;
  font-weight:700;
  transition:.5s
}
.slider5 .arrows button:hover {
  background-color:#fff;
  color:#000
}
.hr-hero-banner .container-fluid {
  padding:0;
  height:100%
}
@keyframes showContent {
  to {
    transform:translateY(0);
    filter:blur(0);
    opacity:1
  }
}
.slider5 .carousel .list .item .content .title {
  color:#fff;
  font-size:58px;
  font-weight:500;
  line-height:1.2051;
  margin-bottom:20px;
  font-family:var(--font-01);
  text-transform:capitalize
}
.slider5 .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
  }
}
.slider5 .carousel.next .thumbnail .item:nth-last-child(1) {
  overflow:hidden;
  animation:showThumbnail .5s linear 1 forwards
}
.slider5 .carousel.prev .list .item img {
  z-index:100
}
@keyframes showThumbnail {
  from {
    width:0;
    opacity:0
  }
}
.slider5 .carousel.next .thumbnail {
  animation:effectNext .5s linear 1 forwards
}
@keyframes effectNext {
  from {
    transform:translateX(150px)
  }
}
.slider5 .carousel.next .time,
.slider5 .carousel.prev .time {
  animation:runningTime 3s linear 1 forwards
}
@keyframes runningTime {
  from {
    width:100%
  }
  to {
    width:0
  }
}
.carousel .list {
  position:relative;
  width:100%;
  height:100%
}
.carousel .list .item {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 0.5s ease
}
.carousel .list .item.active {
  opacity:1;
  pointer-events:auto;
  position:absolute;
  inset:0
}
.slider5 .carousel .list {
  position:relative;
  overflow:hidden
}
.slider5 .carousel .list .item {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease,transform .6s ease
}
.slider5 .carousel .list .item:first-child {
  opacity:1;
  position:absolute
}
.home-banner-content::after {
  position:absolute;
  content:"";
  left:0;
  top:0;
  background:#000;
  width:100%;
  height:100%;
  z-index:9;
  opacity:.5
}
.slider5 .carousel.prev .list .item:nth-child(2) {
  z-index:2
}
.slider5 .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
  }
}
.slider5 .carousel.prev .thumbnail .item:nth-child(1) {
  overflow:hidden;
  opacity:0;
  animation:showThumbnail .5s linear 1 forwards
}
.slider5 .carousel.next .arrows button,
.slider5 .carousel.prev .arrows button {
  pointer-events:none
}
.slider5 .carousel.prev .list .item:nth-child(2) .content .author,
.slider5 .carousel.prev .list .item:nth-child(2) .content .title,
.slider5 .carousel.prev .list .item:nth-child(2) .content .topic,
.slider5 .carousel.prev .list .item:nth-child(2) .content .des,
.slider5 .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 screen and (max-width:678px) {
  .slider5 .carousel .list .item .content {
    padding-right:0
  }
  .slider5 .carousel .list .item .content .title {
    margin-bottom:10px
  }
}
@media(max-width:1200px) {
  .hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-titel {
    font-size:50px
  }
  .hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-titel {
    font-size:40px
  }
  .slider5 .thumbnail .item {
    width:105px!important;
    height:120px!important;
    flex-shrink:0;
    position:relative
  }
}
@media screen and (max-width:1024px) {
  .hr-desktop-slider {
    display:none
  }
  .hr-tablet-slider {
    display:block
  }
  .hr-mobile-slider {
    display:none
  }
  .hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-sub-titel {
    font-size:.9rem
  }
  .hr-hero-banner .swiper-button-prev {
    left:15px
  }
  .hr-hero-banner .swiper-button-next {
    right:15px
  }
  .hr-hero-banner .swiper-container .swiper-slide::after {
    z-index:-1
  }
  .hr-hero-banner {
    height:640px
  }
  .banner-lawer-img img {
    max-width:240px
  }
  .slider5 .thumbnail .item .content .description {
    font-weight:600;
    font-size:13px
  }
}
@media(max-width:991.98px) {
  .banner-lawer-img img {
    max-width:180px
  }
  .slider5 .carousel .list .item .content {
    left:55%
  }
  .slider5 .carousel .list .item .content .title {
    font-size:45px
  }
  .slider5 .thumbnail {
    bottom:20px;
    left:40%;
    gap:10px
  }
  .slider5 .thumbnail .item {
    width:90px!important;
    height:100px!important;
    flex-shrink:0;
    position:relative
  }
}
@media(max-width:767.98px) {
  .slider5 .carousel .list .item .content .title {
    font-size:40px
  }
  .slider5 .thumbnail .item {
    width:85px!important;
    height:90px!important;
    flex-shrink:0;
    position:relative
  }
  .slider5 .thumbnail .item img {
    border-radius:5px
  }
  .slider5 .thumbnail .item .content .description {
    font-weight:600;
    font-size:11px
  }
  .slider5 .thumbnail {
    bottom:20px;
    left:33%;
    gap:10px
  }
}
@media(max-width:640px) {
  .slider5 .carousel .list .item .content {
    left:50%
  }
}
@media(max-width:576px) {
  .slider5 .carousel .list .item .content {
    left:0;
    transform:translateX(0);
    padding-left:20px
  }
  .slider5 .carousel .list .item .content .title {
    font-size:30px
  }
  .slider5 .carousel .list .item .content {
    top:40%
  }
  .hr-hero-banner {
    height:580px
  }
  .slider5 .carousel .list .item .content .title {
    font-size:28px
  }
  .slider5 .carousel .list .item .content .des {
    font-size:14px
  }
  .slider5 .carousel .list .item .content {
    top:34%
  }
  .slider5 .arrows button {
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px
  }
  .slider5 .arrows {
    bottom:5%;
    left:3%;
    gap:5px
  }
  .slider5 .thumbnail .item {
    width:60px!important;
    height:70px!important;
    flex-shrink:0;
    position:relative
  }
  .slider5 .thumbnail .item .content {
    display:none
  }
  .slider5 .thumbnail {
    bottom:20px;
    left:18%;
    gap:5px
  }
}
@media screen and (max-width:480px) {
  .hr-desktop-slider {
    display:none
  }
  .hr-tablet-slider {
    display:none
  }
  .hr-mobile-slider {
    display:block
  }
  .hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-sub-titel {
    font-size:.8rem
  }
  .hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-titel {
    font-size:28px
  }
  .hr-hero-banner .swiper-container .swiper-slide::after {
    z-index:-1
  }
  .hr-hero-banner {
    height:520px
  }
  .hr-hero-banner .swiper-button-next,
  .hr-hero-banner .swiper-button-prev {
    width:35px;
    height:35px;
    display:none
  }
  .hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-text {
    font-size:16px
  }
  .hr-hero-banner .hr-content {
    padding-top:100px;
    padding-left:0
  }
  .hr-hero-banner .swiper-button-prev {
    left:2px
  }
  .hr-hero-banner .swiper-button-next {
    right:2px
  }
}