/* =========================================================
   SNOW HILLS - HERO / SLIDER STYLES
========================================================= */


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

.hero {
    position: relative;
    overflow: hidden;
}


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

.hero-slider {
    width: 100%;
    height: 410px;
    position: relative;
}


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

.slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.slide.active {
    display: block;
}


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

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    background: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    z-index: 10;
}

.arrow.left {
    left: 20px;
}

.arrow.right {
    right: 20px;
}


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

.dots {
    position: absolute;
    bottom: 18px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    background: #cfcfcf;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background: #000;
}


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

.slider {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
}

.slides {
    width: 100%;
    height: 100%;
}


/* =========================================================
   GENERAL SLIDER SLIDES
========================================================= */

.slider .slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.slider .slide.active {
    display: block;
}


/* =========================================================
   GENERAL SLIDER ARROWS
========================================================= */

.slider .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 35px;
    color: #999;
    cursor: pointer;
    padding: 10px;
}

.slider .arrow:hover {
    color: #7b3fe4;
}

.slider .left {
    left: 20px;
}

.slider .right {
    right: 20px;
}


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

.slider .dots {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
}

.slider .dot {
    height: 8px;
    width: 8px;
    margin: 0 4px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.slider .dot.active {
    background: #7b3fe4;
}


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

@media (max-width: 1100px) {

    .hero-slider {

        height: 360px;
    }

    .slider {

        height: 380px;
    }

    .arrow {

        font-size: 35px;
    }

    .arrow.left {

        left: 15px;
    }

    .arrow.right {

        right: 15px;
    }
}


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

@media (max-width: 768px) {

    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {

        width: 100%;

        overflow: hidden;
    }


    /* -----------------------------------------
       HERO SLIDER
    ----------------------------------------- */

    .hero-slider {

        width: 100%;

        height: auto;

        min-height: 0;

        aspect-ratio: 16 / 9;

        overflow: hidden;
    }


    /* -----------------------------------------
       HERO IMAGE
       
       contain = complete image remains visible
       so text inside image does not get cropped
    ----------------------------------------- */

    .hero-slider .slide {

        width: 100%;

        height: 100%;

        object-fit: contain;

        object-position: center center;

        background: #ffffff;
    }


    /* -----------------------------------------
       HERO ARROWS
    ----------------------------------------- */

    .arrow {

        font-size: 30px;

        padding: 8px;
    }


    .arrow.left {

        left: 5px;
    }


    .arrow.right {

        right: 5px;
    }


    /* -----------------------------------------
       HERO DOTS
    ----------------------------------------- */

    .dots {

        bottom: 10px;

        gap: 8px;
    }


    .dot {

        width: 7px;

        height: 7px;
    }


    /* -----------------------------------------
       GENERAL SLIDER
    ----------------------------------------- */

    .slider {

        height: auto;

        aspect-ratio: 16 / 9;

        overflow: hidden;
    }


    .slider .slide {

        width: 100%;

        height: 100%;

        object-fit: contain;

        object-position: center center;

        background: #ffffff;
    }


    /* -----------------------------------------
       GENERAL SLIDER ARROWS
    ----------------------------------------- */

    .slider .arrow {

        font-size: 28px;

        padding: 7px;
    }


    .slider .left {

        left: 5px;
    }


    .slider .right {

        right: 5px;
    }


    /* -----------------------------------------
       GENERAL SLIDER DOTS
    ----------------------------------------- */

    .slider .dots {

        bottom: 9px;

        gap: 7px;
    }


    .slider .dot {

        width: 7px;

        height: 7px;

        margin: 0;
    }
}


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

@media (max-width: 576px) {

    /* -----------------------------------------
       HERO SLIDER
    ----------------------------------------- */

    .hero-slider {

        /*
           Taller mobile ratio prevents the image
           from becoming too short.
        */

        aspect-ratio: 4 / 1;

        height: auto;

        width: 100%;

        background: #ffffff;
    }


    /* -----------------------------------------
       HERO IMAGE
    ----------------------------------------- */

    .hero-slider .slide {

        width: 100%;

        height: 100%;

        object-fit: contain;

        object-position: center center;
    }


    /* -----------------------------------------
       ARROWS
    ----------------------------------------- */

    .arrow {

        font-size: 25px;

        padding: 5px;

        color: #999999;
    }


    .arrow:hover {

        color: #999999;

        transform: translateY(-50%);
    }


    .arrow.left {

        left: 2px;
    }


    .arrow.right {

        right: 2px;
    }


    /* -----------------------------------------
       DOTS
    ----------------------------------------- */

    .dots {

        bottom: 2px;

        gap: 6px;
    }


    .dot {

        width: 6px;

        height: 6px;
    }


    /* -----------------------------------------
       GENERAL SLIDER
    ----------------------------------------- */

    .slider {

        aspect-ratio: 4 / 2;

        height: auto;

        background: #ffffff;
    }


    .slider .slide {

        width: 100%;

        height: 100%;

        object-fit: contain;

        object-position: center center;
    }


    /* -----------------------------------------
       GENERAL SLIDER ARROWS
    ----------------------------------------- */

    .slider .arrow {

        font-size: 24px;

        padding: 5px;
    }


    .slider .left {

        left: 2px;
    }


    .slider .right {

        right: 2px;
    }


    /* -----------------------------------------
       GENERAL SLIDER DOTS
    ----------------------------------------- */

    .slider .dots {

        bottom: 7px;

        gap: 6px;
    }


    .slider .dot {

        width: 6px;

        height: 6px;

        margin: 0;
    }
}


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

@media (max-width: 400px) {

    .hero-slider {

        aspect-ratio: 4 / 3;
    }


    .arrow {

        font-size: 22px;
    }


    .dots {

        bottom: 6px;

        gap: 5px;
    }


    .dot {

        width: 6px;

        height: 6px;
    }


    .slider {

        aspect-ratio: 4 / 3;
    }


    .slider .arrow {

        font-size: 22px;
    }
}