/* ============================================================
   saminSlider - a lightweight jQuery slider (no dependencies
   other than jQuery). Include this file and saminSlider.js,
   then call:  $('#mySlider').saminSlider();
   ============================================================ */

.samin-slider {
    position: relative;
    overflow: hidden;
    background: #0c2233;
    user-select: none;
}

#heroSlider {
    border-top: 5px solid #666;
    border-bottom: 5px solid #666;
}

.samin-slides {
    position: relative;
    width: 100%;
    transition: height .8s ease;
}

.samin-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 1.1s ease;
    pointer-events: none;
}

.samin-slide.active {
    position: relative;
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

.samin-slide img {
    width: 100%;
    height: auto;
    display: block;
}



@keyframes saminDriftRight {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(2.5%, 0) scale(1.09); }
}

@keyframes saminDriftLeft {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-2.5%, 0) scale(1.09); }
}

@keyframes saminDriftUp {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(0, -2.5%) scale(1.09); }
}

@keyframes saminDriftDown {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(0, 2.5%) scale(1.09); }
}

@keyframes saminDriftTR {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(2.5%, -2.5%) scale(1.09); }
}

@keyframes saminDriftTL {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-2.5%, -2.5%) scale(1.09); }
}

@keyframes saminDriftBR {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(2.5%, 2.5%) scale(1.09); }
}

@keyframes saminDriftBL {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-2.5%, 2.5%) scale(1.09); }
}

.samin-caption {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    color: #fff;
    z-index: 3;
    padding: 0 8% 16px;
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .9s ease .35s, transform .9s ease .35s;
}

.samin-slide.active .samin-caption {
    opacity: 1;
    transform: translateY(0);
}

.samin-caption h2 {
    display: inline-block;
    margin: 0;
    font-size: 2.3rem;
    font-weight: 700;
    padding: 10px 24px;
    background: rgba(12, 60, 100, .5);
    border-radius: 10px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}

.samin-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, transform .25s;
    backdrop-filter: blur(3px);
}

.samin-arrow:hover {
    background: rgba(12, 60, 100, .9);
    transform: translateY(-50%) scale(1.08);
}

.samin-prev { right: 22px; }
.samin-next { left: 22px; }

.samin-dots {
    position: absolute;
    bottom: 18px;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 5;
}

.samin-dots .dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background .3s, width .3s, border-radius .3s;
}

.samin-dots .dot.active {
    width: 30px;
    border-radius: 7px;
    background: #fff;
}

.samin-progress {
    position: absolute;
    top: 4px;
    right: 0;
    height: 4px;
    width: 0;
    background: rgba(255, 255, 255, .5);
    z-index: 6;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

/* ===== transition effects ===== */
.fx-fade .samin-slide,
.fx-fade .samin-slide.active {
    transition: opacity 1.1s ease;
}

.fx-slide-left .samin-slide {
    opacity: 0;
    transform: translateX(100%);
    transition: transform 1.1s ease, opacity 1.1s ease;
}

.fx-slide-left .samin-slide.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}

.fx-slide-right .samin-slide {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 1.1s ease, opacity 1.1s ease;
}

.fx-slide-right .samin-slide.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}

.fx-scale .samin-slide {
    opacity: 0;
    transform: scale(.85);
    transition: opacity 1.1s ease, transform 1.1s ease;
}

.fx-scale .samin-slide.active {
    opacity: 1;
    transform: scale(1);
}

.fx-zoom .samin-slide {
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.1s ease, transform 1.1s ease;
}

.fx-zoom .samin-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* ===== more effects ===== */
.fx-blur .samin-slide {
    opacity: 0;
    filter: blur(22px);
    transition: opacity 1.1s ease, filter 1.1s ease;
}

.fx-blur .samin-slide.active {
    opacity: 1;
    filter: blur(0);
}

.fx-flip .samin-slides {
    perspective: 1400px;
}

.fx-flip .samin-slide {
    opacity: 0;
    transform: rotateY(85deg);
    transform-origin: center center;
    backface-visibility: hidden;
    transition: transform 1.1s ease, opacity 1.1s ease;
}

.fx-flip .samin-slide.active {
    opacity: 1;
    transform: rotateY(0deg);
}

.fx-cube .samin-slides {
    perspective: 1400px;
}

.fx-cube .samin-slide {
    opacity: 0;
    transform: rotateY(-90deg);
    transform-origin: left center;
    backface-visibility: hidden;
    transition: transform 1.1s ease, opacity 1.1s ease;
}

.fx-cube .samin-slide.active {
    opacity: 1;
    transform: rotateY(0deg);
    transform-origin: left center;
}

@media (max-width: 767px) {
    .samin-caption h2 { font-size: 1.3rem; padding: 7px 14px; }
    .samin-arrow { width: 40px; height: 40px; font-size: 20px; }
    .samin-prev { right: 10px; }
    .samin-next { left: 10px; }
}