/* ============================================================
   BANNER SLIDER — assets/css/banner-slider.css
   ============================================================ */

html, body { margin: 0; padding: 0; }

/* --- WRAPPER --- */
.ss_banner_section {
   position:    relative;
   margin:      0;
   padding:     0;
   display:     block;
   overflow:    hidden;
   background:  #e15c22;
   line-height: 0;
   font-size:   0;
}

/* --- SLICK RESETS --- */
.ss_banner_section .slick-slider,
.ss_banner_section .slick-list,
.ss_banner_section .slick-track,
.ss_banner_section .slick-slide,
.ss_banner_section .slick-slide > div {
   margin:      0 !important;
   padding:     0 !important;
   line-height: 0 !important;
   font-size:   0 !important;
}

/* Kill slick's own arrows and dots completely */
.ss_banner_section .slick-prev,
.ss_banner_section .slick-next,
.ss_banner_section .slick-dots,
.ss_slider .slick-prev,
.ss_slider .slick-next,
.ss_slider .slick-dots,
.center_ss .slick-prev,
.center_ss .slick-next,
.center_ss .slick-dots { display: none !important; }

/* --- SLIDE --- */
.ss_banner_slide {
   display:     block;
   line-height: 0;
   font-size:   0;
}

/* IMAGE — width:100%, height:auto = always shows full image, never crops */
.ss_banner_slide img {
   display:    block;
   width:      100%;
   height:     auto;
   /* Aspect ratio placeholder — prevents height collapse before load */
   min-height: 200px;
}

/* --- OUR DOTS --- */
.ss_banner_dots {
   position:   absolute;
   bottom:     18px;
   left:       0;
   right:      0;
   z-index:    30;
   text-align: center;
   line-height: 1;
}

.ss_banner_dots button {
   display:        inline-block;
   vertical-align: middle;
   width:          10px;
   height:         10px;
   border-radius:  999px;
   background:     rgba(255,255,255,0.45);
   border:         none;
   padding:        0;
   margin:         0 4px;
   cursor:         pointer;
   transition:     width .35s ease, background .3s ease;
}

.ss_banner_dots button.active {
   width:      26px;
   background: #ffffff;
}

/* --- ARROWS --- */
.ss_banner_arrow {
   position:        absolute;
   top:             50%;
   transform:       translateY(-50%);
   z-index:         30;
   width:           50px;
   height:          50px;
   border-radius:   50%;
   border:          2px solid rgba(255,255,255,0.55);
   background:      rgba(0,0,0,0.22);
   display:         flex;
   align-items:     center;
   justify-content: center;
   cursor:          pointer;
   visibility:      hidden;
   transition:      background .3s, border-color .3s, box-shadow .3s;
}

.ss_banner_section:hover .ss_banner_arrow { visibility: visible; }

.ss_banner_arrow:hover {
   background:   #e15c22;
   border-color: #e15c22;
   box-shadow:   0 0 22px rgba(225,92,34,0.55);
}

.ss_banner_arrow.prev { left:  22px; }
.ss_banner_arrow.next { right: 22px; }

.ss_banner_arrow svg {
   width:           18px;
   height:          18px;
   stroke:          #fff;
   fill:            none;
   stroke-width:    2.5;
   stroke-linecap:  round;
   stroke-linejoin: round;
   display:         block;
}

/* --- PROGRESS BAR --- */
.ss_banner_progress {
   position:   absolute;
   bottom:     0;
   left:       0;
   height:     4px;
   width:      0%;
   background: rgba(255,255,255,0.85);
   z-index:    25;
   transition: none;
}
.ss_banner_progress.go {
   width:      100%;
   transition: width 5s linear;
}

/* --- MOBILE --- */
@media (max-width: 991px) {
   .ss_banner_dots  { display: none !important; }
   .ss_banner_arrow { display: none !important; }
}