/* =========================================
   LOCATION SECTION
========================================= */

.location-section {
    width: 100%;
    padding: 50px 0 35px;
    background: #ffffff;
    overflow: hidden;
}


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

.location-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


.location-content {
    width: 100%;
    margin-bottom: 28px;
}

.location-city__title {
    padding-left: 12px;
    font-size: 20px;
    font-weight: 600;
  }


/* =========================================
   FULL WIDTH SLIDER
========================================= */

.location-slider-area {
    position: relative;

    width: 100vw;

    margin-left: calc(50% - 50vw);

    overflow: hidden;
}


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

.location-slider {
    display: flex;

    gap: 15px;

    width: 100%;

    padding: 0 28px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;

    scroll-behavior: smooth;

    cursor: grab;

    user-select: none;

    touch-action: pan-x;
}


.location-slider::-webkit-scrollbar {
    display: none;
}


.location-slider.location-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}


/* =========================================
   CARDS
========================================= */

.location-card {
    flex: 0 0 280px;

    width: 280px;

    display: block;

    text-decoration: none;

    color: inherit;
}


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

.location-image {
    width: 100%;
    height: 200px;

    overflow: hidden;

    border-radius: 12px;

    background: #eeeeee;
}


.location-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;

    transition: transform 0.35s ease;
}


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

@media (hover: hover) {

    .location-card:hover
    .location-image img {

        transform: scale(1.05);

    }

    .location-card:hover
    .location-title {

        color: #f15a24;

    }

}


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

.location-controls {

    display: flex;

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

    gap: 22px;

    margin-top: 30px;

    padding-bottom: 5px;
}


/* =========================================
   CIRCLE BUTTON
========================================= */

.location-control {

    position: relative;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 1px solid #07527f;

    border-radius: 50%;

    background: #ffffff;

    display: flex;

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

    cursor: pointer;

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


/* =========================================
   CSS ARROWS
========================================= */

.location-arrow {
    position: relative;

    display: block;

    width: 14px;
    height: 14px;
}


/* Arrow line */

.location-arrow::before {

    content: "";

    position: absolute;

    top: 6px;

    width: 14px;
    height: 1px;

    background: #07527f;

}


/* Arrow head */

.location-arrow::after {

    content: "";

    position: absolute;

    top: 3px;

    width: 7px;
    height: 7px;

    border-top: 1px solid #07527f;
    border-right: 1px solid #07527f;

}


/* LEFT */

.location-arrow-left::before {
    left: 0;
}

.location-arrow-left::after {

    left: 0;

    transform: rotate(-135deg);

}


/* RIGHT */

.location-arrow-right::before {
    right: 0;
}

.location-arrow-right::after {

    right: 0;

    transform: rotate(45deg);

}


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

@media (hover: hover) {

    .location-control:hover {

        background: #07527f;

        border-color: #07527f;

        transform: translateY(-2px);

    }


    .location-control:hover
    .location-arrow::before {

        background: #ffffff;

    }


    .location-control:hover
    .location-arrow::after {

        border-color: #ffffff;

    }

}


/* =========================================
   DISABLED
========================================= */

.location-control.location-disabled {

    opacity: 0.3;

    cursor: default;

    pointer-events: none;

}


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

@media (min-width: 1500px) {

    .location-card {

        flex-basis: 300px;

        width: 300px;

    }


    .location-image {

        height: 180px;

    }

}


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

@media (max-width: 991px) {

    .location-section {

        padding: 40px 0 30px;

    }


    .location-heading {

        font-size: 20px;

    }


    .location-description {

        font-size: 11px;

    }


    .location-card {

        flex-basis: 250px;

        width: 250px;

    }


    .location-image {

        height: 150px;

    }


    .location-card .location-title {

        font-size: 14px;

    }

}


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

@media (max-width: 600px) {

    .location-section {

        padding: 35px 0 25px;

    }


    .location-container {

        padding: 0 15px;

    }


    .location-heading {

        font-size: 20px;

    }


    .location-description {

        font-size: 12px;

        line-height: 1.6;

    }


    .location-slider {

        gap: 12px;

        padding-left: 15px;
        padding-right: 15px;

    }


    .location-card {

        flex-basis: 240px;

        width: 240px;

    }


    .location-image {

        height: 145px;

        border-radius: 9px;

    }


    .location-card .location-title {

        font-size: 13px;

    }


    .location-controls {

        margin-top: 22px;

        gap: 16px;

    }


    .location-control {

        width: 44px;

        height: 44px;

    }

}


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

@media (max-width: 400px) {

    .location-card {

        flex-basis: 220px;

        width: 220px;

    }


    .location-image {

        height: 130px;

    }

}