/**
 * -------------------------------------------------------
 * Vir Framework Slider v2.0
 * -------------------------------------------------------
 */

:root{

    --vir-slider-height:650px;

}

/* -------------------------------------------------------
   Slider
------------------------------------------------------- */

.vir-slider{

    position:relative;

    width:100%;

    height:var(--vir-slider-height);

    overflow:hidden;

    background:#000;

}

.vir-slider-wrapper{

    position:relative;

    width:100%;

    height:100%;

}

/* -------------------------------------------------------
   Slide
------------------------------------------------------- */

.vir-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:opacity .8s ease;

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}

.vir-slide.active{

    opacity:1;

    visibility:visible;

}

/* -------------------------------------------------------
   Overlay
------------------------------------------------------- */

.vir-slide-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.28);

    z-index:1;

}

/* -------------------------------------------------------
   Content
------------------------------------------------------- */

.vir-slide-content{

    position:absolute;

    left:8%;

    top:68%;

    width:min(650px,42vw);

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    z-index:5;

}

.vir-slide-title{

    margin:0 0 24px;

    color:#fff;

    font-size:var(--vir-slider-title-size);

    font-family:var(--vir-font-slider);

    font-weight:700;

    line-height:1.08;

}

.vir-slide-text{

    margin:0 0 34px;

    color:#fff;

    font-size:var(--vir-slider-text-size);

    font-family:var(--vir-font-body);

    line-height:1.8;

}

.vir-slide-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border-radius:40px;

    background:#8d6b3d;

    color:#fff;

    text-decoration:none;

    transition:.30s;

    font-size:var(--vir-slider-button-size);

    font-family:var(--vir-font-body);

}

.vir-slide-button:hover{

    background:#6e512d;

}

/* -------------------------------------------------------
   Arrows
------------------------------------------------------- */

.vir-slider-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:54px;

    height:54px;

    border:0;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(6px);

    color:#fff;

    font-size:22px;

    cursor:pointer;

    transition:.30s;

    z-index:20;

}

.vir-slider-arrow:hover{

    background:rgba(255,255,255,.30);

}

.vir-slider-prev{

    left:25px;

}

.vir-slider-next{

    right:25px;

}

/* -------------------------------------------------------
   Dots
------------------------------------------------------- */

.vir-slider-dots{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:25;

}

.vir-slider-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    transition:.30s;

    cursor:pointer;

}

.vir-slider-dot.active{

    background:#fff;

    transform:scale(1.2);

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

@media (max-width:1200px){

    .vir-slider{

        height:580px;

    }

    .vir-slide-content{

        width:min(560px,48vw);

        top:16%;

    }

}


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

@media (max-width:991px){

    .vir-slider{

        height:100vh;

        min-height:720px;

    }

    .vir-slide{

        background-size:cover;

        background-position:center center;

    }

    .vir-slide-overlay{

        display:none;

    }

    .vir-slider::before{

        content:"";

        position:absolute;

        inset:0;

        background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.10),
            rgba(0,0,0,.35),
            rgba(0,0,0,.80)
        );

        z-index:2;

    }

    .vir-slide-content{

        position:absolute;

        left:28px;

        right:28px;

        width:auto;

        top:auto;

        bottom:170px;

        z-index:5;

    }

    .vir-slide-title{

        font-size:48px;

        line-height:1.02;

        margin-bottom:18px;

    }

    .vir-slide-text{

        display:block;

        max-width:320px;

        font-size:18px;

        line-height:1.7;

        margin-bottom:28px;

    }

    .vir-slide-button{

        padding:15px 36px;

        border-radius:50px;

    }

    .vir-slider-arrow{

        width:46px;

        height:46px;

        font-size:18px;

        background:rgba(255,255,255,.18);

        backdrop-filter:blur(8px);

    }

    .vir-slider-prev{

        left:15px;

    }

    .vir-slider-next{

        right:15px;

    }

    .vir-slider-dots{

        bottom:82px;

        gap:14px;

    }

    .vir-slider-dot{

        width:13px;

        height:13px;

    }

}


/* ======================================================
   PHONE
====================================================== */

@media (max-width:576px){

    .vir-slider{

        min-height:680px;

    }

    .vir-slide-content{

        left:24px;

        right:24px;

        bottom:150px;

    }

    .vir-slide-title{

        font-size:38px;

        line-height:1.05;

    }

    .vir-slide-text{

        font-size:16px;

        max-width:280px;

        margin-bottom:24px;

    }

    .vir-slide-button{

        padding:14px 28px;

    }

    .vir-slider-arrow{

        width:42px;

        height:42px;

        font-size:16px;

    }

    .vir-slider-dots{

        bottom:70px;

    }

}