.rkit-swiper-hs {

  position: relative;

  overflow: hidden;

}



.rkit-homeslider {

  background-color: transparent;

  overflow: hidden; 

}



.container-image-hsl{

  overflow: hidden;

  background-color: transparent; 

}



.rkit-hs-client {

  width: 100%;

  height: 90vh; 

 overflow: hidden;

}



.rkit-homeslider-slider {

  padding: 0px 0px 0px 0px;

}



.rkit-homeslider-pagination {

  display: flex;

  flex-direction: row;

  gap: 0.5rem;

  padding: 1rem;

  justify-content: center;

  align-items: center;

}



/* Image container (ensure the image is contained properly) */

.image-container-hsl {

  position: relative;

  width: 100%;

  height: 100%;   

  overflow: hidden;

}

.image-cover-hsl{

  height : 100% !important;

}



.image-container-hsl img {

  transform: scale(1.1);

  opacity: 1;

  transition: transform 0.5s, opacity 0.5s;

  width: 100%;

  height: 100%;

  object-fit: cover;  

  overflow: hidden;

}

 

.swiper-slide-active > .image-container-hsl {

  transform: scale(1);

  opacity: 1;

}



.image-container-hsl.animate-zoom-out {

  animation: zoomOut  5s ease-out forwards;

}



@keyframes zoomOut {

  0% { 

    transform: scale(1.1);  

  }

  100% { 

    transform: scale(1);  

  }

}











/* Content overlay */

.hs-content {

  display: flex;  

  text-wrap: wrap;

  flex-direction: column;  

  justify-content: center;

  align-items: center; 

  gap: 20px;   

  width: 100%;  

  height: 100%;   

  max-width: 100%;

  position: absolute;   

  top: 0;

  left: 0;

  padding: 10%;  

  background-color: transparent;

  z-index: 0;  

}

 

.hs-content-background{

  display: flex;  

  flex-direction: column;  

  justify-content: center;

  align-items: center; 

  gap: 20px;   

  width: 100%;  

  height: 100%;   

  max-width: 100%;

  position: absolute;   

  top: 0;

  left: 0;

  padding: 10%; 

  background-color: #000000; 

  z-index: 0;  

}



.icon-subtitle-hs{

  display: flex;

  align-self: center;

  z-index: 3;  

}



.hs-subtitle-section{

  display : inline-flex;

  flex-direction: row; 

  color: #ffffff; 

  gap : 10px;

  width: fit-content;

  z-index: 3;  

}

.hs-sub-title{

  font-size: 18px;

  font-weight: bold;

  color: #ffffff;  

  z-index: 3;  

  /* text-align: center; */

  align-self: center;

  width: 100%;

  display: block; 

  text-wrap: auto; 

  max-width: fit-content;

}



.hs-title {

  font-size: 40px;

  font-weight: bold;

  color: #ffffff;  

  z-index: 3;    

  /* text-align: center; */

  display: block; 

  text-wrap: auto; 

}



.hs-description {

  font-size: 20px;

  color: #ffffff;   

  z-index: 3;  

  display: block;

  text-wrap: auto;  

}



/* .hs-mw{

  max-width: 50%;

} */



/* text animate */

.hs-animation-1-subtitle span {

  display: inline-block;

  opacity: 0;

  transform: translateY(20px);

  animation: fadeInUpSubtitle 0.5s ease forwards;

}

.hs-animation-1-title span {

  display: inline-block;

  opacity: 0;

  transform: translateY(20px);

  animation: fadeInUpTitle 0.5s ease forwards;

}



.hs-animation-1-desc span {

  display: inline-block;

  opacity: 0;

  transform: translateY(20px);

  animation: fadeInUpDesc 0.5s ease forwards;

}



@keyframes fadeInUpSubtitle {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInUpTitle {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInUpDesc {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}





.hs-animation-2-subtitle {

  display: inline-block;

  overflow: hidden;       

  animation: typewritersubtitle 4s steps(30) 1s forwards, blink 0.7s ;

  white-space: nowrap;

}



.hs-animation-2-title {

  display: inline-block;

  overflow: hidden;      

  animation: typewritertitle 4s steps(30) 1s forwards, blinks 0.7s ;

  white-space: wrap;

}



.hs-animation-2-desc {

  display: inline-block; 

  overflow: hidden;      

  animation: typewriterdesc 4s steps(30) 1s forwards, blinkz 0.7s ;

  white-space: wrap;

}

@keyframes typewritersubtitle {

  0% {

    width: 30%;

    opacity: 0;

  }

  50% {

    opacity: 1;

  } 

  100% {

    width: 50%;

    opacity: 1;

  }

}



@keyframes typewritertitle {

  0% {

    width: 30%;

    opacity: 0;

  }

  50% {

    opacity: 1;

  }

  100% {

    width: 50%;

    opacity: 1;

  }

}



@keyframes typewriterdesc {

  0% {

    width: 30%;

    opacity: 0;

  }

  50% {

    opacity: 1;

  }

  100% {

    width: 50%;

    opacity: 1;

  }

}



 

@keyframes blink {

  from {

    border-color: transparent;

  }

  to {

    border-color: #ffffff;

  }

}



@keyframes blinks {

  from {

    border-color: transparent;

  }

  to {

    border-color: #ffffff;

  }

}

@keyframes blinkz {

  from {

    border-color: transparent;

  }

  to {

    border-color: #ffffff;

  }

}



/* Navigation buttons */

.swiper-nav-cont{

  display: flex;

  gap : 15px;

  position: absolute; 

  cursor: pointer;

  padding: 10px;

  top: 2%;

  max-width: 100%;

  width: 100%;

  height: 100%;

}



.swiper-bullet-cont{

  display: flex;

  gap : 15px;

  position: absolute;

  z-index: 5;

  cursor: pointer;

  left: 48%;

  top: 95%;

}





.rkit-swiper-hs-button-next,

.rkit-swiper-hs-button-prev { 

  position : relative;

  z-index: 1;

  width: 45px;

  height: 45px;

  background-color: transparent;

  transform: translateY(-50%);

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: all 0.5s;

  border-radius: 0%;

  border-style : solid;

  border-width : 1px;

  border-color : #fff;

  --swiper-navigation-size: 44px;

  --swiper-navigation-top-offset: 50%;

  --swiper-navigation-sides-offset: 10px;

}



/* 

.rkit-swiper-hs-button-next:hover{  

  width: 75px;

  height: 45px;

  background-color: #ff0000;

  transform: translateY(-50%);

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: all 0.5s;

  border-radius: 0% 50% 50% 0%; 

  }

  

  .rkit-swiper-hs-button-prev:hover{  

  width: 75px;

  height: 45px;

  background-color: #ff0000;

  transform: translateY(-50%);

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: all 0.5s;

  border-radius: 50% 0% 0% 50%; 

  } */



/* Dots and overlay style */

.rkit-homeslider-bullet {

  width: 8px;

  aspect-ratio: 1/1;

  border-radius: 50%;

  background-color: #aaaaaa;

  transition: all 0.5s ease;

}



.rkit-homeslider-bullet-active {

  background-color: #161616;

}



.rkit-homeslider-bullet-clickable .rkit-homeslider-bullet {

  cursor: pointer;

}



.card-body {

  padding: 10px;

  display: flex;

  flex-direction: column;

  position: relative;

  z-index: 1;

}



.card-body::before {

  content: "";

  width: 100%;

  height: 100%;

  display: block;

  z-index: -1;

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  right: 0;

}



.card-title {

  margin: 0;

}



.card-title a {

  text-decoration: none;

  color: #161616;

}



.card-heading {

  margin-bottom: 0.5rem;

  display: flex;

  flex-direction: column;

}



.rkit-swiper-hs-button-prev.swiper-button-disabled,

.rkit-swiper-hs-button-next.swiper-button-disabled {

  opacity: .35;

  cursor: auto;

  pointer-events: none;

}



/* .rkit-homeslider .card-button a {

  background-color: #33e4c0;

  display: flex;

  align-items: center;

  flex-direction: row;

  justify-content: center;

  gap: 0.5rem;

  padding: 1rem;

  color: white;

  transition: all 0.5s;

  border-radius: 0px;

} */



/* .rkit-homeslider .card-button {

  display: flex;

  justify-content: start;

}



.rkit-homeslider .card-button a .button-icon {

  transition: color 0.5s;

}



.rkit-homeslider.overlay {

  position: relative;

}



.rkit-homeslider.overlay .card-body {

  opacity: 0;

  transform: scaleY(0);

  transform-origin: bottom;

  transition: all 0.5s;

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  justify-content: center;

}



.rkit-homeslider.overlay .card-button {

  justify-content: center;

}



.rkit-homeslider.overlay:hover .card-body {

  opacity: 1;

  transform: scaleY(1);

}



.rkit-homeslider-slider .swiper-slide {

  overflow: unset;

}



.card-button.fullwidth a {

  width: 100%;

}

 */







/* button */



.text-button{

  display : flex;

  align-items : center;

}



.icon-list-button-hs{ 

  color : red;

  align-self: center;

}



.icon-subtitle-hs{ 

  color : #ffffff;

  align-self: center;

}



.icon-list-button-hs i:hover{

  color : rgb(255, 255, 255);

}



.rkit-homeslider-item-button .button-element-homeslider {

  display: flex;

  align-self: center;

  margin-top: auto;

  background-color:  #333333;

  color :  #ffffff;

  max-width: none;

  padding : 16px 32px 16px 32px;

  justify-content: center;  

  position: relative;

  

  /* box-shadow: 0px 6px 10px 5px rgba(0, 0, 0, 0.20)  ; */

}



.rkit-homeslider-item-button.button-full-size .button-element-homeslider { 

  display: flex;

  justify-content: center;  

  width :100%

}



.rkit-homeslider-item-button-icon{

  color: #56d4c4;  

}