/*--------------------------------------------------------------
  14. Hero Style
----------------------------------------------------------------*/
.cs-hero-wrap {
  position: relative;
  .hero-slider-item {
    height: calc((100vh - 100px) / 1);
    display: flex;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    .slider-item-content {
      padding-left: 100px;
      max-width: 1200px;
      .cs-hero-title {
        text-transform: uppercase;
        margin-bottom: 0px;
        position: relative;
        .cs-hero-title-in{
          z-index: 2;
          position: relative;
        }
        .hero-backdrop-text{
          top: 0;
          left: 0;
          z-index: 1; 
          position: absolute;
        }
        .hero-strong-title {
          font-size: 130px;
          font-weight: 900;
          line-height: 100%;
        }
        .cs-hero-title-normal{
          font-size: 80px;
          font-weight: 700;
          line-height: 110%;
        }
      }
      p {
        margin-bottom: 30px;
        max-width: 600px;
      }
    }
  }
  .cs-hero-social {
    position: absolute;
    right: 0px;
    top: 10%;
    bottom: 10%;
    display: flex;
    align-items: center;
    z-index: 5;
    background: var(--theme_white);
    clip-path: polygon(100% 0, 100% 100%, 0 90%, 0 10%);
    padding: 30px;
    ul {
      margin: 0px;
      padding: 0px;
      display: flex;
      flex-direction: column;
      height: 50vh;
      justify-content: space-around;
      
      li {
        list-style: none;
        writing-mode: vertical-rl;
        transform: rotate(-180deg);
        overflow: hidden;
        display: inline-block;
        cursor: pointer;
        transition: var(--theme-transition);
        a{
          display: inline-block;
        }
        
        &:hover {
          color: var(--themecolor);
          transition: var(--theme-transition);
        }
      }
    }
  }
  .cs-arrow-style-fill{
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
  }
}
@media screen and (max-width: 1559px) {
  .cs-hero-wrap .hero-slider-item .slider-item-content{
    padding-left: 10px;
  }

}
@media screen and (max-width: 1440px) {
  .cs-hero-wrap .hero-slider-item .slider-item-content {
    max-width: 90vw;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content .cs-hero-title .hero-strong-title{
    font-size: 90px;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content .cs-hero-title .cs-hero-title-normal{
    font-size: 70px;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content .ae-title.hero-backdrop-text.constr-splite{
    font-size: 70px;
  }
}
@media screen and (max-width: 1366px) {
  .cs-hero-wrap .hero-slider-item .slider-item-content {
    max-width: 80vw;
  }
}
@media screen and (max-width: 1199px) {
  .cs-hero-social{
    display: none;
    visibility: hidden;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content {
    max-width: 80vw;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content .cs-hero-title .hero-strong-title{
    font-size: 7vw;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content .cs-hero-title .cs-hero-title-normal{
    font-size: 7vw;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content .ae-title.hero-backdrop-text.constr-splite{
    display: none;
  }
}
@media screen and (max-width: 786px) {
  .cs-hero-wrap .hero-slider-item .slider-item-content {
    max-width: 100vw;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content .cs-hero-title .hero-strong-title{
    font-size: 50px;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content .cs-hero-title .cs-hero-title-normal{
    font-size: 50px;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content p{
    margin-top: 20px;
  }
}
@media screen and (max-width: 400px) {
  .cs-hero-wrap .hero-slider-item .slider-item-content .cs-hero-title .hero-strong-title{
    font-size: 40px !important;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content .cs-hero-title .cs-hero-title-normal{
    font-size: 40px;
  }
  .hero-slider-item{
    .cs-couple-btn{
      .theme-black-bg{
        display: none;
      }
    }
  }
}
@media screen and (max-height: 700px) {
  .cs-hero-wrap .hero-slider-item .slider-item-content .cs-hero-title .split-parent{
    font-size: 50px;
  }
  .cs-hero-wrap .cs-hero-social{
    display: none;
  }
  .cs-hero-wrap .cs-arrow-style-fill{
    display: none !important;
  }
  .cs-hero-wrap .hero-slider-item .slider-item-content .cs-hero-title .hero-backdrop-text{
    display: none;
  }
}

.cs-arrow-style-fill{
  display: flex;
  gap: 10px;
  .cs-left-arrow,
  .cs-right-arrow{
    height: 80px;
    width: 80px;
    background: var(--theme_white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--theme-transition);
    &:hover{
      background-color: var(--theme_black);
      transition: var(--theme-transition);
      i{
        color: var(--theme_white);
        transition: var(--theme-transition);
      }
    }
    i{
      color: var(--theme_black);
      font-size: 26px;
    }
  }
}