/* Define the zoom animation */
@keyframes zoomOut {
  0% {
    transform: scale(1.1); /* Start scale */
  }
  100% {
    transform: scale(1); /* End scale - zoom in */
  }
}
/* Keyframes for fade-in and slide-in from bottom */
@keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframes for slide-out down animation */
@keyframes slideOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Slide-in animation */
.animate-slide {
  animation: fadeInSlideUp 0.8s ease-out;
}

/* Slide-out animation */
.animate-slide-out {
  animation: slideOutDown 0.8s ease-out;
}
.hr-hero-banner {
/*	height: 560px*/
}

.hr-hero-banner .swiper-container {
	height: 820px
}

.hr-hero-banner .swiper-container .swiper-slide {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}
.hr-hero-banner .swiper-container .swiper-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,rgb(22,22,22),rgba(15,49,58,.2) 99.99%,rgba(15,49,58,0));
    z-index: -1;
}
.hr-hero-banner .swiper-container .swiper-slide .slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  transform: scale(1.1);
  transition: transform 7000ms ease;/* Smooth zoom effect */
  z-index: -2; /* Behind the text content */
}
.hr-hero-banner .swiper-container .swiper-slide-active .slide-bg {
  animation: zoomOut 8s ease forwards; /* Adjust duration and timing */
}
.hr-hero-banner .swiper-container .swiper-slide-active .slide-bg {
	transform: scale(1);
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-sub-titel {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 23px;
	text-transform: uppercase;
	color: var(--white);
    line-height: 25px;
    position: relative;
    font-family: var(--font-02);
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-sub-titel::before{
	content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 12px;
    transform: translateY(1px);
    background-color: var(--color-3);
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content {
	z-index: 11;
    margin-top: 50px;
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-titel {
	font-size: 70px;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--white);
    line-height: 1.14;
    /* letter-spacing: -.5px; */
    margin-top: 0px;
    margin-bottom: 16px;
    line-height: 70px;
    font-family: var(--font-01);
    /*-webkit-transform: translateY(-120px);
  	transform: translateY(-120px);
  	-webkit-transition-delay: 1000ms;
  	transition-delay: 1000ms;
  	-webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  	transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  	transition: transform 2000ms ease, opacity 2000ms ease;
  	transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease;*/
}
.hr-hero-banner .swiper-container .swiper-slide-active .hr-content .hr-titel, .hr-hero-banner .swiper-container .swiper-slide-active .hr-content .hr-btns-wrap {
    /*visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    text-transform: uppercase;*/
}
.hr-hero-banner .swiper-container .swiper-slide-active .hr-content .hr-sub-titel {
	visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
  text-transform: unset;
}
.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: 45px;
    font-size: 17px;
    color: var(--white);
    font-weight: 600;
    font-family: var(--font-01);
    line-height: 1.76;
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-text b{
    color: var(--color-3);
}
.hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-btns-wrap {
	margin-top: 1.5rem
}

.hr-hero-banner .swiper-button-prev {
	left: 20px
}

.hr-hero-banner .swiper-button-next {
	right: 20px
}

.hr-hero-banner .swiper-button-next,
.hr-hero-banner .swiper-button-prev {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--white);
	color: var(--color-3)
}

.hr-hero-banner .swiper-button-next:hover,
.hr-hero-banner .swiper-button-prev:hover {
	background: var(--color-3);
	color: var(--white)
}
.hr-hero-banner .swiper-button-next:hover span,
.hr-hero-banner .swiper-button-prev:hover span {
    color: var(--white)
}
.hr-desktop-slider {
	display: block
}

.hr-tablet-slider {
	display: none
}

.hr-mobile-slider {
	display: none
}
.hr-btns-wrap .hr-experience-text a{
	font-size: 21px;
    color: #222222;
    text-decoration: underline;
    font-weight: 600;
    font-family: var(--font-02);
}
.hr-hero-banner .swiper-container .swiper-slide .shape-01 {
    position: absolute;
    bottom: 0;
    right: calc(8% - 45px);
    width: 685px;
}
.hr-hero-banner .swiper-container .swiper-slide .shape-01 img {
	width: 510px;
}
.hr-hero-banner .swiper-pagination {
    display: flex;
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%);
    bottom: -30px;
    justify-content: center;
    z-index: 11;
}
.hr-hero-banner .swiper-pagination-bullets .swiper-pagination-bullet {
    font-size: 0px;
    background: #fff;
    border: 2px solid var(--color-3);
    border-radius: 50%;
    margin: 0 5px;
    transition: all 0.3s ease;
    width: 25px;
    height: 8px;
    border-radius: 30px;
}
.swiper-pagination-bullet-active {
    background: var(--color-4)!important;
    border: 2px solid var(--color-4)!important;
    width: 40px!important;
}
.hr-slider-nav-btn{
    position: absolute;
    top: 50%;
    right: 15%;
    z-index: 1;
    transform: translateY(-50%);
}
/* Base styles for both buttons */
.custom-swiper-btn {
  width: 48px;
  height: 48px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 20px;
  z-index: 10;
  cursor: pointer;
}

/* Positioning the previous button slightly above the next */
.swiper-button-prev.custom-swiper-btn {
    top: 40%;
    left: -90px;
}

.swiper-button-next.custom-swiper-btn {
    top: 85px;
    right: -20px;
}

/* Red arrows inside */
.custom-swiper-btn span {
  color: #F44336; /* Red shade close to the one in your image */
  font-size: 20px;
  font-weight: bold;
}

@media (max-width: 1700px) {
    .hr-hero-banner .swiper-container .swiper-slide .shape-01 {
        width: 630px;
    }
}
@media (max-width: 1585px) {
    .hr-hero-banner .swiper-container .swiper-slide .shape-01 {
        width: 600px;
        right: calc(6% - 45px);
    }
}
@media (max-width: 1400px) {
    .hr-hero-banner .swiper-container .swiper-slide .shape-01 {
        width: 500px;
        right: calc(14% - 45px);
    }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .hr-hero-banner .swiper-container .swiper-slide .hr-content {
        margin-top: 35px;
    }
    .hr-hero-banner .swiper-container {
        height: 718px
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hr-hero-banner .swiper-container .swiper-slide .hr-content {
        margin-top: 42px;
    }
    .hr-hero-banner .swiper-container .swiper-slide .hr-content .hr-titel{
        font-size: 60px;
    }
    .hr-hero-banner .swiper-container {
        height: 655px
    }
    .hr-slider-nav-btn{
        right: 10%;
    }
}
@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-container .swiper-slide .hr-content .hr-titel {
		font-size: calc(1.425rem + 2.1vw)
	}

	.hr-hero-banner .swiper-button-prev {
		left: 15px
	}

	.hr-hero-banner .swiper-button-next {
		right: 15px
	}
	.hr-hero-banner .swiper-container .swiper-slide .shape-01 {
        width: 420px;
    }
	.hr-hero-banner .swiper-container .swiper-slide .shape-01 img {
	    width: 450px;
	}
}
@media screen and (max-width:991px) {
	/*.hr-hero-banner .swiper-container .swiper-slide .shape-01 {
		display: none;
	}*/
    .hr-hero-banner .swiper-container .swiper-slide .shape-01 {
        width: 350px;
    }
    .hr-hero-banner .swiper-container .swiper-slide .shape-01 img {
        width: 345px;
    }
}
@media (max-width:767.98px){
	.hr-btns-wrap{
		display: block;
	}
	.hr-btns-wrap .hr-experience-text {
		margin-top: 20px!important;
	}
    .hr-hero-banner .swiper-container .swiper-slide .shape-01 {
        width: 185px;
        right: calc(10% - 45px);
    }
    .hr-hero-banner .swiper-container .swiper-slide .shape-01 img {
        width: 190px;
    }
    .hr-hero-banner .swiper-container{
        height: 560px;
    }
}
@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: calc(1.425rem + 2.1vw)
	}
}