/* ===================================================
   Hosty Design V3
   Hero Slider
   Part 1
=================================================== */

/* ==========================================
   Hero Section
========================================== */

.hero{

    padding:0; !important
    position:relative;

    width:100%;

    height:700px;

    overflow:hidden;

    background:transparent;
    margin-top:20px;

}


/* ==========================================
   Hero Slider
========================================== */

.hero-slider{

    position:relative;

    width:100%;

    height:100%;
        border-radius:0px;
    overflow:hidden;

}

/* ==========================================
   Hero Slide
========================================== */

.hero-slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}

.hero-slide.active{

    opacity:1;

    visibility:visible;

    z-index:2;

}

/* ==========================================
   Slide Image
========================================== */

.hero-slide img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

}

/* ==========================================
   Dark Overlay
========================================== */

.slide-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.35)
    );

    z-index:1;

}

/* ==========================================
   Slide Content
========================================== */

.slide-content{

    position:absolute;

right:120px;

    bottom:90px;

    z-index:5;

    max-width:700px;

}

/* ==========================================
   Slide Title
========================================== */

.slide-content h2{

    color:#ffffff;

    font-size:42px;

    font-weight:800;

    line-height:1.3;

    margin-bottom:15px;

    text-shadow:
    0 4px 15px rgba(0,0,0,.35);

}

/* ==========================================
   Slide Description
========================================== */

.slide-content p{

    color:#ffffff;

    font-size:20px;

    font-weight:400;

    line-height:1.8;

    text-shadow:
    0 3px 12px rgba(0,0,0,.30);

}

/* ===================================================
   Hosty Design V3
   Hero Slider
   Part 2
=================================================== */

/* ==========================================
   Slider Navigation
========================================== */

.slider-navigation{

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    transform:translateY(-50%);

    display:flex;

    justify-content:space-between;

    padding:0 40px;

    z-index:20;

    pointer-events:none;

}

.slider-navigation button{

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    font-size:24px;

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

    backdrop-filter:blur(10px);

    transition:.35s;

    pointer-events:auto;

}

.slider-navigation button:hover{

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

    transform:scale(1.08);

}

/* ==========================================
   Pagination
========================================== */

.slider-pagination{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:20;

}

.slider-pagination .dot{

    width:14px;

    height:14px;

    border-radius:50%;

    cursor:pointer;

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

    transition:.35s;

}

.slider-pagination .dot.active{

    width:42px;

    border-radius:30px;

    background:#ffffff;

}

/* ==========================================
   Progress Bar
========================================== */

.hero-progress{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:4px;

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

    z-index:30;

}

.progress-bar{

    display:block;

    width:0;

    height:100%;

    background:#ffffff;

}

/* ==========================================
   Slide Counter
========================================== */

.hero-counter{

    position:absolute;

    top:40px;

    left:40px;

    z-index:25;

    display:flex;

    align-items:center;

    gap:8px;

    color:#ffffff;

    font-weight:700;

}

.hero-counter .current-slide{

    font-size:32px;

}

.hero-counter .separator{

    opacity:.5;

}

.hero-counter .total-slides{

    opacity:.8;

    font-size:18px;

}

/* ==========================================
   Content Animation
========================================== */

.hero-slide.active .slide-content{

    animation:slideContentUp 1s ease forwards;

}

@keyframes slideContentUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===================================================
   Hosty Design V3
   Hero Slider
   Part 3
=================================================== */

/* ==========================================
   Tablet
========================================== */

@media (max-width:992px){

    .slide-content{

        right:50px;

        bottom:80px;

        max-width:600px;

    }

    .slide-content h2{

        font-size:42px;

    }

    .slide-content p{

        font-size:18px;

    }

    .slider-navigation{

        padding:0 20px;

    }

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:768px){

    .hero{

        height:80vh;

    }

    .slide-content{

        right:25px;

        left:25px;

        bottom:80px;

        max-width:100%;

    }

    .slide-content h2{

        font-size:32px;

        line-height:1.5;

    }

    .slide-content p{

        font-size:16px;

        line-height:1.8;

    }

    .slider-navigation button{

        width:45px;

        height:45px;

        font-size:18px;

    }

    .hero-counter{

        top:20px;

        left:20px;

    }

    .hero-counter .current-slide{

        font-size:24px;

    }

}

/* ==========================================
   Small Mobile
========================================== */

@media (max-width:480px){

    .hero{

        height:70vh;

    }

    .slide-content{

        bottom:70px;

    }

    .slide-content h2{

        font-size:26px;

    }

    .slide-content p{

        font-size:14px;

    }

    .slider-pagination{

        bottom:20px;

    }

    .slider-pagination .dot{

        width:10px;

        height:10px;

    }

    .slider-pagination .dot.active{

        width:30px;

    }

}

/* ==========================================
   Performance
========================================== */

.hero-slide,
.hero-slide img,
.slide-content{

    will-change:
    transform,
    opacity;

    backface-visibility:hidden;

}

/* ==========================================
   Smooth Effects
========================================== */

.hero-slide img{

    transition:
    transform 8s ease;

}

.hero-slide.active img{

    transform:scale(1.05);

}

/* ==========================================
   Selection
========================================== */

.hero::selection{

    background:#ffffff;

    color:#000000;

}

/* ==========================================
   Final Layer Fix
========================================== */

.hero-slide img{

    position:relative;

    z-index:0;

}

.slide-overlay{

    z-index:1;

}

.slide-content{

    z-index:10;

}

.slider-navigation{

    z-index:20;

}

.slider-pagination{

    z-index:20;

}

.hero-counter{

    z-index:20;

}

.hero-progress{

    z-index:20;

}