.viewbox {
    width: 24px;
    height: 24px;
    z-index: 99;
    position: absolute;
    transform: translateX(-50%);
    right: 48.8%;
    bottom: 23px;
  }
  
  #progress {
    stroke-dasharray: 296 296;
    stroke-dashoffset: 296;
    animation: grow 5s ease-out infinite;
  }
  
  @keyframes grow {
    100% { stroke-dashoffset: 0; }
  }


.titr-content {
    font-size: 36px;
    line-height: 51px;
    margin-bottom: 19px;
    color: var(--color2);
}
.content-txt p {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 40px;
    opacity: 80%;
    color: var(--color2);
}


.section-content-slider{
    margin-top: 48px !important;
}

.slider-pic-div:before{
    content: "";
    background: linear-gradient(0deg, rgba(33, 33, 33, 0.8) 0%, rgb(33 33 33 / 44%) 40.5%, rgb(33 33 33 / 0%) 100%);    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    border-radius: 24px;
}
.slider-pic-div img{
    border-radius: 24px;
    object-fit: cover;
    display: block;
    width: 100%;
    margin: auto;
}


.hero-pg .swiper-pagination-bullet {
    transition: all 0.4s;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #ffffff80;
}
.hero-pg .swiper-pagination-bullet-active {
position: relative;
  background-color: var(--color1);
}


.hero-pg .swiper-pagination-bullet:not(:last-of-type){
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .hero-pg .swiper-pagination-bullet-active:before{
    content: "";
    z-index: 9;
	display: inline-block !important;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash linear 120s;
  animation-iteration-count: unset;
  background-color: transparent !important;
  height: 19px;
  width: 19px;
  border-radius: 50%;
  position: absolute;
  border: 1px solid #FCB534;
  top: -5px;
  right: -5px;
} */

.hero-pg {
    display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row-reverse;
        position: absolute;
        z-index: 9;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
        line-height: 1;
        gap: 19px;
}







@media (min-width: 1024px){
    .text-div-slider{
        padding-right: 42px !important;
    }
    
    .section-content-slider{
        margin-bottom: 80px !important;
    }
}




@media (min-width: 600px) and (max-width: 991.98px){
    .viewbox{
        right: 48.9%;
        bottom: 13px;
    }
}
@media (max-width: 599.98px){
    .viewbox{
        right: 47.5%;
        bottom: 13px;
    }
}


@media (max-width: 991.98px) {

    .slider-pic-div:before , .slider-pic-div img{
      border-radius: 12px;
    }

    .section-content-slider{
        margin-top: 32px !important;
    }
    
    .content-txt p {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 30px;
    }

    .titr-content {
        font-size: 28px;
        line-height: 39px;
        text-align: center;
    }

    .section-content-slider .row{
        flex-direction: column-reverse;
        gap: 16px;
    }

    .text-div-slider{
        display: flex;
            flex-direction: column;
            align-items: center;
    }

    .hero-pg{
        bottom: 20px;
    }
}