/* hero-slider.css
   Import Swiper CSS (CDN). If you prefer local copy, remove this import and bundle the file locally.
*/
@import url('https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css');

.aykson_hero_instance {
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: left;
  background: transparent;
}

/* Swiper overrides (small tweaks) */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Slider Style */

.aykson_hero_bg_shape_inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aykson_hero_image_bg_shape {
  position: absolute;
  /* inset: 0; */
  top: -140px;
  left: 44%;
  width: 860px;
  height: 900px;
  pointer-events: none;
  /* <-- replace path */
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;

  /* <-- replace path */
  mask-size: cover;
  mask-position: center;
  mask-repeat: no-repeat;

  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.08));
  transition: transform .9s cubic-bezier(.2, .9, .3, 1);
  z-index: 1;
}


.aykson_hero_container {
  width: 100%;
  height: 100%;
  min-height: 760px;
  display: flex;
  justify-content: center;
  align-items: start;
  z-index: 10;
  padding-top: 200px;
  box-sizing: border-box;
}

.aykson_hero_inner_container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  padding: 20px 10px;
}

.aykson_hero_navigation {
  position: absolute;
  top: 15%;
  left: 97%;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  /* background: #00000090; */
}

.aykson_hero_navigation_inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.aykson_hero_navigation_list {
  position: absolute;
  left: -20px;
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.aykson_hero_navigation_list .aykson_hero_navigation_item {
  width: 66px;
  height: 66px;
  padding: 10px;
  border-radius: 50%;
  background: #ffffff90;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.aykson_hero_navigation_item.active {
  width: 72px;
  height: 72px;
  /* outline: 3px solid #fff; */
  transform: scale(1.1);
}


.aykson_hero_navigation_list .aykson_hero_navigation_item .aykson_hero_image_nav {
  height: 100%;
  width: auto;
}

/* Content Style */
.aykson_hero_content_box {
  width: 45%;
  height: 100%;
  /* border: 1px solid #000; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0px;
}


.aykson_hero_heading {
  width: 100%;
}

.aykson_hero_subheading {
  width: 100%;
}

.aykson_hero_content {
  width: 100%;
}


.aykson_hero_btn_container {
  width: 100%;
}

.aykson_hero_btn_container a {
  display: flex;
  justify-content: start;
  align-items: center;
  color: #ffffff;
}

.aykson_hero_btn_container .aykson_hero_btn {
  padding: 8px 15px;
  width: auto;
  border-radius: 30px;
}

/* Image Style */
.aykson_hero_image_box {
  width: 55%;
  height: 100%;
  /* border: 1px solid #000; */
}

.aykson_hero_image_inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aykson_hero_image_inner img {
  width: auto;
  height: 400px;
}