/* === Custom Block Styling === */
.heroBlock {
    padding: var(--CB-padding-top) var(--CB-padding-right) var(--CB-padding-bottom) var(--CB-padding-left);
    margin: var(--CB-margin-top) var(--CB-margin-bottom);
    /* background-color: var(--CB-background-color); */
    background-image: var(--CB-background-image);
    background-position: var(--CB-background-position);
    background-size: cover;
    --CB-path-fill-color: var(--CB-background-color); /* Define the variable for the SVG fill */
    margin-bottom: -250px;
    overflow: hidden;
}

.video-container{
    padding-top: 175px;
}

.heroBlock__curvedOverlay {
  bottom: -175px;
  left:0px;
  width: 140%;
}

.heroBlock__imageCol{
    padding-right: 30px;
}

.heroBlock__image{
  aspect-ratio: 1;
  max-width: 500px;
  width: 100%;
  border-radius: 50% !important;
  object-fit: cover;
  object-position: center;
  position: relative;
  bottom: 125px;
  cursor: none;
}

.heroBlock__copy{
    color: var(--FC-white);
    padding-bottom: 16px;
}


.heroBlock__container{
    position: relative;
    bottom: 275px;
}


@media screen and (max-width: 1399px){
    .heroBlock{
        margin-bottom: -150px;
    }
    .video-container{
        padding-top: 50px;
    }
    .heroBlock__container{
        bottom: 320px;
    }
    .heroBlock__image{
        /* max-width: 350px; */
        bottom: 110px;
    }
}

@media screen and (max-width: 767.98px){
    .heroBlock__container{
        bottom: 450px;
    }
    .heroBlock__contentRow{
        flex-direction: column;
    }
    .heroBlock__imageCol{
        padding-right: 12px;
    }
    .heroBlock__image{
        bottom: 0px;
        max-width: 350px;
        width: 100%;
    }
    .heroBlock__imageWrapper{
        text-align: center;
    }
    .heroBlock__swiperInnerContainer{
        padding-left: 0px !important;
        margin-top: -50px;
    }
}

@media screen and (max-width: 575px){
    .heroBlock__curvedOverlay{
      bottom: -200px;
    }
    .heroBlock__container{
      z-index: 999 !important;
      padding-bottom: 32px;
    }
    .heroBlock__swiperInnerContainer{
        padding-left: 2.7em !important;
        margin-top: -50px;
    }
  }



.home__hiddenVideoContainer video {
    border-radius: 30px !important;
}





/* === This code handles the custom cursor effect === */
.heroBlock__customCursor {
    position: absolute;
    width: 75px;
    height: 75px;
    background: url("data:image/svg+xml,%3Csvg%20height%3D%2275%22%20width%3D%2275%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2075%2075%22%3E%3Ccircle%20cx%3D%2237.5%22%20cy%3D%2237.5%22%20r%3D%2230%22%20fill%3D%22red%22%20stroke%3D%22none%22/%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20font-size%3D%2218%22%20fill%3D%22white%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20font-family%3D%22AvertaStd%2C%20sans-serif%22%3EClick%3C/text%3E%3C/svg%3E") no-repeat center center;
    pointer-events: none;
    transform: translate(-50%, -75%);
    opacity: 0;
    transition: opacity .1s ease-in-out;
  }
  
  .heroBlock__customCursor.active{
    opacity: 1;
    transition: opacity .1s ease-in-out;
  }




/* === Hero Slider === */
.heroBlock__slideText{
    color: var(--FC-primary-color);
    text-transform: uppercase;
}

.heroBlock__swiperTextWrapper{
    position: relative;
    top: -60px;
}

.heroBlock__swiperOuterContainer{
    padding: 0px;
    position: absolute;
    top: 100px;
}



@media screen and (max-width: 575px){
    .heroBlock__sliderImage{
        max-width: 350px;
        width: 100%;
        margin-bottom: -25px;
    }
    .heroBlock__swiperTextWrapper{
        top: 0;
    }
    .heroBlock__customCursor.active{
        display: none;
    }
    .heroBlock__image{
        cursor: pointer;
    }
}

@media screen and (max-width: 390px){
    .heroBlock__slideText{
        font-size: 48px;
    }
}


.legacyImages {
    overflow: visible !important;
}

.legacyImages .swiper-slide {
    opacity: 0;
}
.legacyImages .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
}