@font-face {
    font-family: "Isidora";
    src: url("./assets/fonts/isidora-light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    background: #100719;
    font-family: "Isidora", Arial, sans-serif;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.dev1-cbox-venues-welcome {
    position: relative;

    width: 100%;

    overflow: hidden;
}


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

.dev1-cbox-venues-welcome__slider {
    position: relative;

    width: 100%;

    height: min(700px, 100vh);

    min-height: 540px;

    overflow: hidden;

    background: #100719;
}


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

.dev1-cbox-venues-welcome__slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    overflow: hidden;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

.dev1-cbox-venues-welcome__slide.is-active {
    opacity: 1;

    visibility: visible;

    z-index: 2;
}


/* =========================================================
   IMAGE
========================================================= */

.dev1-cbox-venues-welcome__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    transform: scale(1.01);

    transition:
        transform 7s ease;
}

.dev1-cbox-venues-welcome__slide.is-active
.dev1-cbox-venues-welcome__image {
    transform: scale(1);
}


/* =========================================================
   DARK GRADIENT
========================================================= */

.dev1-cbox-venues-welcome__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(13, 3, 26, 0.94) 0%,
            rgba(20, 5, 35, 0.82) 20%,
            rgba(28, 7, 43, 0.56) 38%,
            rgba(19, 5, 32, 0.27) 58%,
            rgba(9, 4, 18, 0.08) 100%
        );
}


/* =========================================================
   CONTENT
   REDUCED LEFT SPACE
========================================================= */

.dev1-cbox-venues-welcome__content {
    position: absolute;

    z-index: 3;

    /*
        Main change:
        Content now sits much closer to the left edge,
        matching the first reference image.
    */
    left: clamp(
        14px,
        2.7vw,
        50px
    );

    top: 50%;

    width: min(
        680px,
        52vw
    );

    transform: translateY(-50%);
}


/* =========================================================
   EYEBROW
========================================================= */

.dev1-cbox-venues-welcome__eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    margin:
        0
        0
        16px;

    color: #bd3b8d;

    font-size: 12px;

    line-height: 1.2;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.dev1-cbox-venues-welcome__eyebrow-line {
    width: 36px;

    height: 2px;

    flex-shrink: 0;

    background: #f3c447;
}


/* =========================================================
   TITLE
========================================================= */

.dev1-cbox-venues-welcome__title {
    margin: 0;

    max-width: 700px;

    color: #ffffff;

    font-size: clamp(
        52px,
        5.1vw,
        92px
    );

    font-weight: 300;

    line-height: 0.98;

    letter-spacing: -2px;

    text-transform: uppercase;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.dev1-cbox-venues-welcome__description {
    max-width: 720px;

    margin:
        28px
        0
        24px;

    color: rgba(
        255,
        255,
        255,
        0.9
    );

    font-size: clamp(
        14px,
        1.05vw,
        19px
    );

    line-height: 1.65;
}


/* =========================================================
   EXPLORE VENUES BUTTON
   SAME CURVE PATTERN
========================================================= */

.dev1-cbox-venues-welcome__button {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 270px;

    min-height: 62px;

    padding:
        12px
        18px;

    border:
        1px solid
        #6f2c91;

    border-radius:
        30px
        0
        30px
        0;

    background: #6f2c91;

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Isidora",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.dev1-cbox-venues-welcome__button:hover {
    background: #7b35a2;

    transform: translateY(-2px);
}


/* =========================================================
   PAGINATION
========================================================= */

.dev1-cbox-venues-welcome__pagination {
    position: absolute;

    z-index: 5;

    left: clamp(
        14px,
        2.7vw,
        50px
    );

    bottom: 76px;

    display: flex;

    align-items: center;

    gap: 10px;
}

.dev1-cbox-venues-welcome__pagination-button {
    width: 32px;

    height: 4px;

    padding: 0;

    border: 0;

    border-radius: 0;

    background:
        rgba(
            255,
            255,
            255,
            0.35
        );

    cursor: pointer;

    transition:
        width 0.3s ease,
        background 0.3s ease;
}

.dev1-cbox-venues-welcome__pagination-button.is-active {
    width: 42px;

    background: #f4c445;
}


/* =========================================================
   PAUSE SLIDESHOW
========================================================= */

.dev1-cbox-venues-welcome__pause {
    position: absolute;

    z-index: 5;

    left: clamp(
        14px,
        2.7vw,
        50px
    );

    bottom: 24px;

    padding:
        9px
        15px;

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

    border-radius: 25px;

    background:
        rgba(
            12,
            4,
            20,
            0.4
        );

    color: #ffffff;

    font-family:
        "Isidora",
        Arial,
        sans-serif;

    font-size: 12px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.dev1-cbox-venues-welcome__pause:hover {
    background: #6f2c91;

    border-color: #ffffff;
}


/* =========================================================
   NAVIGATION
========================================================= */

.dev1-cbox-venues-welcome__navigation {
    position: absolute;

    z-index: 5;

    bottom: 54px;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

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

    border-radius: 50%;

    background:
        rgba(
            15,
            5,
            26,
            0.45
        );

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 23px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.dev1-cbox-venues-welcome__navigation:hover {
    background: #6f2c91;

    transform: translateY(-2px);
}

.dev1-cbox-venues-welcome__navigation--previous {
    right: 135px;
}

.dev1-cbox-venues-welcome__navigation--next {
    right: 70px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1400px) {

    .dev1-cbox-venues-welcome__slider {
        height: 650px;

        min-height: 520px;
    }

    .dev1-cbox-venues-welcome__content {
        left: 2.7vw;

        width: min(
            620px,
            52vw
        );
    }

    .dev1-cbox-venues-welcome__pagination {
        left: 2.7vw;
    }

    .dev1-cbox-venues-welcome__pause {
        left: 2.7vw;
    }
}


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

@media (max-width: 1024px) {

    .dev1-cbox-venues-welcome__slider {
        height: 620px;

        min-height: 520px;
    }

    .dev1-cbox-venues-welcome__image {
        object-position: center center;
    }

    .dev1-cbox-venues-welcome__content {
        left: 30px;

        width: 62vw;
    }

    .dev1-cbox-venues-welcome__title {
        font-size: clamp(
            48px,
            7vw,
            72px
        );
    }

    .dev1-cbox-venues-welcome__description {
        margin-top: 22px;

        max-width: 560px;

        font-size: 15px;
    }

    .dev1-cbox-venues-welcome__button {
        width: 245px;

        min-height: 58px;
    }

    .dev1-cbox-venues-welcome__pagination {
        left: 30px;

        bottom: 76px;
    }

    .dev1-cbox-venues-welcome__pause {
        left: 30px;

        bottom: 25px;
    }

    .dev1-cbox-venues-welcome__navigation--previous {
        right: 105px;
    }

    .dev1-cbox-venues-welcome__navigation--next {
        right: 40px;
    }
}


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

@media (max-width: 767px) {

    .dev1-cbox-venues-welcome__slider {
        height: 680px;

        min-height: 620px;
    }

    .dev1-cbox-venues-welcome__image {
        object-position: 62% center;
    }

    .dev1-cbox-venues-welcome__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(15, 4, 27, 0.25) 0%,
                rgba(18, 5, 30, 0.46) 35%,
                rgba(15, 4, 27, 0.94) 100%
            );
    }

    .dev1-cbox-venues-welcome__content {
        left: 20px;

        right: 20px;

        top: auto;

        bottom: 145px;

        width: auto;

        transform: none;
    }

    .dev1-cbox-venues-welcome__eyebrow {
        gap: 9px;

        margin-bottom: 13px;

        font-size: 10px;
    }

    .dev1-cbox-venues-welcome__eyebrow-line {
        width: 24px;
    }

    .dev1-cbox-venues-welcome__title {
        font-size: clamp(
            42px,
            11vw,
            64px
        );

        line-height: 1;

        letter-spacing: -1px;
    }

    .dev1-cbox-venues-welcome__description {
        margin:
            18px
            0
            20px;

        font-size: 13px;

        line-height: 1.55;
    }

    .dev1-cbox-venues-welcome__button {
        width: 205px;

        min-height: 52px;

        padding:
            11px
            18px;

        font-size: 13px;

        border-radius:
            30px
            0
            30px
            0;
    }

    .dev1-cbox-venues-welcome__pagination {
        left: 20px;

        bottom: 82px;

        gap: 7px;
    }

    .dev1-cbox-venues-welcome__pagination-button {
        width: 23px;

        height: 3px;
    }

    .dev1-cbox-venues-welcome__pagination-button.is-active {
        width: 34px;
    }

    .dev1-cbox-venues-welcome__pause {
        left: 20px;

        bottom: 28px;

        padding:
            8px
            14px;

        font-size: 11px;
    }

    .dev1-cbox-venues-welcome__navigation {
        bottom: 28px;

        width: 42px;

        height: 42px;

        font-size: 20px;
    }

    .dev1-cbox-venues-welcome__navigation--previous {
        left: auto;

        right: 76px;
    }

    .dev1-cbox-venues-welcome__navigation--next {
        right: 20px;
    }
}


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

@media (max-width: 480px) {

    .dev1-cbox-venues-welcome__slider {
        height: 640px;

        min-height: 590px;
    }

    .dev1-cbox-venues-welcome__content {
        left: 16px;

        right: 16px;

        bottom: 140px;
    }

    .dev1-cbox-venues-welcome__eyebrow {
        font-size: 9px;
    }

    .dev1-cbox-venues-welcome__title {
        font-size: 40px;

        line-height: 1.02;
    }

    .dev1-cbox-venues-welcome__description {
        font-size: 12px;

        line-height: 1.55;
    }

    .dev1-cbox-venues-welcome__button {
        width: 190px;

        min-height: 50px;

        font-size: 12px;
    }

    .dev1-cbox-venues-welcome__pagination {
        left: 16px;

        bottom: 78px;
    }

    .dev1-cbox-venues-welcome__pause {
        left: 16px;

        bottom: 25px;
    }

    .dev1-cbox-venues-welcome__navigation {
        width: 38px;

        height: 38px;

        bottom: 25px;
    }

    .dev1-cbox-venues-welcome__navigation--previous {
        right: 68px;
    }

    .dev1-cbox-venues-welcome__navigation--next {
        right: 16px;
    }
}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 360px) {

    .dev1-cbox-venues-welcome__slider {
        height: 610px;

        min-height: 570px;
    }

    .dev1-cbox-venues-welcome__content {
        left: 14px;

        right: 14px;

        bottom: 132px;
    }

    .dev1-cbox-venues-welcome__title {
        font-size: 36px;
    }

    .dev1-cbox-venues-welcome__description {
        font-size: 11px;
    }

    .dev1-cbox-venues-welcome__button {
        width: 175px;

        min-height: 48px;
    }

    .dev1-cbox-venues-welcome__pagination {
        left: 14px;

        bottom: 74px;
    }

    .dev1-cbox-venues-welcome__pause {
        left: 14px;

        bottom: 23px;
    }

    .dev1-cbox-venues-welcome__navigation--next {
        right: 14px;
    }

    .dev1-cbox-venues-welcome__navigation--previous {
        right: 62px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dev1-cbox-venues-welcome__slide,
    .dev1-cbox-venues-welcome__image,
    .dev1-cbox-venues-welcome__button,
    .dev1-cbox-venues-welcome__navigation,
    .dev1-cbox-venues-welcome__pagination-button {
        transition: none;
    }
}