/* =========================================================
   BISSkET SIMPLE RESPONSIVE HOME SLIDER
========================================================= */

:root {
    --phs-slider-desktop-height: 650px;
    --phs-slider-large-height: 580px;
    --phs-slider-tablet-height: 390px;
    --phs-slider-mobile-height: 230px;
    --phs-slider-small-height: 190px;

    --phs-slider-white: #ffffff;
    --phs-slider-dark: #181818;
    --phs-slider-orange: #f37021;

    --phs-slider-control-bg: rgba(24, 24, 24, 0.45);

    --phs-slider-control-hover: rgba(243, 112, 33, 0.95);

    --phs-slider-transition: 0.25s ease;
}

/* Reset */

.phs-slider-section,
.phs-slider-section *,
.phs-slider-section *::before,
.phs-slider-section *::after {
    box-sizing: border-box;
}

/* Main section */

.phs-slider-section {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--phs-slider-dark);
}

/* Remove Bootstrap container restriction if present */

.phs-slider-section > .container,
.phs-slider-section .container {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}

/* Slider shell */

.phs-slider-shell {
    position: relative;

    width: 100%;
    height: var(--phs-slider-desktop-height);

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--phs-slider-dark);
}

/* Owl carousel structure */

.phs-main-slider {
    position: relative;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

.phs-main-slider .owl-stage-outer {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

.phs-main-slider .owl-stage {
    display: flex;

    height: 100%;

    margin: 0;
    padding: 0;
}

.phs-main-slider .owl-item {
    height: 100%;

    margin: 0;
    padding: 0;
}

/* Individual slide */

.phs-slide {
    position: relative;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--phs-slider-dark);
}

.phs-slide-link {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    text-decoration: none;
}

/* Picture and image */

.phs-slide-picture {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

.phs-slide-image {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    object-fit: cover;
    object-position: center center;

    transform: none;
    transition: none;
}

/* Prevent theme image rules from changing slider */

.phs-main-slider img.phs-slide-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;
}

/* Navigation arrows */

.phs-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;

    width: 44px;
    height: 44px;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    background: var(--phs-slider-control-bg);

    color: var(--phs-slider-white);

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    font-size: 14px;

    cursor: pointer;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    transition:
        background var(--phs-slider-transition),
        border-color var(--phs-slider-transition),
        transform var(--phs-slider-transition);
}

.phs-slider-arrow:hover {
    border-color: var(--phs-slider-orange);

    background: var(--phs-slider-control-hover);

    color: var(--phs-slider-white);
}

.phs-slider-arrow:active {
    transform: translateY(-50%) scale(0.94);
}

.phs-slider-prev {
    left: 20px;
}

.phs-slider-next {
    right: 20px;
}

/* Owl dots */

.phs-main-slider .owl-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin: 0;

    transform: translateX(-50%);
}

.phs-main-slider .owl-dot {
    width: 8px;
    height: 8px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50px;

    background: rgba(255, 255, 255, 0.65) !important;

    box-shadow: none;

    transition:
        width var(--phs-slider-transition),
        background var(--phs-slider-transition);
}

.phs-main-slider .owl-dot.active {
    width: 24px;

    background: var(--phs-slider-orange) !important;
}

/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (min-width: 1200px) and (max-width: 1599px) {
    .phs-slider-shell {
        height: var(--phs-slider-large-height);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
    .phs-slider-shell {
        height: var(--phs-slider-tablet-height);
    }

    .phs-slider-arrow {
        width: 40px;
        height: 40px;

        font-size: 13px;
    }

    .phs-slider-prev {
        left: 14px;
    }

    .phs-slider-next {
        right: 14px;
    }

    .phs-main-slider .owl-dots {
        bottom: 14px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .phs-slider-section {
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;
    }

    .phs-slider-shell {
        width: 100%;
        height: var(--phs-slider-mobile-height);

        min-height: 0;

        margin: 0;
        padding: 0;
    }

    .phs-main-slider,
    .phs-main-slider .owl-stage-outer,
    .phs-main-slider .owl-stage,
    .phs-main-slider .owl-item,
    .phs-slide,
    .phs-slide-link,
    .phs-slide-picture {
        height: 100% !important;
        min-height: 0 !important;
    }

    .phs-slide-image,
    .phs-main-slider img.phs-slide-image {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }

    /*
     * Mobile-এ swipe থাকবে।
     * Screen clean রাখার জন্য arrow hidden।
     */
    .phs-slider-arrow {
        display: none;
    }

    .phs-main-slider .owl-dots {
        bottom: 9px;

        gap: 5px;
    }

    .phs-main-slider .owl-dot {
        width: 6px;
        height: 6px;
    }

    .phs-main-slider .owl-dot.active {
        width: 19px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .phs-slider-shell {
        height: var(--phs-slider-small-height);
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .phs-slider-arrow,
    .phs-main-slider .owl-dot {
        transition: none;
    }
}