/* =========================================================
   ISIDORA FONT
========================================================= */

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



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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-width: 320px;
    background: #f4f0e9;
    font-family: "Isidora", sans-serif;
}


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

.dev1-cbox-home-discover-carousel {
    width: 100%;
    overflow: hidden;

    padding: 24px 0;

    background: #f4f0e9;
    color: #ffffff;

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


/* =========================================================
   CONTAINER
========================================================= */

.dev1-cbox-home-discover-carousel__container {
    position: relative;

    width: calc(100% - 50px);
    max-width: 1780px;

    height: 770px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 34px;
}


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

.dev1-cbox-home-discover-carousel__slides {
    position: relative;

    width: 100%;
    height: 100%;
}


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

.dev1-cbox-home-discover-carousel__slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

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

.dev1-cbox-home-discover-carousel__slide.is-active {
    z-index: 2;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


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

.dev1-cbox-home-discover-carousel__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.01);

    transition: transform 1.2s ease;
}

.dev1-cbox-home-discover-carousel__slide.is-active
.dev1-cbox-home-discover-carousel__image {
    transform: scale(1);
}


/* =========================================================
   OVERLAY
========================================================= */

.dev1-cbox-home-discover-carousel__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(37, 4, 57, 0.96) 0%,
            rgba(49, 7, 73, 0.90) 20%,
            rgba(63, 17, 93, 0.72) 40%,
            rgba(39, 41, 91, 0.43) 68%,
            rgba(0, 45, 92, 0.20) 100%
        );
}

.dev1-cbox-home-discover-carousel__overlay::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(24, 4, 42, 0.48) 0%,
            transparent 35%
        );
}


/* =========================================================
   CONTENT
========================================================= */

.dev1-cbox-home-discover-carousel__content {
    position: absolute;

    z-index: 3;

    top: 50%;
    left: 5.2%;

    width: min(800px, 52%);

    transform: translateY(-50%);
}


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

.dev1-cbox-home-discover-carousel__title {
    margin: 0;

    color: #ffffff;

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

    font-size: clamp(
        54px,
        4.2vw,
        76px
    );

    font-weight: 300;

    line-height: 1.03;

    letter-spacing: -2.8px;

    text-transform: uppercase;
}


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

.dev1-cbox-home-discover-carousel__description {
    max-width: 810px;

    margin: 35px 0 0;

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

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

    font-size: 20px;

    font-weight: 300;

    line-height: 1.75;

    letter-spacing: -0.1px;
}


/* =========================================================
   BUTTON
   SHAPE:
   TOP LEFT      = ROUNDED
   TOP RIGHT     = SQUARE
   BOTTOM LEFT   = SQUARE
   BOTTOM RIGHT  = ROUNDED
========================================================= */

.dev1-cbox-home-discover-carousel__button {
    width: 237px;
    height: 70px;

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

    margin-top: 31px;
    padding: 0;

    border: none;

    /*
        top-left     = 22px
        top-right    = 0
        bottom-right = 22px
        bottom-left  = 0
    */
    border-radius: 22px 0 22px 0;

    background: #ffc338;
    color: #19101f;

    font-family: "Isidora", sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    overflow: hidden;

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


/* =========================================================
   BUTTON TEXT
========================================================= */

.dev1-cbox-home-discover-carousel__button span {
    display: block;

    margin: 0;
    padding: 0;

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

    font-size: 17px;
    font-weight: 300;

    line-height: 1;
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.dev1-cbox-home-discover-carousel__button:hover {
    background: #ffd25d;

    transform: translateY(-3px);
}


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

.dev1-cbox-home-discover-carousel__navigation {
    position: absolute;

    z-index: 10;

    bottom: 51px;

    width: 58px;
    height: 58px;

    display: flex;

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

    padding: 0;

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

    border-radius: 50%;

    background:
        rgba(
            24,
            13,
            43,
            0.45
        );

    color: #ffffff;

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

    font-size: 25px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(4px);

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


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

.dev1-cbox-home-discover-carousel__navigation:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.18
        );

    transform: scale(1.06);
}


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

.dev1-cbox-home-discover-carousel__navigation span {
    display: block;

    line-height: 1;
}


/* =========================================================
   PREVIOUS
========================================================= */

.dev1-cbox-home-discover-carousel__navigation--prev {
    right: 243px;
}


/* =========================================================
   NEXT
========================================================= */

.dev1-cbox-home-discover-carousel__navigation--next {
    right: 68px;
}


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

.dev1-cbox-home-discover-carousel__pagination {
    position: absolute;

    z-index: 10;

    right: 126px;
    bottom: 68px;

    display: flex;

    align-items: center;

    gap: 9px;
}


/* =========================================================
   DOT
========================================================= */

.dev1-cbox-home-discover-carousel__dot {
    width: 10px;
    height: 10px;

    padding: 0;

    border: 0;

    border-radius: 50%;

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

    cursor: pointer;

    transition:
        width 0.3s ease,
        border-radius 0.3s ease,
        background-color 0.3s ease;
}

.dev1-cbox-home-discover-carousel__dot.is-active {
    width: 32px;

    border-radius: 999px;

    background: #ffc338;
}


/* =========================================================
   1400px - 1600px
========================================================= */

@media (max-width: 1600px) {

    .dev1-cbox-home-discover-carousel__container {
        width: calc(100% - 48px);

        height: 700px;

        border-radius: 32px;
    }

    .dev1-cbox-home-discover-carousel__content {
        left: 5.2%;
    }

    .dev1-cbox-home-discover-carousel__title {
        font-size: clamp(
            52px,
            4.4vw,
            68px
        );
    }

    .dev1-cbox-home-discover-carousel__description {
        max-width: 750px;

        font-size: 18px;
    }

}


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

@media (max-width: 1100px) {

    .dev1-cbox-home-discover-carousel {
        padding: 20px 0;
    }

    .dev1-cbox-home-discover-carousel__container {
        width: calc(100% - 36px);

        height: 620px;

        border-radius: 28px;
    }

    .dev1-cbox-home-discover-carousel__content {
        left: 6%;

        width: 62%;
    }

    .dev1-cbox-home-discover-carousel__title {
        font-size: clamp(
            45px,
            5.4vw,
            62px
        );

        letter-spacing: -2px;
    }

    .dev1-cbox-home-discover-carousel__description {
        max-width: 620px;

        margin-top: 27px;

        font-size: 17px;

        line-height: 1.65;
    }


    /* BUTTON */

    .dev1-cbox-home-discover-carousel__button {
        width: 220px;
        height: 64px;

        margin-top: 27px;

        border-radius: 20px 0 20px 0;

        font-size: 16px;
    }

    .dev1-cbox-home-discover-carousel__button span {
        font-size: 16px;
    }


    /* NAVIGATION */

    .dev1-cbox-home-discover-carousel__navigation {
        bottom: 35px;

        width: 52px;
        height: 52px;

        font-size: 22px;
    }

    .dev1-cbox-home-discover-carousel__navigation--prev {
        right: 210px;
    }

    .dev1-cbox-home-discover-carousel__navigation--next {
        right: 35px;
    }


    /* PAGINATION */

    .dev1-cbox-home-discover-carousel__pagination {
        right: 92px;

        bottom: 54px;
    }

}


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

@media (max-width: 800px) {

    .dev1-cbox-home-discover-carousel {
        padding: 15px 0;
    }

    .dev1-cbox-home-discover-carousel__container {
        width: calc(100% - 24px);

        height: 580px;

        border-radius: 25px;
    }

    .dev1-cbox-home-discover-carousel__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(37, 4, 57, 0.97) 0%,
                rgba(49, 7, 73, 0.88) 48%,
                rgba(30, 35, 83, 0.50) 100%
            );
    }

    .dev1-cbox-home-discover-carousel__content {
        top: 46%;
        left: 7%;

        width: 76%;
    }

    .dev1-cbox-home-discover-carousel__title {
        font-size: clamp(
            40px,
            7vw,
            55px
        );

        line-height: 1.04;

        letter-spacing: -1.8px;
    }

    .dev1-cbox-home-discover-carousel__description {
        max-width: 570px;

        margin-top: 23px;

        font-size: 15px;

        line-height: 1.65;
    }


    /* BUTTON */

    .dev1-cbox-home-discover-carousel__button {
        width: 205px;
        height: 59px;

        margin-top: 24px;

        border-radius: 18px 0 18px 0;

        font-size: 15px;
    }

    .dev1-cbox-home-discover-carousel__button span {
        font-size: 15px;
    }


    /* NAVIGATION */

    .dev1-cbox-home-discover-carousel__navigation {
        bottom: 25px;

        width: 48px;
        height: 48px;

        font-size: 20px;
    }

    .dev1-cbox-home-discover-carousel__navigation--prev {
        right: 165px;
    }

    .dev1-cbox-home-discover-carousel__navigation--next {
        right: 25px;
    }


    /* PAGINATION */

    .dev1-cbox-home-discover-carousel__pagination {
        right: 75px;

        bottom: 42px;

        gap: 7px;
    }

    .dev1-cbox-home-discover-carousel__dot {
        width: 8px;
        height: 8px;
    }

    .dev1-cbox-home-discover-carousel__dot.is-active {
        width: 27px;
    }

}


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

@media (max-width: 600px) {

    .dev1-cbox-home-discover-carousel {
        padding: 12px 0;
    }

    .dev1-cbox-home-discover-carousel__container {
        width: calc(100% - 20px);

        height: 620px;

        border-radius: 22px;
    }

    .dev1-cbox-home-discover-carousel__image {
        object-position: center;
    }

    .dev1-cbox-home-discover-carousel__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(34, 4, 53, 0.42) 0%,
                rgba(39, 5, 59, 0.74) 42%,
                rgba(29, 4, 46, 0.96) 100%
            );
    }

    .dev1-cbox-home-discover-carousel__content {
        top: auto;

        right: 25px;
        bottom: 105px;
        left: 25px;

        width: auto;

        transform: none;
    }

    .dev1-cbox-home-discover-carousel__title {
        font-size: clamp(
            38px,
            10vw,
            50px
        );

        line-height: 1.02;

        letter-spacing: -1.5px;
    }

    .dev1-cbox-home-discover-carousel__description {
        margin-top: 20px;

        font-size: 14px;

        line-height: 1.6;
    }


    /* BUTTON */

    .dev1-cbox-home-discover-carousel__button {
        width: 190px;
        height: 55px;

        margin-top: 21px;

        border-radius: 18px 0 18px 0;

        font-size: 14px;
    }

    .dev1-cbox-home-discover-carousel__button span {
        font-size: 14px;
    }


    /* NAVIGATION */

    .dev1-cbox-home-discover-carousel__navigation {
        bottom: 24px;

        width: 46px;
        height: 46px;

        font-size: 19px;
    }

    .dev1-cbox-home-discover-carousel__navigation--prev {
        left: 22px;

        right: auto;
    }

    .dev1-cbox-home-discover-carousel__navigation--next {
        right: 22px;
    }


    /* PAGINATION */

    .dev1-cbox-home-discover-carousel__pagination {
        right: 50%;

        bottom: 41px;

        transform: translateX(50%);

        gap: 7px;
    }

}


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

@media (max-width: 380px) {

    .dev1-cbox-home-discover-carousel__container {
        width: calc(100% - 14px);

        height: 590px;

        border-radius: 19px;
    }

    .dev1-cbox-home-discover-carousel__content {
        right: 21px;

        bottom: 98px;

        left: 21px;
    }

    .dev1-cbox-home-discover-carousel__title {
        font-size: 35px;

        letter-spacing: -1.2px;
    }

    .dev1-cbox-home-discover-carousel__description {
        margin-top: 17px;

        font-size: 13px;

        line-height: 1.58;
    }


    /* BUTTON */

    .dev1-cbox-home-discover-carousel__button {
        width: 180px;
        height: 52px;

        margin-top: 19px;

        border-radius: 16px 0 16px 0;

        font-size: 13px;
    }

    .dev1-cbox-home-discover-carousel__button span {
        font-size: 13px;
    }


    /* NAVIGATION */

    .dev1-cbox-home-discover-carousel__navigation {
        bottom: 20px;

        width: 43px;
        height: 43px;
    }

    .dev1-cbox-home-discover-carousel__navigation--prev {
        left: 18px;
    }

    .dev1-cbox-home-discover-carousel__navigation--next {
        right: 18px;
    }


    /* PAGINATION */

    .dev1-cbox-home-discover-carousel__pagination {
        bottom: 34px;
    }

}


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

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

    .dev1-cbox-home-discover-carousel__slide,
    .dev1-cbox-home-discover-carousel__image,
    .dev1-cbox-home-discover-carousel__button,
    .dev1-cbox-home-discover-carousel__navigation,
    .dev1-cbox-home-discover-carousel__dot {
        transition: none;
    }

}