/* =========================
HOMEPAGE LAYOUT
========================= */

/* =========================
HOMEPAGE LAYOUT
========================= */

.home-page {

    width: 100%;

    height: calc(100vh - var(--header-h) - 77px);

    overflow: hidden;
}

/* =========================
HERO
========================= */

.hero {

    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;
}

/* =========================
SLIDER
========================= */

.slider {

    width: 100%;
    height: 100%;

    position: relative;
    
}

/* =========================
SLIDES
========================= */

.slide {

    position: absolute;
    inset: 0;

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

    opacity: 0;

    pointer-events: none;

    transition: opacity 1s ease;
    
}

.slide.active {

    opacity: 1;

    pointer-events: auto;
    
}

/* =========================
SLIDE IMAGES
========================= */

.slide img {

    width: auto;
    height: auto;

    max-width: 75%;
    max-height: 80%;

    object-fit: contain;

    filter:
        drop-shadow(0 25px 35px rgba(0, 0, 0, 0.35));

    transition:
        transform .6s ease,
        filter .6s ease;

    will-change:
        transform,
        filter;
    
}

.slide.active img {

    transform:
        translateY(-8px) scale(1.02);

    filter:
        drop-shadow(0 40px 60px rgba(0, 0, 0, 0.5));
    
}

/* =========================
SLIDE BACKGROUNDS
========================= */

.slide:nth-child(1) {
    background: #ff790b;
}

.slide:nth-child(2) {
    background: #231b0b;
}

.slide:nth-child(3) {
    background: #015928;
}

.slide:nth-child(4) {
    background: #511e28;
}

.slide:nth-child(5) {
    background: #f3d978;
}

/* =========================
SLIDER BUTTONS
========================= */

.slider-btn {

    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    width: 58px;
    height: 58px;

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

    border-radius: 50%;

    border:
        1px solid rgba(255,
            255,
            255,
            .2);

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

    backdrop-filter: blur(12px);

    color: #fff;

    font-size: 1.2rem;

    cursor: inherit;

    z-index: 20;

    transition: .4s ease;
    
}

.slider-btn:hover {

    background:
        rgba(255,
            255,
            255,
            .16);
    
}

.prev {
    left: 30px;
}

.next {
    right: 30px;
}

/* =========================
SLIDER DOTS
========================= */

.slider-dots {

    position: absolute;

    left: 50%;
    bottom: 40px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 14px;

    z-index: 20;
    
}

.dot {

    width: 6px;
    height: 6px;

    border: none;

    border-radius: 50%;

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

    cursor: inherit;

    transition: .4s ease;
    
}

.dot.active {

    width: 20px;

    border-radius: 999px;

    background: var(--accent);

    transform: scale(1.2);
    
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 768px) {

    .slide img {

        max-width: 85%;
        max-height: 65%;
    }

    .slider-btn {

        width: 44px;
        height: 44px;

        font-size: .95rem;
    }

    .prev {
        left: 12px;
    }

    .next {
        right: 12px;
    }

    .slider-dots {
        bottom: 20px;
    }

    
}