.slider3d-sec {
   padding: 100px 0 0 0;
}

.slider3d-tab {
   justify-content: center;
   margin-bottom: 30px;
}

.slider3d-tab li {
   width: fit-content;
   margin-right: 24px;
}

.nav-pills .nav-link {
   line-height: 30px;
   background-color: #000000;
   color: #ffffff;
   padding: 18px 18px 14px 18px;
   text-decoration: none;
   font-size: 15px;
   text-align: center;
   font-family: josefin Sans;
   border: 2px solid #FFFFFF;
   border-radius: 100px;
   letter-spacing: 0.12em;
   font-weight: 700;
}

.nav-pills .nav-link.active {
   background-color: #ffffff !important;
   color: #000000 !important;
   border: 2px solid #000000;
   font-weight: 500;
}

.swiper3d {
   margin-left: auto;
   margin-right: auto;
   position: relative;
   overflow: hidden;
   list-style: none;
   padding: 0;
   z-index: 1;
   display: block;
   perspective: 1200px;
}

.swiper-vertical>.swiper-wrapper {
   flex-direction: column
}

.swiper-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
   z-index: 1;
   display: flex;
   transition-property: transform;
   transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
   box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
   transform: translate(0)
}

.swiper-horizontal {
   touch-action: pan-y
}

.swiper-vertical {
   touch-action: pan-x
}

.swiper-slide {
   flex-shrink: 0;
   width: 100%;
   height: 100%;
   position: relative;
   transition-property: transform;
   display: block
}

.swiper-slide-invisible-blank {
   visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
   height: auto
}

.swiper-autoheight .swiper-wrapper {
   align-items: flex-start;
   transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
   backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
   perspective: 1200px
}

.swiper-3d .swiper-wrapper {
   transform-style: preserve-3d
}

.swiper-3d {
   perspective: 1200px
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
   transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
   overflow: auto;
   scrollbar-width: none;
   -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
   display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
   scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
   scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
   scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
   scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
   scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
   content: "";
   flex-shrink: 0;
   order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
   scroll-snap-align: center center;
   scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
   margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
   height: 100%;
   min-height: 1px;
   width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
   margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
   width: 100%;
   min-width: 1px;
   height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 10
}

.swiper-3d .swiper-slide-shadow {
   background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
   background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
   background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
   background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}


.swiper-carousel {
   position: relative;
   margin: 0 auto;
   max-width: 100%;
   overflow: hidden
}

.swiper-carousel .swiper-slide,
.swiper-carousel swiper-slide {
   position: relative
}

.swiper-carousel {
   width: 100%;
}

.swiper-carousel .swiper-slide {
   width: 580px;
   height: 600px;
   border-radius: 8px;
   max-width: calc(100% - 48px)
}

.swiper-carousel .swiper-carousel-animate-opacity {
   height: 100%
}


.swiper-carousel img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   border-radius: 8px
}

@media (max-width: 1024px) {

   .swiper-carousel .swiper-button-next,
   .swiper-carousel .swiper-button-prev {
      display: none !important
   }
}

/* Hide default arrow icons */
.swiper-button-prev:after,
.swiper-button-next:after {
   display: none !important;
}

/* Common button styles */
.swiper-button-prev,
.swiper-button-next {
   width: 48px;
   height: 48px;
   background-image: url('../img/arrows-48-48-1.png');
   background-repeat: no-repeat;
   background-size: 96px 96px;
   opacity: 0;
   pointer-events: none;
   transition: opacity 1s ease, transform 1s ease;
   position: absolute;
   top: 50%;
   margin-top: -24px;
   z-index: 10;
}

/* Positioning */
.swiper-button-prev {
   left: 0;
   margin-left: -24px;
   background-position: left top;
   transform: translateX(-50px);
}

.swiper-button-next {
   right: 0;
   margin-right: -24px;
   background-position: right top;
   transform: translateX(50px);
}

/* Hover state from sprite sheet */
.swiper-button-prev:hover {
   background-position: left bottom;
}

.swiper-button-next:hover {
   background-position: right bottom;
}

/* On section hover, fade in and slide buttons */
.slider3d-sec:hover .swiper-button-prev {
   opacity: 1;
   transform: translateX(50px);
   pointer-events: auto;
}

.slider3d-sec:hover .swiper-button-next {
   opacity: 1;
   transform: translateX(-50px);
   pointer-events: auto;
}



.slick-prev,
.slick-next {
   top: 20px !important;
   height: fit-content;
   width: fit-content;
}

.ens_brands_div {
   width: 90%;
   margin: auto;
}

.ens_brands_div .slick-track {
   padding: 20px 0 100px 0;
}

.main_brand_div {
   padding: 0 10px;
   position: relative;
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
   align-items: center !important;
   transition: transform 0.3s, margin-top 0.3s;
   border-top: 2px dashed black;
}

.dot-point {
   width: 20px;
   height: 20px;
   background: blue;
   position: absolute;
   border-radius: 50%;
   top: -10px;
   z-index: 2;
   transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, top 0.3s ease, left 0.3s ease;
   transform: scale(1.1);
}
.dot-point.active {
   width: 30px;
   height: 30px;
   background: #F99205;
   position: absolute;
   border-radius: 50%;
   top: -15px;
   z-index: 2;
   transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, top 0.3s ease, left 0.3s ease;
   transform: scale(1.1);
}

.dot-line {
   border-left: 2px dashed black;
   transition: height 0.3s ease-in-out;
}

.dot-line.active {
   border-left: 0px dashed #F99205;
   background: linear-gradient(90deg, #f99205 0%, transparent 0%), linear-gradient(0deg, #f99205 0%, transparent 0%), linear-gradient(0deg, #f99205 50%, transparent 50%), linear-gradient(0deg, #f99205 0%, transparent 0%);
   background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
   background-size: 16px 2px, 16px 2px, 2px 16px, 2px 16px;
   background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px;
   border-radius: 5px;
   padding: 1px;
   animation: dash 5s linear infinite;
}

@keyframes dash {
   to {
      background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%;
   }
}

.brand-img img {
   max-width: 100%;
   height: auto;
   transition: transform 0.3s;
}

/* Hanging effect */
.slick-center .main_brand_div {
   transform: translateY(20px) scale(1.1);
}

.slick-slide .main_brand_div {
   transform: translateY(0px) scale(0.9);
}

/* Remove outline on focus */
.slick-slide:focus {
   outline: none;
}

/* Arrow button custom style (optional) */
.slick-prev:before,
.slick-next:before {
   color: black;
   font-size: 30px;
}

.slider-drop-thred {
   margin: 100px 0;
}

.ens_brand_box {
   border: 2px dashed #8A8A8A;
   border-radius: 50%;
   padding: 10px;
   width: 125px;
   height: 125px;
}

.brand-img {
   background: white;
   padding: 10px;
   border-radius: 50%;
   width: 100px;
   height: 100px;
   display: grid;
   place-items: center;
}

.slick-center .rotate_brand:before {
   position: absolute;
   content: '';
   height: calc(100% + 36px);
   width: calc(100% + 36px);
   border: 3px dotted #000;
   top: -18px;
   left: -18px;
   border-radius: inherit;
   animation: dotspin 10s linear infinite;
   padding: 6px;
}

@keyframes dotspin {
   100% {
      transform: rotateZ(360deg);
   }
}

.slick-center .rotate_brand {
   position: absolute;
   top: 160px;
   border: 10px solid #F99205;
   width: 140px;
   height: 140px;
   transition: all 1s linear;
   transform: scale(1.1);
   animation: circle 1s linear;
}

@keyframes circle {
   0% {
      border: 1px dotted #F99205;
   }

   50% {
      border: 5px dotted #F99205;
   }

   100% {
      border: 10px solid #F99205;
   }
}


@media(max-width: 600px) {
   .ens_brand_box {
      width: 100px;
      height: 100px;
      padding: 7px;
   }

   .brand-img {
      width: 80px;
      height: 80px;
   }

   .slick-center .rotate_brand {
      width: 110px;
      height: 110px;
      transform: scale(1.1);
   }

   .slick-center .dot-line {
      left: 50px;
   }

   .slick-center .rotate_brand {
      top: 140px;
   }

   .slick-center .dot-line {
      height: 140px;
   }

}